From c2c1437da7fbef986530ef493417c9297fec42e1 Mon Sep 17 00:00:00 2001 From: lucy Date: Thu, 2 Apr 2026 10:21:09 +0200 Subject: [PATCH] go back to midnight --- build/base16-0x96f | 261 ++++++------------ build/base16-3024 | 261 ++++++------------ build/base16-apathy | 261 ++++++------------ build/base16-apprentice | 261 ++++++------------ build/base16-ascendancy | 261 ++++++------------ build/base16-ashes | 261 ++++++------------ build/base16-atelier-cave | 261 ++++++------------ build/base16-atelier-cave-light | 261 ++++++------------ build/base16-atelier-dune | 261 ++++++------------ build/base16-atelier-dune-light | 261 ++++++------------ build/base16-atelier-estuary | 261 ++++++------------ build/base16-atelier-estuary-light | 261 ++++++------------ build/base16-atelier-forest | 261 ++++++------------ build/base16-atelier-forest-light | 261 ++++++------------ build/base16-atelier-heath | 261 ++++++------------ build/base16-atelier-heath-light | 261 ++++++------------ build/base16-atelier-lakeside | 261 ++++++------------ build/base16-atelier-lakeside-light | 261 ++++++------------ build/base16-atelier-plateau | 261 ++++++------------ build/base16-atelier-plateau-light | 261 ++++++------------ build/base16-atelier-savanna | 261 ++++++------------ build/base16-atelier-savanna-light | 261 ++++++------------ build/base16-atelier-seaside | 261 ++++++------------ build/base16-atelier-seaside-light | 261 ++++++------------ build/base16-atelier-sulphurpool | 261 ++++++------------ build/base16-atelier-sulphurpool-light | 261 ++++++------------ build/base16-atlas | 261 ++++++------------ build/base16-ayu-dark | 261 ++++++------------ build/base16-ayu-light | 261 ++++++------------ build/base16-ayu-mirage | 261 ++++++------------ build/base16-aztec | 261 ++++++------------ build/base16-bespin | 261 ++++++------------ build/base16-black-metal | 261 ++++++------------ build/base16-black-metal-bathory | 261 ++++++------------ build/base16-black-metal-burzum | 261 ++++++------------ build/base16-black-metal-dark-funeral | 261 ++++++------------ build/base16-black-metal-gorgoroth | 261 ++++++------------ build/base16-black-metal-immortal | 261 ++++++------------ build/base16-black-metal-khold | 261 ++++++------------ build/base16-black-metal-marduk | 261 ++++++------------ build/base16-black-metal-mayhem | 261 ++++++------------ build/base16-black-metal-nile | 261 ++++++------------ build/base16-black-metal-venom | 261 ++++++------------ build/base16-blueforest | 261 ++++++------------ build/base16-blueish | 261 ++++++------------ build/base16-booshnickle-dark | 261 ++++++------------ build/base16-brewer | 261 ++++++------------ build/base16-bright | 261 ++++++------------ build/base16-brogrammer | 261 ++++++------------ build/base16-brushtrees | 261 ++++++------------ build/base16-brushtrees-dark | 261 ++++++------------ build/base16-caroline | 261 ++++++------------ build/base16-catppuccin-frappe | 261 ++++++------------ build/base16-catppuccin-latte | 261 ++++++------------ build/base16-catppuccin-macchiato | 261 ++++++------------ build/base16-catppuccin-mocha | 261 ++++++------------ build/base16-chalk | 261 ++++++------------ build/base16-charcoal-dark | 261 ++++++------------ build/base16-charcoal-light | 261 ++++++------------ build/base16-chicago-day | 261 ++++++------------ build/base16-chicago-night | 261 ++++++------------ build/base16-chinoiserie | 261 ++++++------------ build/base16-chinoiserie-midnight | 261 ++++++------------ build/base16-chinoiserie-morandi | 261 ++++++------------ build/base16-chinoiserie-night | 261 ++++++------------ build/base16-circus | 261 ++++++------------ build/base16-classic-dark | 261 ++++++------------ build/base16-classic-light | 261 ++++++------------ build/base16-codeschool | 261 ++++++------------ build/base16-colors | 261 ++++++------------ build/base16-cupcake | 261 ++++++------------ build/base16-cupertino | 261 ++++++------------ build/base16-cyberpunk | 261 ++++++------------ build/base16-da-one-black | 261 ++++++------------ build/base16-da-one-gray | 261 ++++++------------ build/base16-da-one-ocean | 261 ++++++------------ build/base16-da-one-paper | 261 ++++++------------ build/base16-da-one-sea | 261 ++++++------------ build/base16-da-one-white | 261 ++++++------------ build/base16-danqing | 261 ++++++------------ build/base16-danqing-light | 261 ++++++------------ build/base16-darcula | 261 ++++++------------ build/base16-darkmoss | 261 ++++++------------ build/base16-darktooth | 261 ++++++------------ build/base16-darkviolet | 261 ++++++------------ build/base16-decaf | 261 ++++++------------ build/base16-deep-oceanic-next | 261 ++++++------------ build/base16-default-dark | 261 ++++++------------ build/base16-default-light | 261 ++++++------------ build/base16-digital-rain | 261 ++++++------------ build/base16-dirtysea | 261 ++++++------------ build/base16-dracula | 261 ++++++------------ build/base16-edge-dark | 261 ++++++------------ build/base16-edge-light | 261 ++++++------------ build/base16-eighties | 261 ++++++------------ build/base16-eldritch | 261 ++++++------------ build/base16-embers | 261 ++++++------------ build/base16-embers-light | 261 ++++++------------ build/base16-emil | 261 ++++++------------ build/base16-equilibrium-dark | 261 ++++++------------ build/base16-equilibrium-gray-dark | 261 ++++++------------ build/base16-equilibrium-gray-light | 261 ++++++------------ build/base16-equilibrium-light | 261 ++++++------------ build/base16-eris | 261 ++++++------------ build/base16-espresso | 261 ++++++------------ build/base16-eva | 261 ++++++------------ build/base16-eva-dim | 261 ++++++------------ build/base16-evenok-dark | 261 ++++++------------ build/base16-everforest | 261 ++++++------------ build/base16-everforest-dark-hard | 261 ++++++------------ build/base16-everforest-dark-medium | 261 ++++++------------ build/base16-everforest-dark-soft | 261 ++++++------------ build/base16-flat | 261 ++++++------------ build/base16-flexoki-dark | 261 ++++++------------ build/base16-flexoki-light | 261 ++++++------------ build/base16-framer | 261 ++++++------------ build/base16-fruit-soda | 261 ++++++------------ build/base16-gigavolt | 261 ++++++------------ build/base16-github | 261 ++++++------------ build/base16-github-dark | 261 ++++++------------ build/base16-google-dark | 261 ++++++------------ build/base16-google-light | 261 ++++++------------ build/base16-gotham | 261 ++++++------------ build/base16-grayscale-dark | 261 ++++++------------ build/base16-grayscale-light | 261 ++++++------------ build/base16-greenscreen | 261 ++++++------------ build/base16-gruber | 261 ++++++------------ build/base16-gruvbox-dark | 261 ++++++------------ build/base16-gruvbox-dark-hard | 261 ++++++------------ build/base16-gruvbox-dark-medium | 261 ++++++------------ build/base16-gruvbox-dark-pale | 261 ++++++------------ build/base16-gruvbox-dark-soft | 261 ++++++------------ build/base16-gruvbox-light | 261 ++++++------------ build/base16-gruvbox-light-hard | 261 ++++++------------ build/base16-gruvbox-light-medium | 261 ++++++------------ build/base16-gruvbox-light-soft | 261 ++++++------------ build/base16-gruvbox-material-dark-hard | 261 ++++++------------ build/base16-gruvbox-material-dark-medium | 261 ++++++------------ build/base16-gruvbox-material-dark-soft | 261 ++++++------------ build/base16-gruvbox-material-light-hard | 261 ++++++------------ build/base16-gruvbox-material-light-medium | 261 ++++++------------ build/base16-gruvbox-material-light-soft | 261 ++++++------------ build/base16-hardcore | 261 ++++++------------ build/base16-hardhacker | 261 ++++++------------ build/base16-harmonic16-dark | 261 ++++++------------ build/base16-harmonic16-light | 261 ++++++------------ build/base16-heetch | 261 ++++++------------ build/base16-heetch-light | 261 ++++++------------ build/base16-helios | 261 ++++++------------ build/base16-hopscotch | 261 ++++++------------ build/base16-horizon-dark | 261 ++++++------------ build/base16-horizon-light | 261 ++++++------------ build/base16-horizon-terminal-dark | 261 ++++++------------ build/base16-horizon-terminal-light | 261 ++++++------------ build/base16-humanoid-dark | 261 ++++++------------ build/base16-humanoid-light | 261 ++++++------------ build/base16-ia-dark | 261 ++++++------------ build/base16-ia-light | 261 ++++++------------ build/base16-icy | 261 ++++++------------ build/base16-irblack | 261 ++++++------------ build/base16-isotope | 261 ++++++------------ build/base16-jabuti | 261 ++++++------------ build/base16-kanagawa | 261 ++++++------------ build/base16-kanagawa-dragon | 261 ++++++------------ build/base16-katy | 261 ++++++------------ build/base16-kimber | 261 ++++++------------ build/base16-lime | 261 ++++++------------ build/base16-linux-vt | 261 ++++++------------ build/base16-macintosh | 261 ++++++------------ build/base16-marrakesh | 261 ++++++------------ build/base16-materia | 261 ++++++------------ build/base16-material | 261 ++++++------------ build/base16-material-darker | 261 ++++++------------ build/base16-material-lighter | 261 ++++++------------ build/base16-material-palenight | 261 ++++++------------ build/base16-material-vivid | 261 ++++++------------ build/base16-measured-dark | 261 ++++++------------ build/base16-measured-light | 261 ++++++------------ build/base16-mellow-purple | 261 ++++++------------ build/base16-mexico-light | 261 ++++++------------ build/base16-mocha | 261 ++++++------------ build/base16-monokai | 261 ++++++------------ build/base16-moonlight | 261 ++++++------------ build/base16-mountain | 261 ++++++------------ build/base16-nebula | 261 ++++++------------ build/base16-nord | 261 ++++++------------ build/base16-nord-light | 261 ++++++------------ build/base16-nova | 261 ++++++------------ build/base16-ocean | 261 ++++++------------ build/base16-oceanicnext | 261 ++++++------------ build/base16-one-light | 261 ++++++------------ build/base16-onedark | 261 ++++++------------ build/base16-onedark-dark | 261 ++++++------------ build/base16-outrun-dark | 261 ++++++------------ build/base16-oxocarbon-dark | 261 ++++++------------ build/base16-oxocarbon-light | 261 ++++++------------ build/base16-pandora | 261 ++++++------------ build/base16-papercolor-dark | 261 ++++++------------ build/base16-papercolor-light | 261 ++++++------------ build/base16-paraiso | 261 ++++++------------ build/base16-pasque | 261 ++++++------------ build/base16-penumbra-dark | 261 ++++++------------ build/base16-penumbra-dark-contrast-plus | 261 ++++++------------ build/base16-penumbra-dark-contrast-plus-plus | 261 ++++++------------ build/base16-penumbra-light | 261 ++++++------------ build/base16-penumbra-light-contrast-plus | 261 ++++++------------ .../base16-penumbra-light-contrast-plus-plus | 261 ++++++------------ build/base16-phd | 261 ++++++------------ build/base16-pico | 261 ++++++------------ build/base16-pinky | 261 ++++++------------ build/base16-pop | 261 ++++++------------ build/base16-porple | 261 ++++++------------ build/base16-precious-dark-eleven | 261 ++++++------------ build/base16-precious-dark-fifteen | 261 ++++++------------ build/base16-precious-light-warm | 261 ++++++------------ build/base16-precious-light-white | 261 ++++++------------ build/base16-primer-dark | 261 ++++++------------ build/base16-primer-dark-dimmed | 261 ++++++------------ build/base16-primer-light | 261 ++++++------------ build/base16-purpledream | 261 ++++++------------ build/base16-qualia | 261 ++++++------------ build/base16-railscasts | 261 ++++++------------ build/base16-rebecca | 261 ++++++------------ build/base16-rose-pine | 261 ++++++------------ build/base16-rose-pine-dawn | 261 ++++++------------ build/base16-rose-pine-moon | 261 ++++++------------ build/base16-saga | 261 ++++++------------ build/base16-sagelight | 261 ++++++------------ build/base16-sakura | 261 ++++++------------ build/base16-sandcastle | 261 ++++++------------ build/base16-selenized-black | 261 ++++++------------ build/base16-selenized-dark | 261 ++++++------------ build/base16-selenized-light | 261 ++++++------------ build/base16-selenized-white | 261 ++++++------------ build/base16-seti | 261 ++++++------------ build/base16-shades-of-purple | 261 ++++++------------ build/base16-shadesmear-dark | 261 ++++++------------ build/base16-shadesmear-light | 261 ++++++------------ build/base16-shapeshifter | 261 ++++++------------ build/base16-silk-dark | 261 ++++++------------ build/base16-silk-light | 261 ++++++------------ build/base16-snazzy | 261 ++++++------------ build/base16-soft-server | 261 ++++++------------ build/base16-solarflare | 261 ++++++------------ build/base16-solarflare-light | 261 ++++++------------ build/base16-solarized-dark | 261 ++++++------------ build/base16-solarized-light | 261 ++++++------------ build/base16-spaceduck | 261 ++++++------------ build/base16-spacemacs | 261 ++++++------------ build/base16-sparky | 261 ++++++------------ build/base16-standardized-dark | 261 ++++++------------ build/base16-standardized-light | 261 ++++++------------ build/base16-stella | 261 ++++++------------ build/base16-still-alive | 261 ++++++------------ build/base16-summercamp | 261 ++++++------------ build/base16-summerfruit-dark | 261 ++++++------------ build/base16-summerfruit-light | 261 ++++++------------ build/base16-synth-midnight-dark | 261 ++++++------------ build/base16-synth-midnight-light | 261 ++++++------------ build/base16-tango | 261 ++++++------------ build/base16-tarot | 261 ++++++------------ build/base16-tender | 261 ++++++------------ build/base16-terracotta | 261 ++++++------------ build/base16-terracotta-dark | 261 ++++++------------ build/base16-tokyo-city-dark | 261 ++++++------------ build/base16-tokyo-city-light | 261 ++++++------------ build/base16-tokyo-city-terminal-dark | 261 ++++++------------ build/base16-tokyo-city-terminal-light | 261 ++++++------------ build/base16-tokyo-night-dark | 261 ++++++------------ build/base16-tokyo-night-light | 261 ++++++------------ build/base16-tokyo-night-moon | 261 ++++++------------ build/base16-tokyo-night-storm | 261 ++++++------------ build/base16-tokyo-night-terminal-dark | 261 ++++++------------ build/base16-tokyo-night-terminal-light | 261 ++++++------------ build/base16-tokyo-night-terminal-storm | 261 ++++++------------ build/base16-tokyodark | 261 ++++++------------ build/base16-tokyodark-terminal | 261 ++++++------------ build/base16-tomorrow | 261 ++++++------------ build/base16-tomorrow-night | 261 ++++++------------ build/base16-tomorrow-night-eighties | 261 ++++++------------ build/base16-tube | 261 ++++++------------ build/base16-twilight | 261 ++++++------------ build/base16-unikitty-dark | 261 ++++++------------ build/base16-unikitty-light | 261 ++++++------------ build/base16-unikitty-reversible | 261 ++++++------------ build/base16-uwunicorn | 261 ++++++------------ build/base16-valua | 261 ++++++------------ build/base16-vesper | 261 ++++++------------ build/base16-vice | 261 ++++++------------ build/base16-vulcan | 261 ++++++------------ build/base16-windows-10 | 261 ++++++------------ build/base16-windows-10-light | 261 ++++++------------ build/base16-windows-95 | 261 ++++++------------ build/base16-windows-95-light | 261 ++++++------------ build/base16-windows-highcontrast | 261 ++++++------------ build/base16-windows-highcontrast-light | 261 ++++++------------ build/base16-windows-nt | 261 ++++++------------ build/base16-windows-nt-light | 261 ++++++------------ build/base16-woodland | 261 ++++++------------ build/base16-xcode-dusk | 261 ++++++------------ build/base16-yesterday | 261 ++++++------------ build/base16-yesterday-bright | 261 ++++++------------ build/base16-yesterday-night | 261 ++++++------------ build/base16-zenbones | 261 ++++++------------ build/base16-zenburn | 261 ++++++------------ templates/default.mustache | 261 ++++++------------ 306 files changed, 26010 insertions(+), 53856 deletions(-) diff --git a/build/base16-0x96f b/build/base16-0x96f index cd42afb..7c10ccd 100644 --- a/build/base16-0x96f +++ b/build/base16-0x96f @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #262427; /* Black */ - --base01: #3b393c; /* Bright Black */ - --base02: #514f52; /* Grey */ - --base03: #676567; /* Brighter Grey */ - --base04: #7c7b7d; /* Bright Grey */ - --base05: #fcfcfc; /* White */ - --base06: #eae9eb; /* Brighter White */ - --base07: #fcfcfc; /* Bright White */ - --base08: #ff7272; /* Red */ - --base09: #fc9d6f; /* Orange */ - --base0A: #ffca58; /* Yellow */ - --base0B: #bcdf59; /* Green */ - --base0C: #aee8f4; /* Cyan */ - --base0D: #49cae4; /* Blue */ - --base0E: #a093e2; /* Purple */ - --base0F: #ff8787; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #bcdf59; /* Green */ + --dnd-indicator: #ff7272; /* Red */ + --idle-indicator: #ffca58; /* Yellow */ + --streaming-indicator: #a093e2; /* Purple */ + + /* accent colors */ + --accent-1: #49cae4; /* links */ + --accent-2: #a093e2; /* general unread/mention elements */ + --accent-3: #49cae4; /* accent buttons */ + --accent-4: #aee8f4; /* accent buttons when hovered */ + --accent-5: #bcdf59; /* accent buttons when clicked */ + --mention: rgba(160, 147, 226, 0.1); + --mention-hover: rgba(160, 147, 226, 0.2); + + /* text colors */ + --text-0: #262427; /* text on colored elements */ + --text-1: #fcfcfc; /* primary white-ish text */ + --text-2: #fcfcfc; /* headings */ + --text-3: #fcfcfc; /* normal text */ + --text-4: #7c7b7d; /* icon buttons and channels */ + --text-5: #676567; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #514f52; /* dark buttons when clicked */ + --bg-2: #3b393c; /* dark buttons */ + --bg-3: #514f52; /* spacing, secondary elements */ + --bg-4: #262427; /* main background color */ + --hover: #514f52; /* channels and buttons when hovered */ + --active: #676567; /* channels and buttons when selected */ + --message-hover: rgba(59, 57, 60, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-3024 b/build/base16-3024 index 293c435..494c607 100644 --- a/build/base16-3024 +++ b/build/base16-3024 @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #090300; /* Black */ - --base01: #3a3432; /* Bright Black */ - --base02: #4a4543; /* Grey */ - --base03: #5c5855; /* Brighter Grey */ - --base04: #807d7c; /* Bright Grey */ - --base05: #a5a2a2; /* White */ - --base06: #d6d5d4; /* Brighter White */ - --base07: #f7f7f7; /* Bright White */ - --base08: #db2d20; /* Red */ - --base09: #e8bbd0; /* Orange */ - --base0A: #fded02; /* Yellow */ - --base0B: #01a252; /* Green */ - --base0C: #b5e4f4; /* Cyan */ - --base0D: #01a0e4; /* Blue */ - --base0E: #a16a94; /* Purple */ - --base0F: #cdab53; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #01a252; /* Green */ + --dnd-indicator: #db2d20; /* Red */ + --idle-indicator: #fded02; /* Yellow */ + --streaming-indicator: #a16a94; /* Purple */ + + /* accent colors */ + --accent-1: #01a0e4; /* links */ + --accent-2: #a16a94; /* general unread/mention elements */ + --accent-3: #01a0e4; /* accent buttons */ + --accent-4: #b5e4f4; /* accent buttons when hovered */ + --accent-5: #01a252; /* accent buttons when clicked */ + --mention: rgba(161, 106, 148, 0.1); + --mention-hover: rgba(161, 106, 148, 0.2); + + /* text colors */ + --text-0: #090300; /* text on colored elements */ + --text-1: #a5a2a2; /* primary white-ish text */ + --text-2: #f7f7f7; /* headings */ + --text-3: #a5a2a2; /* normal text */ + --text-4: #807d7c; /* icon buttons and channels */ + --text-5: #5c5855; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #4a4543; /* dark buttons when clicked */ + --bg-2: #3a3432; /* dark buttons */ + --bg-3: #4a4543; /* spacing, secondary elements */ + --bg-4: #090300; /* main background color */ + --hover: #4a4543; /* channels and buttons when hovered */ + --active: #5c5855; /* channels and buttons when selected */ + --message-hover: rgba(58, 52, 50, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-apathy b/build/base16-apathy index 5dbf0fc..0c59fd5 100644 --- a/build/base16-apathy +++ b/build/base16-apathy @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #031a16; /* Black */ - --base01: #0b342d; /* Bright Black */ - --base02: #184e45; /* Grey */ - --base03: #2b685e; /* Brighter Grey */ - --base04: #5f9c92; /* Bright Grey */ - --base05: #81b5ac; /* White */ - --base06: #a7cec8; /* Brighter White */ - --base07: #d2e7e4; /* Bright White */ - --base08: #3e9688; /* Red */ - --base09: #3e7996; /* Orange */ - --base0A: #3e4c96; /* Yellow */ - --base0B: #883e96; /* Green */ - --base0C: #963e4c; /* Cyan */ - --base0D: #96883e; /* Blue */ - --base0E: #4c963e; /* Purple */ - --base0F: #3e965b; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #883e96; /* Green */ + --dnd-indicator: #3e9688; /* Red */ + --idle-indicator: #3e4c96; /* Yellow */ + --streaming-indicator: #4c963e; /* Purple */ + + /* accent colors */ + --accent-1: #96883e; /* links */ + --accent-2: #4c963e; /* general unread/mention elements */ + --accent-3: #96883e; /* accent buttons */ + --accent-4: #963e4c; /* accent buttons when hovered */ + --accent-5: #883e96; /* accent buttons when clicked */ + --mention: rgba(76, 150, 62, 0.1); + --mention-hover: rgba(76, 150, 62, 0.2); + + /* text colors */ + --text-0: #031a16; /* text on colored elements */ + --text-1: #81b5ac; /* primary white-ish text */ + --text-2: #d2e7e4; /* headings */ + --text-3: #81b5ac; /* normal text */ + --text-4: #5f9c92; /* icon buttons and channels */ + --text-5: #2b685e; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #184e45; /* dark buttons when clicked */ + --bg-2: #0b342d; /* dark buttons */ + --bg-3: #184e45; /* spacing, secondary elements */ + --bg-4: #031a16; /* main background color */ + --hover: #184e45; /* channels and buttons when hovered */ + --active: #2b685e; /* channels and buttons when selected */ + --message-hover: rgba(11, 52, 45, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-apprentice b/build/base16-apprentice index 2ee1a17..5873681 100644 --- a/build/base16-apprentice +++ b/build/base16-apprentice @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #262626; /* Black */ - --base01: #af5f5f; /* Bright Black */ - --base02: #5f875f; /* Grey */ - --base03: #87875f; /* Brighter Grey */ - --base04: #5f87af; /* Bright Grey */ - --base05: #5f5f87; /* White */ - --base06: #5f8787; /* Brighter White */ - --base07: #6c6c6c; /* Bright White */ - --base08: #444444; /* Red */ - --base09: #ff8700; /* Orange */ - --base0A: #87af87; /* Yellow */ - --base0B: #ffffaf; /* Green */ - --base0C: #87afd7; /* Cyan */ - --base0D: #8787af; /* Blue */ - --base0E: #5fafaf; /* Purple */ - --base0F: #bcbcbc; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #ffffaf; /* Green */ + --dnd-indicator: #444444; /* Red */ + --idle-indicator: #87af87; /* Yellow */ + --streaming-indicator: #5fafaf; /* Purple */ + + /* accent colors */ + --accent-1: #8787af; /* links */ + --accent-2: #5fafaf; /* general unread/mention elements */ + --accent-3: #8787af; /* accent buttons */ + --accent-4: #87afd7; /* accent buttons when hovered */ + --accent-5: #ffffaf; /* accent buttons when clicked */ + --mention: rgba(95, 175, 175, 0.1); + --mention-hover: rgba(95, 175, 175, 0.2); + + /* text colors */ + --text-0: #262626; /* text on colored elements */ + --text-1: #5f5f87; /* primary white-ish text */ + --text-2: #6c6c6c; /* headings */ + --text-3: #5f5f87; /* normal text */ + --text-4: #5f87af; /* icon buttons and channels */ + --text-5: #87875f; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #5f875f; /* dark buttons when clicked */ + --bg-2: #af5f5f; /* dark buttons */ + --bg-3: #5f875f; /* spacing, secondary elements */ + --bg-4: #262626; /* main background color */ + --hover: #5f875f; /* channels and buttons when hovered */ + --active: #87875f; /* channels and buttons when selected */ + --message-hover: rgba(175, 95, 95, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-ascendancy b/build/base16-ascendancy index e3225cb..e91aacc 100644 --- a/build/base16-ascendancy +++ b/build/base16-ascendancy @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #282828; /* Black */ - --base01: #212f3d; /* Bright Black */ - --base02: #504945; /* Grey */ - --base03: #928374; /* Brighter Grey */ - --base04: #bdae93; /* Bright Grey */ - --base05: #d5c7a1; /* White */ - --base06: #ebdbb2; /* Brighter White */ - --base07: #fbf1c7; /* Bright White */ - --base08: #d05000; /* Red */ - --base09: #fe8019; /* Orange */ - --base0A: #ffcc1b; /* Yellow */ - --base0B: #b8bb26; /* Green */ - --base0C: #8f3f71; /* Cyan */ - --base0D: #458588; /* Blue */ - --base0E: #fabd2f; /* Purple */ - --base0F: #b59b4d; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #b8bb26; /* Green */ + --dnd-indicator: #d05000; /* Red */ + --idle-indicator: #ffcc1b; /* Yellow */ + --streaming-indicator: #fabd2f; /* Purple */ + + /* accent colors */ + --accent-1: #458588; /* links */ + --accent-2: #fabd2f; /* general unread/mention elements */ + --accent-3: #458588; /* accent buttons */ + --accent-4: #8f3f71; /* accent buttons when hovered */ + --accent-5: #b8bb26; /* accent buttons when clicked */ + --mention: rgba(250, 189, 47, 0.1); + --mention-hover: rgba(250, 189, 47, 0.2); + + /* text colors */ + --text-0: #282828; /* text on colored elements */ + --text-1: #d5c7a1; /* primary white-ish text */ + --text-2: #fbf1c7; /* headings */ + --text-3: #d5c7a1; /* normal text */ + --text-4: #bdae93; /* icon buttons and channels */ + --text-5: #928374; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #504945; /* dark buttons when clicked */ + --bg-2: #212f3d; /* dark buttons */ + --bg-3: #504945; /* spacing, secondary elements */ + --bg-4: #282828; /* main background color */ + --hover: #504945; /* channels and buttons when hovered */ + --active: #928374; /* channels and buttons when selected */ + --message-hover: rgba(33, 47, 61, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-ashes b/build/base16-ashes index fc1f6bc..154f596 100644 --- a/build/base16-ashes +++ b/build/base16-ashes @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1c2023; /* Black */ - --base01: #393f45; /* Bright Black */ - --base02: #565e65; /* Grey */ - --base03: #747c84; /* Brighter Grey */ - --base04: #adb3ba; /* Bright Grey */ - --base05: #c7ccd1; /* White */ - --base06: #dfe2e5; /* Brighter White */ - --base07: #f3f4f5; /* Bright White */ - --base08: #c7ae95; /* Red */ - --base09: #c7c795; /* Orange */ - --base0A: #aec795; /* Yellow */ - --base0B: #95c7ae; /* Green */ - --base0C: #95aec7; /* Cyan */ - --base0D: #ae95c7; /* Blue */ - --base0E: #c795ae; /* Purple */ - --base0F: #c79595; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #95c7ae; /* Green */ + --dnd-indicator: #c7ae95; /* Red */ + --idle-indicator: #aec795; /* Yellow */ + --streaming-indicator: #c795ae; /* Purple */ + + /* accent colors */ + --accent-1: #ae95c7; /* links */ + --accent-2: #c795ae; /* general unread/mention elements */ + --accent-3: #ae95c7; /* accent buttons */ + --accent-4: #95aec7; /* accent buttons when hovered */ + --accent-5: #95c7ae; /* accent buttons when clicked */ + --mention: rgba(199, 149, 174, 0.1); + --mention-hover: rgba(199, 149, 174, 0.2); + + /* text colors */ + --text-0: #1c2023; /* text on colored elements */ + --text-1: #c7ccd1; /* primary white-ish text */ + --text-2: #f3f4f5; /* headings */ + --text-3: #c7ccd1; /* normal text */ + --text-4: #adb3ba; /* icon buttons and channels */ + --text-5: #747c84; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #565e65; /* dark buttons when clicked */ + --bg-2: #393f45; /* dark buttons */ + --bg-3: #565e65; /* spacing, secondary elements */ + --bg-4: #1c2023; /* main background color */ + --hover: #565e65; /* channels and buttons when hovered */ + --active: #747c84; /* channels and buttons when selected */ + --message-hover: rgba(57, 63, 69, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-cave b/build/base16-atelier-cave index 594beeb..b19b23d 100644 --- a/build/base16-atelier-cave +++ b/build/base16-atelier-cave @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #19171c; /* Black */ - --base01: #26232a; /* Bright Black */ - --base02: #585260; /* Grey */ - --base03: #655f6d; /* Brighter Grey */ - --base04: #7e7887; /* Bright Grey */ - --base05: #8b8792; /* White */ - --base06: #e2dfe7; /* Brighter White */ - --base07: #efecf4; /* Bright White */ - --base08: #be4678; /* Red */ - --base09: #aa573c; /* Orange */ - --base0A: #a06e3b; /* Yellow */ - --base0B: #2a9292; /* Green */ - --base0C: #398bc6; /* Cyan */ - --base0D: #576ddb; /* Blue */ - --base0E: #955ae7; /* Purple */ - --base0F: #bf40bf; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #2a9292; /* Green */ + --dnd-indicator: #be4678; /* Red */ + --idle-indicator: #a06e3b; /* Yellow */ + --streaming-indicator: #955ae7; /* Purple */ + + /* accent colors */ + --accent-1: #576ddb; /* links */ + --accent-2: #955ae7; /* general unread/mention elements */ + --accent-3: #576ddb; /* accent buttons */ + --accent-4: #398bc6; /* accent buttons when hovered */ + --accent-5: #2a9292; /* accent buttons when clicked */ + --mention: rgba(149, 90, 231, 0.1); + --mention-hover: rgba(149, 90, 231, 0.2); + + /* text colors */ + --text-0: #19171c; /* text on colored elements */ + --text-1: #8b8792; /* primary white-ish text */ + --text-2: #efecf4; /* headings */ + --text-3: #8b8792; /* normal text */ + --text-4: #7e7887; /* icon buttons and channels */ + --text-5: #655f6d; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #585260; /* dark buttons when clicked */ + --bg-2: #26232a; /* dark buttons */ + --bg-3: #585260; /* spacing, secondary elements */ + --bg-4: #19171c; /* main background color */ + --hover: #585260; /* channels and buttons when hovered */ + --active: #655f6d; /* channels and buttons when selected */ + --message-hover: rgba(38, 35, 42, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-cave-light b/build/base16-atelier-cave-light index 0b2c394..94d74af 100644 --- a/build/base16-atelier-cave-light +++ b/build/base16-atelier-cave-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #efecf4; /* Black */ - --base01: #e2dfe7; /* Bright Black */ - --base02: #8b8792; /* Grey */ - --base03: #7e7887; /* Brighter Grey */ - --base04: #655f6d; /* Bright Grey */ - --base05: #585260; /* White */ - --base06: #26232a; /* Brighter White */ - --base07: #19171c; /* Bright White */ - --base08: #be4678; /* Red */ - --base09: #aa573c; /* Orange */ - --base0A: #a06e3b; /* Yellow */ - --base0B: #2a9292; /* Green */ - --base0C: #398bc6; /* Cyan */ - --base0D: #576ddb; /* Blue */ - --base0E: #955ae7; /* Purple */ - --base0F: #bf40bf; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #2a9292; /* Green */ + --dnd-indicator: #be4678; /* Red */ + --idle-indicator: #a06e3b; /* Yellow */ + --streaming-indicator: #955ae7; /* Purple */ + + /* accent colors */ + --accent-1: #576ddb; /* links */ + --accent-2: #955ae7; /* general unread/mention elements */ + --accent-3: #576ddb; /* accent buttons */ + --accent-4: #398bc6; /* accent buttons when hovered */ + --accent-5: #2a9292; /* accent buttons when clicked */ + --mention: rgba(149, 90, 231, 0.1); + --mention-hover: rgba(149, 90, 231, 0.2); + + /* text colors */ + --text-0: #efecf4; /* text on colored elements */ + --text-1: #585260; /* primary white-ish text */ + --text-2: #19171c; /* headings */ + --text-3: #585260; /* normal text */ + --text-4: #655f6d; /* icon buttons and channels */ + --text-5: #7e7887; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #8b8792; /* dark buttons when clicked */ + --bg-2: #e2dfe7; /* dark buttons */ + --bg-3: #8b8792; /* spacing, secondary elements */ + --bg-4: #efecf4; /* main background color */ + --hover: #8b8792; /* channels and buttons when hovered */ + --active: #7e7887; /* channels and buttons when selected */ + --message-hover: rgba(226, 223, 231, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-dune b/build/base16-atelier-dune index 1168add..6e718c9 100644 --- a/build/base16-atelier-dune +++ b/build/base16-atelier-dune @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #20201d; /* Black */ - --base01: #292824; /* Bright Black */ - --base02: #6e6b5e; /* Grey */ - --base03: #7d7a68; /* Brighter Grey */ - --base04: #999580; /* Bright Grey */ - --base05: #a6a28c; /* White */ - --base06: #e8e4cf; /* Brighter White */ - --base07: #fefbec; /* Bright White */ - --base08: #d73737; /* Red */ - --base09: #b65611; /* Orange */ - --base0A: #ae9513; /* Yellow */ - --base0B: #60ac39; /* Green */ - --base0C: #1fad83; /* Cyan */ - --base0D: #6684e1; /* Blue */ - --base0E: #b854d4; /* Purple */ - --base0F: #d43552; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #60ac39; /* Green */ + --dnd-indicator: #d73737; /* Red */ + --idle-indicator: #ae9513; /* Yellow */ + --streaming-indicator: #b854d4; /* Purple */ + + /* accent colors */ + --accent-1: #6684e1; /* links */ + --accent-2: #b854d4; /* general unread/mention elements */ + --accent-3: #6684e1; /* accent buttons */ + --accent-4: #1fad83; /* accent buttons when hovered */ + --accent-5: #60ac39; /* accent buttons when clicked */ + --mention: rgba(184, 84, 212, 0.1); + --mention-hover: rgba(184, 84, 212, 0.2); + + /* text colors */ + --text-0: #20201d; /* text on colored elements */ + --text-1: #a6a28c; /* primary white-ish text */ + --text-2: #fefbec; /* headings */ + --text-3: #a6a28c; /* normal text */ + --text-4: #999580; /* icon buttons and channels */ + --text-5: #7d7a68; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #6e6b5e; /* dark buttons when clicked */ + --bg-2: #292824; /* dark buttons */ + --bg-3: #6e6b5e; /* spacing, secondary elements */ + --bg-4: #20201d; /* main background color */ + --hover: #6e6b5e; /* channels and buttons when hovered */ + --active: #7d7a68; /* channels and buttons when selected */ + --message-hover: rgba(41, 40, 36, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-dune-light b/build/base16-atelier-dune-light index 23db39e..ee2da22 100644 --- a/build/base16-atelier-dune-light +++ b/build/base16-atelier-dune-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fefbec; /* Black */ - --base01: #e8e4cf; /* Bright Black */ - --base02: #a6a28c; /* Grey */ - --base03: #999580; /* Brighter Grey */ - --base04: #7d7a68; /* Bright Grey */ - --base05: #6e6b5e; /* White */ - --base06: #292824; /* Brighter White */ - --base07: #20201d; /* Bright White */ - --base08: #d73737; /* Red */ - --base09: #b65611; /* Orange */ - --base0A: #ae9513; /* Yellow */ - --base0B: #60ac39; /* Green */ - --base0C: #1fad83; /* Cyan */ - --base0D: #6684e1; /* Blue */ - --base0E: #b854d4; /* Purple */ - --base0F: #d43552; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #60ac39; /* Green */ + --dnd-indicator: #d73737; /* Red */ + --idle-indicator: #ae9513; /* Yellow */ + --streaming-indicator: #b854d4; /* Purple */ + + /* accent colors */ + --accent-1: #6684e1; /* links */ + --accent-2: #b854d4; /* general unread/mention elements */ + --accent-3: #6684e1; /* accent buttons */ + --accent-4: #1fad83; /* accent buttons when hovered */ + --accent-5: #60ac39; /* accent buttons when clicked */ + --mention: rgba(184, 84, 212, 0.1); + --mention-hover: rgba(184, 84, 212, 0.2); + + /* text colors */ + --text-0: #fefbec; /* text on colored elements */ + --text-1: #6e6b5e; /* primary white-ish text */ + --text-2: #20201d; /* headings */ + --text-3: #6e6b5e; /* normal text */ + --text-4: #7d7a68; /* icon buttons and channels */ + --text-5: #999580; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #a6a28c; /* dark buttons when clicked */ + --bg-2: #e8e4cf; /* dark buttons */ + --bg-3: #a6a28c; /* spacing, secondary elements */ + --bg-4: #fefbec; /* main background color */ + --hover: #a6a28c; /* channels and buttons when hovered */ + --active: #999580; /* channels and buttons when selected */ + --message-hover: rgba(232, 228, 207, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-estuary b/build/base16-atelier-estuary index cea786c..1c3ec2e 100644 --- a/build/base16-atelier-estuary +++ b/build/base16-atelier-estuary @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #22221b; /* Black */ - --base01: #302f27; /* Bright Black */ - --base02: #5f5e4e; /* Grey */ - --base03: #6c6b5a; /* Brighter Grey */ - --base04: #878573; /* Bright Grey */ - --base05: #929181; /* White */ - --base06: #e7e6df; /* Brighter White */ - --base07: #f4f3ec; /* Bright White */ - --base08: #ba6236; /* Red */ - --base09: #ae7313; /* Orange */ - --base0A: #a5980d; /* Yellow */ - --base0B: #7d9726; /* Green */ - --base0C: #5b9d48; /* Cyan */ - --base0D: #36a166; /* Blue */ - --base0E: #5f9182; /* Purple */ - --base0F: #9d6c7c; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #7d9726; /* Green */ + --dnd-indicator: #ba6236; /* Red */ + --idle-indicator: #a5980d; /* Yellow */ + --streaming-indicator: #5f9182; /* Purple */ + + /* accent colors */ + --accent-1: #36a166; /* links */ + --accent-2: #5f9182; /* general unread/mention elements */ + --accent-3: #36a166; /* accent buttons */ + --accent-4: #5b9d48; /* accent buttons when hovered */ + --accent-5: #7d9726; /* accent buttons when clicked */ + --mention: rgba(95, 145, 130, 0.1); + --mention-hover: rgba(95, 145, 130, 0.2); + + /* text colors */ + --text-0: #22221b; /* text on colored elements */ + --text-1: #929181; /* primary white-ish text */ + --text-2: #f4f3ec; /* headings */ + --text-3: #929181; /* normal text */ + --text-4: #878573; /* icon buttons and channels */ + --text-5: #6c6b5a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #5f5e4e; /* dark buttons when clicked */ + --bg-2: #302f27; /* dark buttons */ + --bg-3: #5f5e4e; /* spacing, secondary elements */ + --bg-4: #22221b; /* main background color */ + --hover: #5f5e4e; /* channels and buttons when hovered */ + --active: #6c6b5a; /* channels and buttons when selected */ + --message-hover: rgba(48, 47, 39, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-estuary-light b/build/base16-atelier-estuary-light index 53e101e..8d51157 100644 --- a/build/base16-atelier-estuary-light +++ b/build/base16-atelier-estuary-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f4f3ec; /* Black */ - --base01: #e7e6df; /* Bright Black */ - --base02: #929181; /* Grey */ - --base03: #878573; /* Brighter Grey */ - --base04: #6c6b5a; /* Bright Grey */ - --base05: #5f5e4e; /* White */ - --base06: #302f27; /* Brighter White */ - --base07: #22221b; /* Bright White */ - --base08: #ba6236; /* Red */ - --base09: #ae7313; /* Orange */ - --base0A: #a5980d; /* Yellow */ - --base0B: #7d9726; /* Green */ - --base0C: #5b9d48; /* Cyan */ - --base0D: #36a166; /* Blue */ - --base0E: #5f9182; /* Purple */ - --base0F: #9d6c7c; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #7d9726; /* Green */ + --dnd-indicator: #ba6236; /* Red */ + --idle-indicator: #a5980d; /* Yellow */ + --streaming-indicator: #5f9182; /* Purple */ + + /* accent colors */ + --accent-1: #36a166; /* links */ + --accent-2: #5f9182; /* general unread/mention elements */ + --accent-3: #36a166; /* accent buttons */ + --accent-4: #5b9d48; /* accent buttons when hovered */ + --accent-5: #7d9726; /* accent buttons when clicked */ + --mention: rgba(95, 145, 130, 0.1); + --mention-hover: rgba(95, 145, 130, 0.2); + + /* text colors */ + --text-0: #f4f3ec; /* text on colored elements */ + --text-1: #5f5e4e; /* primary white-ish text */ + --text-2: #22221b; /* headings */ + --text-3: #5f5e4e; /* normal text */ + --text-4: #6c6b5a; /* icon buttons and channels */ + --text-5: #878573; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #929181; /* dark buttons when clicked */ + --bg-2: #e7e6df; /* dark buttons */ + --bg-3: #929181; /* spacing, secondary elements */ + --bg-4: #f4f3ec; /* main background color */ + --hover: #929181; /* channels and buttons when hovered */ + --active: #878573; /* channels and buttons when selected */ + --message-hover: rgba(231, 230, 223, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-forest b/build/base16-atelier-forest index 204f139..4e7f764 100644 --- a/build/base16-atelier-forest +++ b/build/base16-atelier-forest @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1b1918; /* Black */ - --base01: #2c2421; /* Bright Black */ - --base02: #68615e; /* Grey */ - --base03: #766e6b; /* Brighter Grey */ - --base04: #9c9491; /* Bright Grey */ - --base05: #a8a19f; /* White */ - --base06: #e6e2e0; /* Brighter White */ - --base07: #f1efee; /* Bright White */ - --base08: #f22c40; /* Red */ - --base09: #df5320; /* Orange */ - --base0A: #c38418; /* Yellow */ - --base0B: #7b9726; /* Green */ - --base0C: #3d97b8; /* Cyan */ - --base0D: #407ee7; /* Blue */ - --base0E: #6666ea; /* Purple */ - --base0F: #c33ff3; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #7b9726; /* Green */ + --dnd-indicator: #f22c40; /* Red */ + --idle-indicator: #c38418; /* Yellow */ + --streaming-indicator: #6666ea; /* Purple */ + + /* accent colors */ + --accent-1: #407ee7; /* links */ + --accent-2: #6666ea; /* general unread/mention elements */ + --accent-3: #407ee7; /* accent buttons */ + --accent-4: #3d97b8; /* accent buttons when hovered */ + --accent-5: #7b9726; /* accent buttons when clicked */ + --mention: rgba(102, 102, 234, 0.1); + --mention-hover: rgba(102, 102, 234, 0.2); + + /* text colors */ + --text-0: #1b1918; /* text on colored elements */ + --text-1: #a8a19f; /* primary white-ish text */ + --text-2: #f1efee; /* headings */ + --text-3: #a8a19f; /* normal text */ + --text-4: #9c9491; /* icon buttons and channels */ + --text-5: #766e6b; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #68615e; /* dark buttons when clicked */ + --bg-2: #2c2421; /* dark buttons */ + --bg-3: #68615e; /* spacing, secondary elements */ + --bg-4: #1b1918; /* main background color */ + --hover: #68615e; /* channels and buttons when hovered */ + --active: #766e6b; /* channels and buttons when selected */ + --message-hover: rgba(44, 36, 33, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-forest-light b/build/base16-atelier-forest-light index da38eae..176a426 100644 --- a/build/base16-atelier-forest-light +++ b/build/base16-atelier-forest-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f1efee; /* Black */ - --base01: #e6e2e0; /* Bright Black */ - --base02: #a8a19f; /* Grey */ - --base03: #9c9491; /* Brighter Grey */ - --base04: #766e6b; /* Bright Grey */ - --base05: #68615e; /* White */ - --base06: #2c2421; /* Brighter White */ - --base07: #1b1918; /* Bright White */ - --base08: #f22c40; /* Red */ - --base09: #df5320; /* Orange */ - --base0A: #c38418; /* Yellow */ - --base0B: #7b9726; /* Green */ - --base0C: #3d97b8; /* Cyan */ - --base0D: #407ee7; /* Blue */ - --base0E: #6666ea; /* Purple */ - --base0F: #c33ff3; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #7b9726; /* Green */ + --dnd-indicator: #f22c40; /* Red */ + --idle-indicator: #c38418; /* Yellow */ + --streaming-indicator: #6666ea; /* Purple */ + + /* accent colors */ + --accent-1: #407ee7; /* links */ + --accent-2: #6666ea; /* general unread/mention elements */ + --accent-3: #407ee7; /* accent buttons */ + --accent-4: #3d97b8; /* accent buttons when hovered */ + --accent-5: #7b9726; /* accent buttons when clicked */ + --mention: rgba(102, 102, 234, 0.1); + --mention-hover: rgba(102, 102, 234, 0.2); + + /* text colors */ + --text-0: #f1efee; /* text on colored elements */ + --text-1: #68615e; /* primary white-ish text */ + --text-2: #1b1918; /* headings */ + --text-3: #68615e; /* normal text */ + --text-4: #766e6b; /* icon buttons and channels */ + --text-5: #9c9491; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #a8a19f; /* dark buttons when clicked */ + --bg-2: #e6e2e0; /* dark buttons */ + --bg-3: #a8a19f; /* spacing, secondary elements */ + --bg-4: #f1efee; /* main background color */ + --hover: #a8a19f; /* channels and buttons when hovered */ + --active: #9c9491; /* channels and buttons when selected */ + --message-hover: rgba(230, 226, 224, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-heath b/build/base16-atelier-heath index 0ada5f7..49c8537 100644 --- a/build/base16-atelier-heath +++ b/build/base16-atelier-heath @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1b181b; /* Black */ - --base01: #292329; /* Bright Black */ - --base02: #695d69; /* Grey */ - --base03: #776977; /* Brighter Grey */ - --base04: #9e8f9e; /* Bright Grey */ - --base05: #ab9bab; /* White */ - --base06: #d8cad8; /* Brighter White */ - --base07: #f7f3f7; /* Bright White */ - --base08: #ca402b; /* Red */ - --base09: #a65926; /* Orange */ - --base0A: #bb8a35; /* Yellow */ - --base0B: #918b3b; /* Green */ - --base0C: #159393; /* Cyan */ - --base0D: #516aec; /* Blue */ - --base0E: #7b59c0; /* Purple */ - --base0F: #cc33cc; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #918b3b; /* Green */ + --dnd-indicator: #ca402b; /* Red */ + --idle-indicator: #bb8a35; /* Yellow */ + --streaming-indicator: #7b59c0; /* Purple */ + + /* accent colors */ + --accent-1: #516aec; /* links */ + --accent-2: #7b59c0; /* general unread/mention elements */ + --accent-3: #516aec; /* accent buttons */ + --accent-4: #159393; /* accent buttons when hovered */ + --accent-5: #918b3b; /* accent buttons when clicked */ + --mention: rgba(123, 89, 192, 0.1); + --mention-hover: rgba(123, 89, 192, 0.2); + + /* text colors */ + --text-0: #1b181b; /* text on colored elements */ + --text-1: #ab9bab; /* primary white-ish text */ + --text-2: #f7f3f7; /* headings */ + --text-3: #ab9bab; /* normal text */ + --text-4: #9e8f9e; /* icon buttons and channels */ + --text-5: #776977; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #695d69; /* dark buttons when clicked */ + --bg-2: #292329; /* dark buttons */ + --bg-3: #695d69; /* spacing, secondary elements */ + --bg-4: #1b181b; /* main background color */ + --hover: #695d69; /* channels and buttons when hovered */ + --active: #776977; /* channels and buttons when selected */ + --message-hover: rgba(41, 35, 41, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-heath-light b/build/base16-atelier-heath-light index 4d2b8f1..c29dc82 100644 --- a/build/base16-atelier-heath-light +++ b/build/base16-atelier-heath-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f7f3f7; /* Black */ - --base01: #d8cad8; /* Bright Black */ - --base02: #ab9bab; /* Grey */ - --base03: #9e8f9e; /* Brighter Grey */ - --base04: #776977; /* Bright Grey */ - --base05: #695d69; /* White */ - --base06: #292329; /* Brighter White */ - --base07: #1b181b; /* Bright White */ - --base08: #ca402b; /* Red */ - --base09: #a65926; /* Orange */ - --base0A: #bb8a35; /* Yellow */ - --base0B: #918b3b; /* Green */ - --base0C: #159393; /* Cyan */ - --base0D: #516aec; /* Blue */ - --base0E: #7b59c0; /* Purple */ - --base0F: #cc33cc; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #918b3b; /* Green */ + --dnd-indicator: #ca402b; /* Red */ + --idle-indicator: #bb8a35; /* Yellow */ + --streaming-indicator: #7b59c0; /* Purple */ + + /* accent colors */ + --accent-1: #516aec; /* links */ + --accent-2: #7b59c0; /* general unread/mention elements */ + --accent-3: #516aec; /* accent buttons */ + --accent-4: #159393; /* accent buttons when hovered */ + --accent-5: #918b3b; /* accent buttons when clicked */ + --mention: rgba(123, 89, 192, 0.1); + --mention-hover: rgba(123, 89, 192, 0.2); + + /* text colors */ + --text-0: #f7f3f7; /* text on colored elements */ + --text-1: #695d69; /* primary white-ish text */ + --text-2: #1b181b; /* headings */ + --text-3: #695d69; /* normal text */ + --text-4: #776977; /* icon buttons and channels */ + --text-5: #9e8f9e; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #ab9bab; /* dark buttons when clicked */ + --bg-2: #d8cad8; /* dark buttons */ + --bg-3: #ab9bab; /* spacing, secondary elements */ + --bg-4: #f7f3f7; /* main background color */ + --hover: #ab9bab; /* channels and buttons when hovered */ + --active: #9e8f9e; /* channels and buttons when selected */ + --message-hover: rgba(216, 202, 216, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-lakeside b/build/base16-atelier-lakeside index 349b955..992f508 100644 --- a/build/base16-atelier-lakeside +++ b/build/base16-atelier-lakeside @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #161b1d; /* Black */ - --base01: #1f292e; /* Bright Black */ - --base02: #516d7b; /* Grey */ - --base03: #5a7b8c; /* Brighter Grey */ - --base04: #7195a8; /* Bright Grey */ - --base05: #7ea2b4; /* White */ - --base06: #c1e4f6; /* Brighter White */ - --base07: #ebf8ff; /* Bright White */ - --base08: #d22d72; /* Red */ - --base09: #935c25; /* Orange */ - --base0A: #8a8a0f; /* Yellow */ - --base0B: #568c3b; /* Green */ - --base0C: #2d8f6f; /* Cyan */ - --base0D: #257fad; /* Blue */ - --base0E: #6b6bb8; /* Purple */ - --base0F: #b72dd2; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #568c3b; /* Green */ + --dnd-indicator: #d22d72; /* Red */ + --idle-indicator: #8a8a0f; /* Yellow */ + --streaming-indicator: #6b6bb8; /* Purple */ + + /* accent colors */ + --accent-1: #257fad; /* links */ + --accent-2: #6b6bb8; /* general unread/mention elements */ + --accent-3: #257fad; /* accent buttons */ + --accent-4: #2d8f6f; /* accent buttons when hovered */ + --accent-5: #568c3b; /* accent buttons when clicked */ + --mention: rgba(107, 107, 184, 0.1); + --mention-hover: rgba(107, 107, 184, 0.2); + + /* text colors */ + --text-0: #161b1d; /* text on colored elements */ + --text-1: #7ea2b4; /* primary white-ish text */ + --text-2: #ebf8ff; /* headings */ + --text-3: #7ea2b4; /* normal text */ + --text-4: #7195a8; /* icon buttons and channels */ + --text-5: #5a7b8c; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #516d7b; /* dark buttons when clicked */ + --bg-2: #1f292e; /* dark buttons */ + --bg-3: #516d7b; /* spacing, secondary elements */ + --bg-4: #161b1d; /* main background color */ + --hover: #516d7b; /* channels and buttons when hovered */ + --active: #5a7b8c; /* channels and buttons when selected */ + --message-hover: rgba(31, 41, 46, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-lakeside-light b/build/base16-atelier-lakeside-light index 23003c1..5d7e1b6 100644 --- a/build/base16-atelier-lakeside-light +++ b/build/base16-atelier-lakeside-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #ebf8ff; /* Black */ - --base01: #c1e4f6; /* Bright Black */ - --base02: #7ea2b4; /* Grey */ - --base03: #7195a8; /* Brighter Grey */ - --base04: #5a7b8c; /* Bright Grey */ - --base05: #516d7b; /* White */ - --base06: #1f292e; /* Brighter White */ - --base07: #161b1d; /* Bright White */ - --base08: #d22d72; /* Red */ - --base09: #935c25; /* Orange */ - --base0A: #8a8a0f; /* Yellow */ - --base0B: #568c3b; /* Green */ - --base0C: #2d8f6f; /* Cyan */ - --base0D: #257fad; /* Blue */ - --base0E: #6b6bb8; /* Purple */ - --base0F: #b72dd2; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #568c3b; /* Green */ + --dnd-indicator: #d22d72; /* Red */ + --idle-indicator: #8a8a0f; /* Yellow */ + --streaming-indicator: #6b6bb8; /* Purple */ + + /* accent colors */ + --accent-1: #257fad; /* links */ + --accent-2: #6b6bb8; /* general unread/mention elements */ + --accent-3: #257fad; /* accent buttons */ + --accent-4: #2d8f6f; /* accent buttons when hovered */ + --accent-5: #568c3b; /* accent buttons when clicked */ + --mention: rgba(107, 107, 184, 0.1); + --mention-hover: rgba(107, 107, 184, 0.2); + + /* text colors */ + --text-0: #ebf8ff; /* text on colored elements */ + --text-1: #516d7b; /* primary white-ish text */ + --text-2: #161b1d; /* headings */ + --text-3: #516d7b; /* normal text */ + --text-4: #5a7b8c; /* icon buttons and channels */ + --text-5: #7195a8; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #7ea2b4; /* dark buttons when clicked */ + --bg-2: #c1e4f6; /* dark buttons */ + --bg-3: #7ea2b4; /* spacing, secondary elements */ + --bg-4: #ebf8ff; /* main background color */ + --hover: #7ea2b4; /* channels and buttons when hovered */ + --active: #7195a8; /* channels and buttons when selected */ + --message-hover: rgba(193, 228, 246, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-plateau b/build/base16-atelier-plateau index 0bb4a30..ab03981 100644 --- a/build/base16-atelier-plateau +++ b/build/base16-atelier-plateau @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1b1818; /* Black */ - --base01: #292424; /* Bright Black */ - --base02: #585050; /* Grey */ - --base03: #655d5d; /* Brighter Grey */ - --base04: #7e7777; /* Bright Grey */ - --base05: #8a8585; /* White */ - --base06: #e7dfdf; /* Brighter White */ - --base07: #f4ecec; /* Bright White */ - --base08: #ca4949; /* Red */ - --base09: #b45a3c; /* Orange */ - --base0A: #a06e3b; /* Yellow */ - --base0B: #4b8b8b; /* Green */ - --base0C: #5485b6; /* Cyan */ - --base0D: #7272ca; /* Blue */ - --base0E: #8464c4; /* Purple */ - --base0F: #bd5187; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #4b8b8b; /* Green */ + --dnd-indicator: #ca4949; /* Red */ + --idle-indicator: #a06e3b; /* Yellow */ + --streaming-indicator: #8464c4; /* Purple */ + + /* accent colors */ + --accent-1: #7272ca; /* links */ + --accent-2: #8464c4; /* general unread/mention elements */ + --accent-3: #7272ca; /* accent buttons */ + --accent-4: #5485b6; /* accent buttons when hovered */ + --accent-5: #4b8b8b; /* accent buttons when clicked */ + --mention: rgba(132, 100, 196, 0.1); + --mention-hover: rgba(132, 100, 196, 0.2); + + /* text colors */ + --text-0: #1b1818; /* text on colored elements */ + --text-1: #8a8585; /* primary white-ish text */ + --text-2: #f4ecec; /* headings */ + --text-3: #8a8585; /* normal text */ + --text-4: #7e7777; /* icon buttons and channels */ + --text-5: #655d5d; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #585050; /* dark buttons when clicked */ + --bg-2: #292424; /* dark buttons */ + --bg-3: #585050; /* spacing, secondary elements */ + --bg-4: #1b1818; /* main background color */ + --hover: #585050; /* channels and buttons when hovered */ + --active: #655d5d; /* channels and buttons when selected */ + --message-hover: rgba(41, 36, 36, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-plateau-light b/build/base16-atelier-plateau-light index 68c2fb5..1b22370 100644 --- a/build/base16-atelier-plateau-light +++ b/build/base16-atelier-plateau-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f4ecec; /* Black */ - --base01: #e7dfdf; /* Bright Black */ - --base02: #8a8585; /* Grey */ - --base03: #7e7777; /* Brighter Grey */ - --base04: #655d5d; /* Bright Grey */ - --base05: #585050; /* White */ - --base06: #292424; /* Brighter White */ - --base07: #1b1818; /* Bright White */ - --base08: #ca4949; /* Red */ - --base09: #b45a3c; /* Orange */ - --base0A: #a06e3b; /* Yellow */ - --base0B: #4b8b8b; /* Green */ - --base0C: #5485b6; /* Cyan */ - --base0D: #7272ca; /* Blue */ - --base0E: #8464c4; /* Purple */ - --base0F: #bd5187; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #4b8b8b; /* Green */ + --dnd-indicator: #ca4949; /* Red */ + --idle-indicator: #a06e3b; /* Yellow */ + --streaming-indicator: #8464c4; /* Purple */ + + /* accent colors */ + --accent-1: #7272ca; /* links */ + --accent-2: #8464c4; /* general unread/mention elements */ + --accent-3: #7272ca; /* accent buttons */ + --accent-4: #5485b6; /* accent buttons when hovered */ + --accent-5: #4b8b8b; /* accent buttons when clicked */ + --mention: rgba(132, 100, 196, 0.1); + --mention-hover: rgba(132, 100, 196, 0.2); + + /* text colors */ + --text-0: #f4ecec; /* text on colored elements */ + --text-1: #585050; /* primary white-ish text */ + --text-2: #1b1818; /* headings */ + --text-3: #585050; /* normal text */ + --text-4: #655d5d; /* icon buttons and channels */ + --text-5: #7e7777; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #8a8585; /* dark buttons when clicked */ + --bg-2: #e7dfdf; /* dark buttons */ + --bg-3: #8a8585; /* spacing, secondary elements */ + --bg-4: #f4ecec; /* main background color */ + --hover: #8a8585; /* channels and buttons when hovered */ + --active: #7e7777; /* channels and buttons when selected */ + --message-hover: rgba(231, 223, 223, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-savanna b/build/base16-atelier-savanna index ddf3b01..ecf76e7 100644 --- a/build/base16-atelier-savanna +++ b/build/base16-atelier-savanna @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #171c19; /* Black */ - --base01: #232a25; /* Bright Black */ - --base02: #526057; /* Grey */ - --base03: #5f6d64; /* Brighter Grey */ - --base04: #78877d; /* Bright Grey */ - --base05: #87928a; /* White */ - --base06: #dfe7e2; /* Brighter White */ - --base07: #ecf4ee; /* Bright White */ - --base08: #b16139; /* Red */ - --base09: #9f713c; /* Orange */ - --base0A: #a07e3b; /* Yellow */ - --base0B: #489963; /* Green */ - --base0C: #1c9aa0; /* Cyan */ - --base0D: #478c90; /* Blue */ - --base0E: #55859b; /* Purple */ - --base0F: #867469; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #489963; /* Green */ + --dnd-indicator: #b16139; /* Red */ + --idle-indicator: #a07e3b; /* Yellow */ + --streaming-indicator: #55859b; /* Purple */ + + /* accent colors */ + --accent-1: #478c90; /* links */ + --accent-2: #55859b; /* general unread/mention elements */ + --accent-3: #478c90; /* accent buttons */ + --accent-4: #1c9aa0; /* accent buttons when hovered */ + --accent-5: #489963; /* accent buttons when clicked */ + --mention: rgba(85, 133, 155, 0.1); + --mention-hover: rgba(85, 133, 155, 0.2); + + /* text colors */ + --text-0: #171c19; /* text on colored elements */ + --text-1: #87928a; /* primary white-ish text */ + --text-2: #ecf4ee; /* headings */ + --text-3: #87928a; /* normal text */ + --text-4: #78877d; /* icon buttons and channels */ + --text-5: #5f6d64; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #526057; /* dark buttons when clicked */ + --bg-2: #232a25; /* dark buttons */ + --bg-3: #526057; /* spacing, secondary elements */ + --bg-4: #171c19; /* main background color */ + --hover: #526057; /* channels and buttons when hovered */ + --active: #5f6d64; /* channels and buttons when selected */ + --message-hover: rgba(35, 42, 37, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-savanna-light b/build/base16-atelier-savanna-light index e1e393f..30f1966 100644 --- a/build/base16-atelier-savanna-light +++ b/build/base16-atelier-savanna-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #ecf4ee; /* Black */ - --base01: #dfe7e2; /* Bright Black */ - --base02: #87928a; /* Grey */ - --base03: #78877d; /* Brighter Grey */ - --base04: #5f6d64; /* Bright Grey */ - --base05: #526057; /* White */ - --base06: #232a25; /* Brighter White */ - --base07: #171c19; /* Bright White */ - --base08: #b16139; /* Red */ - --base09: #9f713c; /* Orange */ - --base0A: #a07e3b; /* Yellow */ - --base0B: #489963; /* Green */ - --base0C: #1c9aa0; /* Cyan */ - --base0D: #478c90; /* Blue */ - --base0E: #55859b; /* Purple */ - --base0F: #867469; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #489963; /* Green */ + --dnd-indicator: #b16139; /* Red */ + --idle-indicator: #a07e3b; /* Yellow */ + --streaming-indicator: #55859b; /* Purple */ + + /* accent colors */ + --accent-1: #478c90; /* links */ + --accent-2: #55859b; /* general unread/mention elements */ + --accent-3: #478c90; /* accent buttons */ + --accent-4: #1c9aa0; /* accent buttons when hovered */ + --accent-5: #489963; /* accent buttons when clicked */ + --mention: rgba(85, 133, 155, 0.1); + --mention-hover: rgba(85, 133, 155, 0.2); + + /* text colors */ + --text-0: #ecf4ee; /* text on colored elements */ + --text-1: #526057; /* primary white-ish text */ + --text-2: #171c19; /* headings */ + --text-3: #526057; /* normal text */ + --text-4: #5f6d64; /* icon buttons and channels */ + --text-5: #78877d; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #87928a; /* dark buttons when clicked */ + --bg-2: #dfe7e2; /* dark buttons */ + --bg-3: #87928a; /* spacing, secondary elements */ + --bg-4: #ecf4ee; /* main background color */ + --hover: #87928a; /* channels and buttons when hovered */ + --active: #78877d; /* channels and buttons when selected */ + --message-hover: rgba(223, 231, 226, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-seaside b/build/base16-atelier-seaside index a131f1e..34be75c 100644 --- a/build/base16-atelier-seaside +++ b/build/base16-atelier-seaside @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #131513; /* Black */ - --base01: #242924; /* Bright Black */ - --base02: #5e6e5e; /* Grey */ - --base03: #687d68; /* Brighter Grey */ - --base04: #809980; /* Bright Grey */ - --base05: #8ca68c; /* White */ - --base06: #cfe8cf; /* Brighter White */ - --base07: #f4fbf4; /* Bright White */ - --base08: #e6193c; /* Red */ - --base09: #87711d; /* Orange */ - --base0A: #98981b; /* Yellow */ - --base0B: #29a329; /* Green */ - --base0C: #1999b3; /* Cyan */ - --base0D: #3d62f5; /* Blue */ - --base0E: #ad2bee; /* Purple */ - --base0F: #e619c3; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #29a329; /* Green */ + --dnd-indicator: #e6193c; /* Red */ + --idle-indicator: #98981b; /* Yellow */ + --streaming-indicator: #ad2bee; /* Purple */ + + /* accent colors */ + --accent-1: #3d62f5; /* links */ + --accent-2: #ad2bee; /* general unread/mention elements */ + --accent-3: #3d62f5; /* accent buttons */ + --accent-4: #1999b3; /* accent buttons when hovered */ + --accent-5: #29a329; /* accent buttons when clicked */ + --mention: rgba(173, 43, 238, 0.1); + --mention-hover: rgba(173, 43, 238, 0.2); + + /* text colors */ + --text-0: #131513; /* text on colored elements */ + --text-1: #8ca68c; /* primary white-ish text */ + --text-2: #f4fbf4; /* headings */ + --text-3: #8ca68c; /* normal text */ + --text-4: #809980; /* icon buttons and channels */ + --text-5: #687d68; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #5e6e5e; /* dark buttons when clicked */ + --bg-2: #242924; /* dark buttons */ + --bg-3: #5e6e5e; /* spacing, secondary elements */ + --bg-4: #131513; /* main background color */ + --hover: #5e6e5e; /* channels and buttons when hovered */ + --active: #687d68; /* channels and buttons when selected */ + --message-hover: rgba(36, 41, 36, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-seaside-light b/build/base16-atelier-seaside-light index 8dd4d9f..5d904b9 100644 --- a/build/base16-atelier-seaside-light +++ b/build/base16-atelier-seaside-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f4fbf4; /* Black */ - --base01: #cfe8cf; /* Bright Black */ - --base02: #8ca68c; /* Grey */ - --base03: #809980; /* Brighter Grey */ - --base04: #687d68; /* Bright Grey */ - --base05: #5e6e5e; /* White */ - --base06: #242924; /* Brighter White */ - --base07: #131513; /* Bright White */ - --base08: #e6193c; /* Red */ - --base09: #87711d; /* Orange */ - --base0A: #98981b; /* Yellow */ - --base0B: #29a329; /* Green */ - --base0C: #1999b3; /* Cyan */ - --base0D: #3d62f5; /* Blue */ - --base0E: #ad2bee; /* Purple */ - --base0F: #e619c3; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #29a329; /* Green */ + --dnd-indicator: #e6193c; /* Red */ + --idle-indicator: #98981b; /* Yellow */ + --streaming-indicator: #ad2bee; /* Purple */ + + /* accent colors */ + --accent-1: #3d62f5; /* links */ + --accent-2: #ad2bee; /* general unread/mention elements */ + --accent-3: #3d62f5; /* accent buttons */ + --accent-4: #1999b3; /* accent buttons when hovered */ + --accent-5: #29a329; /* accent buttons when clicked */ + --mention: rgba(173, 43, 238, 0.1); + --mention-hover: rgba(173, 43, 238, 0.2); + + /* text colors */ + --text-0: #f4fbf4; /* text on colored elements */ + --text-1: #5e6e5e; /* primary white-ish text */ + --text-2: #131513; /* headings */ + --text-3: #5e6e5e; /* normal text */ + --text-4: #687d68; /* icon buttons and channels */ + --text-5: #809980; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #8ca68c; /* dark buttons when clicked */ + --bg-2: #cfe8cf; /* dark buttons */ + --bg-3: #8ca68c; /* spacing, secondary elements */ + --bg-4: #f4fbf4; /* main background color */ + --hover: #8ca68c; /* channels and buttons when hovered */ + --active: #809980; /* channels and buttons when selected */ + --message-hover: rgba(207, 232, 207, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-sulphurpool b/build/base16-atelier-sulphurpool index f2469d7..183a808 100644 --- a/build/base16-atelier-sulphurpool +++ b/build/base16-atelier-sulphurpool @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #202746; /* Black */ - --base01: #293256; /* Bright Black */ - --base02: #5e6687; /* Grey */ - --base03: #6b7394; /* Brighter Grey */ - --base04: #898ea4; /* Bright Grey */ - --base05: #979db4; /* White */ - --base06: #dfe2f1; /* Brighter White */ - --base07: #f5f7ff; /* Bright White */ - --base08: #c94922; /* Red */ - --base09: #c76b29; /* Orange */ - --base0A: #c08b30; /* Yellow */ - --base0B: #ac9739; /* Green */ - --base0C: #22a2c9; /* Cyan */ - --base0D: #3d8fd1; /* Blue */ - --base0E: #6679cc; /* Purple */ - --base0F: #9c637a; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #ac9739; /* Green */ + --dnd-indicator: #c94922; /* Red */ + --idle-indicator: #c08b30; /* Yellow */ + --streaming-indicator: #6679cc; /* Purple */ + + /* accent colors */ + --accent-1: #3d8fd1; /* links */ + --accent-2: #6679cc; /* general unread/mention elements */ + --accent-3: #3d8fd1; /* accent buttons */ + --accent-4: #22a2c9; /* accent buttons when hovered */ + --accent-5: #ac9739; /* accent buttons when clicked */ + --mention: rgba(102, 121, 204, 0.1); + --mention-hover: rgba(102, 121, 204, 0.2); + + /* text colors */ + --text-0: #202746; /* text on colored elements */ + --text-1: #979db4; /* primary white-ish text */ + --text-2: #f5f7ff; /* headings */ + --text-3: #979db4; /* normal text */ + --text-4: #898ea4; /* icon buttons and channels */ + --text-5: #6b7394; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #5e6687; /* dark buttons when clicked */ + --bg-2: #293256; /* dark buttons */ + --bg-3: #5e6687; /* spacing, secondary elements */ + --bg-4: #202746; /* main background color */ + --hover: #5e6687; /* channels and buttons when hovered */ + --active: #6b7394; /* channels and buttons when selected */ + --message-hover: rgba(41, 50, 86, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atelier-sulphurpool-light b/build/base16-atelier-sulphurpool-light index eb99c76..309a62e 100644 --- a/build/base16-atelier-sulphurpool-light +++ b/build/base16-atelier-sulphurpool-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f5f7ff; /* Black */ - --base01: #dfe2f1; /* Bright Black */ - --base02: #979db4; /* Grey */ - --base03: #898ea4; /* Brighter Grey */ - --base04: #6b7394; /* Bright Grey */ - --base05: #5e6687; /* White */ - --base06: #293256; /* Brighter White */ - --base07: #202746; /* Bright White */ - --base08: #c94922; /* Red */ - --base09: #c76b29; /* Orange */ - --base0A: #c08b30; /* Yellow */ - --base0B: #ac9739; /* Green */ - --base0C: #22a2c9; /* Cyan */ - --base0D: #3d8fd1; /* Blue */ - --base0E: #6679cc; /* Purple */ - --base0F: #9c637a; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #ac9739; /* Green */ + --dnd-indicator: #c94922; /* Red */ + --idle-indicator: #c08b30; /* Yellow */ + --streaming-indicator: #6679cc; /* Purple */ + + /* accent colors */ + --accent-1: #3d8fd1; /* links */ + --accent-2: #6679cc; /* general unread/mention elements */ + --accent-3: #3d8fd1; /* accent buttons */ + --accent-4: #22a2c9; /* accent buttons when hovered */ + --accent-5: #ac9739; /* accent buttons when clicked */ + --mention: rgba(102, 121, 204, 0.1); + --mention-hover: rgba(102, 121, 204, 0.2); + + /* text colors */ + --text-0: #f5f7ff; /* text on colored elements */ + --text-1: #5e6687; /* primary white-ish text */ + --text-2: #202746; /* headings */ + --text-3: #5e6687; /* normal text */ + --text-4: #6b7394; /* icon buttons and channels */ + --text-5: #898ea4; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #979db4; /* dark buttons when clicked */ + --bg-2: #dfe2f1; /* dark buttons */ + --bg-3: #979db4; /* spacing, secondary elements */ + --bg-4: #f5f7ff; /* main background color */ + --hover: #979db4; /* channels and buttons when hovered */ + --active: #898ea4; /* channels and buttons when selected */ + --message-hover: rgba(223, 226, 241, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-atlas b/build/base16-atlas index 49f8f43..9ce34c6 100644 --- a/build/base16-atlas +++ b/build/base16-atlas @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #002635; /* Black */ - --base01: #00384d; /* Bright Black */ - --base02: #517f8d; /* Grey */ - --base03: #6c8b91; /* Brighter Grey */ - --base04: #869696; /* Bright Grey */ - --base05: #a1a19a; /* White */ - --base06: #e6e6dc; /* Brighter White */ - --base07: #fafaf8; /* Bright White */ - --base08: #ff5a67; /* Red */ - --base09: #f08e48; /* Orange */ - --base0A: #ffcc1b; /* Yellow */ - --base0B: #7fc06e; /* Green */ - --base0C: #5dd7b9; /* Cyan */ - --base0D: #14747e; /* Blue */ - --base0E: #9a70a4; /* Purple */ - --base0F: #c43060; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #7fc06e; /* Green */ + --dnd-indicator: #ff5a67; /* Red */ + --idle-indicator: #ffcc1b; /* Yellow */ + --streaming-indicator: #9a70a4; /* Purple */ + + /* accent colors */ + --accent-1: #14747e; /* links */ + --accent-2: #9a70a4; /* general unread/mention elements */ + --accent-3: #14747e; /* accent buttons */ + --accent-4: #5dd7b9; /* accent buttons when hovered */ + --accent-5: #7fc06e; /* accent buttons when clicked */ + --mention: rgba(154, 112, 164, 0.1); + --mention-hover: rgba(154, 112, 164, 0.2); + + /* text colors */ + --text-0: #002635; /* text on colored elements */ + --text-1: #a1a19a; /* primary white-ish text */ + --text-2: #fafaf8; /* headings */ + --text-3: #a1a19a; /* normal text */ + --text-4: #869696; /* icon buttons and channels */ + --text-5: #6c8b91; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #517f8d; /* dark buttons when clicked */ + --bg-2: #00384d; /* dark buttons */ + --bg-3: #517f8d; /* spacing, secondary elements */ + --bg-4: #002635; /* main background color */ + --hover: #517f8d; /* channels and buttons when hovered */ + --active: #6c8b91; /* channels and buttons when selected */ + --message-hover: rgba(0, 56, 77, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-ayu-dark b/build/base16-ayu-dark index 868be64..0e532ae 100644 --- a/build/base16-ayu-dark +++ b/build/base16-ayu-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #0b0e14; /* Black */ - --base01: #131721; /* Bright Black */ - --base02: #202229; /* Grey */ - --base03: #3e4b59; /* Brighter Grey */ - --base04: #bfbdb6; /* Bright Grey */ - --base05: #e6e1cf; /* White */ - --base06: #ece8db; /* Brighter White */ - --base07: #f2f0e7; /* Bright White */ - --base08: #f07178; /* Red */ - --base09: #ff8f40; /* Orange */ - --base0A: #ffb454; /* Yellow */ - --base0B: #aad94c; /* Green */ - --base0C: #95e6cb; /* Cyan */ - --base0D: #59c2ff; /* Blue */ - --base0E: #d2a6ff; /* Purple */ - --base0F: #e6b450; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #aad94c; /* Green */ + --dnd-indicator: #f07178; /* Red */ + --idle-indicator: #ffb454; /* Yellow */ + --streaming-indicator: #d2a6ff; /* Purple */ + + /* accent colors */ + --accent-1: #59c2ff; /* links */ + --accent-2: #d2a6ff; /* general unread/mention elements */ + --accent-3: #59c2ff; /* accent buttons */ + --accent-4: #95e6cb; /* accent buttons when hovered */ + --accent-5: #aad94c; /* accent buttons when clicked */ + --mention: rgba(210, 166, 255, 0.1); + --mention-hover: rgba(210, 166, 255, 0.2); + + /* text colors */ + --text-0: #0b0e14; /* text on colored elements */ + --text-1: #e6e1cf; /* primary white-ish text */ + --text-2: #f2f0e7; /* headings */ + --text-3: #e6e1cf; /* normal text */ + --text-4: #bfbdb6; /* icon buttons and channels */ + --text-5: #3e4b59; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #202229; /* dark buttons when clicked */ + --bg-2: #131721; /* dark buttons */ + --bg-3: #202229; /* spacing, secondary elements */ + --bg-4: #0b0e14; /* main background color */ + --hover: #202229; /* channels and buttons when hovered */ + --active: #3e4b59; /* channels and buttons when selected */ + --message-hover: rgba(19, 23, 33, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-ayu-light b/build/base16-ayu-light index 2aa2c51..d003436 100644 --- a/build/base16-ayu-light +++ b/build/base16-ayu-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f8f9fa; /* Black */ - --base01: #edeff1; /* Bright Black */ - --base02: #d2d4d8; /* Grey */ - --base03: #a0a6ac; /* Brighter Grey */ - --base04: #8a9199; /* Bright Grey */ - --base05: #5c6166; /* White */ - --base06: #4e5257; /* Brighter White */ - --base07: #404447; /* Bright White */ - --base08: #f07171; /* Red */ - --base09: #fa8d3e; /* Orange */ - --base0A: #f2ae49; /* Yellow */ - --base0B: #6cbf49; /* Green */ - --base0C: #4cbf99; /* Cyan */ - --base0D: #399ee6; /* Blue */ - --base0E: #a37acc; /* Purple */ - --base0F: #e6ba7e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #6cbf49; /* Green */ + --dnd-indicator: #f07171; /* Red */ + --idle-indicator: #f2ae49; /* Yellow */ + --streaming-indicator: #a37acc; /* Purple */ + + /* accent colors */ + --accent-1: #399ee6; /* links */ + --accent-2: #a37acc; /* general unread/mention elements */ + --accent-3: #399ee6; /* accent buttons */ + --accent-4: #4cbf99; /* accent buttons when hovered */ + --accent-5: #6cbf49; /* accent buttons when clicked */ + --mention: rgba(163, 122, 204, 0.1); + --mention-hover: rgba(163, 122, 204, 0.2); + + /* text colors */ + --text-0: #f8f9fa; /* text on colored elements */ + --text-1: #5c6166; /* primary white-ish text */ + --text-2: #404447; /* headings */ + --text-3: #5c6166; /* normal text */ + --text-4: #8a9199; /* icon buttons and channels */ + --text-5: #a0a6ac; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d2d4d8; /* dark buttons when clicked */ + --bg-2: #edeff1; /* dark buttons */ + --bg-3: #d2d4d8; /* spacing, secondary elements */ + --bg-4: #f8f9fa; /* main background color */ + --hover: #d2d4d8; /* channels and buttons when hovered */ + --active: #a0a6ac; /* channels and buttons when selected */ + --message-hover: rgba(237, 239, 241, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-ayu-mirage b/build/base16-ayu-mirage index 93faf81..0dd1c48 100644 --- a/build/base16-ayu-mirage +++ b/build/base16-ayu-mirage @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1f2430; /* Black */ - --base01: #242936; /* Bright Black */ - --base02: #323844; /* Grey */ - --base03: #4a5059; /* Brighter Grey */ - --base04: #707a8c; /* Bright Grey */ - --base05: #cccac2; /* White */ - --base06: #d9d7ce; /* Brighter White */ - --base07: #f3f4f5; /* Bright White */ - --base08: #f28779; /* Red */ - --base09: #ffad66; /* Orange */ - --base0A: #ffd173; /* Yellow */ - --base0B: #d5ff80; /* Green */ - --base0C: #95e6cb; /* Cyan */ - --base0D: #73d0ff; /* Blue */ - --base0E: #d4bfff; /* Purple */ - --base0F: #f27983; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #d5ff80; /* Green */ + --dnd-indicator: #f28779; /* Red */ + --idle-indicator: #ffd173; /* Yellow */ + --streaming-indicator: #d4bfff; /* Purple */ + + /* accent colors */ + --accent-1: #73d0ff; /* links */ + --accent-2: #d4bfff; /* general unread/mention elements */ + --accent-3: #73d0ff; /* accent buttons */ + --accent-4: #95e6cb; /* accent buttons when hovered */ + --accent-5: #d5ff80; /* accent buttons when clicked */ + --mention: rgba(212, 191, 255, 0.1); + --mention-hover: rgba(212, 191, 255, 0.2); + + /* text colors */ + --text-0: #1f2430; /* text on colored elements */ + --text-1: #cccac2; /* primary white-ish text */ + --text-2: #f3f4f5; /* headings */ + --text-3: #cccac2; /* normal text */ + --text-4: #707a8c; /* icon buttons and channels */ + --text-5: #4a5059; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #323844; /* dark buttons when clicked */ + --bg-2: #242936; /* dark buttons */ + --bg-3: #323844; /* spacing, secondary elements */ + --bg-4: #1f2430; /* main background color */ + --hover: #323844; /* channels and buttons when hovered */ + --active: #4a5059; /* channels and buttons when selected */ + --message-hover: rgba(36, 41, 54, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-aztec b/build/base16-aztec index d28402e..fd9ffa4 100644 --- a/build/base16-aztec +++ b/build/base16-aztec @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #101600; /* Black */ - --base01: #1a1e01; /* Bright Black */ - --base02: #242604; /* Grey */ - --base03: #2e2e05; /* Brighter Grey */ - --base04: #ffd129; /* Bright Grey */ - --base05: #ffda51; /* White */ - --base06: #ffe178; /* Brighter White */ - --base07: #ffeba0; /* Bright White */ - --base08: #ee2e00; /* Red */ - --base09: #ee8800; /* Orange */ - --base0A: #eebb00; /* Yellow */ - --base0B: #63d932; /* Green */ - --base0C: #3d94a5; /* Cyan */ - --base0D: #5b4a9f; /* Blue */ - --base0E: #883e9f; /* Purple */ - --base0F: #a928b9; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #63d932; /* Green */ + --dnd-indicator: #ee2e00; /* Red */ + --idle-indicator: #eebb00; /* Yellow */ + --streaming-indicator: #883e9f; /* Purple */ + + /* accent colors */ + --accent-1: #5b4a9f; /* links */ + --accent-2: #883e9f; /* general unread/mention elements */ + --accent-3: #5b4a9f; /* accent buttons */ + --accent-4: #3d94a5; /* accent buttons when hovered */ + --accent-5: #63d932; /* accent buttons when clicked */ + --mention: rgba(136, 62, 159, 0.1); + --mention-hover: rgba(136, 62, 159, 0.2); + + /* text colors */ + --text-0: #101600; /* text on colored elements */ + --text-1: #ffda51; /* primary white-ish text */ + --text-2: #ffeba0; /* headings */ + --text-3: #ffda51; /* normal text */ + --text-4: #ffd129; /* icon buttons and channels */ + --text-5: #2e2e05; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #242604; /* dark buttons when clicked */ + --bg-2: #1a1e01; /* dark buttons */ + --bg-3: #242604; /* spacing, secondary elements */ + --bg-4: #101600; /* main background color */ + --hover: #242604; /* channels and buttons when hovered */ + --active: #2e2e05; /* channels and buttons when selected */ + --message-hover: rgba(26, 30, 1, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-bespin b/build/base16-bespin index eb01952..de46453 100644 --- a/build/base16-bespin +++ b/build/base16-bespin @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #28211c; /* Black */ - --base01: #36312e; /* Bright Black */ - --base02: #5e5d5c; /* Grey */ - --base03: #666666; /* Brighter Grey */ - --base04: #797977; /* Bright Grey */ - --base05: #8a8986; /* White */ - --base06: #9d9b97; /* Brighter White */ - --base07: #baae9e; /* Bright White */ - --base08: #cf6a4c; /* Red */ - --base09: #cf7d34; /* Orange */ - --base0A: #f9ee98; /* Yellow */ - --base0B: #54be0d; /* Green */ - --base0C: #afc4db; /* Cyan */ - --base0D: #5ea6ea; /* Blue */ - --base0E: #9b859d; /* Purple */ - --base0F: #937121; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #54be0d; /* Green */ + --dnd-indicator: #cf6a4c; /* Red */ + --idle-indicator: #f9ee98; /* Yellow */ + --streaming-indicator: #9b859d; /* Purple */ + + /* accent colors */ + --accent-1: #5ea6ea; /* links */ + --accent-2: #9b859d; /* general unread/mention elements */ + --accent-3: #5ea6ea; /* accent buttons */ + --accent-4: #afc4db; /* accent buttons when hovered */ + --accent-5: #54be0d; /* accent buttons when clicked */ + --mention: rgba(155, 133, 157, 0.1); + --mention-hover: rgba(155, 133, 157, 0.2); + + /* text colors */ + --text-0: #28211c; /* text on colored elements */ + --text-1: #8a8986; /* primary white-ish text */ + --text-2: #baae9e; /* headings */ + --text-3: #8a8986; /* normal text */ + --text-4: #797977; /* icon buttons and channels */ + --text-5: #666666; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #5e5d5c; /* dark buttons when clicked */ + --bg-2: #36312e; /* dark buttons */ + --bg-3: #5e5d5c; /* spacing, secondary elements */ + --bg-4: #28211c; /* main background color */ + --hover: #5e5d5c; /* channels and buttons when hovered */ + --active: #666666; /* channels and buttons when selected */ + --message-hover: rgba(54, 49, 46, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-black-metal b/build/base16-black-metal index 9e44e85..06c74c8 100644 --- a/build/base16-black-metal +++ b/build/base16-black-metal @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #121212; /* Bright Black */ - --base02: #222222; /* Grey */ - --base03: #333333; /* Brighter Grey */ - --base04: #999999; /* Bright Grey */ - --base05: #c1c1c1; /* White */ - --base06: #999999; /* Brighter White */ - --base07: #c1c1c1; /* Bright White */ - --base08: #5f8787; /* Red */ - --base09: #aaaaaa; /* Orange */ - --base0A: #a06666; /* Yellow */ - --base0B: #dd9999; /* Green */ - --base0C: #aaaaaa; /* Cyan */ - --base0D: #888888; /* Blue */ - --base0E: #999999; /* Purple */ - --base0F: #444444; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #dd9999; /* Green */ + --dnd-indicator: #5f8787; /* Red */ + --idle-indicator: #a06666; /* Yellow */ + --streaming-indicator: #999999; /* Purple */ + + /* accent colors */ + --accent-1: #888888; /* links */ + --accent-2: #999999; /* general unread/mention elements */ + --accent-3: #888888; /* accent buttons */ + --accent-4: #aaaaaa; /* accent buttons when hovered */ + --accent-5: #dd9999; /* accent buttons when clicked */ + --mention: rgba(153, 153, 153, 0.1); + --mention-hover: rgba(153, 153, 153, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #c1c1c1; /* primary white-ish text */ + --text-2: #c1c1c1; /* headings */ + --text-3: #c1c1c1; /* normal text */ + --text-4: #999999; /* icon buttons and channels */ + --text-5: #333333; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #222222; /* dark buttons when clicked */ + --bg-2: #121212; /* dark buttons */ + --bg-3: #222222; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #222222; /* channels and buttons when hovered */ + --active: #333333; /* channels and buttons when selected */ + --message-hover: rgba(18, 18, 18, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-black-metal-bathory b/build/base16-black-metal-bathory index 5ed8bec..1312994 100644 --- a/build/base16-black-metal-bathory +++ b/build/base16-black-metal-bathory @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #121212; /* Bright Black */ - --base02: #222222; /* Grey */ - --base03: #333333; /* Brighter Grey */ - --base04: #999999; /* Bright Grey */ - --base05: #c1c1c1; /* White */ - --base06: #999999; /* Brighter White */ - --base07: #c1c1c1; /* Bright White */ - --base08: #5f8787; /* Red */ - --base09: #aaaaaa; /* Orange */ - --base0A: #e78a53; /* Yellow */ - --base0B: #fbcb97; /* Green */ - --base0C: #aaaaaa; /* Cyan */ - --base0D: #888888; /* Blue */ - --base0E: #999999; /* Purple */ - --base0F: #444444; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #fbcb97; /* Green */ + --dnd-indicator: #5f8787; /* Red */ + --idle-indicator: #e78a53; /* Yellow */ + --streaming-indicator: #999999; /* Purple */ + + /* accent colors */ + --accent-1: #888888; /* links */ + --accent-2: #999999; /* general unread/mention elements */ + --accent-3: #888888; /* accent buttons */ + --accent-4: #aaaaaa; /* accent buttons when hovered */ + --accent-5: #fbcb97; /* accent buttons when clicked */ + --mention: rgba(153, 153, 153, 0.1); + --mention-hover: rgba(153, 153, 153, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #c1c1c1; /* primary white-ish text */ + --text-2: #c1c1c1; /* headings */ + --text-3: #c1c1c1; /* normal text */ + --text-4: #999999; /* icon buttons and channels */ + --text-5: #333333; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #222222; /* dark buttons when clicked */ + --bg-2: #121212; /* dark buttons */ + --bg-3: #222222; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #222222; /* channels and buttons when hovered */ + --active: #333333; /* channels and buttons when selected */ + --message-hover: rgba(18, 18, 18, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-black-metal-burzum b/build/base16-black-metal-burzum index 065206a..8bb118c 100644 --- a/build/base16-black-metal-burzum +++ b/build/base16-black-metal-burzum @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #121212; /* Bright Black */ - --base02: #222222; /* Grey */ - --base03: #333333; /* Brighter Grey */ - --base04: #999999; /* Bright Grey */ - --base05: #c1c1c1; /* White */ - --base06: #999999; /* Brighter White */ - --base07: #c1c1c1; /* Bright White */ - --base08: #5f8787; /* Red */ - --base09: #aaaaaa; /* Orange */ - --base0A: #99bbaa; /* Yellow */ - --base0B: #ddeecc; /* Green */ - --base0C: #aaaaaa; /* Cyan */ - --base0D: #888888; /* Blue */ - --base0E: #999999; /* Purple */ - --base0F: #444444; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #ddeecc; /* Green */ + --dnd-indicator: #5f8787; /* Red */ + --idle-indicator: #99bbaa; /* Yellow */ + --streaming-indicator: #999999; /* Purple */ + + /* accent colors */ + --accent-1: #888888; /* links */ + --accent-2: #999999; /* general unread/mention elements */ + --accent-3: #888888; /* accent buttons */ + --accent-4: #aaaaaa; /* accent buttons when hovered */ + --accent-5: #ddeecc; /* accent buttons when clicked */ + --mention: rgba(153, 153, 153, 0.1); + --mention-hover: rgba(153, 153, 153, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #c1c1c1; /* primary white-ish text */ + --text-2: #c1c1c1; /* headings */ + --text-3: #c1c1c1; /* normal text */ + --text-4: #999999; /* icon buttons and channels */ + --text-5: #333333; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #222222; /* dark buttons when clicked */ + --bg-2: #121212; /* dark buttons */ + --bg-3: #222222; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #222222; /* channels and buttons when hovered */ + --active: #333333; /* channels and buttons when selected */ + --message-hover: rgba(18, 18, 18, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-black-metal-dark-funeral b/build/base16-black-metal-dark-funeral index a6234ae..5c80bc7 100644 --- a/build/base16-black-metal-dark-funeral +++ b/build/base16-black-metal-dark-funeral @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #121212; /* Bright Black */ - --base02: #222222; /* Grey */ - --base03: #333333; /* Brighter Grey */ - --base04: #999999; /* Bright Grey */ - --base05: #c1c1c1; /* White */ - --base06: #999999; /* Brighter White */ - --base07: #c1c1c1; /* Bright White */ - --base08: #5f8787; /* Red */ - --base09: #aaaaaa; /* Orange */ - --base0A: #5f81a5; /* Yellow */ - --base0B: #d0dfee; /* Green */ - --base0C: #aaaaaa; /* Cyan */ - --base0D: #888888; /* Blue */ - --base0E: #999999; /* Purple */ - --base0F: #444444; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #d0dfee; /* Green */ + --dnd-indicator: #5f8787; /* Red */ + --idle-indicator: #5f81a5; /* Yellow */ + --streaming-indicator: #999999; /* Purple */ + + /* accent colors */ + --accent-1: #888888; /* links */ + --accent-2: #999999; /* general unread/mention elements */ + --accent-3: #888888; /* accent buttons */ + --accent-4: #aaaaaa; /* accent buttons when hovered */ + --accent-5: #d0dfee; /* accent buttons when clicked */ + --mention: rgba(153, 153, 153, 0.1); + --mention-hover: rgba(153, 153, 153, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #c1c1c1; /* primary white-ish text */ + --text-2: #c1c1c1; /* headings */ + --text-3: #c1c1c1; /* normal text */ + --text-4: #999999; /* icon buttons and channels */ + --text-5: #333333; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #222222; /* dark buttons when clicked */ + --bg-2: #121212; /* dark buttons */ + --bg-3: #222222; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #222222; /* channels and buttons when hovered */ + --active: #333333; /* channels and buttons when selected */ + --message-hover: rgba(18, 18, 18, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-black-metal-gorgoroth b/build/base16-black-metal-gorgoroth index 12da70c..29799c2 100644 --- a/build/base16-black-metal-gorgoroth +++ b/build/base16-black-metal-gorgoroth @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #121212; /* Bright Black */ - --base02: #222222; /* Grey */ - --base03: #333333; /* Brighter Grey */ - --base04: #999999; /* Bright Grey */ - --base05: #c1c1c1; /* White */ - --base06: #999999; /* Brighter White */ - --base07: #c1c1c1; /* Bright White */ - --base08: #5f8787; /* Red */ - --base09: #aaaaaa; /* Orange */ - --base0A: #8c7f70; /* Yellow */ - --base0B: #9b8d7f; /* Green */ - --base0C: #aaaaaa; /* Cyan */ - --base0D: #888888; /* Blue */ - --base0E: #999999; /* Purple */ - --base0F: #444444; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #9b8d7f; /* Green */ + --dnd-indicator: #5f8787; /* Red */ + --idle-indicator: #8c7f70; /* Yellow */ + --streaming-indicator: #999999; /* Purple */ + + /* accent colors */ + --accent-1: #888888; /* links */ + --accent-2: #999999; /* general unread/mention elements */ + --accent-3: #888888; /* accent buttons */ + --accent-4: #aaaaaa; /* accent buttons when hovered */ + --accent-5: #9b8d7f; /* accent buttons when clicked */ + --mention: rgba(153, 153, 153, 0.1); + --mention-hover: rgba(153, 153, 153, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #c1c1c1; /* primary white-ish text */ + --text-2: #c1c1c1; /* headings */ + --text-3: #c1c1c1; /* normal text */ + --text-4: #999999; /* icon buttons and channels */ + --text-5: #333333; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #222222; /* dark buttons when clicked */ + --bg-2: #121212; /* dark buttons */ + --bg-3: #222222; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #222222; /* channels and buttons when hovered */ + --active: #333333; /* channels and buttons when selected */ + --message-hover: rgba(18, 18, 18, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-black-metal-immortal b/build/base16-black-metal-immortal index 72d9263..e4e46ea 100644 --- a/build/base16-black-metal-immortal +++ b/build/base16-black-metal-immortal @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #121212; /* Bright Black */ - --base02: #222222; /* Grey */ - --base03: #333333; /* Brighter Grey */ - --base04: #999999; /* Bright Grey */ - --base05: #c1c1c1; /* White */ - --base06: #999999; /* Brighter White */ - --base07: #c1c1c1; /* Bright White */ - --base08: #5f8787; /* Red */ - --base09: #aaaaaa; /* Orange */ - --base0A: #556677; /* Yellow */ - --base0B: #7799bb; /* Green */ - --base0C: #aaaaaa; /* Cyan */ - --base0D: #888888; /* Blue */ - --base0E: #999999; /* Purple */ - --base0F: #444444; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #7799bb; /* Green */ + --dnd-indicator: #5f8787; /* Red */ + --idle-indicator: #556677; /* Yellow */ + --streaming-indicator: #999999; /* Purple */ + + /* accent colors */ + --accent-1: #888888; /* links */ + --accent-2: #999999; /* general unread/mention elements */ + --accent-3: #888888; /* accent buttons */ + --accent-4: #aaaaaa; /* accent buttons when hovered */ + --accent-5: #7799bb; /* accent buttons when clicked */ + --mention: rgba(153, 153, 153, 0.1); + --mention-hover: rgba(153, 153, 153, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #c1c1c1; /* primary white-ish text */ + --text-2: #c1c1c1; /* headings */ + --text-3: #c1c1c1; /* normal text */ + --text-4: #999999; /* icon buttons and channels */ + --text-5: #333333; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #222222; /* dark buttons when clicked */ + --bg-2: #121212; /* dark buttons */ + --bg-3: #222222; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #222222; /* channels and buttons when hovered */ + --active: #333333; /* channels and buttons when selected */ + --message-hover: rgba(18, 18, 18, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-black-metal-khold b/build/base16-black-metal-khold index a6496f7..410c31d 100644 --- a/build/base16-black-metal-khold +++ b/build/base16-black-metal-khold @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #121212; /* Bright Black */ - --base02: #222222; /* Grey */ - --base03: #333333; /* Brighter Grey */ - --base04: #999999; /* Bright Grey */ - --base05: #c1c1c1; /* White */ - --base06: #999999; /* Brighter White */ - --base07: #c1c1c1; /* Bright White */ - --base08: #5f8787; /* Red */ - --base09: #aaaaaa; /* Orange */ - --base0A: #974b46; /* Yellow */ - --base0B: #eceee3; /* Green */ - --base0C: #aaaaaa; /* Cyan */ - --base0D: #888888; /* Blue */ - --base0E: #999999; /* Purple */ - --base0F: #444444; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #eceee3; /* Green */ + --dnd-indicator: #5f8787; /* Red */ + --idle-indicator: #974b46; /* Yellow */ + --streaming-indicator: #999999; /* Purple */ + + /* accent colors */ + --accent-1: #888888; /* links */ + --accent-2: #999999; /* general unread/mention elements */ + --accent-3: #888888; /* accent buttons */ + --accent-4: #aaaaaa; /* accent buttons when hovered */ + --accent-5: #eceee3; /* accent buttons when clicked */ + --mention: rgba(153, 153, 153, 0.1); + --mention-hover: rgba(153, 153, 153, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #c1c1c1; /* primary white-ish text */ + --text-2: #c1c1c1; /* headings */ + --text-3: #c1c1c1; /* normal text */ + --text-4: #999999; /* icon buttons and channels */ + --text-5: #333333; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #222222; /* dark buttons when clicked */ + --bg-2: #121212; /* dark buttons */ + --bg-3: #222222; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #222222; /* channels and buttons when hovered */ + --active: #333333; /* channels and buttons when selected */ + --message-hover: rgba(18, 18, 18, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-black-metal-marduk b/build/base16-black-metal-marduk index 35b3b26..2cf043e 100644 --- a/build/base16-black-metal-marduk +++ b/build/base16-black-metal-marduk @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #121212; /* Bright Black */ - --base02: #222222; /* Grey */ - --base03: #333333; /* Brighter Grey */ - --base04: #999999; /* Bright Grey */ - --base05: #c1c1c1; /* White */ - --base06: #999999; /* Brighter White */ - --base07: #c1c1c1; /* Bright White */ - --base08: #5f8787; /* Red */ - --base09: #aaaaaa; /* Orange */ - --base0A: #626b67; /* Yellow */ - --base0B: #a5aaa7; /* Green */ - --base0C: #aaaaaa; /* Cyan */ - --base0D: #888888; /* Blue */ - --base0E: #999999; /* Purple */ - --base0F: #444444; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a5aaa7; /* Green */ + --dnd-indicator: #5f8787; /* Red */ + --idle-indicator: #626b67; /* Yellow */ + --streaming-indicator: #999999; /* Purple */ + + /* accent colors */ + --accent-1: #888888; /* links */ + --accent-2: #999999; /* general unread/mention elements */ + --accent-3: #888888; /* accent buttons */ + --accent-4: #aaaaaa; /* accent buttons when hovered */ + --accent-5: #a5aaa7; /* accent buttons when clicked */ + --mention: rgba(153, 153, 153, 0.1); + --mention-hover: rgba(153, 153, 153, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #c1c1c1; /* primary white-ish text */ + --text-2: #c1c1c1; /* headings */ + --text-3: #c1c1c1; /* normal text */ + --text-4: #999999; /* icon buttons and channels */ + --text-5: #333333; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #222222; /* dark buttons when clicked */ + --bg-2: #121212; /* dark buttons */ + --bg-3: #222222; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #222222; /* channels and buttons when hovered */ + --active: #333333; /* channels and buttons when selected */ + --message-hover: rgba(18, 18, 18, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-black-metal-mayhem b/build/base16-black-metal-mayhem index bf97265..8a40a5a 100644 --- a/build/base16-black-metal-mayhem +++ b/build/base16-black-metal-mayhem @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #121212; /* Bright Black */ - --base02: #222222; /* Grey */ - --base03: #333333; /* Brighter Grey */ - --base04: #999999; /* Bright Grey */ - --base05: #c1c1c1; /* White */ - --base06: #999999; /* Brighter White */ - --base07: #c1c1c1; /* Bright White */ - --base08: #5f8787; /* Red */ - --base09: #aaaaaa; /* Orange */ - --base0A: #eecc6c; /* Yellow */ - --base0B: #f3ecd4; /* Green */ - --base0C: #aaaaaa; /* Cyan */ - --base0D: #888888; /* Blue */ - --base0E: #999999; /* Purple */ - --base0F: #444444; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #f3ecd4; /* Green */ + --dnd-indicator: #5f8787; /* Red */ + --idle-indicator: #eecc6c; /* Yellow */ + --streaming-indicator: #999999; /* Purple */ + + /* accent colors */ + --accent-1: #888888; /* links */ + --accent-2: #999999; /* general unread/mention elements */ + --accent-3: #888888; /* accent buttons */ + --accent-4: #aaaaaa; /* accent buttons when hovered */ + --accent-5: #f3ecd4; /* accent buttons when clicked */ + --mention: rgba(153, 153, 153, 0.1); + --mention-hover: rgba(153, 153, 153, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #c1c1c1; /* primary white-ish text */ + --text-2: #c1c1c1; /* headings */ + --text-3: #c1c1c1; /* normal text */ + --text-4: #999999; /* icon buttons and channels */ + --text-5: #333333; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #222222; /* dark buttons when clicked */ + --bg-2: #121212; /* dark buttons */ + --bg-3: #222222; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #222222; /* channels and buttons when hovered */ + --active: #333333; /* channels and buttons when selected */ + --message-hover: rgba(18, 18, 18, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-black-metal-nile b/build/base16-black-metal-nile index b160fb8..5458b09 100644 --- a/build/base16-black-metal-nile +++ b/build/base16-black-metal-nile @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #121212; /* Bright Black */ - --base02: #222222; /* Grey */ - --base03: #333333; /* Brighter Grey */ - --base04: #999999; /* Bright Grey */ - --base05: #c1c1c1; /* White */ - --base06: #999999; /* Brighter White */ - --base07: #c1c1c1; /* Bright White */ - --base08: #5f8787; /* Red */ - --base09: #aaaaaa; /* Orange */ - --base0A: #777755; /* Yellow */ - --base0B: #aa9988; /* Green */ - --base0C: #aaaaaa; /* Cyan */ - --base0D: #888888; /* Blue */ - --base0E: #999999; /* Purple */ - --base0F: #444444; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #aa9988; /* Green */ + --dnd-indicator: #5f8787; /* Red */ + --idle-indicator: #777755; /* Yellow */ + --streaming-indicator: #999999; /* Purple */ + + /* accent colors */ + --accent-1: #888888; /* links */ + --accent-2: #999999; /* general unread/mention elements */ + --accent-3: #888888; /* accent buttons */ + --accent-4: #aaaaaa; /* accent buttons when hovered */ + --accent-5: #aa9988; /* accent buttons when clicked */ + --mention: rgba(153, 153, 153, 0.1); + --mention-hover: rgba(153, 153, 153, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #c1c1c1; /* primary white-ish text */ + --text-2: #c1c1c1; /* headings */ + --text-3: #c1c1c1; /* normal text */ + --text-4: #999999; /* icon buttons and channels */ + --text-5: #333333; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #222222; /* dark buttons when clicked */ + --bg-2: #121212; /* dark buttons */ + --bg-3: #222222; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #222222; /* channels and buttons when hovered */ + --active: #333333; /* channels and buttons when selected */ + --message-hover: rgba(18, 18, 18, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-black-metal-venom b/build/base16-black-metal-venom index 67075bf..320e43b 100644 --- a/build/base16-black-metal-venom +++ b/build/base16-black-metal-venom @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #121212; /* Bright Black */ - --base02: #222222; /* Grey */ - --base03: #333333; /* Brighter Grey */ - --base04: #999999; /* Bright Grey */ - --base05: #c1c1c1; /* White */ - --base06: #999999; /* Brighter White */ - --base07: #c1c1c1; /* Bright White */ - --base08: #5f8787; /* Red */ - --base09: #aaaaaa; /* Orange */ - --base0A: #79241f; /* Yellow */ - --base0B: #f8f7f2; /* Green */ - --base0C: #aaaaaa; /* Cyan */ - --base0D: #888888; /* Blue */ - --base0E: #999999; /* Purple */ - --base0F: #444444; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #f8f7f2; /* Green */ + --dnd-indicator: #5f8787; /* Red */ + --idle-indicator: #79241f; /* Yellow */ + --streaming-indicator: #999999; /* Purple */ + + /* accent colors */ + --accent-1: #888888; /* links */ + --accent-2: #999999; /* general unread/mention elements */ + --accent-3: #888888; /* accent buttons */ + --accent-4: #aaaaaa; /* accent buttons when hovered */ + --accent-5: #f8f7f2; /* accent buttons when clicked */ + --mention: rgba(153, 153, 153, 0.1); + --mention-hover: rgba(153, 153, 153, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #c1c1c1; /* primary white-ish text */ + --text-2: #c1c1c1; /* headings */ + --text-3: #c1c1c1; /* normal text */ + --text-4: #999999; /* icon buttons and channels */ + --text-5: #333333; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #222222; /* dark buttons when clicked */ + --bg-2: #121212; /* dark buttons */ + --bg-3: #222222; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #222222; /* channels and buttons when hovered */ + --active: #333333; /* channels and buttons when selected */ + --message-hover: rgba(18, 18, 18, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-blueforest b/build/base16-blueforest index 7724034..ffadebd 100644 --- a/build/base16-blueforest +++ b/build/base16-blueforest @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #141f2e; /* Black */ - --base01: #1e5c1e; /* Bright Black */ - --base02: #273e5c; /* Grey */ - --base03: #a0ffa0; /* Brighter Grey */ - --base04: #1e5c1e; /* Bright Grey */ - --base05: #ffcc33; /* White */ - --base06: #91ccff; /* Brighter White */ - --base07: #375780; /* Bright White */ - --base08: #fffab1; /* Red */ - --base09: #ff8080; /* Orange */ - --base0A: #91ccff; /* Yellow */ - --base0B: #80ff80; /* Green */ - --base0C: #80ff80; /* Cyan */ - --base0D: #a2cff5; /* Blue */ - --base0E: #0099ff; /* Purple */ - --base0F: #e7e7e7; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #80ff80; /* Green */ + --dnd-indicator: #fffab1; /* Red */ + --idle-indicator: #91ccff; /* Yellow */ + --streaming-indicator: #0099ff; /* Purple */ + + /* accent colors */ + --accent-1: #a2cff5; /* links */ + --accent-2: #0099ff; /* general unread/mention elements */ + --accent-3: #a2cff5; /* accent buttons */ + --accent-4: #80ff80; /* accent buttons when hovered */ + --accent-5: #80ff80; /* accent buttons when clicked */ + --mention: rgba(0, 153, 255, 0.1); + --mention-hover: rgba(0, 153, 255, 0.2); + + /* text colors */ + --text-0: #141f2e; /* text on colored elements */ + --text-1: #ffcc33; /* primary white-ish text */ + --text-2: #375780; /* headings */ + --text-3: #ffcc33; /* normal text */ + --text-4: #1e5c1e; /* icon buttons and channels */ + --text-5: #a0ffa0; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #273e5c; /* dark buttons when clicked */ + --bg-2: #1e5c1e; /* dark buttons */ + --bg-3: #273e5c; /* spacing, secondary elements */ + --bg-4: #141f2e; /* main background color */ + --hover: #273e5c; /* channels and buttons when hovered */ + --active: #a0ffa0; /* channels and buttons when selected */ + --message-hover: rgba(30, 92, 30, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-blueish b/build/base16-blueish index ca7c2a7..d681996 100644 --- a/build/base16-blueish +++ b/build/base16-blueish @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #182430; /* Black */ - --base01: #243c54; /* Bright Black */ - --base02: #46290a; /* Grey */ - --base03: #616d78; /* Brighter Grey */ - --base04: #74afe7; /* Bright Grey */ - --base05: #c8e1f8; /* White */ - --base06: #ddeaf6; /* Brighter White */ - --base07: #8f98a0; /* Bright White */ - --base08: #4ce587; /* Red */ - --base09: #f6a85c; /* Orange */ - --base0A: #f6cd5c; /* Yellow */ - --base0B: #c3e88d; /* Green */ - --base0C: #5fd1ff; /* Cyan */ - --base0D: #82aaff; /* Blue */ - --base0E: #ff84dd; /* Purple */ - --base0F: #bbd2e8; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #c3e88d; /* Green */ + --dnd-indicator: #4ce587; /* Red */ + --idle-indicator: #f6cd5c; /* Yellow */ + --streaming-indicator: #ff84dd; /* Purple */ + + /* accent colors */ + --accent-1: #82aaff; /* links */ + --accent-2: #ff84dd; /* general unread/mention elements */ + --accent-3: #82aaff; /* accent buttons */ + --accent-4: #5fd1ff; /* accent buttons when hovered */ + --accent-5: #c3e88d; /* accent buttons when clicked */ + --mention: rgba(255, 132, 221, 0.1); + --mention-hover: rgba(255, 132, 221, 0.2); + + /* text colors */ + --text-0: #182430; /* text on colored elements */ + --text-1: #c8e1f8; /* primary white-ish text */ + --text-2: #8f98a0; /* headings */ + --text-3: #c8e1f8; /* normal text */ + --text-4: #74afe7; /* icon buttons and channels */ + --text-5: #616d78; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #46290a; /* dark buttons when clicked */ + --bg-2: #243c54; /* dark buttons */ + --bg-3: #46290a; /* spacing, secondary elements */ + --bg-4: #182430; /* main background color */ + --hover: #46290a; /* channels and buttons when hovered */ + --active: #616d78; /* channels and buttons when selected */ + --message-hover: rgba(36, 60, 84, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-booshnickle-dark b/build/base16-booshnickle-dark index 2ff3807..5bbe3c9 100644 --- a/build/base16-booshnickle-dark +++ b/build/base16-booshnickle-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #191914; /* Black */ - --base01: #3a3a2e; /* Bright Black */ - --base02: #5b5b49; /* Grey */ - --base03: #7c7c63; /* Brighter Grey */ - --base04: #9c9c7d; /* Bright Grey */ - --base05: #bdbd97; /* White */ - --base06: #dedeb2; /* Brighter White */ - --base07: #ffffcc; /* Bright White */ - --base08: #ffbfa5; /* Red */ - --base09: #ffdc99; /* Orange */ - --base0A: #fff299; /* Yellow */ - --base0B: #e7ff99; /* Green */ - --base0C: #bfffc5; /* Cyan */ - --base0D: #ccbfd9; /* Blue */ - --base0E: #f2bfd9; /* Purple */ - --base0F: #e5d6a6; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #e7ff99; /* Green */ + --dnd-indicator: #ffbfa5; /* Red */ + --idle-indicator: #fff299; /* Yellow */ + --streaming-indicator: #f2bfd9; /* Purple */ + + /* accent colors */ + --accent-1: #ccbfd9; /* links */ + --accent-2: #f2bfd9; /* general unread/mention elements */ + --accent-3: #ccbfd9; /* accent buttons */ + --accent-4: #bfffc5; /* accent buttons when hovered */ + --accent-5: #e7ff99; /* accent buttons when clicked */ + --mention: rgba(242, 191, 217, 0.1); + --mention-hover: rgba(242, 191, 217, 0.2); + + /* text colors */ + --text-0: #191914; /* text on colored elements */ + --text-1: #bdbd97; /* primary white-ish text */ + --text-2: #ffffcc; /* headings */ + --text-3: #bdbd97; /* normal text */ + --text-4: #9c9c7d; /* icon buttons and channels */ + --text-5: #7c7c63; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #5b5b49; /* dark buttons when clicked */ + --bg-2: #3a3a2e; /* dark buttons */ + --bg-3: #5b5b49; /* spacing, secondary elements */ + --bg-4: #191914; /* main background color */ + --hover: #5b5b49; /* channels and buttons when hovered */ + --active: #7c7c63; /* channels and buttons when selected */ + --message-hover: rgba(58, 58, 46, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-brewer b/build/base16-brewer index ac0f6dd..29df985 100644 --- a/build/base16-brewer +++ b/build/base16-brewer @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #0c0d0e; /* Black */ - --base01: #2e2f30; /* Bright Black */ - --base02: #515253; /* Grey */ - --base03: #737475; /* Brighter Grey */ - --base04: #959697; /* Bright Grey */ - --base05: #b7b8b9; /* White */ - --base06: #dadbdc; /* Brighter White */ - --base07: #fcfdfe; /* Bright White */ - --base08: #e31a1c; /* Red */ - --base09: #e6550d; /* Orange */ - --base0A: #dca060; /* Yellow */ - --base0B: #31a354; /* Green */ - --base0C: #80b1d3; /* Cyan */ - --base0D: #3182bd; /* Blue */ - --base0E: #756bb1; /* Purple */ - --base0F: #b15928; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #31a354; /* Green */ + --dnd-indicator: #e31a1c; /* Red */ + --idle-indicator: #dca060; /* Yellow */ + --streaming-indicator: #756bb1; /* Purple */ + + /* accent colors */ + --accent-1: #3182bd; /* links */ + --accent-2: #756bb1; /* general unread/mention elements */ + --accent-3: #3182bd; /* accent buttons */ + --accent-4: #80b1d3; /* accent buttons when hovered */ + --accent-5: #31a354; /* accent buttons when clicked */ + --mention: rgba(117, 107, 177, 0.1); + --mention-hover: rgba(117, 107, 177, 0.2); + + /* text colors */ + --text-0: #0c0d0e; /* text on colored elements */ + --text-1: #b7b8b9; /* primary white-ish text */ + --text-2: #fcfdfe; /* headings */ + --text-3: #b7b8b9; /* normal text */ + --text-4: #959697; /* icon buttons and channels */ + --text-5: #737475; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #515253; /* dark buttons when clicked */ + --bg-2: #2e2f30; /* dark buttons */ + --bg-3: #515253; /* spacing, secondary elements */ + --bg-4: #0c0d0e; /* main background color */ + --hover: #515253; /* channels and buttons when hovered */ + --active: #737475; /* channels and buttons when selected */ + --message-hover: rgba(46, 47, 48, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-bright b/build/base16-bright index 0633ae0..b5d7773 100644 --- a/build/base16-bright +++ b/build/base16-bright @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #303030; /* Bright Black */ - --base02: #505050; /* Grey */ - --base03: #b0b0b0; /* Brighter Grey */ - --base04: #d0d0d0; /* Bright Grey */ - --base05: #e0e0e0; /* White */ - --base06: #f5f5f5; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #fb0120; /* Red */ - --base09: #fc6d24; /* Orange */ - --base0A: #fda331; /* Yellow */ - --base0B: #a1c659; /* Green */ - --base0C: #76c7b7; /* Cyan */ - --base0D: #6fb3d2; /* Blue */ - --base0E: #d381c3; /* Purple */ - --base0F: #be643c; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a1c659; /* Green */ + --dnd-indicator: #fb0120; /* Red */ + --idle-indicator: #fda331; /* Yellow */ + --streaming-indicator: #d381c3; /* Purple */ + + /* accent colors */ + --accent-1: #6fb3d2; /* links */ + --accent-2: #d381c3; /* general unread/mention elements */ + --accent-3: #6fb3d2; /* accent buttons */ + --accent-4: #76c7b7; /* accent buttons when hovered */ + --accent-5: #a1c659; /* accent buttons when clicked */ + --mention: rgba(211, 129, 195, 0.1); + --mention-hover: rgba(211, 129, 195, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #e0e0e0; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #e0e0e0; /* normal text */ + --text-4: #d0d0d0; /* icon buttons and channels */ + --text-5: #b0b0b0; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #505050; /* dark buttons when clicked */ + --bg-2: #303030; /* dark buttons */ + --bg-3: #505050; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #505050; /* channels and buttons when hovered */ + --active: #b0b0b0; /* channels and buttons when selected */ + --message-hover: rgba(48, 48, 48, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-brogrammer b/build/base16-brogrammer index 57bf79f..770c79b 100644 --- a/build/base16-brogrammer +++ b/build/base16-brogrammer @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1f1f1f; /* Black */ - --base01: #f81118; /* Bright Black */ - --base02: #2dc55e; /* Grey */ - --base03: #ecba0f; /* Brighter Grey */ - --base04: #2a84d2; /* Bright Grey */ - --base05: #4e5ab7; /* White */ - --base06: #1081d6; /* Brighter White */ - --base07: #d6dbe5; /* Bright White */ - --base08: #d6dbe5; /* Red */ - --base09: #de352e; /* Orange */ - --base0A: #1dd361; /* Yellow */ - --base0B: #f3bd09; /* Green */ - --base0C: #1081d6; /* Cyan */ - --base0D: #5350b9; /* Blue */ - --base0E: #0f7ddb; /* Purple */ - --base0F: #ffffff; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #f3bd09; /* Green */ + --dnd-indicator: #d6dbe5; /* Red */ + --idle-indicator: #1dd361; /* Yellow */ + --streaming-indicator: #0f7ddb; /* Purple */ + + /* accent colors */ + --accent-1: #5350b9; /* links */ + --accent-2: #0f7ddb; /* general unread/mention elements */ + --accent-3: #5350b9; /* accent buttons */ + --accent-4: #1081d6; /* accent buttons when hovered */ + --accent-5: #f3bd09; /* accent buttons when clicked */ + --mention: rgba(15, 125, 219, 0.1); + --mention-hover: rgba(15, 125, 219, 0.2); + + /* text colors */ + --text-0: #1f1f1f; /* text on colored elements */ + --text-1: #4e5ab7; /* primary white-ish text */ + --text-2: #d6dbe5; /* headings */ + --text-3: #4e5ab7; /* normal text */ + --text-4: #2a84d2; /* icon buttons and channels */ + --text-5: #ecba0f; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #2dc55e; /* dark buttons when clicked */ + --bg-2: #f81118; /* dark buttons */ + --bg-3: #2dc55e; /* spacing, secondary elements */ + --bg-4: #1f1f1f; /* main background color */ + --hover: #2dc55e; /* channels and buttons when hovered */ + --active: #ecba0f; /* channels and buttons when selected */ + --message-hover: rgba(248, 17, 24, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-brushtrees b/build/base16-brushtrees index 62dacc9..b50d491 100644 --- a/build/base16-brushtrees +++ b/build/base16-brushtrees @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #e3efef; /* Black */ - --base01: #c9dbdc; /* Bright Black */ - --base02: #b0c5c8; /* Grey */ - --base03: #98afb5; /* Brighter Grey */ - --base04: #8299a1; /* Bright Grey */ - --base05: #6d828e; /* White */ - --base06: #5a6d7a; /* Brighter White */ - --base07: #485867; /* Bright White */ - --base08: #b38686; /* Red */ - --base09: #d8bba2; /* Orange */ - --base0A: #aab386; /* Yellow */ - --base0B: #87b386; /* Green */ - --base0C: #86b3b3; /* Cyan */ - --base0D: #868cb3; /* Blue */ - --base0E: #b386b2; /* Purple */ - --base0F: #b39f9f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #87b386; /* Green */ + --dnd-indicator: #b38686; /* Red */ + --idle-indicator: #aab386; /* Yellow */ + --streaming-indicator: #b386b2; /* Purple */ + + /* accent colors */ + --accent-1: #868cb3; /* links */ + --accent-2: #b386b2; /* general unread/mention elements */ + --accent-3: #868cb3; /* accent buttons */ + --accent-4: #86b3b3; /* accent buttons when hovered */ + --accent-5: #87b386; /* accent buttons when clicked */ + --mention: rgba(179, 134, 178, 0.1); + --mention-hover: rgba(179, 134, 178, 0.2); + + /* text colors */ + --text-0: #e3efef; /* text on colored elements */ + --text-1: #6d828e; /* primary white-ish text */ + --text-2: #485867; /* headings */ + --text-3: #6d828e; /* normal text */ + --text-4: #8299a1; /* icon buttons and channels */ + --text-5: #98afb5; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #b0c5c8; /* dark buttons when clicked */ + --bg-2: #c9dbdc; /* dark buttons */ + --bg-3: #b0c5c8; /* spacing, secondary elements */ + --bg-4: #e3efef; /* main background color */ + --hover: #b0c5c8; /* channels and buttons when hovered */ + --active: #98afb5; /* channels and buttons when selected */ + --message-hover: rgba(201, 219, 220, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-brushtrees-dark b/build/base16-brushtrees-dark index dc2492f..fec0da2 100644 --- a/build/base16-brushtrees-dark +++ b/build/base16-brushtrees-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #485867; /* Black */ - --base01: #5a6d7a; /* Bright Black */ - --base02: #6d828e; /* Grey */ - --base03: #8299a1; /* Brighter Grey */ - --base04: #98afb5; /* Bright Grey */ - --base05: #b0c5c8; /* White */ - --base06: #c9dbdc; /* Brighter White */ - --base07: #e3efef; /* Bright White */ - --base08: #b38686; /* Red */ - --base09: #d8bba2; /* Orange */ - --base0A: #aab386; /* Yellow */ - --base0B: #87b386; /* Green */ - --base0C: #86b3b3; /* Cyan */ - --base0D: #868cb3; /* Blue */ - --base0E: #b386b2; /* Purple */ - --base0F: #b39f9f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #87b386; /* Green */ + --dnd-indicator: #b38686; /* Red */ + --idle-indicator: #aab386; /* Yellow */ + --streaming-indicator: #b386b2; /* Purple */ + + /* accent colors */ + --accent-1: #868cb3; /* links */ + --accent-2: #b386b2; /* general unread/mention elements */ + --accent-3: #868cb3; /* accent buttons */ + --accent-4: #86b3b3; /* accent buttons when hovered */ + --accent-5: #87b386; /* accent buttons when clicked */ + --mention: rgba(179, 134, 178, 0.1); + --mention-hover: rgba(179, 134, 178, 0.2); + + /* text colors */ + --text-0: #485867; /* text on colored elements */ + --text-1: #b0c5c8; /* primary white-ish text */ + --text-2: #e3efef; /* headings */ + --text-3: #b0c5c8; /* normal text */ + --text-4: #98afb5; /* icon buttons and channels */ + --text-5: #8299a1; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #6d828e; /* dark buttons when clicked */ + --bg-2: #5a6d7a; /* dark buttons */ + --bg-3: #6d828e; /* spacing, secondary elements */ + --bg-4: #485867; /* main background color */ + --hover: #6d828e; /* channels and buttons when hovered */ + --active: #8299a1; /* channels and buttons when selected */ + --message-hover: rgba(90, 109, 122, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-caroline b/build/base16-caroline index 047b810..0b5af6e 100644 --- a/build/base16-caroline +++ b/build/base16-caroline @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1c1213; /* Black */ - --base01: #3a2425; /* Bright Black */ - --base02: #563837; /* Grey */ - --base03: #6d4745; /* Brighter Grey */ - --base04: #8b5d57; /* Bright Grey */ - --base05: #a87569; /* White */ - --base06: #c58d7b; /* Brighter White */ - --base07: #e3a68c; /* Bright White */ - --base08: #c24f57; /* Red */ - --base09: #a63650; /* Orange */ - --base0A: #f28171; /* Yellow */ - --base0B: #806c61; /* Green */ - --base0C: #6b6566; /* Cyan */ - --base0D: #684c59; /* Blue */ - --base0E: #a63650; /* Purple */ - --base0F: #893f45; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #806c61; /* Green */ + --dnd-indicator: #c24f57; /* Red */ + --idle-indicator: #f28171; /* Yellow */ + --streaming-indicator: #a63650; /* Purple */ + + /* accent colors */ + --accent-1: #684c59; /* links */ + --accent-2: #a63650; /* general unread/mention elements */ + --accent-3: #684c59; /* accent buttons */ + --accent-4: #6b6566; /* accent buttons when hovered */ + --accent-5: #806c61; /* accent buttons when clicked */ + --mention: rgba(166, 54, 80, 0.1); + --mention-hover: rgba(166, 54, 80, 0.2); + + /* text colors */ + --text-0: #1c1213; /* text on colored elements */ + --text-1: #a87569; /* primary white-ish text */ + --text-2: #e3a68c; /* headings */ + --text-3: #a87569; /* normal text */ + --text-4: #8b5d57; /* icon buttons and channels */ + --text-5: #6d4745; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #563837; /* dark buttons when clicked */ + --bg-2: #3a2425; /* dark buttons */ + --bg-3: #563837; /* spacing, secondary elements */ + --bg-4: #1c1213; /* main background color */ + --hover: #563837; /* channels and buttons when hovered */ + --active: #6d4745; /* channels and buttons when selected */ + --message-hover: rgba(58, 36, 37, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-catppuccin-frappe b/build/base16-catppuccin-frappe index 1f3ccb8..be12aed 100644 --- a/build/base16-catppuccin-frappe +++ b/build/base16-catppuccin-frappe @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #303446; /* Black */ - --base01: #292c3c; /* Bright Black */ - --base02: #414559; /* Grey */ - --base03: #51576d; /* Brighter Grey */ - --base04: #626880; /* Bright Grey */ - --base05: #c6d0f5; /* White */ - --base06: #f2d5cf; /* Brighter White */ - --base07: #babbf1; /* Bright White */ - --base08: #e78284; /* Red */ - --base09: #ef9f76; /* Orange */ - --base0A: #e5c890; /* Yellow */ - --base0B: #a6d189; /* Green */ - --base0C: #81c8be; /* Cyan */ - --base0D: #8caaee; /* Blue */ - --base0E: #ca9ee6; /* Purple */ - --base0F: #eebebe; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a6d189; /* Green */ + --dnd-indicator: #e78284; /* Red */ + --idle-indicator: #e5c890; /* Yellow */ + --streaming-indicator: #ca9ee6; /* Purple */ + + /* accent colors */ + --accent-1: #8caaee; /* links */ + --accent-2: #ca9ee6; /* general unread/mention elements */ + --accent-3: #8caaee; /* accent buttons */ + --accent-4: #81c8be; /* accent buttons when hovered */ + --accent-5: #a6d189; /* accent buttons when clicked */ + --mention: rgba(202, 158, 230, 0.1); + --mention-hover: rgba(202, 158, 230, 0.2); + + /* text colors */ + --text-0: #303446; /* text on colored elements */ + --text-1: #c6d0f5; /* primary white-ish text */ + --text-2: #babbf1; /* headings */ + --text-3: #c6d0f5; /* normal text */ + --text-4: #626880; /* icon buttons and channels */ + --text-5: #51576d; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #414559; /* dark buttons when clicked */ + --bg-2: #292c3c; /* dark buttons */ + --bg-3: #414559; /* spacing, secondary elements */ + --bg-4: #303446; /* main background color */ + --hover: #414559; /* channels and buttons when hovered */ + --active: #51576d; /* channels and buttons when selected */ + --message-hover: rgba(41, 44, 60, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-catppuccin-latte b/build/base16-catppuccin-latte index 93ea00f..9e28fb1 100644 --- a/build/base16-catppuccin-latte +++ b/build/base16-catppuccin-latte @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #eff1f5; /* Black */ - --base01: #e6e9ef; /* Bright Black */ - --base02: #ccd0da; /* Grey */ - --base03: #bcc0cc; /* Brighter Grey */ - --base04: #acb0be; /* Bright Grey */ - --base05: #4c4f69; /* White */ - --base06: #dc8a78; /* Brighter White */ - --base07: #7287fd; /* Bright White */ - --base08: #d20f39; /* Red */ - --base09: #fe640b; /* Orange */ - --base0A: #df8e1d; /* Yellow */ - --base0B: #40a02b; /* Green */ - --base0C: #179299; /* Cyan */ - --base0D: #1e66f5; /* Blue */ - --base0E: #8839ef; /* Purple */ - --base0F: #dd7878; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #40a02b; /* Green */ + --dnd-indicator: #d20f39; /* Red */ + --idle-indicator: #df8e1d; /* Yellow */ + --streaming-indicator: #8839ef; /* Purple */ + + /* accent colors */ + --accent-1: #1e66f5; /* links */ + --accent-2: #8839ef; /* general unread/mention elements */ + --accent-3: #1e66f5; /* accent buttons */ + --accent-4: #179299; /* accent buttons when hovered */ + --accent-5: #40a02b; /* accent buttons when clicked */ + --mention: rgba(136, 57, 239, 0.1); + --mention-hover: rgba(136, 57, 239, 0.2); + + /* text colors */ + --text-0: #eff1f5; /* text on colored elements */ + --text-1: #4c4f69; /* primary white-ish text */ + --text-2: #7287fd; /* headings */ + --text-3: #4c4f69; /* normal text */ + --text-4: #acb0be; /* icon buttons and channels */ + --text-5: #bcc0cc; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #ccd0da; /* dark buttons when clicked */ + --bg-2: #e6e9ef; /* dark buttons */ + --bg-3: #ccd0da; /* spacing, secondary elements */ + --bg-4: #eff1f5; /* main background color */ + --hover: #ccd0da; /* channels and buttons when hovered */ + --active: #bcc0cc; /* channels and buttons when selected */ + --message-hover: rgba(230, 233, 239, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-catppuccin-macchiato b/build/base16-catppuccin-macchiato index 5aff2e3..b5191ad 100644 --- a/build/base16-catppuccin-macchiato +++ b/build/base16-catppuccin-macchiato @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #24273a; /* Black */ - --base01: #1e2030; /* Bright Black */ - --base02: #363a4f; /* Grey */ - --base03: #494d64; /* Brighter Grey */ - --base04: #5b6078; /* Bright Grey */ - --base05: #cad3f5; /* White */ - --base06: #f4dbd6; /* Brighter White */ - --base07: #b7bdf8; /* Bright White */ - --base08: #ed8796; /* Red */ - --base09: #f5a97f; /* Orange */ - --base0A: #eed49f; /* Yellow */ - --base0B: #a6da95; /* Green */ - --base0C: #8bd5ca; /* Cyan */ - --base0D: #8aadf4; /* Blue */ - --base0E: #c6a0f6; /* Purple */ - --base0F: #f0c6c6; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a6da95; /* Green */ + --dnd-indicator: #ed8796; /* Red */ + --idle-indicator: #eed49f; /* Yellow */ + --streaming-indicator: #c6a0f6; /* Purple */ + + /* accent colors */ + --accent-1: #8aadf4; /* links */ + --accent-2: #c6a0f6; /* general unread/mention elements */ + --accent-3: #8aadf4; /* accent buttons */ + --accent-4: #8bd5ca; /* accent buttons when hovered */ + --accent-5: #a6da95; /* accent buttons when clicked */ + --mention: rgba(198, 160, 246, 0.1); + --mention-hover: rgba(198, 160, 246, 0.2); + + /* text colors */ + --text-0: #24273a; /* text on colored elements */ + --text-1: #cad3f5; /* primary white-ish text */ + --text-2: #b7bdf8; /* headings */ + --text-3: #cad3f5; /* normal text */ + --text-4: #5b6078; /* icon buttons and channels */ + --text-5: #494d64; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #363a4f; /* dark buttons when clicked */ + --bg-2: #1e2030; /* dark buttons */ + --bg-3: #363a4f; /* spacing, secondary elements */ + --bg-4: #24273a; /* main background color */ + --hover: #363a4f; /* channels and buttons when hovered */ + --active: #494d64; /* channels and buttons when selected */ + --message-hover: rgba(30, 32, 48, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-catppuccin-mocha b/build/base16-catppuccin-mocha index f404c46..91d7aeb 100644 --- a/build/base16-catppuccin-mocha +++ b/build/base16-catppuccin-mocha @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1e1e2e; /* Black */ - --base01: #181825; /* Bright Black */ - --base02: #313244; /* Grey */ - --base03: #45475a; /* Brighter Grey */ - --base04: #585b70; /* Bright Grey */ - --base05: #cdd6f4; /* White */ - --base06: #f5e0dc; /* Brighter White */ - --base07: #b4befe; /* Bright White */ - --base08: #f38ba8; /* Red */ - --base09: #fab387; /* Orange */ - --base0A: #f9e2af; /* Yellow */ - --base0B: #a6e3a1; /* Green */ - --base0C: #94e2d5; /* Cyan */ - --base0D: #89b4fa; /* Blue */ - --base0E: #cba6f7; /* Purple */ - --base0F: #f2cdcd; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a6e3a1; /* Green */ + --dnd-indicator: #f38ba8; /* Red */ + --idle-indicator: #f9e2af; /* Yellow */ + --streaming-indicator: #cba6f7; /* Purple */ + + /* accent colors */ + --accent-1: #89b4fa; /* links */ + --accent-2: #cba6f7; /* general unread/mention elements */ + --accent-3: #89b4fa; /* accent buttons */ + --accent-4: #94e2d5; /* accent buttons when hovered */ + --accent-5: #a6e3a1; /* accent buttons when clicked */ + --mention: rgba(203, 166, 247, 0.1); + --mention-hover: rgba(203, 166, 247, 0.2); + + /* text colors */ + --text-0: #1e1e2e; /* text on colored elements */ + --text-1: #cdd6f4; /* primary white-ish text */ + --text-2: #b4befe; /* headings */ + --text-3: #cdd6f4; /* normal text */ + --text-4: #585b70; /* icon buttons and channels */ + --text-5: #45475a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #313244; /* dark buttons when clicked */ + --bg-2: #181825; /* dark buttons */ + --bg-3: #313244; /* spacing, secondary elements */ + --bg-4: #1e1e2e; /* main background color */ + --hover: #313244; /* channels and buttons when hovered */ + --active: #45475a; /* channels and buttons when selected */ + --message-hover: rgba(24, 24, 37, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-chalk b/build/base16-chalk index 531211f..d9af014 100644 --- a/build/base16-chalk +++ b/build/base16-chalk @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #151515; /* Black */ - --base01: #202020; /* Bright Black */ - --base02: #303030; /* Grey */ - --base03: #505050; /* Brighter Grey */ - --base04: #b0b0b0; /* Bright Grey */ - --base05: #d0d0d0; /* White */ - --base06: #e0e0e0; /* Brighter White */ - --base07: #f5f5f5; /* Bright White */ - --base08: #fb9fb1; /* Red */ - --base09: #eda987; /* Orange */ - --base0A: #ddb26f; /* Yellow */ - --base0B: #acc267; /* Green */ - --base0C: #12cfc0; /* Cyan */ - --base0D: #6fc2ef; /* Blue */ - --base0E: #e1a3ee; /* Purple */ - --base0F: #deaf8f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #acc267; /* Green */ + --dnd-indicator: #fb9fb1; /* Red */ + --idle-indicator: #ddb26f; /* Yellow */ + --streaming-indicator: #e1a3ee; /* Purple */ + + /* accent colors */ + --accent-1: #6fc2ef; /* links */ + --accent-2: #e1a3ee; /* general unread/mention elements */ + --accent-3: #6fc2ef; /* accent buttons */ + --accent-4: #12cfc0; /* accent buttons when hovered */ + --accent-5: #acc267; /* accent buttons when clicked */ + --mention: rgba(225, 163, 238, 0.1); + --mention-hover: rgba(225, 163, 238, 0.2); + + /* text colors */ + --text-0: #151515; /* text on colored elements */ + --text-1: #d0d0d0; /* primary white-ish text */ + --text-2: #f5f5f5; /* headings */ + --text-3: #d0d0d0; /* normal text */ + --text-4: #b0b0b0; /* icon buttons and channels */ + --text-5: #505050; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #303030; /* dark buttons when clicked */ + --bg-2: #202020; /* dark buttons */ + --bg-3: #303030; /* spacing, secondary elements */ + --bg-4: #151515; /* main background color */ + --hover: #303030; /* channels and buttons when hovered */ + --active: #505050; /* channels and buttons when selected */ + --message-hover: rgba(32, 32, 32, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-charcoal-dark b/build/base16-charcoal-dark index 346173f..94487a7 100644 --- a/build/base16-charcoal-dark +++ b/build/base16-charcoal-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #0f0b05; /* Black */ - --base01: #231b0e; /* Bright Black */ - --base02: #2a2012; /* Grey */ - --base03: #57462c; /* Brighter Grey */ - --base04: #a88c62; /* Bright Grey */ - --base05: #c3a983; /* White */ - --base06: #dec8a7; /* Brighter White */ - --base07: #231b0e; /* Bright White */ - --base08: #a88c62; /* Red */ - --base09: #dec8a7; /* Orange */ - --base0A: #dec8a7; /* Yellow */ - --base0B: #dec8a7; /* Green */ - --base0C: #dec8a7; /* Cyan */ - --base0D: #c3a983; /* Blue */ - --base0E: #a88c62; /* Purple */ - --base0F: #876e48; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #dec8a7; /* Green */ + --dnd-indicator: #a88c62; /* Red */ + --idle-indicator: #dec8a7; /* Yellow */ + --streaming-indicator: #a88c62; /* Purple */ + + /* accent colors */ + --accent-1: #c3a983; /* links */ + --accent-2: #a88c62; /* general unread/mention elements */ + --accent-3: #c3a983; /* accent buttons */ + --accent-4: #dec8a7; /* accent buttons when hovered */ + --accent-5: #dec8a7; /* accent buttons when clicked */ + --mention: rgba(168, 140, 98, 0.1); + --mention-hover: rgba(168, 140, 98, 0.2); + + /* text colors */ + --text-0: #0f0b05; /* text on colored elements */ + --text-1: #c3a983; /* primary white-ish text */ + --text-2: #231b0e; /* headings */ + --text-3: #c3a983; /* normal text */ + --text-4: #a88c62; /* icon buttons and channels */ + --text-5: #57462c; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #2a2012; /* dark buttons when clicked */ + --bg-2: #231b0e; /* dark buttons */ + --bg-3: #2a2012; /* spacing, secondary elements */ + --bg-4: #0f0b05; /* main background color */ + --hover: #2a2012; /* channels and buttons when hovered */ + --active: #57462c; /* channels and buttons when selected */ + --message-hover: rgba(35, 27, 14, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-charcoal-light b/build/base16-charcoal-light index 758e4ba..0a7f254 100644 --- a/build/base16-charcoal-light +++ b/build/base16-charcoal-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #cabda0; /* Black */ - --base01: #bcad8c; /* Bright Black */ - --base02: #af9f7d; /* Grey */ - --base03: #645538; /* Brighter Grey */ - --base04: #110e06; /* Bright Grey */ - --base05: #382e1b; /* White */ - --base06: #4b3e26; /* Brighter White */ - --base07: #bcad8c; /* Bright White */ - --base08: #382e1b; /* Red */ - --base09: #110e06; /* Orange */ - --base0A: #110e06; /* Yellow */ - --base0B: #110e06; /* Green */ - --base0C: #110e06; /* Cyan */ - --base0D: #251e0f; /* Blue */ - --base0E: #382e1b; /* Purple */ - --base0F: #4b3e26; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #110e06; /* Green */ + --dnd-indicator: #382e1b; /* Red */ + --idle-indicator: #110e06; /* Yellow */ + --streaming-indicator: #382e1b; /* Purple */ + + /* accent colors */ + --accent-1: #251e0f; /* links */ + --accent-2: #382e1b; /* general unread/mention elements */ + --accent-3: #251e0f; /* accent buttons */ + --accent-4: #110e06; /* accent buttons when hovered */ + --accent-5: #110e06; /* accent buttons when clicked */ + --mention: rgba(56, 46, 27, 0.1); + --mention-hover: rgba(56, 46, 27, 0.2); + + /* text colors */ + --text-0: #cabda0; /* text on colored elements */ + --text-1: #382e1b; /* primary white-ish text */ + --text-2: #bcad8c; /* headings */ + --text-3: #382e1b; /* normal text */ + --text-4: #110e06; /* icon buttons and channels */ + --text-5: #645538; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #af9f7d; /* dark buttons when clicked */ + --bg-2: #bcad8c; /* dark buttons */ + --bg-3: #af9f7d; /* spacing, secondary elements */ + --bg-4: #cabda0; /* main background color */ + --hover: #af9f7d; /* channels and buttons when hovered */ + --active: #645538; /* channels and buttons when selected */ + --message-hover: rgba(188, 173, 140, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-chicago-day b/build/base16-chicago-day index 481cb19..5f7260f 100644 --- a/build/base16-chicago-day +++ b/build/base16-chicago-day @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #e8f0ea; /* Black */ - --base01: #d1e0d7; /* Bright Black */ - --base02: #b9d0c3; /* Grey */ - --base03: #8a9a91; /* Brighter Grey */ - --base04: #4b5a51; /* Bright Grey */ - --base05: #364c40; /* White */ - --base06: #2a3b32; /* Brighter White */ - --base07: #1e2a24; /* Bright White */ - --base08: #c60c30; /* Red */ - --base09: #f9461c; /* Orange */ - --base0A: #968400; /* Yellow */ - --base0B: #009b3a; /* Green */ - --base0C: #00a1de; /* Cyan */ - --base0D: #522398; /* Blue */ - --base0E: #e27ea6; /* Purple */ - --base0F: #62361b; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #009b3a; /* Green */ + --dnd-indicator: #c60c30; /* Red */ + --idle-indicator: #968400; /* Yellow */ + --streaming-indicator: #e27ea6; /* Purple */ + + /* accent colors */ + --accent-1: #522398; /* links */ + --accent-2: #e27ea6; /* general unread/mention elements */ + --accent-3: #522398; /* accent buttons */ + --accent-4: #00a1de; /* accent buttons when hovered */ + --accent-5: #009b3a; /* accent buttons when clicked */ + --mention: rgba(226, 126, 166, 0.1); + --mention-hover: rgba(226, 126, 166, 0.2); + + /* text colors */ + --text-0: #e8f0ea; /* text on colored elements */ + --text-1: #364c40; /* primary white-ish text */ + --text-2: #1e2a24; /* headings */ + --text-3: #364c40; /* normal text */ + --text-4: #4b5a51; /* icon buttons and channels */ + --text-5: #8a9a91; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #b9d0c3; /* dark buttons when clicked */ + --bg-2: #d1e0d7; /* dark buttons */ + --bg-3: #b9d0c3; /* spacing, secondary elements */ + --bg-4: #e8f0ea; /* main background color */ + --hover: #b9d0c3; /* channels and buttons when hovered */ + --active: #8a9a91; /* channels and buttons when selected */ + --message-hover: rgba(209, 224, 215, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-chicago-night b/build/base16-chicago-night index d908f3a..c2ee847 100644 --- a/build/base16-chicago-night +++ b/build/base16-chicago-night @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1e2a24; /* Black */ - --base01: #2a3b32; /* Bright Black */ - --base02: #364c40; /* Grey */ - --base03: #5f7368; /* Brighter Grey */ - --base04: #8a9a91; /* Bright Grey */ - --base05: #a7b8af; /* White */ - --base06: #c1cdc7; /* Brighter White */ - --base07: #dbe3de; /* Bright White */ - --base08: #c60c30; /* Red */ - --base09: #f9461c; /* Orange */ - --base0A: #f9e300; /* Yellow */ - --base0B: #009b3a; /* Green */ - --base0C: #00a1de; /* Cyan */ - --base0D: #522398; /* Blue */ - --base0E: #e27ea6; /* Purple */ - --base0F: #62361b; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #009b3a; /* Green */ + --dnd-indicator: #c60c30; /* Red */ + --idle-indicator: #f9e300; /* Yellow */ + --streaming-indicator: #e27ea6; /* Purple */ + + /* accent colors */ + --accent-1: #522398; /* links */ + --accent-2: #e27ea6; /* general unread/mention elements */ + --accent-3: #522398; /* accent buttons */ + --accent-4: #00a1de; /* accent buttons when hovered */ + --accent-5: #009b3a; /* accent buttons when clicked */ + --mention: rgba(226, 126, 166, 0.1); + --mention-hover: rgba(226, 126, 166, 0.2); + + /* text colors */ + --text-0: #1e2a24; /* text on colored elements */ + --text-1: #a7b8af; /* primary white-ish text */ + --text-2: #dbe3de; /* headings */ + --text-3: #a7b8af; /* normal text */ + --text-4: #8a9a91; /* icon buttons and channels */ + --text-5: #5f7368; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #364c40; /* dark buttons when clicked */ + --bg-2: #2a3b32; /* dark buttons */ + --bg-3: #364c40; /* spacing, secondary elements */ + --bg-4: #1e2a24; /* main background color */ + --hover: #364c40; /* channels and buttons when hovered */ + --active: #5f7368; /* channels and buttons when selected */ + --message-hover: rgba(42, 59, 50, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-chinoiserie b/build/base16-chinoiserie index f923f14..d144bd3 100644 --- a/build/base16-chinoiserie +++ b/build/base16-chinoiserie @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #ffffff; /* Black */ - --base01: #e0e0e0; /* Bright Black */ - --base02: #d6d6d6; /* Grey */ - --base03: #80766e; /* Brighter Grey */ - --base04: #918072; /* Bright Grey */ - --base05: #4a4035; /* White */ - --base06: #2f2f35; /* Brighter White */ - --base07: #131124; /* Bright White */ - --base08: #c04851; /* Red */ - --base09: #fb8b05; /* Orange */ - --base0A: #d6a01d; /* Yellow */ - --base0B: #428675; /* Green */ - --base0C: #2b73af; /* Cyan */ - --base0D: #815c94; /* Blue */ - --base0E: #c08eaf; /* Purple */ - --base0F: #945833; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #428675; /* Green */ + --dnd-indicator: #c04851; /* Red */ + --idle-indicator: #d6a01d; /* Yellow */ + --streaming-indicator: #c08eaf; /* Purple */ + + /* accent colors */ + --accent-1: #815c94; /* links */ + --accent-2: #c08eaf; /* general unread/mention elements */ + --accent-3: #815c94; /* accent buttons */ + --accent-4: #2b73af; /* accent buttons when hovered */ + --accent-5: #428675; /* accent buttons when clicked */ + --mention: rgba(192, 142, 175, 0.1); + --mention-hover: rgba(192, 142, 175, 0.2); + + /* text colors */ + --text-0: #ffffff; /* text on colored elements */ + --text-1: #4a4035; /* primary white-ish text */ + --text-2: #131124; /* headings */ + --text-3: #4a4035; /* normal text */ + --text-4: #918072; /* icon buttons and channels */ + --text-5: #80766e; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d6d6d6; /* dark buttons when clicked */ + --bg-2: #e0e0e0; /* dark buttons */ + --bg-3: #d6d6d6; /* spacing, secondary elements */ + --bg-4: #ffffff; /* main background color */ + --hover: #d6d6d6; /* channels and buttons when hovered */ + --active: #80766e; /* channels and buttons when selected */ + --message-hover: rgba(224, 224, 224, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-chinoiserie-midnight b/build/base16-chinoiserie-midnight index ddacfe9..36754d1 100644 --- a/build/base16-chinoiserie-midnight +++ b/build/base16-chinoiserie-midnight @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1d1d1d; /* Black */ - --base01: #282828; /* Bright Black */ - --base02: #373737; /* Grey */ - --base03: #918072; /* Brighter Grey */ - --base04: #bdaead; /* Bright Grey */ - --base05: #c4cbcf; /* White */ - --base06: #eee7f2; /* Brighter White */ - --base07: #fffef9; /* Bright White */ - --base08: #ed5a56; /* Red */ - --base09: #fc8c23; /* Orange */ - --base0A: #fbb957; /* Yellow */ - --base0B: #aeb831; /* Green */ - --base0C: #88b68d; /* Cyan */ - --base0D: #81a2a2; /* Blue */ - --base0E: #cf8997; /* Purple */ - --base0F: #cd6227; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #aeb831; /* Green */ + --dnd-indicator: #ed5a56; /* Red */ + --idle-indicator: #fbb957; /* Yellow */ + --streaming-indicator: #cf8997; /* Purple */ + + /* accent colors */ + --accent-1: #81a2a2; /* links */ + --accent-2: #cf8997; /* general unread/mention elements */ + --accent-3: #81a2a2; /* accent buttons */ + --accent-4: #88b68d; /* accent buttons when hovered */ + --accent-5: #aeb831; /* accent buttons when clicked */ + --mention: rgba(207, 137, 151, 0.1); + --mention-hover: rgba(207, 137, 151, 0.2); + + /* text colors */ + --text-0: #1d1d1d; /* text on colored elements */ + --text-1: #c4cbcf; /* primary white-ish text */ + --text-2: #fffef9; /* headings */ + --text-3: #c4cbcf; /* normal text */ + --text-4: #bdaead; /* icon buttons and channels */ + --text-5: #918072; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #373737; /* dark buttons when clicked */ + --bg-2: #282828; /* dark buttons */ + --bg-3: #373737; /* spacing, secondary elements */ + --bg-4: #1d1d1d; /* main background color */ + --hover: #373737; /* channels and buttons when hovered */ + --active: #918072; /* channels and buttons when selected */ + --message-hover: rgba(40, 40, 40, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-chinoiserie-morandi b/build/base16-chinoiserie-morandi index 508c1cf..86fc1b8 100644 --- a/build/base16-chinoiserie-morandi +++ b/build/base16-chinoiserie-morandi @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1d1d1d; /* Black */ - --base01: #282828; /* Bright Black */ - --base02: #373737; /* Grey */ - --base03: #918072; /* Brighter Grey */ - --base04: #bdaead; /* Bright Grey */ - --base05: #c4cbcf; /* White */ - --base06: #eee7f2; /* Brighter White */ - --base07: #fffef9; /* Bright White */ - --base08: #c06061; /* Red */ - --base09: #ff937f; /* Orange */ - --base0A: #e5bc84; /* Yellow */ - --base0B: #8ca07b; /* Green */ - --base0C: #5e8c9b; /* Cyan */ - --base0D: #839ec9; /* Blue */ - --base0E: #98a1d8; /* Purple */ - --base0F: #d9cdb4; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #8ca07b; /* Green */ + --dnd-indicator: #c06061; /* Red */ + --idle-indicator: #e5bc84; /* Yellow */ + --streaming-indicator: #98a1d8; /* Purple */ + + /* accent colors */ + --accent-1: #839ec9; /* links */ + --accent-2: #98a1d8; /* general unread/mention elements */ + --accent-3: #839ec9; /* accent buttons */ + --accent-4: #5e8c9b; /* accent buttons when hovered */ + --accent-5: #8ca07b; /* accent buttons when clicked */ + --mention: rgba(152, 161, 216, 0.1); + --mention-hover: rgba(152, 161, 216, 0.2); + + /* text colors */ + --text-0: #1d1d1d; /* text on colored elements */ + --text-1: #c4cbcf; /* primary white-ish text */ + --text-2: #fffef9; /* headings */ + --text-3: #c4cbcf; /* normal text */ + --text-4: #bdaead; /* icon buttons and channels */ + --text-5: #918072; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #373737; /* dark buttons when clicked */ + --bg-2: #282828; /* dark buttons */ + --bg-3: #373737; /* spacing, secondary elements */ + --bg-4: #1d1d1d; /* main background color */ + --hover: #373737; /* channels and buttons when hovered */ + --active: #918072; /* channels and buttons when selected */ + --message-hover: rgba(40, 40, 40, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-chinoiserie-night b/build/base16-chinoiserie-night index ccd5536..c0a7304 100644 --- a/build/base16-chinoiserie-night +++ b/build/base16-chinoiserie-night @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1d1d1d; /* Black */ - --base01: #282828; /* Bright Black */ - --base02: #373737; /* Grey */ - --base03: #918072; /* Brighter Grey */ - --base04: #bdaead; /* Bright Grey */ - --base05: #c4cbcf; /* White */ - --base06: #eee7f2; /* Brighter White */ - --base07: #fffef9; /* Bright White */ - --base08: #f07c82; /* Red */ - --base09: #f4a83a; /* Orange */ - --base0A: #f4ce69; /* Yellow */ - --base0B: #b2cf87; /* Green */ - --base0C: #b0d5df; /* Cyan */ - --base0D: #8fb2c9; /* Blue */ - --base0E: #be9db9; /* Purple */ - --base0F: #b89485; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #b2cf87; /* Green */ + --dnd-indicator: #f07c82; /* Red */ + --idle-indicator: #f4ce69; /* Yellow */ + --streaming-indicator: #be9db9; /* Purple */ + + /* accent colors */ + --accent-1: #8fb2c9; /* links */ + --accent-2: #be9db9; /* general unread/mention elements */ + --accent-3: #8fb2c9; /* accent buttons */ + --accent-4: #b0d5df; /* accent buttons when hovered */ + --accent-5: #b2cf87; /* accent buttons when clicked */ + --mention: rgba(190, 157, 185, 0.1); + --mention-hover: rgba(190, 157, 185, 0.2); + + /* text colors */ + --text-0: #1d1d1d; /* text on colored elements */ + --text-1: #c4cbcf; /* primary white-ish text */ + --text-2: #fffef9; /* headings */ + --text-3: #c4cbcf; /* normal text */ + --text-4: #bdaead; /* icon buttons and channels */ + --text-5: #918072; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #373737; /* dark buttons when clicked */ + --bg-2: #282828; /* dark buttons */ + --bg-3: #373737; /* spacing, secondary elements */ + --bg-4: #1d1d1d; /* main background color */ + --hover: #373737; /* channels and buttons when hovered */ + --active: #918072; /* channels and buttons when selected */ + --message-hover: rgba(40, 40, 40, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-circus b/build/base16-circus index 56d6ef3..1e41fe9 100644 --- a/build/base16-circus +++ b/build/base16-circus @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #191919; /* Black */ - --base01: #202020; /* Bright Black */ - --base02: #303030; /* Grey */ - --base03: #5f5a60; /* Brighter Grey */ - --base04: #505050; /* Bright Grey */ - --base05: #a7a7a7; /* White */ - --base06: #808080; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #dc657d; /* Red */ - --base09: #4bb1a7; /* Orange */ - --base0A: #c3ba63; /* Yellow */ - --base0B: #84b97c; /* Green */ - --base0C: #4bb1a7; /* Cyan */ - --base0D: #639ee4; /* Blue */ - --base0E: #b888e2; /* Purple */ - --base0F: #b888e2; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #84b97c; /* Green */ + --dnd-indicator: #dc657d; /* Red */ + --idle-indicator: #c3ba63; /* Yellow */ + --streaming-indicator: #b888e2; /* Purple */ + + /* accent colors */ + --accent-1: #639ee4; /* links */ + --accent-2: #b888e2; /* general unread/mention elements */ + --accent-3: #639ee4; /* accent buttons */ + --accent-4: #4bb1a7; /* accent buttons when hovered */ + --accent-5: #84b97c; /* accent buttons when clicked */ + --mention: rgba(184, 136, 226, 0.1); + --mention-hover: rgba(184, 136, 226, 0.2); + + /* text colors */ + --text-0: #191919; /* text on colored elements */ + --text-1: #a7a7a7; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #a7a7a7; /* normal text */ + --text-4: #505050; /* icon buttons and channels */ + --text-5: #5f5a60; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #303030; /* dark buttons when clicked */ + --bg-2: #202020; /* dark buttons */ + --bg-3: #303030; /* spacing, secondary elements */ + --bg-4: #191919; /* main background color */ + --hover: #303030; /* channels and buttons when hovered */ + --active: #5f5a60; /* channels and buttons when selected */ + --message-hover: rgba(32, 32, 32, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-classic-dark b/build/base16-classic-dark index ec9c136..db9ed18 100644 --- a/build/base16-classic-dark +++ b/build/base16-classic-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #151515; /* Black */ - --base01: #202020; /* Bright Black */ - --base02: #303030; /* Grey */ - --base03: #505050; /* Brighter Grey */ - --base04: #b0b0b0; /* Bright Grey */ - --base05: #d0d0d0; /* White */ - --base06: #e0e0e0; /* Brighter White */ - --base07: #f5f5f5; /* Bright White */ - --base08: #ac4142; /* Red */ - --base09: #d28445; /* Orange */ - --base0A: #f4bf75; /* Yellow */ - --base0B: #90a959; /* Green */ - --base0C: #75b5aa; /* Cyan */ - --base0D: #6a9fb5; /* Blue */ - --base0E: #aa759f; /* Purple */ - --base0F: #8f5536; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #90a959; /* Green */ + --dnd-indicator: #ac4142; /* Red */ + --idle-indicator: #f4bf75; /* Yellow */ + --streaming-indicator: #aa759f; /* Purple */ + + /* accent colors */ + --accent-1: #6a9fb5; /* links */ + --accent-2: #aa759f; /* general unread/mention elements */ + --accent-3: #6a9fb5; /* accent buttons */ + --accent-4: #75b5aa; /* accent buttons when hovered */ + --accent-5: #90a959; /* accent buttons when clicked */ + --mention: rgba(170, 117, 159, 0.1); + --mention-hover: rgba(170, 117, 159, 0.2); + + /* text colors */ + --text-0: #151515; /* text on colored elements */ + --text-1: #d0d0d0; /* primary white-ish text */ + --text-2: #f5f5f5; /* headings */ + --text-3: #d0d0d0; /* normal text */ + --text-4: #b0b0b0; /* icon buttons and channels */ + --text-5: #505050; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #303030; /* dark buttons when clicked */ + --bg-2: #202020; /* dark buttons */ + --bg-3: #303030; /* spacing, secondary elements */ + --bg-4: #151515; /* main background color */ + --hover: #303030; /* channels and buttons when hovered */ + --active: #505050; /* channels and buttons when selected */ + --message-hover: rgba(32, 32, 32, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-classic-light b/build/base16-classic-light index 5658b42..640dba8 100644 --- a/build/base16-classic-light +++ b/build/base16-classic-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f5f5f5; /* Black */ - --base01: #e0e0e0; /* Bright Black */ - --base02: #d0d0d0; /* Grey */ - --base03: #b0b0b0; /* Brighter Grey */ - --base04: #505050; /* Bright Grey */ - --base05: #303030; /* White */ - --base06: #202020; /* Brighter White */ - --base07: #151515; /* Bright White */ - --base08: #ac4142; /* Red */ - --base09: #d28445; /* Orange */ - --base0A: #f4bf75; /* Yellow */ - --base0B: #90a959; /* Green */ - --base0C: #75b5aa; /* Cyan */ - --base0D: #6a9fb5; /* Blue */ - --base0E: #aa759f; /* Purple */ - --base0F: #8f5536; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #90a959; /* Green */ + --dnd-indicator: #ac4142; /* Red */ + --idle-indicator: #f4bf75; /* Yellow */ + --streaming-indicator: #aa759f; /* Purple */ + + /* accent colors */ + --accent-1: #6a9fb5; /* links */ + --accent-2: #aa759f; /* general unread/mention elements */ + --accent-3: #6a9fb5; /* accent buttons */ + --accent-4: #75b5aa; /* accent buttons when hovered */ + --accent-5: #90a959; /* accent buttons when clicked */ + --mention: rgba(170, 117, 159, 0.1); + --mention-hover: rgba(170, 117, 159, 0.2); + + /* text colors */ + --text-0: #f5f5f5; /* text on colored elements */ + --text-1: #303030; /* primary white-ish text */ + --text-2: #151515; /* headings */ + --text-3: #303030; /* normal text */ + --text-4: #505050; /* icon buttons and channels */ + --text-5: #b0b0b0; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d0d0d0; /* dark buttons when clicked */ + --bg-2: #e0e0e0; /* dark buttons */ + --bg-3: #d0d0d0; /* spacing, secondary elements */ + --bg-4: #f5f5f5; /* main background color */ + --hover: #d0d0d0; /* channels and buttons when hovered */ + --active: #b0b0b0; /* channels and buttons when selected */ + --message-hover: rgba(224, 224, 224, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-codeschool b/build/base16-codeschool index 4f44318..3fa437c 100644 --- a/build/base16-codeschool +++ b/build/base16-codeschool @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #232c31; /* Black */ - --base01: #1c3657; /* Bright Black */ - --base02: #2a343a; /* Grey */ - --base03: #3f4944; /* Brighter Grey */ - --base04: #84898c; /* Bright Grey */ - --base05: #9ea7a6; /* White */ - --base06: #a7cfa3; /* Brighter White */ - --base07: #b5d8f6; /* Bright White */ - --base08: #2a5491; /* Red */ - --base09: #43820d; /* Orange */ - --base0A: #a03b1e; /* Yellow */ - --base0B: #237986; /* Green */ - --base0C: #b02f30; /* Cyan */ - --base0D: #484d79; /* Blue */ - --base0E: #c59820; /* Purple */ - --base0F: #c98344; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #237986; /* Green */ + --dnd-indicator: #2a5491; /* Red */ + --idle-indicator: #a03b1e; /* Yellow */ + --streaming-indicator: #c59820; /* Purple */ + + /* accent colors */ + --accent-1: #484d79; /* links */ + --accent-2: #c59820; /* general unread/mention elements */ + --accent-3: #484d79; /* accent buttons */ + --accent-4: #b02f30; /* accent buttons when hovered */ + --accent-5: #237986; /* accent buttons when clicked */ + --mention: rgba(197, 152, 32, 0.1); + --mention-hover: rgba(197, 152, 32, 0.2); + + /* text colors */ + --text-0: #232c31; /* text on colored elements */ + --text-1: #9ea7a6; /* primary white-ish text */ + --text-2: #b5d8f6; /* headings */ + --text-3: #9ea7a6; /* normal text */ + --text-4: #84898c; /* icon buttons and channels */ + --text-5: #3f4944; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #2a343a; /* dark buttons when clicked */ + --bg-2: #1c3657; /* dark buttons */ + --bg-3: #2a343a; /* spacing, secondary elements */ + --bg-4: #232c31; /* main background color */ + --hover: #2a343a; /* channels and buttons when hovered */ + --active: #3f4944; /* channels and buttons when selected */ + --message-hover: rgba(28, 54, 87, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-colors b/build/base16-colors index 9c533c2..1bca820 100644 --- a/build/base16-colors +++ b/build/base16-colors @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #111111; /* Black */ - --base01: #333333; /* Bright Black */ - --base02: #555555; /* Grey */ - --base03: #777777; /* Brighter Grey */ - --base04: #999999; /* Bright Grey */ - --base05: #bbbbbb; /* White */ - --base06: #dddddd; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #ff4136; /* Red */ - --base09: #ff851b; /* Orange */ - --base0A: #ffdc00; /* Yellow */ - --base0B: #2ecc40; /* Green */ - --base0C: #7fdbff; /* Cyan */ - --base0D: #0074d9; /* Blue */ - --base0E: #b10dc9; /* Purple */ - --base0F: #85144b; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #2ecc40; /* Green */ + --dnd-indicator: #ff4136; /* Red */ + --idle-indicator: #ffdc00; /* Yellow */ + --streaming-indicator: #b10dc9; /* Purple */ + + /* accent colors */ + --accent-1: #0074d9; /* links */ + --accent-2: #b10dc9; /* general unread/mention elements */ + --accent-3: #0074d9; /* accent buttons */ + --accent-4: #7fdbff; /* accent buttons when hovered */ + --accent-5: #2ecc40; /* accent buttons when clicked */ + --mention: rgba(177, 13, 201, 0.1); + --mention-hover: rgba(177, 13, 201, 0.2); + + /* text colors */ + --text-0: #111111; /* text on colored elements */ + --text-1: #bbbbbb; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #bbbbbb; /* normal text */ + --text-4: #999999; /* icon buttons and channels */ + --text-5: #777777; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #555555; /* dark buttons when clicked */ + --bg-2: #333333; /* dark buttons */ + --bg-3: #555555; /* spacing, secondary elements */ + --bg-4: #111111; /* main background color */ + --hover: #555555; /* channels and buttons when hovered */ + --active: #777777; /* channels and buttons when selected */ + --message-hover: rgba(51, 51, 51, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-cupcake b/build/base16-cupcake index 8df2825..5d8af67 100644 --- a/build/base16-cupcake +++ b/build/base16-cupcake @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fbf1f2; /* Black */ - --base01: #f2f1f4; /* Bright Black */ - --base02: #d8d5dd; /* Grey */ - --base03: #bfb9c6; /* Brighter Grey */ - --base04: #a59daf; /* Bright Grey */ - --base05: #8b8198; /* White */ - --base06: #72677e; /* Brighter White */ - --base07: #585062; /* Bright White */ - --base08: #d57e85; /* Red */ - --base09: #ebb790; /* Orange */ - --base0A: #dcb16c; /* Yellow */ - --base0B: #a3b367; /* Green */ - --base0C: #69a9a7; /* Cyan */ - --base0D: #7297b9; /* Blue */ - --base0E: #bb99b4; /* Purple */ - --base0F: #baa58c; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a3b367; /* Green */ + --dnd-indicator: #d57e85; /* Red */ + --idle-indicator: #dcb16c; /* Yellow */ + --streaming-indicator: #bb99b4; /* Purple */ + + /* accent colors */ + --accent-1: #7297b9; /* links */ + --accent-2: #bb99b4; /* general unread/mention elements */ + --accent-3: #7297b9; /* accent buttons */ + --accent-4: #69a9a7; /* accent buttons when hovered */ + --accent-5: #a3b367; /* accent buttons when clicked */ + --mention: rgba(187, 153, 180, 0.1); + --mention-hover: rgba(187, 153, 180, 0.2); + + /* text colors */ + --text-0: #fbf1f2; /* text on colored elements */ + --text-1: #8b8198; /* primary white-ish text */ + --text-2: #585062; /* headings */ + --text-3: #8b8198; /* normal text */ + --text-4: #a59daf; /* icon buttons and channels */ + --text-5: #bfb9c6; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d8d5dd; /* dark buttons when clicked */ + --bg-2: #f2f1f4; /* dark buttons */ + --bg-3: #d8d5dd; /* spacing, secondary elements */ + --bg-4: #fbf1f2; /* main background color */ + --hover: #d8d5dd; /* channels and buttons when hovered */ + --active: #bfb9c6; /* channels and buttons when selected */ + --message-hover: rgba(242, 241, 244, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-cupertino b/build/base16-cupertino index bf43166..13730e0 100644 --- a/build/base16-cupertino +++ b/build/base16-cupertino @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #ffffff; /* Black */ - --base01: #c0c0c0; /* Bright Black */ - --base02: #c0c0c0; /* Grey */ - --base03: #808080; /* Brighter Grey */ - --base04: #808080; /* Bright Grey */ - --base05: #404040; /* White */ - --base06: #404040; /* Brighter White */ - --base07: #5e5e5e; /* Bright White */ - --base08: #c41a15; /* Red */ - --base09: #eb8500; /* Orange */ - --base0A: #826b28; /* Yellow */ - --base0B: #007400; /* Green */ - --base0C: #318495; /* Cyan */ - --base0D: #0000ff; /* Blue */ - --base0E: #a90d91; /* Purple */ - --base0F: #826b28; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #007400; /* Green */ + --dnd-indicator: #c41a15; /* Red */ + --idle-indicator: #826b28; /* Yellow */ + --streaming-indicator: #a90d91; /* Purple */ + + /* accent colors */ + --accent-1: #0000ff; /* links */ + --accent-2: #a90d91; /* general unread/mention elements */ + --accent-3: #0000ff; /* accent buttons */ + --accent-4: #318495; /* accent buttons when hovered */ + --accent-5: #007400; /* accent buttons when clicked */ + --mention: rgba(169, 13, 145, 0.1); + --mention-hover: rgba(169, 13, 145, 0.2); + + /* text colors */ + --text-0: #ffffff; /* text on colored elements */ + --text-1: #404040; /* primary white-ish text */ + --text-2: #5e5e5e; /* headings */ + --text-3: #404040; /* normal text */ + --text-4: #808080; /* icon buttons and channels */ + --text-5: #808080; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #c0c0c0; /* dark buttons when clicked */ + --bg-2: #c0c0c0; /* dark buttons */ + --bg-3: #c0c0c0; /* spacing, secondary elements */ + --bg-4: #ffffff; /* main background color */ + --hover: #c0c0c0; /* channels and buttons when hovered */ + --active: #808080; /* channels and buttons when selected */ + --message-hover: rgba(192, 192, 192, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-cyberpunk b/build/base16-cyberpunk index b84c3ff..5924657 100644 --- a/build/base16-cyberpunk +++ b/build/base16-cyberpunk @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #2b2b2b; /* Bright Black */ - --base02: #383838; /* Grey */ - --base03: #4f4f4f; /* Brighter Grey */ - --base04: #8b8989; /* Bright Grey */ - --base05: #dcdccc; /* White */ - --base06: #f8f8f8; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #ff0000; /* Red */ - --base09: #ffa500; /* Orange */ - --base0A: #ffff00; /* Yellow */ - --base0B: #61ce3c; /* Green */ - --base0C: #93e0e3; /* Cyan */ - --base0D: #4c83ff; /* Blue */ - --base0E: #ff1493; /* Purple */ - --base0F: #ff8c00; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #61ce3c; /* Green */ + --dnd-indicator: #ff0000; /* Red */ + --idle-indicator: #ffff00; /* Yellow */ + --streaming-indicator: #ff1493; /* Purple */ + + /* accent colors */ + --accent-1: #4c83ff; /* links */ + --accent-2: #ff1493; /* general unread/mention elements */ + --accent-3: #4c83ff; /* accent buttons */ + --accent-4: #93e0e3; /* accent buttons when hovered */ + --accent-5: #61ce3c; /* accent buttons when clicked */ + --mention: rgba(255, 20, 147, 0.1); + --mention-hover: rgba(255, 20, 147, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #dcdccc; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #dcdccc; /* normal text */ + --text-4: #8b8989; /* icon buttons and channels */ + --text-5: #4f4f4f; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #383838; /* dark buttons when clicked */ + --bg-2: #2b2b2b; /* dark buttons */ + --bg-3: #383838; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #383838; /* channels and buttons when hovered */ + --active: #4f4f4f; /* channels and buttons when selected */ + --message-hover: rgba(43, 43, 43, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-da-one-black b/build/base16-da-one-black index de40bec..eda8db1 100644 --- a/build/base16-da-one-black +++ b/build/base16-da-one-black @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #282828; /* Bright Black */ - --base02: #585858; /* Grey */ - --base03: #888888; /* Brighter Grey */ - --base04: #c8c8c8; /* Bright Grey */ - --base05: #ffffff; /* White */ - --base06: #ffffff; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #fa7883; /* Red */ - --base09: #ffc387; /* Orange */ - --base0A: #ff9470; /* Yellow */ - --base0B: #98c379; /* Green */ - --base0C: #8af5ff; /* Cyan */ - --base0D: #6bb8ff; /* Blue */ - --base0E: #e799ff; /* Purple */ - --base0F: #b3684f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #98c379; /* Green */ + --dnd-indicator: #fa7883; /* Red */ + --idle-indicator: #ff9470; /* Yellow */ + --streaming-indicator: #e799ff; /* Purple */ + + /* accent colors */ + --accent-1: #6bb8ff; /* links */ + --accent-2: #e799ff; /* general unread/mention elements */ + --accent-3: #6bb8ff; /* accent buttons */ + --accent-4: #8af5ff; /* accent buttons when hovered */ + --accent-5: #98c379; /* accent buttons when clicked */ + --mention: rgba(231, 153, 255, 0.1); + --mention-hover: rgba(231, 153, 255, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #ffffff; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #ffffff; /* normal text */ + --text-4: #c8c8c8; /* icon buttons and channels */ + --text-5: #888888; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #585858; /* dark buttons when clicked */ + --bg-2: #282828; /* dark buttons */ + --bg-3: #585858; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #585858; /* channels and buttons when hovered */ + --active: #888888; /* channels and buttons when selected */ + --message-hover: rgba(40, 40, 40, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-da-one-gray b/build/base16-da-one-gray index 51b4ffa..f4122a2 100644 --- a/build/base16-da-one-gray +++ b/build/base16-da-one-gray @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #181818; /* Black */ - --base01: #282828; /* Bright Black */ - --base02: #585858; /* Grey */ - --base03: #888888; /* Brighter Grey */ - --base04: #c8c8c8; /* Bright Grey */ - --base05: #ffffff; /* White */ - --base06: #ffffff; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #fa7883; /* Red */ - --base09: #ffc387; /* Orange */ - --base0A: #ff9470; /* Yellow */ - --base0B: #98c379; /* Green */ - --base0C: #8af5ff; /* Cyan */ - --base0D: #6bb8ff; /* Blue */ - --base0E: #e799ff; /* Purple */ - --base0F: #b3684f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #98c379; /* Green */ + --dnd-indicator: #fa7883; /* Red */ + --idle-indicator: #ff9470; /* Yellow */ + --streaming-indicator: #e799ff; /* Purple */ + + /* accent colors */ + --accent-1: #6bb8ff; /* links */ + --accent-2: #e799ff; /* general unread/mention elements */ + --accent-3: #6bb8ff; /* accent buttons */ + --accent-4: #8af5ff; /* accent buttons when hovered */ + --accent-5: #98c379; /* accent buttons when clicked */ + --mention: rgba(231, 153, 255, 0.1); + --mention-hover: rgba(231, 153, 255, 0.2); + + /* text colors */ + --text-0: #181818; /* text on colored elements */ + --text-1: #ffffff; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #ffffff; /* normal text */ + --text-4: #c8c8c8; /* icon buttons and channels */ + --text-5: #888888; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #585858; /* dark buttons when clicked */ + --bg-2: #282828; /* dark buttons */ + --bg-3: #585858; /* spacing, secondary elements */ + --bg-4: #181818; /* main background color */ + --hover: #585858; /* channels and buttons when hovered */ + --active: #888888; /* channels and buttons when selected */ + --message-hover: rgba(40, 40, 40, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-da-one-ocean b/build/base16-da-one-ocean index f705664..6f3f445 100644 --- a/build/base16-da-one-ocean +++ b/build/base16-da-one-ocean @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #171726; /* Black */ - --base01: #22273d; /* Bright Black */ - --base02: #525866; /* Grey */ - --base03: #878d96; /* Brighter Grey */ - --base04: #c8c8c8; /* Bright Grey */ - --base05: #ffffff; /* White */ - --base06: #ffffff; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #fa7883; /* Red */ - --base09: #ffc387; /* Orange */ - --base0A: #ff9470; /* Yellow */ - --base0B: #98c379; /* Green */ - --base0C: #8af5ff; /* Cyan */ - --base0D: #6bb8ff; /* Blue */ - --base0E: #e799ff; /* Purple */ - --base0F: #b3684f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #98c379; /* Green */ + --dnd-indicator: #fa7883; /* Red */ + --idle-indicator: #ff9470; /* Yellow */ + --streaming-indicator: #e799ff; /* Purple */ + + /* accent colors */ + --accent-1: #6bb8ff; /* links */ + --accent-2: #e799ff; /* general unread/mention elements */ + --accent-3: #6bb8ff; /* accent buttons */ + --accent-4: #8af5ff; /* accent buttons when hovered */ + --accent-5: #98c379; /* accent buttons when clicked */ + --mention: rgba(231, 153, 255, 0.1); + --mention-hover: rgba(231, 153, 255, 0.2); + + /* text colors */ + --text-0: #171726; /* text on colored elements */ + --text-1: #ffffff; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #ffffff; /* normal text */ + --text-4: #c8c8c8; /* icon buttons and channels */ + --text-5: #878d96; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #525866; /* dark buttons when clicked */ + --bg-2: #22273d; /* dark buttons */ + --bg-3: #525866; /* spacing, secondary elements */ + --bg-4: #171726; /* main background color */ + --hover: #525866; /* channels and buttons when hovered */ + --active: #878d96; /* channels and buttons when selected */ + --message-hover: rgba(34, 39, 61, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-da-one-paper b/build/base16-da-one-paper index 7160426..aad763f 100644 --- a/build/base16-da-one-paper +++ b/build/base16-da-one-paper @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #faf0dc; /* Black */ - --base01: #c8c8c8; /* Bright Black */ - --base02: #888888; /* Grey */ - --base03: #585858; /* Brighter Grey */ - --base04: #282828; /* Bright Grey */ - --base05: #181818; /* White */ - --base06: #000000; /* Brighter White */ - --base07: #000000; /* Bright White */ - --base08: #de5d6e; /* Red */ - --base09: #ff9470; /* Orange */ - --base0A: #b3684f; /* Yellow */ - --base0B: #76a85d; /* Green */ - --base0C: #64b5a7; /* Cyan */ - --base0D: #5890f8; /* Blue */ - --base0E: #c173d1; /* Purple */ - --base0F: #b3684f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #76a85d; /* Green */ + --dnd-indicator: #de5d6e; /* Red */ + --idle-indicator: #b3684f; /* Yellow */ + --streaming-indicator: #c173d1; /* Purple */ + + /* accent colors */ + --accent-1: #5890f8; /* links */ + --accent-2: #c173d1; /* general unread/mention elements */ + --accent-3: #5890f8; /* accent buttons */ + --accent-4: #64b5a7; /* accent buttons when hovered */ + --accent-5: #76a85d; /* accent buttons when clicked */ + --mention: rgba(193, 115, 209, 0.1); + --mention-hover: rgba(193, 115, 209, 0.2); + + /* text colors */ + --text-0: #faf0dc; /* text on colored elements */ + --text-1: #181818; /* primary white-ish text */ + --text-2: #000000; /* headings */ + --text-3: #181818; /* normal text */ + --text-4: #282828; /* icon buttons and channels */ + --text-5: #585858; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #888888; /* dark buttons when clicked */ + --bg-2: #c8c8c8; /* dark buttons */ + --bg-3: #888888; /* spacing, secondary elements */ + --bg-4: #faf0dc; /* main background color */ + --hover: #888888; /* channels and buttons when hovered */ + --active: #585858; /* channels and buttons when selected */ + --message-hover: rgba(200, 200, 200, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-da-one-sea b/build/base16-da-one-sea index cb73255..f23051e 100644 --- a/build/base16-da-one-sea +++ b/build/base16-da-one-sea @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #22273d; /* Black */ - --base01: #374059; /* Bright Black */ - --base02: #525866; /* Grey */ - --base03: #878d96; /* Brighter Grey */ - --base04: #c8c8c8; /* Bright Grey */ - --base05: #ffffff; /* White */ - --base06: #ffffff; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #fa7883; /* Red */ - --base09: #ffc387; /* Orange */ - --base0A: #ff9470; /* Yellow */ - --base0B: #98c379; /* Green */ - --base0C: #8af5ff; /* Cyan */ - --base0D: #6bb8ff; /* Blue */ - --base0E: #e799ff; /* Purple */ - --base0F: #b3684f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #98c379; /* Green */ + --dnd-indicator: #fa7883; /* Red */ + --idle-indicator: #ff9470; /* Yellow */ + --streaming-indicator: #e799ff; /* Purple */ + + /* accent colors */ + --accent-1: #6bb8ff; /* links */ + --accent-2: #e799ff; /* general unread/mention elements */ + --accent-3: #6bb8ff; /* accent buttons */ + --accent-4: #8af5ff; /* accent buttons when hovered */ + --accent-5: #98c379; /* accent buttons when clicked */ + --mention: rgba(231, 153, 255, 0.1); + --mention-hover: rgba(231, 153, 255, 0.2); + + /* text colors */ + --text-0: #22273d; /* text on colored elements */ + --text-1: #ffffff; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #ffffff; /* normal text */ + --text-4: #c8c8c8; /* icon buttons and channels */ + --text-5: #878d96; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #525866; /* dark buttons when clicked */ + --bg-2: #374059; /* dark buttons */ + --bg-3: #525866; /* spacing, secondary elements */ + --bg-4: #22273d; /* main background color */ + --hover: #525866; /* channels and buttons when hovered */ + --active: #878d96; /* channels and buttons when selected */ + --message-hover: rgba(55, 64, 89, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-da-one-white b/build/base16-da-one-white index 4e6362f..52cbae9 100644 --- a/build/base16-da-one-white +++ b/build/base16-da-one-white @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #ffffff; /* Black */ - --base01: #c8c8c8; /* Bright Black */ - --base02: #888888; /* Grey */ - --base03: #585858; /* Brighter Grey */ - --base04: #282828; /* Bright Grey */ - --base05: #181818; /* White */ - --base06: #000000; /* Brighter White */ - --base07: #000000; /* Bright White */ - --base08: #de5d6e; /* Red */ - --base09: #ff9470; /* Orange */ - --base0A: #b3684f; /* Yellow */ - --base0B: #76a85d; /* Green */ - --base0C: #64b5a7; /* Cyan */ - --base0D: #5890f8; /* Blue */ - --base0E: #c173d1; /* Purple */ - --base0F: #b3684f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #76a85d; /* Green */ + --dnd-indicator: #de5d6e; /* Red */ + --idle-indicator: #b3684f; /* Yellow */ + --streaming-indicator: #c173d1; /* Purple */ + + /* accent colors */ + --accent-1: #5890f8; /* links */ + --accent-2: #c173d1; /* general unread/mention elements */ + --accent-3: #5890f8; /* accent buttons */ + --accent-4: #64b5a7; /* accent buttons when hovered */ + --accent-5: #76a85d; /* accent buttons when clicked */ + --mention: rgba(193, 115, 209, 0.1); + --mention-hover: rgba(193, 115, 209, 0.2); + + /* text colors */ + --text-0: #ffffff; /* text on colored elements */ + --text-1: #181818; /* primary white-ish text */ + --text-2: #000000; /* headings */ + --text-3: #181818; /* normal text */ + --text-4: #282828; /* icon buttons and channels */ + --text-5: #585858; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #888888; /* dark buttons when clicked */ + --bg-2: #c8c8c8; /* dark buttons */ + --bg-3: #888888; /* spacing, secondary elements */ + --bg-4: #ffffff; /* main background color */ + --hover: #888888; /* channels and buttons when hovered */ + --active: #585858; /* channels and buttons when selected */ + --message-hover: rgba(200, 200, 200, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-danqing b/build/base16-danqing index 57986d5..58973f8 100644 --- a/build/base16-danqing +++ b/build/base16-danqing @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2d302f; /* Black */ - --base01: #434846; /* Bright Black */ - --base02: #5a605d; /* Grey */ - --base03: #9da8a3; /* Brighter Grey */ - --base04: #cad8d2; /* Bright Grey */ - --base05: #e0f0ef; /* White */ - --base06: #ecf6f2; /* Brighter White */ - --base07: #fcfefd; /* Bright White */ - --base08: #f9906f; /* Red */ - --base09: #b38a61; /* Orange */ - --base0A: #f0c239; /* Yellow */ - --base0B: #8ab361; /* Green */ - --base0C: #30dff3; /* Cyan */ - --base0D: #b0a4e3; /* Blue */ - --base0E: #cca4e3; /* Purple */ - --base0F: #ca6924; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #8ab361; /* Green */ + --dnd-indicator: #f9906f; /* Red */ + --idle-indicator: #f0c239; /* Yellow */ + --streaming-indicator: #cca4e3; /* Purple */ + + /* accent colors */ + --accent-1: #b0a4e3; /* links */ + --accent-2: #cca4e3; /* general unread/mention elements */ + --accent-3: #b0a4e3; /* accent buttons */ + --accent-4: #30dff3; /* accent buttons when hovered */ + --accent-5: #8ab361; /* accent buttons when clicked */ + --mention: rgba(204, 164, 227, 0.1); + --mention-hover: rgba(204, 164, 227, 0.2); + + /* text colors */ + --text-0: #2d302f; /* text on colored elements */ + --text-1: #e0f0ef; /* primary white-ish text */ + --text-2: #fcfefd; /* headings */ + --text-3: #e0f0ef; /* normal text */ + --text-4: #cad8d2; /* icon buttons and channels */ + --text-5: #9da8a3; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #5a605d; /* dark buttons when clicked */ + --bg-2: #434846; /* dark buttons */ + --bg-3: #5a605d; /* spacing, secondary elements */ + --bg-4: #2d302f; /* main background color */ + --hover: #5a605d; /* channels and buttons when hovered */ + --active: #9da8a3; /* channels and buttons when selected */ + --message-hover: rgba(67, 72, 70, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-danqing-light b/build/base16-danqing-light index e9888dc..a65fa24 100644 --- a/build/base16-danqing-light +++ b/build/base16-danqing-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fcfefd; /* Black */ - --base01: #ecf6f2; /* Bright Black */ - --base02: #e0f0ef; /* Grey */ - --base03: #cad8d2; /* Brighter Grey */ - --base04: #9da8a3; /* Bright Grey */ - --base05: #5a605d; /* White */ - --base06: #434846; /* Brighter White */ - --base07: #2d302f; /* Bright White */ - --base08: #f9906f; /* Red */ - --base09: #b38a61; /* Orange */ - --base0A: #f0c239; /* Yellow */ - --base0B: #8ab361; /* Green */ - --base0C: #30dff3; /* Cyan */ - --base0D: #b0a4e3; /* Blue */ - --base0E: #cca4e3; /* Purple */ - --base0F: #ca6924; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #8ab361; /* Green */ + --dnd-indicator: #f9906f; /* Red */ + --idle-indicator: #f0c239; /* Yellow */ + --streaming-indicator: #cca4e3; /* Purple */ + + /* accent colors */ + --accent-1: #b0a4e3; /* links */ + --accent-2: #cca4e3; /* general unread/mention elements */ + --accent-3: #b0a4e3; /* accent buttons */ + --accent-4: #30dff3; /* accent buttons when hovered */ + --accent-5: #8ab361; /* accent buttons when clicked */ + --mention: rgba(204, 164, 227, 0.1); + --mention-hover: rgba(204, 164, 227, 0.2); + + /* text colors */ + --text-0: #fcfefd; /* text on colored elements */ + --text-1: #5a605d; /* primary white-ish text */ + --text-2: #2d302f; /* headings */ + --text-3: #5a605d; /* normal text */ + --text-4: #9da8a3; /* icon buttons and channels */ + --text-5: #cad8d2; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #e0f0ef; /* dark buttons when clicked */ + --bg-2: #ecf6f2; /* dark buttons */ + --bg-3: #e0f0ef; /* spacing, secondary elements */ + --bg-4: #fcfefd; /* main background color */ + --hover: #e0f0ef; /* channels and buttons when hovered */ + --active: #cad8d2; /* channels and buttons when selected */ + --message-hover: rgba(236, 246, 242, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-darcula b/build/base16-darcula index 2e3bf28..e1c0a22 100644 --- a/build/base16-darcula +++ b/build/base16-darcula @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2b2b2b; /* Black */ - --base01: #323232; /* Bright Black */ - --base02: #323232; /* Grey */ - --base03: #606366; /* Brighter Grey */ - --base04: #a4a3a3; /* Bright Grey */ - --base05: #a9b7c6; /* White */ - --base06: #ffc66d; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #4eade5; /* Red */ - --base09: #689757; /* Orange */ - --base0A: #bbb529; /* Yellow */ - --base0B: #6a8759; /* Green */ - --base0C: #629755; /* Cyan */ - --base0D: #9876aa; /* Blue */ - --base0E: #cc7832; /* Purple */ - --base0F: #808080; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #6a8759; /* Green */ + --dnd-indicator: #4eade5; /* Red */ + --idle-indicator: #bbb529; /* Yellow */ + --streaming-indicator: #cc7832; /* Purple */ + + /* accent colors */ + --accent-1: #9876aa; /* links */ + --accent-2: #cc7832; /* general unread/mention elements */ + --accent-3: #9876aa; /* accent buttons */ + --accent-4: #629755; /* accent buttons when hovered */ + --accent-5: #6a8759; /* accent buttons when clicked */ + --mention: rgba(204, 120, 50, 0.1); + --mention-hover: rgba(204, 120, 50, 0.2); + + /* text colors */ + --text-0: #2b2b2b; /* text on colored elements */ + --text-1: #a9b7c6; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #a9b7c6; /* normal text */ + --text-4: #a4a3a3; /* icon buttons and channels */ + --text-5: #606366; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #323232; /* dark buttons when clicked */ + --bg-2: #323232; /* dark buttons */ + --bg-3: #323232; /* spacing, secondary elements */ + --bg-4: #2b2b2b; /* main background color */ + --hover: #323232; /* channels and buttons when hovered */ + --active: #606366; /* channels and buttons when selected */ + --message-hover: rgba(50, 50, 50, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-darkmoss b/build/base16-darkmoss index 77cf2ed..a3ee0c5 100644 --- a/build/base16-darkmoss +++ b/build/base16-darkmoss @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #171e1f; /* Black */ - --base01: #252c2d; /* Bright Black */ - --base02: #373c3d; /* Grey */ - --base03: #555e5f; /* Brighter Grey */ - --base04: #818f80; /* Bright Grey */ - --base05: #c7c7a5; /* White */ - --base06: #e3e3c8; /* Brighter White */ - --base07: #e1eaef; /* Bright White */ - --base08: #ff4658; /* Red */ - --base09: #e6db74; /* Orange */ - --base0A: #fdb11f; /* Yellow */ - --base0B: #499180; /* Green */ - --base0C: #66d9ef; /* Cyan */ - --base0D: #498091; /* Blue */ - --base0E: #9bc0c8; /* Purple */ - --base0F: #d27b53; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #499180; /* Green */ + --dnd-indicator: #ff4658; /* Red */ + --idle-indicator: #fdb11f; /* Yellow */ + --streaming-indicator: #9bc0c8; /* Purple */ + + /* accent colors */ + --accent-1: #498091; /* links */ + --accent-2: #9bc0c8; /* general unread/mention elements */ + --accent-3: #498091; /* accent buttons */ + --accent-4: #66d9ef; /* accent buttons when hovered */ + --accent-5: #499180; /* accent buttons when clicked */ + --mention: rgba(155, 192, 200, 0.1); + --mention-hover: rgba(155, 192, 200, 0.2); + + /* text colors */ + --text-0: #171e1f; /* text on colored elements */ + --text-1: #c7c7a5; /* primary white-ish text */ + --text-2: #e1eaef; /* headings */ + --text-3: #c7c7a5; /* normal text */ + --text-4: #818f80; /* icon buttons and channels */ + --text-5: #555e5f; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #373c3d; /* dark buttons when clicked */ + --bg-2: #252c2d; /* dark buttons */ + --bg-3: #373c3d; /* spacing, secondary elements */ + --bg-4: #171e1f; /* main background color */ + --hover: #373c3d; /* channels and buttons when hovered */ + --active: #555e5f; /* channels and buttons when selected */ + --message-hover: rgba(37, 44, 45, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-darktooth b/build/base16-darktooth index 6499808..7e8d135 100644 --- a/build/base16-darktooth +++ b/build/base16-darktooth @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1d2021; /* Black */ - --base01: #32302f; /* Bright Black */ - --base02: #504945; /* Grey */ - --base03: #665c54; /* Brighter Grey */ - --base04: #928374; /* Bright Grey */ - --base05: #a89984; /* White */ - --base06: #d5c4a1; /* Brighter White */ - --base07: #fdf4c1; /* Bright White */ - --base08: #fb543f; /* Red */ - --base09: #fe8625; /* Orange */ - --base0A: #fac03b; /* Yellow */ - --base0B: #95c085; /* Green */ - --base0C: #8ba59b; /* Cyan */ - --base0D: #0d6678; /* Blue */ - --base0E: #8f4673; /* Purple */ - --base0F: #a87322; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #95c085; /* Green */ + --dnd-indicator: #fb543f; /* Red */ + --idle-indicator: #fac03b; /* Yellow */ + --streaming-indicator: #8f4673; /* Purple */ + + /* accent colors */ + --accent-1: #0d6678; /* links */ + --accent-2: #8f4673; /* general unread/mention elements */ + --accent-3: #0d6678; /* accent buttons */ + --accent-4: #8ba59b; /* accent buttons when hovered */ + --accent-5: #95c085; /* accent buttons when clicked */ + --mention: rgba(143, 70, 115, 0.1); + --mention-hover: rgba(143, 70, 115, 0.2); + + /* text colors */ + --text-0: #1d2021; /* text on colored elements */ + --text-1: #a89984; /* primary white-ish text */ + --text-2: #fdf4c1; /* headings */ + --text-3: #a89984; /* normal text */ + --text-4: #928374; /* icon buttons and channels */ + --text-5: #665c54; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #504945; /* dark buttons when clicked */ + --bg-2: #32302f; /* dark buttons */ + --bg-3: #504945; /* spacing, secondary elements */ + --bg-4: #1d2021; /* main background color */ + --hover: #504945; /* channels and buttons when hovered */ + --active: #665c54; /* channels and buttons when selected */ + --message-hover: rgba(50, 48, 47, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-darkviolet b/build/base16-darkviolet index b919f4f..fa73cea 100644 --- a/build/base16-darkviolet +++ b/build/base16-darkviolet @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #231a40; /* Bright Black */ - --base02: #432d59; /* Grey */ - --base03: #593380; /* Brighter Grey */ - --base04: #00ff00; /* Bright Grey */ - --base05: #b08ae6; /* White */ - --base06: #9045e6; /* Brighter White */ - --base07: #a366ff; /* Bright White */ - --base08: #a82ee6; /* Red */ - --base09: #bb66cc; /* Orange */ - --base0A: #f29df2; /* Yellow */ - --base0B: #4595e6; /* Green */ - --base0C: #40dfff; /* Cyan */ - --base0D: #4136d9; /* Blue */ - --base0E: #7e5ce6; /* Purple */ - --base0F: #a886bf; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #4595e6; /* Green */ + --dnd-indicator: #a82ee6; /* Red */ + --idle-indicator: #f29df2; /* Yellow */ + --streaming-indicator: #7e5ce6; /* Purple */ + + /* accent colors */ + --accent-1: #4136d9; /* links */ + --accent-2: #7e5ce6; /* general unread/mention elements */ + --accent-3: #4136d9; /* accent buttons */ + --accent-4: #40dfff; /* accent buttons when hovered */ + --accent-5: #4595e6; /* accent buttons when clicked */ + --mention: rgba(126, 92, 230, 0.1); + --mention-hover: rgba(126, 92, 230, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #b08ae6; /* primary white-ish text */ + --text-2: #a366ff; /* headings */ + --text-3: #b08ae6; /* normal text */ + --text-4: #00ff00; /* icon buttons and channels */ + --text-5: #593380; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #432d59; /* dark buttons when clicked */ + --bg-2: #231a40; /* dark buttons */ + --bg-3: #432d59; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #432d59; /* channels and buttons when hovered */ + --active: #593380; /* channels and buttons when selected */ + --message-hover: rgba(35, 26, 64, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-decaf b/build/base16-decaf index 826ec36..480fb8d 100644 --- a/build/base16-decaf +++ b/build/base16-decaf @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2d2d2d; /* Black */ - --base01: #393939; /* Bright Black */ - --base02: #515151; /* Grey */ - --base03: #777777; /* Brighter Grey */ - --base04: #b4b7b4; /* Bright Grey */ - --base05: #cccccc; /* White */ - --base06: #e0e0e0; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #ff7f7b; /* Red */ - --base09: #ffbf70; /* Orange */ - --base0A: #ffd67c; /* Yellow */ - --base0B: #beda78; /* Green */ - --base0C: #bed6ff; /* Cyan */ - --base0D: #90bee1; /* Blue */ - --base0E: #efb3f7; /* Purple */ - --base0F: #ff93b3; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #beda78; /* Green */ + --dnd-indicator: #ff7f7b; /* Red */ + --idle-indicator: #ffd67c; /* Yellow */ + --streaming-indicator: #efb3f7; /* Purple */ + + /* accent colors */ + --accent-1: #90bee1; /* links */ + --accent-2: #efb3f7; /* general unread/mention elements */ + --accent-3: #90bee1; /* accent buttons */ + --accent-4: #bed6ff; /* accent buttons when hovered */ + --accent-5: #beda78; /* accent buttons when clicked */ + --mention: rgba(239, 179, 247, 0.1); + --mention-hover: rgba(239, 179, 247, 0.2); + + /* text colors */ + --text-0: #2d2d2d; /* text on colored elements */ + --text-1: #cccccc; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #cccccc; /* normal text */ + --text-4: #b4b7b4; /* icon buttons and channels */ + --text-5: #777777; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #515151; /* dark buttons when clicked */ + --bg-2: #393939; /* dark buttons */ + --bg-3: #515151; /* spacing, secondary elements */ + --bg-4: #2d2d2d; /* main background color */ + --hover: #515151; /* channels and buttons when hovered */ + --active: #777777; /* channels and buttons when selected */ + --message-hover: rgba(57, 57, 57, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-deep-oceanic-next b/build/base16-deep-oceanic-next index 82925ad..5ae09a0 100644 --- a/build/base16-deep-oceanic-next +++ b/build/base16-deep-oceanic-next @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #001c1f; /* Black */ - --base01: #002931; /* Bright Black */ - --base02: #003640; /* Grey */ - --base03: #004852; /* Brighter Grey */ - --base04: #0093a3; /* Bright Grey */ - --base05: #d4e1e8; /* White */ - --base06: #e0e9ef; /* Brighter White */ - --base07: #f2f7f9; /* Bright White */ - --base08: #d3464d; /* Red */ - --base09: #e37552; /* Orange */ - --base0A: #f3b863; /* Yellow */ - --base0B: #63b784; /* Green */ - --base0C: #4fb7ae; /* Cyan */ - --base0D: #568ccf; /* Blue */ - --base0E: #8b66d6; /* Purple */ - --base0F: #d0658e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #63b784; /* Green */ + --dnd-indicator: #d3464d; /* Red */ + --idle-indicator: #f3b863; /* Yellow */ + --streaming-indicator: #8b66d6; /* Purple */ + + /* accent colors */ + --accent-1: #568ccf; /* links */ + --accent-2: #8b66d6; /* general unread/mention elements */ + --accent-3: #568ccf; /* accent buttons */ + --accent-4: #4fb7ae; /* accent buttons when hovered */ + --accent-5: #63b784; /* accent buttons when clicked */ + --mention: rgba(139, 102, 214, 0.1); + --mention-hover: rgba(139, 102, 214, 0.2); + + /* text colors */ + --text-0: #001c1f; /* text on colored elements */ + --text-1: #d4e1e8; /* primary white-ish text */ + --text-2: #f2f7f9; /* headings */ + --text-3: #d4e1e8; /* normal text */ + --text-4: #0093a3; /* icon buttons and channels */ + --text-5: #004852; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #003640; /* dark buttons when clicked */ + --bg-2: #002931; /* dark buttons */ + --bg-3: #003640; /* spacing, secondary elements */ + --bg-4: #001c1f; /* main background color */ + --hover: #003640; /* channels and buttons when hovered */ + --active: #004852; /* channels and buttons when selected */ + --message-hover: rgba(0, 41, 49, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-default-dark b/build/base16-default-dark index f02edb5..e74369b 100644 --- a/build/base16-default-dark +++ b/build/base16-default-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #181818; /* Black */ - --base01: #282828; /* Bright Black */ - --base02: #383838; /* Grey */ - --base03: #585858; /* Brighter Grey */ - --base04: #b8b8b8; /* Bright Grey */ - --base05: #d8d8d8; /* White */ - --base06: #e8e8e8; /* Brighter White */ - --base07: #f8f8f8; /* Bright White */ - --base08: #ab4642; /* Red */ - --base09: #dc9656; /* Orange */ - --base0A: #f7ca88; /* Yellow */ - --base0B: #a1b56c; /* Green */ - --base0C: #86c1b9; /* Cyan */ - --base0D: #7cafc2; /* Blue */ - --base0E: #ba8baf; /* Purple */ - --base0F: #a16946; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a1b56c; /* Green */ + --dnd-indicator: #ab4642; /* Red */ + --idle-indicator: #f7ca88; /* Yellow */ + --streaming-indicator: #ba8baf; /* Purple */ + + /* accent colors */ + --accent-1: #7cafc2; /* links */ + --accent-2: #ba8baf; /* general unread/mention elements */ + --accent-3: #7cafc2; /* accent buttons */ + --accent-4: #86c1b9; /* accent buttons when hovered */ + --accent-5: #a1b56c; /* accent buttons when clicked */ + --mention: rgba(186, 139, 175, 0.1); + --mention-hover: rgba(186, 139, 175, 0.2); + + /* text colors */ + --text-0: #181818; /* text on colored elements */ + --text-1: #d8d8d8; /* primary white-ish text */ + --text-2: #f8f8f8; /* headings */ + --text-3: #d8d8d8; /* normal text */ + --text-4: #b8b8b8; /* icon buttons and channels */ + --text-5: #585858; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #383838; /* dark buttons when clicked */ + --bg-2: #282828; /* dark buttons */ + --bg-3: #383838; /* spacing, secondary elements */ + --bg-4: #181818; /* main background color */ + --hover: #383838; /* channels and buttons when hovered */ + --active: #585858; /* channels and buttons when selected */ + --message-hover: rgba(40, 40, 40, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-default-light b/build/base16-default-light index 7616b28..a2e4551 100644 --- a/build/base16-default-light +++ b/build/base16-default-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f8f8f8; /* Black */ - --base01: #e8e8e8; /* Bright Black */ - --base02: #d8d8d8; /* Grey */ - --base03: #b8b8b8; /* Brighter Grey */ - --base04: #585858; /* Bright Grey */ - --base05: #383838; /* White */ - --base06: #282828; /* Brighter White */ - --base07: #181818; /* Bright White */ - --base08: #ab4642; /* Red */ - --base09: #dc9656; /* Orange */ - --base0A: #f7ca88; /* Yellow */ - --base0B: #a1b56c; /* Green */ - --base0C: #86c1b9; /* Cyan */ - --base0D: #7cafc2; /* Blue */ - --base0E: #ba8baf; /* Purple */ - --base0F: #a16946; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a1b56c; /* Green */ + --dnd-indicator: #ab4642; /* Red */ + --idle-indicator: #f7ca88; /* Yellow */ + --streaming-indicator: #ba8baf; /* Purple */ + + /* accent colors */ + --accent-1: #7cafc2; /* links */ + --accent-2: #ba8baf; /* general unread/mention elements */ + --accent-3: #7cafc2; /* accent buttons */ + --accent-4: #86c1b9; /* accent buttons when hovered */ + --accent-5: #a1b56c; /* accent buttons when clicked */ + --mention: rgba(186, 139, 175, 0.1); + --mention-hover: rgba(186, 139, 175, 0.2); + + /* text colors */ + --text-0: #f8f8f8; /* text on colored elements */ + --text-1: #383838; /* primary white-ish text */ + --text-2: #181818; /* headings */ + --text-3: #383838; /* normal text */ + --text-4: #585858; /* icon buttons and channels */ + --text-5: #b8b8b8; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d8d8d8; /* dark buttons when clicked */ + --bg-2: #e8e8e8; /* dark buttons */ + --bg-3: #d8d8d8; /* spacing, secondary elements */ + --bg-4: #f8f8f8; /* main background color */ + --hover: #d8d8d8; /* channels and buttons when hovered */ + --active: #b8b8b8; /* channels and buttons when selected */ + --message-hover: rgba(232, 232, 232, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-digital-rain b/build/base16-digital-rain index 22bbbec..559f2b5 100644 --- a/build/base16-digital-rain +++ b/build/base16-digital-rain @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #4a806c; /* Bright Black */ - --base02: #4a8d7e; /* Grey */ - --base03: #7c8d7c; /* Brighter Grey */ - --base04: #919893; /* Bright Grey */ - --base05: #00ff00; /* White */ - --base06: #c4cec4; /* Brighter White */ - --base07: #d8e2dc; /* Bright White */ - --base08: #c85a46; /* Red */ - --base09: #c86428; /* Orange */ - --base0A: #a67a50; /* Yellow */ - --base0B: #64c83c; /* Green */ - --base0C: #468c78; /* Cyan */ - --base0D: #5482af; /* Blue */ - --base0E: #9472b4; /* Purple */ - --base0F: #b37c5e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #64c83c; /* Green */ + --dnd-indicator: #c85a46; /* Red */ + --idle-indicator: #a67a50; /* Yellow */ + --streaming-indicator: #9472b4; /* Purple */ + + /* accent colors */ + --accent-1: #5482af; /* links */ + --accent-2: #9472b4; /* general unread/mention elements */ + --accent-3: #5482af; /* accent buttons */ + --accent-4: #468c78; /* accent buttons when hovered */ + --accent-5: #64c83c; /* accent buttons when clicked */ + --mention: rgba(148, 114, 180, 0.1); + --mention-hover: rgba(148, 114, 180, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #00ff00; /* primary white-ish text */ + --text-2: #d8e2dc; /* headings */ + --text-3: #00ff00; /* normal text */ + --text-4: #919893; /* icon buttons and channels */ + --text-5: #7c8d7c; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #4a8d7e; /* dark buttons when clicked */ + --bg-2: #4a806c; /* dark buttons */ + --bg-3: #4a8d7e; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #4a8d7e; /* channels and buttons when hovered */ + --active: #7c8d7c; /* channels and buttons when selected */ + --message-hover: rgba(74, 128, 108, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-dirtysea b/build/base16-dirtysea index c309e3b..0f1ba24 100644 --- a/build/base16-dirtysea +++ b/build/base16-dirtysea @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #e0e0e0; /* Black */ - --base01: #d0dad0; /* Bright Black */ - --base02: #d0d0d0; /* Grey */ - --base03: #707070; /* Brighter Grey */ - --base04: #202020; /* Bright Grey */ - --base05: #000000; /* White */ - --base06: #f8f8f8; /* Brighter White */ - --base07: #c4d9c4; /* Bright White */ - --base08: #840000; /* Red */ - --base09: #006565; /* Orange */ - --base0A: #755b00; /* Yellow */ - --base0B: #730073; /* Green */ - --base0C: #755b00; /* Cyan */ - --base0D: #007300; /* Blue */ - --base0E: #000090; /* Purple */ - --base0F: #755b00; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #730073; /* Green */ + --dnd-indicator: #840000; /* Red */ + --idle-indicator: #755b00; /* Yellow */ + --streaming-indicator: #000090; /* Purple */ + + /* accent colors */ + --accent-1: #007300; /* links */ + --accent-2: #000090; /* general unread/mention elements */ + --accent-3: #007300; /* accent buttons */ + --accent-4: #755b00; /* accent buttons when hovered */ + --accent-5: #730073; /* accent buttons when clicked */ + --mention: rgba(0, 0, 144, 0.1); + --mention-hover: rgba(0, 0, 144, 0.2); + + /* text colors */ + --text-0: #e0e0e0; /* text on colored elements */ + --text-1: #000000; /* primary white-ish text */ + --text-2: #c4d9c4; /* headings */ + --text-3: #000000; /* normal text */ + --text-4: #202020; /* icon buttons and channels */ + --text-5: #707070; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d0d0d0; /* dark buttons when clicked */ + --bg-2: #d0dad0; /* dark buttons */ + --bg-3: #d0d0d0; /* spacing, secondary elements */ + --bg-4: #e0e0e0; /* main background color */ + --hover: #d0d0d0; /* channels and buttons when hovered */ + --active: #707070; /* channels and buttons when selected */ + --message-hover: rgba(208, 218, 208, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-dracula b/build/base16-dracula index 4c7135a..0d4d040 100644 --- a/build/base16-dracula +++ b/build/base16-dracula @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #282a36; /* Black */ - --base01: #363447; /* Bright Black */ - --base02: #44475a; /* Grey */ - --base03: #6272a4; /* Brighter Grey */ - --base04: #9ea8c7; /* Bright Grey */ - --base05: #f8f8f2; /* White */ - --base06: #f0f1f4; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #ff5555; /* Red */ - --base09: #ffb86c; /* Orange */ - --base0A: #f1fa8c; /* Yellow */ - --base0B: #50fa7b; /* Green */ - --base0C: #8be9fd; /* Cyan */ - --base0D: #80bfff; /* Blue */ - --base0E: #ff79c6; /* Purple */ - --base0F: #bd93f9; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #50fa7b; /* Green */ + --dnd-indicator: #ff5555; /* Red */ + --idle-indicator: #f1fa8c; /* Yellow */ + --streaming-indicator: #ff79c6; /* Purple */ + + /* accent colors */ + --accent-1: #80bfff; /* links */ + --accent-2: #ff79c6; /* general unread/mention elements */ + --accent-3: #80bfff; /* accent buttons */ + --accent-4: #8be9fd; /* accent buttons when hovered */ + --accent-5: #50fa7b; /* accent buttons when clicked */ + --mention: rgba(255, 121, 198, 0.1); + --mention-hover: rgba(255, 121, 198, 0.2); + + /* text colors */ + --text-0: #282a36; /* text on colored elements */ + --text-1: #f8f8f2; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #f8f8f2; /* normal text */ + --text-4: #9ea8c7; /* icon buttons and channels */ + --text-5: #6272a4; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #44475a; /* dark buttons when clicked */ + --bg-2: #363447; /* dark buttons */ + --bg-3: #44475a; /* spacing, secondary elements */ + --bg-4: #282a36; /* main background color */ + --hover: #44475a; /* channels and buttons when hovered */ + --active: #6272a4; /* channels and buttons when selected */ + --message-hover: rgba(54, 52, 71, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-edge-dark b/build/base16-edge-dark index 38d71b9..3c6d6a4 100644 --- a/build/base16-edge-dark +++ b/build/base16-edge-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #262729; /* Black */ - --base01: #313235; /* Bright Black */ - --base02: #3d3f42; /* Grey */ - --base03: #4a4c4f; /* Brighter Grey */ - --base04: #95989d; /* Bright Grey */ - --base05: #afb2b5; /* White */ - --base06: #caccce; /* Brighter White */ - --base07: #e4e5e6; /* Bright White */ - --base08: #e77171; /* Red */ - --base09: #eba31a; /* Orange */ - --base0A: #dbb774; /* Yellow */ - --base0B: #a1bf78; /* Green */ - --base0C: #5ebaa5; /* Cyan */ - --base0D: #73b3e7; /* Blue */ - --base0E: #d390e7; /* Purple */ - --base0F: #5ebaa5; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a1bf78; /* Green */ + --dnd-indicator: #e77171; /* Red */ + --idle-indicator: #dbb774; /* Yellow */ + --streaming-indicator: #d390e7; /* Purple */ + + /* accent colors */ + --accent-1: #73b3e7; /* links */ + --accent-2: #d390e7; /* general unread/mention elements */ + --accent-3: #73b3e7; /* accent buttons */ + --accent-4: #5ebaa5; /* accent buttons when hovered */ + --accent-5: #a1bf78; /* accent buttons when clicked */ + --mention: rgba(211, 144, 231, 0.1); + --mention-hover: rgba(211, 144, 231, 0.2); + + /* text colors */ + --text-0: #262729; /* text on colored elements */ + --text-1: #afb2b5; /* primary white-ish text */ + --text-2: #e4e5e6; /* headings */ + --text-3: #afb2b5; /* normal text */ + --text-4: #95989d; /* icon buttons and channels */ + --text-5: #4a4c4f; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3d3f42; /* dark buttons when clicked */ + --bg-2: #313235; /* dark buttons */ + --bg-3: #3d3f42; /* spacing, secondary elements */ + --bg-4: #262729; /* main background color */ + --hover: #3d3f42; /* channels and buttons when hovered */ + --active: #4a4c4f; /* channels and buttons when selected */ + --message-hover: rgba(49, 50, 53, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-edge-light b/build/base16-edge-light index c28f433..d2740f6 100644 --- a/build/base16-edge-light +++ b/build/base16-edge-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fafafa; /* Black */ - --base01: #e3e5e8; /* Bright Black */ - --base02: #acb1b9; /* Grey */ - --base03: #9197a1; /* Brighter Grey */ - --base04: #5e646f; /* Bright Grey */ - --base05: #474752; /* White */ - --base06: #3a3a46; /* Brighter White */ - --base07: #2e2e38; /* Bright White */ - --base08: #db7070; /* Red */ - --base09: #eba31a; /* Orange */ - --base0A: #ebcc1a; /* Yellow */ - --base0B: #7c9f4b; /* Green */ - --base0C: #509c93; /* Cyan */ - --base0D: #6587bf; /* Blue */ - --base0E: #b870ce; /* Purple */ - --base0F: #509c93; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #7c9f4b; /* Green */ + --dnd-indicator: #db7070; /* Red */ + --idle-indicator: #ebcc1a; /* Yellow */ + --streaming-indicator: #b870ce; /* Purple */ + + /* accent colors */ + --accent-1: #6587bf; /* links */ + --accent-2: #b870ce; /* general unread/mention elements */ + --accent-3: #6587bf; /* accent buttons */ + --accent-4: #509c93; /* accent buttons when hovered */ + --accent-5: #7c9f4b; /* accent buttons when clicked */ + --mention: rgba(184, 112, 206, 0.1); + --mention-hover: rgba(184, 112, 206, 0.2); + + /* text colors */ + --text-0: #fafafa; /* text on colored elements */ + --text-1: #474752; /* primary white-ish text */ + --text-2: #2e2e38; /* headings */ + --text-3: #474752; /* normal text */ + --text-4: #5e646f; /* icon buttons and channels */ + --text-5: #9197a1; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #acb1b9; /* dark buttons when clicked */ + --bg-2: #e3e5e8; /* dark buttons */ + --bg-3: #acb1b9; /* spacing, secondary elements */ + --bg-4: #fafafa; /* main background color */ + --hover: #acb1b9; /* channels and buttons when hovered */ + --active: #9197a1; /* channels and buttons when selected */ + --message-hover: rgba(227, 229, 232, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-eighties b/build/base16-eighties index 06e4c2b..e74ebd8 100644 --- a/build/base16-eighties +++ b/build/base16-eighties @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2d2d2d; /* Black */ - --base01: #393939; /* Bright Black */ - --base02: #515151; /* Grey */ - --base03: #747369; /* Brighter Grey */ - --base04: #a09f93; /* Bright Grey */ - --base05: #d3d0c8; /* White */ - --base06: #e8e6df; /* Brighter White */ - --base07: #f2f0ec; /* Bright White */ - --base08: #f2777a; /* Red */ - --base09: #f99157; /* Orange */ - --base0A: #ffcc66; /* Yellow */ - --base0B: #99cc99; /* Green */ - --base0C: #66cccc; /* Cyan */ - --base0D: #6699cc; /* Blue */ - --base0E: #cc99cc; /* Purple */ - --base0F: #d27b53; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #99cc99; /* Green */ + --dnd-indicator: #f2777a; /* Red */ + --idle-indicator: #ffcc66; /* Yellow */ + --streaming-indicator: #cc99cc; /* Purple */ + + /* accent colors */ + --accent-1: #6699cc; /* links */ + --accent-2: #cc99cc; /* general unread/mention elements */ + --accent-3: #6699cc; /* accent buttons */ + --accent-4: #66cccc; /* accent buttons when hovered */ + --accent-5: #99cc99; /* accent buttons when clicked */ + --mention: rgba(204, 153, 204, 0.1); + --mention-hover: rgba(204, 153, 204, 0.2); + + /* text colors */ + --text-0: #2d2d2d; /* text on colored elements */ + --text-1: #d3d0c8; /* primary white-ish text */ + --text-2: #f2f0ec; /* headings */ + --text-3: #d3d0c8; /* normal text */ + --text-4: #a09f93; /* icon buttons and channels */ + --text-5: #747369; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #515151; /* dark buttons when clicked */ + --bg-2: #393939; /* dark buttons */ + --bg-3: #515151; /* spacing, secondary elements */ + --bg-4: #2d2d2d; /* main background color */ + --hover: #515151; /* channels and buttons when hovered */ + --active: #747369; /* channels and buttons when selected */ + --message-hover: rgba(57, 57, 57, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-eldritch b/build/base16-eldritch index 4cd7f3a..5578256 100644 --- a/build/base16-eldritch +++ b/build/base16-eldritch @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #212337; /* Black */ - --base01: #323449; /* Bright Black */ - --base02: #3b4261; /* Grey */ - --base03: #7081d0; /* Brighter Grey */ - --base04: #a1abe0; /* Bright Grey */ - --base05: #ebfafa; /* White */ - --base06: #f0f2f4; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #f16c75; /* Red */ - --base09: #f7c67f; /* Orange */ - --base0A: #f1fc79; /* Yellow */ - --base0B: #37f499; /* Green */ - --base0C: #04d1f9; /* Cyan */ - --base0D: #39ddfd; /* Blue */ - --base0E: #a48cf2; /* Purple */ - --base0F: #f265b5; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #37f499; /* Green */ + --dnd-indicator: #f16c75; /* Red */ + --idle-indicator: #f1fc79; /* Yellow */ + --streaming-indicator: #a48cf2; /* Purple */ + + /* accent colors */ + --accent-1: #39ddfd; /* links */ + --accent-2: #a48cf2; /* general unread/mention elements */ + --accent-3: #39ddfd; /* accent buttons */ + --accent-4: #04d1f9; /* accent buttons when hovered */ + --accent-5: #37f499; /* accent buttons when clicked */ + --mention: rgba(164, 140, 242, 0.1); + --mention-hover: rgba(164, 140, 242, 0.2); + + /* text colors */ + --text-0: #212337; /* text on colored elements */ + --text-1: #ebfafa; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #ebfafa; /* normal text */ + --text-4: #a1abe0; /* icon buttons and channels */ + --text-5: #7081d0; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3b4261; /* dark buttons when clicked */ + --bg-2: #323449; /* dark buttons */ + --bg-3: #3b4261; /* spacing, secondary elements */ + --bg-4: #212337; /* main background color */ + --hover: #3b4261; /* channels and buttons when hovered */ + --active: #7081d0; /* channels and buttons when selected */ + --message-hover: rgba(50, 52, 73, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-embers b/build/base16-embers index 59cce0b..20eab0a 100644 --- a/build/base16-embers +++ b/build/base16-embers @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #16130f; /* Black */ - --base01: #2c2620; /* Bright Black */ - --base02: #433b32; /* Grey */ - --base03: #5a5047; /* Brighter Grey */ - --base04: #8a8075; /* Bright Grey */ - --base05: #a39a90; /* White */ - --base06: #beb6ae; /* Brighter White */ - --base07: #dbd6d1; /* Bright White */ - --base08: #826d57; /* Red */ - --base09: #828257; /* Orange */ - --base0A: #6d8257; /* Yellow */ - --base0B: #57826d; /* Green */ - --base0C: #576d82; /* Cyan */ - --base0D: #6d5782; /* Blue */ - --base0E: #82576d; /* Purple */ - --base0F: #825757; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #57826d; /* Green */ + --dnd-indicator: #826d57; /* Red */ + --idle-indicator: #6d8257; /* Yellow */ + --streaming-indicator: #82576d; /* Purple */ + + /* accent colors */ + --accent-1: #6d5782; /* links */ + --accent-2: #82576d; /* general unread/mention elements */ + --accent-3: #6d5782; /* accent buttons */ + --accent-4: #576d82; /* accent buttons when hovered */ + --accent-5: #57826d; /* accent buttons when clicked */ + --mention: rgba(130, 87, 109, 0.1); + --mention-hover: rgba(130, 87, 109, 0.2); + + /* text colors */ + --text-0: #16130f; /* text on colored elements */ + --text-1: #a39a90; /* primary white-ish text */ + --text-2: #dbd6d1; /* headings */ + --text-3: #a39a90; /* normal text */ + --text-4: #8a8075; /* icon buttons and channels */ + --text-5: #5a5047; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #433b32; /* dark buttons when clicked */ + --bg-2: #2c2620; /* dark buttons */ + --bg-3: #433b32; /* spacing, secondary elements */ + --bg-4: #16130f; /* main background color */ + --hover: #433b32; /* channels and buttons when hovered */ + --active: #5a5047; /* channels and buttons when selected */ + --message-hover: rgba(44, 38, 32, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-embers-light b/build/base16-embers-light index ed1ea91..8618394 100644 --- a/build/base16-embers-light +++ b/build/base16-embers-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #d1d6db; /* Black */ - --base01: #aeb6be; /* Bright Black */ - --base02: #909aa3; /* Grey */ - --base03: #75808a; /* Brighter Grey */ - --base04: #47505a; /* Bright Grey */ - --base05: #323b43; /* White */ - --base06: #20262c; /* Brighter White */ - --base07: #0f1316; /* Bright White */ - --base08: #576d82; /* Red */ - --base09: #578282; /* Orange */ - --base0A: #57826d; /* Yellow */ - --base0B: #6d8257; /* Green */ - --base0C: #826d57; /* Cyan */ - --base0D: #82576d; /* Blue */ - --base0E: #6d5782; /* Purple */ - --base0F: #575782; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #6d8257; /* Green */ + --dnd-indicator: #576d82; /* Red */ + --idle-indicator: #57826d; /* Yellow */ + --streaming-indicator: #6d5782; /* Purple */ + + /* accent colors */ + --accent-1: #82576d; /* links */ + --accent-2: #6d5782; /* general unread/mention elements */ + --accent-3: #82576d; /* accent buttons */ + --accent-4: #826d57; /* accent buttons when hovered */ + --accent-5: #6d8257; /* accent buttons when clicked */ + --mention: rgba(109, 87, 130, 0.1); + --mention-hover: rgba(109, 87, 130, 0.2); + + /* text colors */ + --text-0: #d1d6db; /* text on colored elements */ + --text-1: #323b43; /* primary white-ish text */ + --text-2: #0f1316; /* headings */ + --text-3: #323b43; /* normal text */ + --text-4: #47505a; /* icon buttons and channels */ + --text-5: #75808a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #909aa3; /* dark buttons when clicked */ + --bg-2: #aeb6be; /* dark buttons */ + --bg-3: #909aa3; /* spacing, secondary elements */ + --bg-4: #d1d6db; /* main background color */ + --hover: #909aa3; /* channels and buttons when hovered */ + --active: #75808a; /* channels and buttons when selected */ + --message-hover: rgba(174, 182, 190, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-emil b/build/base16-emil index 6668dd4..79a36a0 100644 --- a/build/base16-emil +++ b/build/base16-emil @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #efefef; /* Black */ - --base01: #bebed2; /* Bright Black */ - --base02: #9e9eaf; /* Grey */ - --base03: #7c7c98; /* Brighter Grey */ - --base04: #505063; /* Bright Grey */ - --base05: #313145; /* White */ - --base06: #22223a; /* Brighter White */ - --base07: #1a1a2f; /* Bright White */ - --base08: #f43979; /* Red */ - --base09: #d22a8b; /* Orange */ - --base0A: #ff669b; /* Yellow */ - --base0B: #0073a8; /* Green */ - --base0C: #2155d6; /* Cyan */ - --base0D: #471397; /* Blue */ - --base0E: #6916b6; /* Purple */ - --base0F: #8d17a5; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #0073a8; /* Green */ + --dnd-indicator: #f43979; /* Red */ + --idle-indicator: #ff669b; /* Yellow */ + --streaming-indicator: #6916b6; /* Purple */ + + /* accent colors */ + --accent-1: #471397; /* links */ + --accent-2: #6916b6; /* general unread/mention elements */ + --accent-3: #471397; /* accent buttons */ + --accent-4: #2155d6; /* accent buttons when hovered */ + --accent-5: #0073a8; /* accent buttons when clicked */ + --mention: rgba(105, 22, 182, 0.1); + --mention-hover: rgba(105, 22, 182, 0.2); + + /* text colors */ + --text-0: #efefef; /* text on colored elements */ + --text-1: #313145; /* primary white-ish text */ + --text-2: #1a1a2f; /* headings */ + --text-3: #313145; /* normal text */ + --text-4: #505063; /* icon buttons and channels */ + --text-5: #7c7c98; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #9e9eaf; /* dark buttons when clicked */ + --bg-2: #bebed2; /* dark buttons */ + --bg-3: #9e9eaf; /* spacing, secondary elements */ + --bg-4: #efefef; /* main background color */ + --hover: #9e9eaf; /* channels and buttons when hovered */ + --active: #7c7c98; /* channels and buttons when selected */ + --message-hover: rgba(190, 190, 210, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-equilibrium-dark b/build/base16-equilibrium-dark index c1d6dc2..b4bfc66 100644 --- a/build/base16-equilibrium-dark +++ b/build/base16-equilibrium-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #0c1118; /* Black */ - --base01: #181c22; /* Bright Black */ - --base02: #22262d; /* Grey */ - --base03: #7b776e; /* Brighter Grey */ - --base04: #949088; /* Bright Grey */ - --base05: #afaba2; /* White */ - --base06: #cac6bd; /* Brighter White */ - --base07: #e7e2d9; /* Bright White */ - --base08: #f04339; /* Red */ - --base09: #df5923; /* Orange */ - --base0A: #bb8801; /* Yellow */ - --base0B: #7f8b00; /* Green */ - --base0C: #00948b; /* Cyan */ - --base0D: #008dd1; /* Blue */ - --base0E: #6a7fd2; /* Purple */ - --base0F: #e3488e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #7f8b00; /* Green */ + --dnd-indicator: #f04339; /* Red */ + --idle-indicator: #bb8801; /* Yellow */ + --streaming-indicator: #6a7fd2; /* Purple */ + + /* accent colors */ + --accent-1: #008dd1; /* links */ + --accent-2: #6a7fd2; /* general unread/mention elements */ + --accent-3: #008dd1; /* accent buttons */ + --accent-4: #00948b; /* accent buttons when hovered */ + --accent-5: #7f8b00; /* accent buttons when clicked */ + --mention: rgba(106, 127, 210, 0.1); + --mention-hover: rgba(106, 127, 210, 0.2); + + /* text colors */ + --text-0: #0c1118; /* text on colored elements */ + --text-1: #afaba2; /* primary white-ish text */ + --text-2: #e7e2d9; /* headings */ + --text-3: #afaba2; /* normal text */ + --text-4: #949088; /* icon buttons and channels */ + --text-5: #7b776e; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #22262d; /* dark buttons when clicked */ + --bg-2: #181c22; /* dark buttons */ + --bg-3: #22262d; /* spacing, secondary elements */ + --bg-4: #0c1118; /* main background color */ + --hover: #22262d; /* channels and buttons when hovered */ + --active: #7b776e; /* channels and buttons when selected */ + --message-hover: rgba(24, 28, 34, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-equilibrium-gray-dark b/build/base16-equilibrium-gray-dark index bb446b7..164fd43 100644 --- a/build/base16-equilibrium-gray-dark +++ b/build/base16-equilibrium-gray-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #111111; /* Black */ - --base01: #1b1b1b; /* Bright Black */ - --base02: #262626; /* Grey */ - --base03: #777777; /* Brighter Grey */ - --base04: #919191; /* Bright Grey */ - --base05: #ababab; /* White */ - --base06: #c6c6c6; /* Brighter White */ - --base07: #e2e2e2; /* Bright White */ - --base08: #f04339; /* Red */ - --base09: #df5923; /* Orange */ - --base0A: #bb8801; /* Yellow */ - --base0B: #7f8b00; /* Green */ - --base0C: #00948b; /* Cyan */ - --base0D: #008dd1; /* Blue */ - --base0E: #6a7fd2; /* Purple */ - --base0F: #e3488e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #7f8b00; /* Green */ + --dnd-indicator: #f04339; /* Red */ + --idle-indicator: #bb8801; /* Yellow */ + --streaming-indicator: #6a7fd2; /* Purple */ + + /* accent colors */ + --accent-1: #008dd1; /* links */ + --accent-2: #6a7fd2; /* general unread/mention elements */ + --accent-3: #008dd1; /* accent buttons */ + --accent-4: #00948b; /* accent buttons when hovered */ + --accent-5: #7f8b00; /* accent buttons when clicked */ + --mention: rgba(106, 127, 210, 0.1); + --mention-hover: rgba(106, 127, 210, 0.2); + + /* text colors */ + --text-0: #111111; /* text on colored elements */ + --text-1: #ababab; /* primary white-ish text */ + --text-2: #e2e2e2; /* headings */ + --text-3: #ababab; /* normal text */ + --text-4: #919191; /* icon buttons and channels */ + --text-5: #777777; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #262626; /* dark buttons when clicked */ + --bg-2: #1b1b1b; /* dark buttons */ + --bg-3: #262626; /* spacing, secondary elements */ + --bg-4: #111111; /* main background color */ + --hover: #262626; /* channels and buttons when hovered */ + --active: #777777; /* channels and buttons when selected */ + --message-hover: rgba(27, 27, 27, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-equilibrium-gray-light b/build/base16-equilibrium-gray-light index acf722c..bab6dde 100644 --- a/build/base16-equilibrium-gray-light +++ b/build/base16-equilibrium-gray-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f1f1f1; /* Black */ - --base01: #e2e2e2; /* Bright Black */ - --base02: #d4d4d4; /* Grey */ - --base03: #777777; /* Brighter Grey */ - --base04: #5e5e5e; /* Bright Grey */ - --base05: #474747; /* White */ - --base06: #303030; /* Brighter White */ - --base07: #1b1b1b; /* Bright White */ - --base08: #d02023; /* Red */ - --base09: #bf3e05; /* Orange */ - --base0A: #9d6f00; /* Yellow */ - --base0B: #637200; /* Green */ - --base0C: #007a72; /* Cyan */ - --base0D: #0073b5; /* Blue */ - --base0E: #4e66b6; /* Purple */ - --base0F: #c42775; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #637200; /* Green */ + --dnd-indicator: #d02023; /* Red */ + --idle-indicator: #9d6f00; /* Yellow */ + --streaming-indicator: #4e66b6; /* Purple */ + + /* accent colors */ + --accent-1: #0073b5; /* links */ + --accent-2: #4e66b6; /* general unread/mention elements */ + --accent-3: #0073b5; /* accent buttons */ + --accent-4: #007a72; /* accent buttons when hovered */ + --accent-5: #637200; /* accent buttons when clicked */ + --mention: rgba(78, 102, 182, 0.1); + --mention-hover: rgba(78, 102, 182, 0.2); + + /* text colors */ + --text-0: #f1f1f1; /* text on colored elements */ + --text-1: #474747; /* primary white-ish text */ + --text-2: #1b1b1b; /* headings */ + --text-3: #474747; /* normal text */ + --text-4: #5e5e5e; /* icon buttons and channels */ + --text-5: #777777; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d4d4d4; /* dark buttons when clicked */ + --bg-2: #e2e2e2; /* dark buttons */ + --bg-3: #d4d4d4; /* spacing, secondary elements */ + --bg-4: #f1f1f1; /* main background color */ + --hover: #d4d4d4; /* channels and buttons when hovered */ + --active: #777777; /* channels and buttons when selected */ + --message-hover: rgba(226, 226, 226, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-equilibrium-light b/build/base16-equilibrium-light index b4122c8..525c3c6 100644 --- a/build/base16-equilibrium-light +++ b/build/base16-equilibrium-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f5f0e7; /* Black */ - --base01: #e7e2d9; /* Bright Black */ - --base02: #d8d4cb; /* Grey */ - --base03: #73777f; /* Brighter Grey */ - --base04: #5a5f66; /* Bright Grey */ - --base05: #43474e; /* White */ - --base06: #2c3138; /* Brighter White */ - --base07: #181c22; /* Bright White */ - --base08: #d02023; /* Red */ - --base09: #bf3e05; /* Orange */ - --base0A: #9d6f00; /* Yellow */ - --base0B: #637200; /* Green */ - --base0C: #007a72; /* Cyan */ - --base0D: #0073b5; /* Blue */ - --base0E: #4e66b6; /* Purple */ - --base0F: #c42775; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #637200; /* Green */ + --dnd-indicator: #d02023; /* Red */ + --idle-indicator: #9d6f00; /* Yellow */ + --streaming-indicator: #4e66b6; /* Purple */ + + /* accent colors */ + --accent-1: #0073b5; /* links */ + --accent-2: #4e66b6; /* general unread/mention elements */ + --accent-3: #0073b5; /* accent buttons */ + --accent-4: #007a72; /* accent buttons when hovered */ + --accent-5: #637200; /* accent buttons when clicked */ + --mention: rgba(78, 102, 182, 0.1); + --mention-hover: rgba(78, 102, 182, 0.2); + + /* text colors */ + --text-0: #f5f0e7; /* text on colored elements */ + --text-1: #43474e; /* primary white-ish text */ + --text-2: #181c22; /* headings */ + --text-3: #43474e; /* normal text */ + --text-4: #5a5f66; /* icon buttons and channels */ + --text-5: #73777f; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d8d4cb; /* dark buttons when clicked */ + --bg-2: #e7e2d9; /* dark buttons */ + --bg-3: #d8d4cb; /* spacing, secondary elements */ + --bg-4: #f5f0e7; /* main background color */ + --hover: #d8d4cb; /* channels and buttons when hovered */ + --active: #73777f; /* channels and buttons when selected */ + --message-hover: rgba(231, 226, 217, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-eris b/build/base16-eris index 00ccaab..71f556f 100644 --- a/build/base16-eris +++ b/build/base16-eris @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #0a0920; /* Black */ - --base01: #13133a; /* Bright Black */ - --base02: #23255a; /* Grey */ - --base03: #333773; /* Brighter Grey */ - --base04: #4a5293; /* Bright Grey */ - --base05: #606bac; /* White */ - --base06: #7986c5; /* Brighter White */ - --base07: #9aaae5; /* Bright White */ - --base08: #f768a3; /* Red */ - --base09: #f78968; /* Orange */ - --base0A: #f7d668; /* Yellow */ - --base0B: #a2faa8; /* Green */ - --base0C: #a2faf0; /* Cyan */ - --base0D: #258fc4; /* Blue */ - --base0E: #c368f7; /* Purple */ - --base0F: #b85600; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a2faa8; /* Green */ + --dnd-indicator: #f768a3; /* Red */ + --idle-indicator: #f7d668; /* Yellow */ + --streaming-indicator: #c368f7; /* Purple */ + + /* accent colors */ + --accent-1: #258fc4; /* links */ + --accent-2: #c368f7; /* general unread/mention elements */ + --accent-3: #258fc4; /* accent buttons */ + --accent-4: #a2faf0; /* accent buttons when hovered */ + --accent-5: #a2faa8; /* accent buttons when clicked */ + --mention: rgba(195, 104, 247, 0.1); + --mention-hover: rgba(195, 104, 247, 0.2); + + /* text colors */ + --text-0: #0a0920; /* text on colored elements */ + --text-1: #606bac; /* primary white-ish text */ + --text-2: #9aaae5; /* headings */ + --text-3: #606bac; /* normal text */ + --text-4: #4a5293; /* icon buttons and channels */ + --text-5: #333773; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #23255a; /* dark buttons when clicked */ + --bg-2: #13133a; /* dark buttons */ + --bg-3: #23255a; /* spacing, secondary elements */ + --bg-4: #0a0920; /* main background color */ + --hover: #23255a; /* channels and buttons when hovered */ + --active: #333773; /* channels and buttons when selected */ + --message-hover: rgba(19, 19, 58, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-espresso b/build/base16-espresso index 7e04e70..d860e01 100644 --- a/build/base16-espresso +++ b/build/base16-espresso @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2d2d2d; /* Black */ - --base01: #393939; /* Bright Black */ - --base02: #515151; /* Grey */ - --base03: #777777; /* Brighter Grey */ - --base04: #b4b7b4; /* Bright Grey */ - --base05: #cccccc; /* White */ - --base06: #e0e0e0; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #d25252; /* Red */ - --base09: #f9a959; /* Orange */ - --base0A: #ffc66d; /* Yellow */ - --base0B: #a5c261; /* Green */ - --base0C: #bed6ff; /* Cyan */ - --base0D: #6c99bb; /* Blue */ - --base0E: #d197d9; /* Purple */ - --base0F: #f97394; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a5c261; /* Green */ + --dnd-indicator: #d25252; /* Red */ + --idle-indicator: #ffc66d; /* Yellow */ + --streaming-indicator: #d197d9; /* Purple */ + + /* accent colors */ + --accent-1: #6c99bb; /* links */ + --accent-2: #d197d9; /* general unread/mention elements */ + --accent-3: #6c99bb; /* accent buttons */ + --accent-4: #bed6ff; /* accent buttons when hovered */ + --accent-5: #a5c261; /* accent buttons when clicked */ + --mention: rgba(209, 151, 217, 0.1); + --mention-hover: rgba(209, 151, 217, 0.2); + + /* text colors */ + --text-0: #2d2d2d; /* text on colored elements */ + --text-1: #cccccc; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #cccccc; /* normal text */ + --text-4: #b4b7b4; /* icon buttons and channels */ + --text-5: #777777; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #515151; /* dark buttons when clicked */ + --bg-2: #393939; /* dark buttons */ + --bg-3: #515151; /* spacing, secondary elements */ + --bg-4: #2d2d2d; /* main background color */ + --hover: #515151; /* channels and buttons when hovered */ + --active: #777777; /* channels and buttons when selected */ + --message-hover: rgba(57, 57, 57, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-eva b/build/base16-eva index 6cc861f..da25721 100644 --- a/build/base16-eva +++ b/build/base16-eva @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2a3b4d; /* Black */ - --base01: #3d566f; /* Bright Black */ - --base02: #4b6988; /* Grey */ - --base03: #55799c; /* Brighter Grey */ - --base04: #7e90a3; /* Bright Grey */ - --base05: #9fa2a6; /* White */ - --base06: #d6d7d9; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #c4676c; /* Red */ - --base09: #ff9966; /* Orange */ - --base0A: #ffff66; /* Yellow */ - --base0B: #66ff66; /* Green */ - --base0C: #4b8f77; /* Cyan */ - --base0D: #15f4ee; /* Blue */ - --base0E: #9c6cd3; /* Purple */ - --base0F: #bb64a9; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #66ff66; /* Green */ + --dnd-indicator: #c4676c; /* Red */ + --idle-indicator: #ffff66; /* Yellow */ + --streaming-indicator: #9c6cd3; /* Purple */ + + /* accent colors */ + --accent-1: #15f4ee; /* links */ + --accent-2: #9c6cd3; /* general unread/mention elements */ + --accent-3: #15f4ee; /* accent buttons */ + --accent-4: #4b8f77; /* accent buttons when hovered */ + --accent-5: #66ff66; /* accent buttons when clicked */ + --mention: rgba(156, 108, 211, 0.1); + --mention-hover: rgba(156, 108, 211, 0.2); + + /* text colors */ + --text-0: #2a3b4d; /* text on colored elements */ + --text-1: #9fa2a6; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #9fa2a6; /* normal text */ + --text-4: #7e90a3; /* icon buttons and channels */ + --text-5: #55799c; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #4b6988; /* dark buttons when clicked */ + --bg-2: #3d566f; /* dark buttons */ + --bg-3: #4b6988; /* spacing, secondary elements */ + --bg-4: #2a3b4d; /* main background color */ + --hover: #4b6988; /* channels and buttons when hovered */ + --active: #55799c; /* channels and buttons when selected */ + --message-hover: rgba(61, 86, 111, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-eva-dim b/build/base16-eva-dim index 5e6c15c..1bb727e 100644 --- a/build/base16-eva-dim +++ b/build/base16-eva-dim @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2a3b4d; /* Black */ - --base01: #3d566f; /* Bright Black */ - --base02: #4b6988; /* Grey */ - --base03: #55799c; /* Brighter Grey */ - --base04: #7e90a3; /* Bright Grey */ - --base05: #9fa2a6; /* White */ - --base06: #d6d7d9; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #c4676c; /* Red */ - --base09: #ff9966; /* Orange */ - --base0A: #cfd05d; /* Yellow */ - --base0B: #5de561; /* Green */ - --base0C: #4b8f77; /* Cyan */ - --base0D: #1ae1dc; /* Blue */ - --base0E: #9c6cd3; /* Purple */ - --base0F: #bb64a9; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #5de561; /* Green */ + --dnd-indicator: #c4676c; /* Red */ + --idle-indicator: #cfd05d; /* Yellow */ + --streaming-indicator: #9c6cd3; /* Purple */ + + /* accent colors */ + --accent-1: #1ae1dc; /* links */ + --accent-2: #9c6cd3; /* general unread/mention elements */ + --accent-3: #1ae1dc; /* accent buttons */ + --accent-4: #4b8f77; /* accent buttons when hovered */ + --accent-5: #5de561; /* accent buttons when clicked */ + --mention: rgba(156, 108, 211, 0.1); + --mention-hover: rgba(156, 108, 211, 0.2); + + /* text colors */ + --text-0: #2a3b4d; /* text on colored elements */ + --text-1: #9fa2a6; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #9fa2a6; /* normal text */ + --text-4: #7e90a3; /* icon buttons and channels */ + --text-5: #55799c; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #4b6988; /* dark buttons when clicked */ + --bg-2: #3d566f; /* dark buttons */ + --bg-3: #4b6988; /* spacing, secondary elements */ + --bg-4: #2a3b4d; /* main background color */ + --hover: #4b6988; /* channels and buttons when hovered */ + --active: #55799c; /* channels and buttons when selected */ + --message-hover: rgba(61, 86, 111, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-evenok-dark b/build/base16-evenok-dark index 14ed220..e58498c 100644 --- a/build/base16-evenok-dark +++ b/build/base16-evenok-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #202020; /* Bright Black */ - --base02: #303030; /* Grey */ - --base03: #505050; /* Brighter Grey */ - --base04: #b0b0b0; /* Bright Grey */ - --base05: #d0d0d0; /* White */ - --base06: #e0e0e0; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #f5708a; /* Red */ - --base09: #ee8122; /* Orange */ - --base0A: #b8a300; /* Yellow */ - --base0B: #54bc5c; /* Green */ - --base0C: #00bab3; /* Cyan */ - --base0D: #00aff2; /* Blue */ - --base0E: #9095ff; /* Purple */ - --base0F: #d47ada; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #54bc5c; /* Green */ + --dnd-indicator: #f5708a; /* Red */ + --idle-indicator: #b8a300; /* Yellow */ + --streaming-indicator: #9095ff; /* Purple */ + + /* accent colors */ + --accent-1: #00aff2; /* links */ + --accent-2: #9095ff; /* general unread/mention elements */ + --accent-3: #00aff2; /* accent buttons */ + --accent-4: #00bab3; /* accent buttons when hovered */ + --accent-5: #54bc5c; /* accent buttons when clicked */ + --mention: rgba(144, 149, 255, 0.1); + --mention-hover: rgba(144, 149, 255, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #d0d0d0; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #d0d0d0; /* normal text */ + --text-4: #b0b0b0; /* icon buttons and channels */ + --text-5: #505050; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #303030; /* dark buttons when clicked */ + --bg-2: #202020; /* dark buttons */ + --bg-3: #303030; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #303030; /* channels and buttons when hovered */ + --active: #505050; /* channels and buttons when selected */ + --message-hover: rgba(32, 32, 32, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-everforest b/build/base16-everforest index e92ee96..cba85f3 100644 --- a/build/base16-everforest +++ b/build/base16-everforest @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2d353b; /* Black */ - --base01: #343f44; /* Bright Black */ - --base02: #475258; /* Grey */ - --base03: #859289; /* Brighter Grey */ - --base04: #9da9a0; /* Bright Grey */ - --base05: #d3c6aa; /* White */ - --base06: #e6e2cc; /* Brighter White */ - --base07: #fdf6e3; /* Bright White */ - --base08: #e67e80; /* Red */ - --base09: #e69875; /* Orange */ - --base0A: #dbbc7f; /* Yellow */ - --base0B: #a7c080; /* Green */ - --base0C: #83c092; /* Cyan */ - --base0D: #7fbbb3; /* Blue */ - --base0E: #d699b6; /* Purple */ - --base0F: #9da9a0; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a7c080; /* Green */ + --dnd-indicator: #e67e80; /* Red */ + --idle-indicator: #dbbc7f; /* Yellow */ + --streaming-indicator: #d699b6; /* Purple */ + + /* accent colors */ + --accent-1: #7fbbb3; /* links */ + --accent-2: #d699b6; /* general unread/mention elements */ + --accent-3: #7fbbb3; /* accent buttons */ + --accent-4: #83c092; /* accent buttons when hovered */ + --accent-5: #a7c080; /* accent buttons when clicked */ + --mention: rgba(214, 153, 182, 0.1); + --mention-hover: rgba(214, 153, 182, 0.2); + + /* text colors */ + --text-0: #2d353b; /* text on colored elements */ + --text-1: #d3c6aa; /* primary white-ish text */ + --text-2: #fdf6e3; /* headings */ + --text-3: #d3c6aa; /* normal text */ + --text-4: #9da9a0; /* icon buttons and channels */ + --text-5: #859289; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #475258; /* dark buttons when clicked */ + --bg-2: #343f44; /* dark buttons */ + --bg-3: #475258; /* spacing, secondary elements */ + --bg-4: #2d353b; /* main background color */ + --hover: #475258; /* channels and buttons when hovered */ + --active: #859289; /* channels and buttons when selected */ + --message-hover: rgba(52, 63, 68, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-everforest-dark-hard b/build/base16-everforest-dark-hard index d3fc3ed..3a5c3a3 100644 --- a/build/base16-everforest-dark-hard +++ b/build/base16-everforest-dark-hard @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #272e33; /* Black */ - --base01: #2e383c; /* Bright Black */ - --base02: #414b50; /* Grey */ - --base03: #859289; /* Brighter Grey */ - --base04: #9da9a0; /* Bright Grey */ - --base05: #d3c6aa; /* White */ - --base06: #edeada; /* Brighter White */ - --base07: #fffbef; /* Bright White */ - --base08: #e67e80; /* Red */ - --base09: #e69875; /* Orange */ - --base0A: #dbbc7f; /* Yellow */ - --base0B: #a7c080; /* Green */ - --base0C: #83c092; /* Cyan */ - --base0D: #7fbbb3; /* Blue */ - --base0E: #d699b6; /* Purple */ - --base0F: #9da9a0; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a7c080; /* Green */ + --dnd-indicator: #e67e80; /* Red */ + --idle-indicator: #dbbc7f; /* Yellow */ + --streaming-indicator: #d699b6; /* Purple */ + + /* accent colors */ + --accent-1: #7fbbb3; /* links */ + --accent-2: #d699b6; /* general unread/mention elements */ + --accent-3: #7fbbb3; /* accent buttons */ + --accent-4: #83c092; /* accent buttons when hovered */ + --accent-5: #a7c080; /* accent buttons when clicked */ + --mention: rgba(214, 153, 182, 0.1); + --mention-hover: rgba(214, 153, 182, 0.2); + + /* text colors */ + --text-0: #272e33; /* text on colored elements */ + --text-1: #d3c6aa; /* primary white-ish text */ + --text-2: #fffbef; /* headings */ + --text-3: #d3c6aa; /* normal text */ + --text-4: #9da9a0; /* icon buttons and channels */ + --text-5: #859289; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #414b50; /* dark buttons when clicked */ + --bg-2: #2e383c; /* dark buttons */ + --bg-3: #414b50; /* spacing, secondary elements */ + --bg-4: #272e33; /* main background color */ + --hover: #414b50; /* channels and buttons when hovered */ + --active: #859289; /* channels and buttons when selected */ + --message-hover: rgba(46, 56, 60, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-everforest-dark-medium b/build/base16-everforest-dark-medium index 09d5649..652195b 100644 --- a/build/base16-everforest-dark-medium +++ b/build/base16-everforest-dark-medium @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2d353b; /* Black */ - --base01: #343f44; /* Bright Black */ - --base02: #3d484d; /* Grey */ - --base03: #475258; /* Brighter Grey */ - --base04: #7a8478; /* Bright Grey */ - --base05: #859289; /* White */ - --base06: #9da9a0; /* Brighter White */ - --base07: #d3c6aa; /* Bright White */ - --base08: #e67e80; /* Red */ - --base09: #e69875; /* Orange */ - --base0A: #dbbc7f; /* Yellow */ - --base0B: #a7c080; /* Green */ - --base0C: #83c092; /* Cyan */ - --base0D: #7fbbb3; /* Blue */ - --base0E: #d699b6; /* Purple */ - --base0F: #514045; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a7c080; /* Green */ + --dnd-indicator: #e67e80; /* Red */ + --idle-indicator: #dbbc7f; /* Yellow */ + --streaming-indicator: #d699b6; /* Purple */ + + /* accent colors */ + --accent-1: #7fbbb3; /* links */ + --accent-2: #d699b6; /* general unread/mention elements */ + --accent-3: #7fbbb3; /* accent buttons */ + --accent-4: #83c092; /* accent buttons when hovered */ + --accent-5: #a7c080; /* accent buttons when clicked */ + --mention: rgba(214, 153, 182, 0.1); + --mention-hover: rgba(214, 153, 182, 0.2); + + /* text colors */ + --text-0: #2d353b; /* text on colored elements */ + --text-1: #859289; /* primary white-ish text */ + --text-2: #d3c6aa; /* headings */ + --text-3: #859289; /* normal text */ + --text-4: #7a8478; /* icon buttons and channels */ + --text-5: #475258; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3d484d; /* dark buttons when clicked */ + --bg-2: #343f44; /* dark buttons */ + --bg-3: #3d484d; /* spacing, secondary elements */ + --bg-4: #2d353b; /* main background color */ + --hover: #3d484d; /* channels and buttons when hovered */ + --active: #475258; /* channels and buttons when selected */ + --message-hover: rgba(52, 63, 68, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-everforest-dark-soft b/build/base16-everforest-dark-soft index 6cbb502..524c120 100644 --- a/build/base16-everforest-dark-soft +++ b/build/base16-everforest-dark-soft @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #333c43; /* Black */ - --base01: #3a464c; /* Bright Black */ - --base02: #4d5960; /* Grey */ - --base03: #859289; /* Brighter Grey */ - --base04: #9da9a0; /* Bright Grey */ - --base05: #d3c6aa; /* White */ - --base06: #ddd8be; /* Brighter White */ - --base07: #f3ead3; /* Bright White */ - --base08: #e67e80; /* Red */ - --base09: #e69875; /* Orange */ - --base0A: #dbbc7f; /* Yellow */ - --base0B: #a7c080; /* Green */ - --base0C: #83c092; /* Cyan */ - --base0D: #7fbbb3; /* Blue */ - --base0E: #d699b6; /* Purple */ - --base0F: #9da9a0; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a7c080; /* Green */ + --dnd-indicator: #e67e80; /* Red */ + --idle-indicator: #dbbc7f; /* Yellow */ + --streaming-indicator: #d699b6; /* Purple */ + + /* accent colors */ + --accent-1: #7fbbb3; /* links */ + --accent-2: #d699b6; /* general unread/mention elements */ + --accent-3: #7fbbb3; /* accent buttons */ + --accent-4: #83c092; /* accent buttons when hovered */ + --accent-5: #a7c080; /* accent buttons when clicked */ + --mention: rgba(214, 153, 182, 0.1); + --mention-hover: rgba(214, 153, 182, 0.2); + + /* text colors */ + --text-0: #333c43; /* text on colored elements */ + --text-1: #d3c6aa; /* primary white-ish text */ + --text-2: #f3ead3; /* headings */ + --text-3: #d3c6aa; /* normal text */ + --text-4: #9da9a0; /* icon buttons and channels */ + --text-5: #859289; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #4d5960; /* dark buttons when clicked */ + --bg-2: #3a464c; /* dark buttons */ + --bg-3: #4d5960; /* spacing, secondary elements */ + --bg-4: #333c43; /* main background color */ + --hover: #4d5960; /* channels and buttons when hovered */ + --active: #859289; /* channels and buttons when selected */ + --message-hover: rgba(58, 70, 76, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-flat b/build/base16-flat index 410ab85..e90ef86 100644 --- a/build/base16-flat +++ b/build/base16-flat @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2c3e50; /* Black */ - --base01: #34495e; /* Bright Black */ - --base02: #7f8c8d; /* Grey */ - --base03: #95a5a6; /* Brighter Grey */ - --base04: #bdc3c7; /* Bright Grey */ - --base05: #e0e0e0; /* White */ - --base06: #f5f5f5; /* Brighter White */ - --base07: #ecf0f1; /* Bright White */ - --base08: #e74c3c; /* Red */ - --base09: #e67e22; /* Orange */ - --base0A: #f1c40f; /* Yellow */ - --base0B: #2ecc71; /* Green */ - --base0C: #1abc9c; /* Cyan */ - --base0D: #3498db; /* Blue */ - --base0E: #9b59b6; /* Purple */ - --base0F: #be643c; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #2ecc71; /* Green */ + --dnd-indicator: #e74c3c; /* Red */ + --idle-indicator: #f1c40f; /* Yellow */ + --streaming-indicator: #9b59b6; /* Purple */ + + /* accent colors */ + --accent-1: #3498db; /* links */ + --accent-2: #9b59b6; /* general unread/mention elements */ + --accent-3: #3498db; /* accent buttons */ + --accent-4: #1abc9c; /* accent buttons when hovered */ + --accent-5: #2ecc71; /* accent buttons when clicked */ + --mention: rgba(155, 89, 182, 0.1); + --mention-hover: rgba(155, 89, 182, 0.2); + + /* text colors */ + --text-0: #2c3e50; /* text on colored elements */ + --text-1: #e0e0e0; /* primary white-ish text */ + --text-2: #ecf0f1; /* headings */ + --text-3: #e0e0e0; /* normal text */ + --text-4: #bdc3c7; /* icon buttons and channels */ + --text-5: #95a5a6; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #7f8c8d; /* dark buttons when clicked */ + --bg-2: #34495e; /* dark buttons */ + --bg-3: #7f8c8d; /* spacing, secondary elements */ + --bg-4: #2c3e50; /* main background color */ + --hover: #7f8c8d; /* channels and buttons when hovered */ + --active: #95a5a6; /* channels and buttons when selected */ + --message-hover: rgba(52, 73, 94, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-flexoki-dark b/build/base16-flexoki-dark index d71b9b1..2b63a7c 100644 --- a/build/base16-flexoki-dark +++ b/build/base16-flexoki-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #100f0f; /* Black */ - --base01: #1c1b1a; /* Bright Black */ - --base02: #282726; /* Grey */ - --base03: #575653; /* Brighter Grey */ - --base04: #878580; /* Bright Grey */ - --base05: #cecdc3; /* White */ - --base06: #e6e4d9; /* Brighter White */ - --base07: #fffcf0; /* Bright White */ - --base08: #d14d41; /* Red */ - --base09: #da702c; /* Orange */ - --base0A: #d0a215; /* Yellow */ - --base0B: #879a39; /* Green */ - --base0C: #3aa99f; /* Cyan */ - --base0D: #4385be; /* Blue */ - --base0E: #8b7ec8; /* Purple */ - --base0F: #ce5d97; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #879a39; /* Green */ + --dnd-indicator: #d14d41; /* Red */ + --idle-indicator: #d0a215; /* Yellow */ + --streaming-indicator: #8b7ec8; /* Purple */ + + /* accent colors */ + --accent-1: #4385be; /* links */ + --accent-2: #8b7ec8; /* general unread/mention elements */ + --accent-3: #4385be; /* accent buttons */ + --accent-4: #3aa99f; /* accent buttons when hovered */ + --accent-5: #879a39; /* accent buttons when clicked */ + --mention: rgba(139, 126, 200, 0.1); + --mention-hover: rgba(139, 126, 200, 0.2); + + /* text colors */ + --text-0: #100f0f; /* text on colored elements */ + --text-1: #cecdc3; /* primary white-ish text */ + --text-2: #fffcf0; /* headings */ + --text-3: #cecdc3; /* normal text */ + --text-4: #878580; /* icon buttons and channels */ + --text-5: #575653; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #282726; /* dark buttons when clicked */ + --bg-2: #1c1b1a; /* dark buttons */ + --bg-3: #282726; /* spacing, secondary elements */ + --bg-4: #100f0f; /* main background color */ + --hover: #282726; /* channels and buttons when hovered */ + --active: #575653; /* channels and buttons when selected */ + --message-hover: rgba(28, 27, 26, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-flexoki-light b/build/base16-flexoki-light index 8b2436a..9aa0f71 100644 --- a/build/base16-flexoki-light +++ b/build/base16-flexoki-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fffcf0; /* Black */ - --base01: #f2f0e5; /* Bright Black */ - --base02: #e6e4d9; /* Grey */ - --base03: #cecdc3; /* Brighter Grey */ - --base04: #9f9d96; /* Bright Grey */ - --base05: #403e3c; /* White */ - --base06: #282726; /* Brighter White */ - --base07: #100f0f; /* Bright White */ - --base08: #af3029; /* Red */ - --base09: #bc5215; /* Orange */ - --base0A: #ad8301; /* Yellow */ - --base0B: #66800b; /* Green */ - --base0C: #24837b; /* Cyan */ - --base0D: #205ea6; /* Blue */ - --base0E: #5e409d; /* Purple */ - --base0F: #a02f6f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #66800b; /* Green */ + --dnd-indicator: #af3029; /* Red */ + --idle-indicator: #ad8301; /* Yellow */ + --streaming-indicator: #5e409d; /* Purple */ + + /* accent colors */ + --accent-1: #205ea6; /* links */ + --accent-2: #5e409d; /* general unread/mention elements */ + --accent-3: #205ea6; /* accent buttons */ + --accent-4: #24837b; /* accent buttons when hovered */ + --accent-5: #66800b; /* accent buttons when clicked */ + --mention: rgba(94, 64, 157, 0.1); + --mention-hover: rgba(94, 64, 157, 0.2); + + /* text colors */ + --text-0: #fffcf0; /* text on colored elements */ + --text-1: #403e3c; /* primary white-ish text */ + --text-2: #100f0f; /* headings */ + --text-3: #403e3c; /* normal text */ + --text-4: #9f9d96; /* icon buttons and channels */ + --text-5: #cecdc3; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #e6e4d9; /* dark buttons when clicked */ + --bg-2: #f2f0e5; /* dark buttons */ + --bg-3: #e6e4d9; /* spacing, secondary elements */ + --bg-4: #fffcf0; /* main background color */ + --hover: #e6e4d9; /* channels and buttons when hovered */ + --active: #cecdc3; /* channels and buttons when selected */ + --message-hover: rgba(242, 240, 229, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-framer b/build/base16-framer index cc5fa68..7364fd7 100644 --- a/build/base16-framer +++ b/build/base16-framer @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #181818; /* Black */ - --base01: #151515; /* Bright Black */ - --base02: #464646; /* Grey */ - --base03: #747474; /* Brighter Grey */ - --base04: #b9b9b9; /* Bright Grey */ - --base05: #d0d0d0; /* White */ - --base06: #e8e8e8; /* Brighter White */ - --base07: #eeeeee; /* Bright White */ - --base08: #fd886b; /* Red */ - --base09: #fc4769; /* Orange */ - --base0A: #fecb6e; /* Yellow */ - --base0B: #32ccdc; /* Green */ - --base0C: #acddfd; /* Cyan */ - --base0D: #20bcfc; /* Blue */ - --base0E: #ba8cfc; /* Purple */ - --base0F: #b15f4a; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #32ccdc; /* Green */ + --dnd-indicator: #fd886b; /* Red */ + --idle-indicator: #fecb6e; /* Yellow */ + --streaming-indicator: #ba8cfc; /* Purple */ + + /* accent colors */ + --accent-1: #20bcfc; /* links */ + --accent-2: #ba8cfc; /* general unread/mention elements */ + --accent-3: #20bcfc; /* accent buttons */ + --accent-4: #acddfd; /* accent buttons when hovered */ + --accent-5: #32ccdc; /* accent buttons when clicked */ + --mention: rgba(186, 140, 252, 0.1); + --mention-hover: rgba(186, 140, 252, 0.2); + + /* text colors */ + --text-0: #181818; /* text on colored elements */ + --text-1: #d0d0d0; /* primary white-ish text */ + --text-2: #eeeeee; /* headings */ + --text-3: #d0d0d0; /* normal text */ + --text-4: #b9b9b9; /* icon buttons and channels */ + --text-5: #747474; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #464646; /* dark buttons when clicked */ + --bg-2: #151515; /* dark buttons */ + --bg-3: #464646; /* spacing, secondary elements */ + --bg-4: #181818; /* main background color */ + --hover: #464646; /* channels and buttons when hovered */ + --active: #747474; /* channels and buttons when selected */ + --message-hover: rgba(21, 21, 21, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-fruit-soda b/build/base16-fruit-soda index e9ac534..390d769 100644 --- a/build/base16-fruit-soda +++ b/build/base16-fruit-soda @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f1ecf1; /* Black */ - --base01: #e0dee0; /* Bright Black */ - --base02: #d8d5d5; /* Grey */ - --base03: #b5b4b6; /* Brighter Grey */ - --base04: #979598; /* Bright Grey */ - --base05: #515151; /* White */ - --base06: #474545; /* Brighter White */ - --base07: #2d2c2c; /* Bright White */ - --base08: #fe3e31; /* Red */ - --base09: #fe6d08; /* Orange */ - --base0A: #f7e203; /* Yellow */ - --base0B: #47f74c; /* Green */ - --base0C: #0f9cfd; /* Cyan */ - --base0D: #2931df; /* Blue */ - --base0E: #611fce; /* Purple */ - --base0F: #b16f40; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #47f74c; /* Green */ + --dnd-indicator: #fe3e31; /* Red */ + --idle-indicator: #f7e203; /* Yellow */ + --streaming-indicator: #611fce; /* Purple */ + + /* accent colors */ + --accent-1: #2931df; /* links */ + --accent-2: #611fce; /* general unread/mention elements */ + --accent-3: #2931df; /* accent buttons */ + --accent-4: #0f9cfd; /* accent buttons when hovered */ + --accent-5: #47f74c; /* accent buttons when clicked */ + --mention: rgba(97, 31, 206, 0.1); + --mention-hover: rgba(97, 31, 206, 0.2); + + /* text colors */ + --text-0: #f1ecf1; /* text on colored elements */ + --text-1: #515151; /* primary white-ish text */ + --text-2: #2d2c2c; /* headings */ + --text-3: #515151; /* normal text */ + --text-4: #979598; /* icon buttons and channels */ + --text-5: #b5b4b6; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d8d5d5; /* dark buttons when clicked */ + --bg-2: #e0dee0; /* dark buttons */ + --bg-3: #d8d5d5; /* spacing, secondary elements */ + --bg-4: #f1ecf1; /* main background color */ + --hover: #d8d5d5; /* channels and buttons when hovered */ + --active: #b5b4b6; /* channels and buttons when selected */ + --message-hover: rgba(224, 222, 224, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gigavolt b/build/base16-gigavolt index 6a136e6..f6ed909 100644 --- a/build/base16-gigavolt +++ b/build/base16-gigavolt @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #202126; /* Black */ - --base01: #2d303d; /* Bright Black */ - --base02: #5a576e; /* Grey */ - --base03: #a1d2e6; /* Brighter Grey */ - --base04: #cad3ff; /* Bright Grey */ - --base05: #e9e7e1; /* White */ - --base06: #eff0f9; /* Brighter White */ - --base07: #f2fbff; /* Bright White */ - --base08: #ff661a; /* Red */ - --base09: #19f988; /* Orange */ - --base0A: #ffdc2d; /* Yellow */ - --base0B: #f2e6a9; /* Green */ - --base0C: #fb6acb; /* Cyan */ - --base0D: #40bfff; /* Blue */ - --base0E: #ae94f9; /* Purple */ - --base0F: #6187ff; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #f2e6a9; /* Green */ + --dnd-indicator: #ff661a; /* Red */ + --idle-indicator: #ffdc2d; /* Yellow */ + --streaming-indicator: #ae94f9; /* Purple */ + + /* accent colors */ + --accent-1: #40bfff; /* links */ + --accent-2: #ae94f9; /* general unread/mention elements */ + --accent-3: #40bfff; /* accent buttons */ + --accent-4: #fb6acb; /* accent buttons when hovered */ + --accent-5: #f2e6a9; /* accent buttons when clicked */ + --mention: rgba(174, 148, 249, 0.1); + --mention-hover: rgba(174, 148, 249, 0.2); + + /* text colors */ + --text-0: #202126; /* text on colored elements */ + --text-1: #e9e7e1; /* primary white-ish text */ + --text-2: #f2fbff; /* headings */ + --text-3: #e9e7e1; /* normal text */ + --text-4: #cad3ff; /* icon buttons and channels */ + --text-5: #a1d2e6; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #5a576e; /* dark buttons when clicked */ + --bg-2: #2d303d; /* dark buttons */ + --bg-3: #5a576e; /* spacing, secondary elements */ + --bg-4: #202126; /* main background color */ + --hover: #5a576e; /* channels and buttons when hovered */ + --active: #a1d2e6; /* channels and buttons when selected */ + --message-hover: rgba(45, 48, 61, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-github b/build/base16-github index 7ad6aac..e23416f 100644 --- a/build/base16-github +++ b/build/base16-github @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #eaeef2; /* Black */ - --base01: #d0d7de; /* Bright Black */ - --base02: #afb8c1; /* Grey */ - --base03: #8c959f; /* Brighter Grey */ - --base04: #6e7781; /* Bright Grey */ - --base05: #424a53; /* White */ - --base06: #32383f; /* Brighter White */ - --base07: #1f2328; /* Bright White */ - --base08: #fa4549; /* Red */ - --base09: #e16f24; /* Orange */ - --base0A: #bf8700; /* Yellow */ - --base0B: #2da44e; /* Green */ - --base0C: #339d9b; /* Cyan */ - --base0D: #218bff; /* Blue */ - --base0E: #a475f9; /* Purple */ - --base0F: #4d2d00; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #2da44e; /* Green */ + --dnd-indicator: #fa4549; /* Red */ + --idle-indicator: #bf8700; /* Yellow */ + --streaming-indicator: #a475f9; /* Purple */ + + /* accent colors */ + --accent-1: #218bff; /* links */ + --accent-2: #a475f9; /* general unread/mention elements */ + --accent-3: #218bff; /* accent buttons */ + --accent-4: #339d9b; /* accent buttons when hovered */ + --accent-5: #2da44e; /* accent buttons when clicked */ + --mention: rgba(164, 117, 249, 0.1); + --mention-hover: rgba(164, 117, 249, 0.2); + + /* text colors */ + --text-0: #eaeef2; /* text on colored elements */ + --text-1: #424a53; /* primary white-ish text */ + --text-2: #1f2328; /* headings */ + --text-3: #424a53; /* normal text */ + --text-4: #6e7781; /* icon buttons and channels */ + --text-5: #8c959f; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #afb8c1; /* dark buttons when clicked */ + --bg-2: #d0d7de; /* dark buttons */ + --bg-3: #afb8c1; /* spacing, secondary elements */ + --bg-4: #eaeef2; /* main background color */ + --hover: #afb8c1; /* channels and buttons when hovered */ + --active: #8c959f; /* channels and buttons when selected */ + --message-hover: rgba(208, 215, 222, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-github-dark b/build/base16-github-dark index df04344..8413b64 100644 --- a/build/base16-github-dark +++ b/build/base16-github-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #161b22; /* Black */ - --base01: #30363d; /* Bright Black */ - --base02: #484f58; /* Grey */ - --base03: #6e7681; /* Brighter Grey */ - --base04: #8b949e; /* Bright Grey */ - --base05: #c9d1d9; /* White */ - --base06: #f0f6fc; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #f85149; /* Red */ - --base09: #db6d28; /* Orange */ - --base0A: #bb8009; /* Yellow */ - --base0B: #2ea043; /* Green */ - --base0C: #2a9d9a; /* Cyan */ - --base0D: #388bfd; /* Blue */ - --base0E: #a371f7; /* Purple */ - --base0F: #3d2f00; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #2ea043; /* Green */ + --dnd-indicator: #f85149; /* Red */ + --idle-indicator: #bb8009; /* Yellow */ + --streaming-indicator: #a371f7; /* Purple */ + + /* accent colors */ + --accent-1: #388bfd; /* links */ + --accent-2: #a371f7; /* general unread/mention elements */ + --accent-3: #388bfd; /* accent buttons */ + --accent-4: #2a9d9a; /* accent buttons when hovered */ + --accent-5: #2ea043; /* accent buttons when clicked */ + --mention: rgba(163, 113, 247, 0.1); + --mention-hover: rgba(163, 113, 247, 0.2); + + /* text colors */ + --text-0: #161b22; /* text on colored elements */ + --text-1: #c9d1d9; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #c9d1d9; /* normal text */ + --text-4: #8b949e; /* icon buttons and channels */ + --text-5: #6e7681; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #484f58; /* dark buttons when clicked */ + --bg-2: #30363d; /* dark buttons */ + --bg-3: #484f58; /* spacing, secondary elements */ + --bg-4: #161b22; /* main background color */ + --hover: #484f58; /* channels and buttons when hovered */ + --active: #6e7681; /* channels and buttons when selected */ + --message-hover: rgba(48, 54, 61, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-google-dark b/build/base16-google-dark index 44d8444..3cd4681 100644 --- a/build/base16-google-dark +++ b/build/base16-google-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1d1f21; /* Black */ - --base01: #282a2e; /* Bright Black */ - --base02: #373b41; /* Grey */ - --base03: #969896; /* Brighter Grey */ - --base04: #b4b7b4; /* Bright Grey */ - --base05: #c5c8c6; /* White */ - --base06: #e0e0e0; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #cc342b; /* Red */ - --base09: #f96a38; /* Orange */ - --base0A: #fba922; /* Yellow */ - --base0B: #198844; /* Green */ - --base0C: #3971ed; /* Cyan */ - --base0D: #3971ed; /* Blue */ - --base0E: #a36ac7; /* Purple */ - --base0F: #3971ed; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #198844; /* Green */ + --dnd-indicator: #cc342b; /* Red */ + --idle-indicator: #fba922; /* Yellow */ + --streaming-indicator: #a36ac7; /* Purple */ + + /* accent colors */ + --accent-1: #3971ed; /* links */ + --accent-2: #a36ac7; /* general unread/mention elements */ + --accent-3: #3971ed; /* accent buttons */ + --accent-4: #3971ed; /* accent buttons when hovered */ + --accent-5: #198844; /* accent buttons when clicked */ + --mention: rgba(163, 106, 199, 0.1); + --mention-hover: rgba(163, 106, 199, 0.2); + + /* text colors */ + --text-0: #1d1f21; /* text on colored elements */ + --text-1: #c5c8c6; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #c5c8c6; /* normal text */ + --text-4: #b4b7b4; /* icon buttons and channels */ + --text-5: #969896; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #373b41; /* dark buttons when clicked */ + --bg-2: #282a2e; /* dark buttons */ + --bg-3: #373b41; /* spacing, secondary elements */ + --bg-4: #1d1f21; /* main background color */ + --hover: #373b41; /* channels and buttons when hovered */ + --active: #969896; /* channels and buttons when selected */ + --message-hover: rgba(40, 42, 46, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-google-light b/build/base16-google-light index a50408c..742c051 100644 --- a/build/base16-google-light +++ b/build/base16-google-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #ffffff; /* Black */ - --base01: #e0e0e0; /* Bright Black */ - --base02: #c5c8c6; /* Grey */ - --base03: #b4b7b4; /* Brighter Grey */ - --base04: #969896; /* Bright Grey */ - --base05: #373b41; /* White */ - --base06: #282a2e; /* Brighter White */ - --base07: #1d1f21; /* Bright White */ - --base08: #cc342b; /* Red */ - --base09: #f96a38; /* Orange */ - --base0A: #fba922; /* Yellow */ - --base0B: #198844; /* Green */ - --base0C: #3971ed; /* Cyan */ - --base0D: #3971ed; /* Blue */ - --base0E: #a36ac7; /* Purple */ - --base0F: #3971ed; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #198844; /* Green */ + --dnd-indicator: #cc342b; /* Red */ + --idle-indicator: #fba922; /* Yellow */ + --streaming-indicator: #a36ac7; /* Purple */ + + /* accent colors */ + --accent-1: #3971ed; /* links */ + --accent-2: #a36ac7; /* general unread/mention elements */ + --accent-3: #3971ed; /* accent buttons */ + --accent-4: #3971ed; /* accent buttons when hovered */ + --accent-5: #198844; /* accent buttons when clicked */ + --mention: rgba(163, 106, 199, 0.1); + --mention-hover: rgba(163, 106, 199, 0.2); + + /* text colors */ + --text-0: #ffffff; /* text on colored elements */ + --text-1: #373b41; /* primary white-ish text */ + --text-2: #1d1f21; /* headings */ + --text-3: #373b41; /* normal text */ + --text-4: #969896; /* icon buttons and channels */ + --text-5: #b4b7b4; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #c5c8c6; /* dark buttons when clicked */ + --bg-2: #e0e0e0; /* dark buttons */ + --bg-3: #c5c8c6; /* spacing, secondary elements */ + --bg-4: #ffffff; /* main background color */ + --hover: #c5c8c6; /* channels and buttons when hovered */ + --active: #b4b7b4; /* channels and buttons when selected */ + --message-hover: rgba(224, 224, 224, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gotham b/build/base16-gotham index b6294a8..25ab7f9 100644 --- a/build/base16-gotham +++ b/build/base16-gotham @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #0c1014; /* Black */ - --base01: #11151c; /* Bright Black */ - --base02: #091f2e; /* Grey */ - --base03: #0a3749; /* Brighter Grey */ - --base04: #245361; /* Bright Grey */ - --base05: #599cab; /* White */ - --base06: #99d1ce; /* Brighter White */ - --base07: #d3ebe9; /* Bright White */ - --base08: #c23127; /* Red */ - --base09: #d26937; /* Orange */ - --base0A: #edb443; /* Yellow */ - --base0B: #33859e; /* Green */ - --base0C: #2aa889; /* Cyan */ - --base0D: #195466; /* Blue */ - --base0E: #888ca6; /* Purple */ - --base0F: #4e5166; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #33859e; /* Green */ + --dnd-indicator: #c23127; /* Red */ + --idle-indicator: #edb443; /* Yellow */ + --streaming-indicator: #888ca6; /* Purple */ + + /* accent colors */ + --accent-1: #195466; /* links */ + --accent-2: #888ca6; /* general unread/mention elements */ + --accent-3: #195466; /* accent buttons */ + --accent-4: #2aa889; /* accent buttons when hovered */ + --accent-5: #33859e; /* accent buttons when clicked */ + --mention: rgba(136, 140, 166, 0.1); + --mention-hover: rgba(136, 140, 166, 0.2); + + /* text colors */ + --text-0: #0c1014; /* text on colored elements */ + --text-1: #599cab; /* primary white-ish text */ + --text-2: #d3ebe9; /* headings */ + --text-3: #599cab; /* normal text */ + --text-4: #245361; /* icon buttons and channels */ + --text-5: #0a3749; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #091f2e; /* dark buttons when clicked */ + --bg-2: #11151c; /* dark buttons */ + --bg-3: #091f2e; /* spacing, secondary elements */ + --bg-4: #0c1014; /* main background color */ + --hover: #091f2e; /* channels and buttons when hovered */ + --active: #0a3749; /* channels and buttons when selected */ + --message-hover: rgba(17, 21, 28, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-grayscale-dark b/build/base16-grayscale-dark index ff2e07e..8a42ada 100644 --- a/build/base16-grayscale-dark +++ b/build/base16-grayscale-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #101010; /* Black */ - --base01: #252525; /* Bright Black */ - --base02: #464646; /* Grey */ - --base03: #525252; /* Brighter Grey */ - --base04: #ababab; /* Bright Grey */ - --base05: #b9b9b9; /* White */ - --base06: #e3e3e3; /* Brighter White */ - --base07: #f7f7f7; /* Bright White */ - --base08: #7c7c7c; /* Red */ - --base09: #999999; /* Orange */ - --base0A: #a0a0a0; /* Yellow */ - --base0B: #8e8e8e; /* Green */ - --base0C: #868686; /* Cyan */ - --base0D: #686868; /* Blue */ - --base0E: #747474; /* Purple */ - --base0F: #5e5e5e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #8e8e8e; /* Green */ + --dnd-indicator: #7c7c7c; /* Red */ + --idle-indicator: #a0a0a0; /* Yellow */ + --streaming-indicator: #747474; /* Purple */ + + /* accent colors */ + --accent-1: #686868; /* links */ + --accent-2: #747474; /* general unread/mention elements */ + --accent-3: #686868; /* accent buttons */ + --accent-4: #868686; /* accent buttons when hovered */ + --accent-5: #8e8e8e; /* accent buttons when clicked */ + --mention: rgba(116, 116, 116, 0.1); + --mention-hover: rgba(116, 116, 116, 0.2); + + /* text colors */ + --text-0: #101010; /* text on colored elements */ + --text-1: #b9b9b9; /* primary white-ish text */ + --text-2: #f7f7f7; /* headings */ + --text-3: #b9b9b9; /* normal text */ + --text-4: #ababab; /* icon buttons and channels */ + --text-5: #525252; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #464646; /* dark buttons when clicked */ + --bg-2: #252525; /* dark buttons */ + --bg-3: #464646; /* spacing, secondary elements */ + --bg-4: #101010; /* main background color */ + --hover: #464646; /* channels and buttons when hovered */ + --active: #525252; /* channels and buttons when selected */ + --message-hover: rgba(37, 37, 37, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-grayscale-light b/build/base16-grayscale-light index fa38b7c..a662e24 100644 --- a/build/base16-grayscale-light +++ b/build/base16-grayscale-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f7f7f7; /* Black */ - --base01: #e3e3e3; /* Bright Black */ - --base02: #b9b9b9; /* Grey */ - --base03: #ababab; /* Brighter Grey */ - --base04: #525252; /* Bright Grey */ - --base05: #464646; /* White */ - --base06: #252525; /* Brighter White */ - --base07: #101010; /* Bright White */ - --base08: #7c7c7c; /* Red */ - --base09: #999999; /* Orange */ - --base0A: #a0a0a0; /* Yellow */ - --base0B: #8e8e8e; /* Green */ - --base0C: #868686; /* Cyan */ - --base0D: #686868; /* Blue */ - --base0E: #747474; /* Purple */ - --base0F: #5e5e5e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #8e8e8e; /* Green */ + --dnd-indicator: #7c7c7c; /* Red */ + --idle-indicator: #a0a0a0; /* Yellow */ + --streaming-indicator: #747474; /* Purple */ + + /* accent colors */ + --accent-1: #686868; /* links */ + --accent-2: #747474; /* general unread/mention elements */ + --accent-3: #686868; /* accent buttons */ + --accent-4: #868686; /* accent buttons when hovered */ + --accent-5: #8e8e8e; /* accent buttons when clicked */ + --mention: rgba(116, 116, 116, 0.1); + --mention-hover: rgba(116, 116, 116, 0.2); + + /* text colors */ + --text-0: #f7f7f7; /* text on colored elements */ + --text-1: #464646; /* primary white-ish text */ + --text-2: #101010; /* headings */ + --text-3: #464646; /* normal text */ + --text-4: #525252; /* icon buttons and channels */ + --text-5: #ababab; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #b9b9b9; /* dark buttons when clicked */ + --bg-2: #e3e3e3; /* dark buttons */ + --bg-3: #b9b9b9; /* spacing, secondary elements */ + --bg-4: #f7f7f7; /* main background color */ + --hover: #b9b9b9; /* channels and buttons when hovered */ + --active: #ababab; /* channels and buttons when selected */ + --message-hover: rgba(227, 227, 227, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-greenscreen b/build/base16-greenscreen index 5763aa5..340d94f 100644 --- a/build/base16-greenscreen +++ b/build/base16-greenscreen @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #001100; /* Black */ - --base01: #003300; /* Bright Black */ - --base02: #005500; /* Grey */ - --base03: #007700; /* Brighter Grey */ - --base04: #009900; /* Bright Grey */ - --base05: #00bb00; /* White */ - --base06: #00dd00; /* Brighter White */ - --base07: #00ff00; /* Bright White */ - --base08: #007700; /* Red */ - --base09: #009900; /* Orange */ - --base0A: #007700; /* Yellow */ - --base0B: #00bb00; /* Green */ - --base0C: #005500; /* Cyan */ - --base0D: #009900; /* Blue */ - --base0E: #00bb00; /* Purple */ - --base0F: #005500; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #00bb00; /* Green */ + --dnd-indicator: #007700; /* Red */ + --idle-indicator: #007700; /* Yellow */ + --streaming-indicator: #00bb00; /* Purple */ + + /* accent colors */ + --accent-1: #009900; /* links */ + --accent-2: #00bb00; /* general unread/mention elements */ + --accent-3: #009900; /* accent buttons */ + --accent-4: #005500; /* accent buttons when hovered */ + --accent-5: #00bb00; /* accent buttons when clicked */ + --mention: rgba(0, 187, 0, 0.1); + --mention-hover: rgba(0, 187, 0, 0.2); + + /* text colors */ + --text-0: #001100; /* text on colored elements */ + --text-1: #00bb00; /* primary white-ish text */ + --text-2: #00ff00; /* headings */ + --text-3: #00bb00; /* normal text */ + --text-4: #009900; /* icon buttons and channels */ + --text-5: #007700; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #005500; /* dark buttons when clicked */ + --bg-2: #003300; /* dark buttons */ + --bg-3: #005500; /* spacing, secondary elements */ + --bg-4: #001100; /* main background color */ + --hover: #005500; /* channels and buttons when hovered */ + --active: #007700; /* channels and buttons when selected */ + --message-hover: rgba(0, 51, 0, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gruber b/build/base16-gruber index 937394e..ace6e71 100644 --- a/build/base16-gruber +++ b/build/base16-gruber @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #181818; /* Black */ - --base01: #453d41; /* Bright Black */ - --base02: #484848; /* Grey */ - --base03: #52494e; /* Brighter Grey */ - --base04: #e4e4ef; /* Bright Grey */ - --base05: #f4f4ff; /* White */ - --base06: #f5f5f5; /* Brighter White */ - --base07: #e4e4ef; /* Bright White */ - --base08: #f43841; /* Red */ - --base09: #c73c3f; /* Orange */ - --base0A: #ffdd33; /* Yellow */ - --base0B: #73c936; /* Green */ - --base0C: #95a99f; /* Cyan */ - --base0D: #96a6c8; /* Blue */ - --base0E: #9e95c7; /* Purple */ - --base0F: #cc8c3c; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #73c936; /* Green */ + --dnd-indicator: #f43841; /* Red */ + --idle-indicator: #ffdd33; /* Yellow */ + --streaming-indicator: #9e95c7; /* Purple */ + + /* accent colors */ + --accent-1: #96a6c8; /* links */ + --accent-2: #9e95c7; /* general unread/mention elements */ + --accent-3: #96a6c8; /* accent buttons */ + --accent-4: #95a99f; /* accent buttons when hovered */ + --accent-5: #73c936; /* accent buttons when clicked */ + --mention: rgba(158, 149, 199, 0.1); + --mention-hover: rgba(158, 149, 199, 0.2); + + /* text colors */ + --text-0: #181818; /* text on colored elements */ + --text-1: #f4f4ff; /* primary white-ish text */ + --text-2: #e4e4ef; /* headings */ + --text-3: #f4f4ff; /* normal text */ + --text-4: #e4e4ef; /* icon buttons and channels */ + --text-5: #52494e; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #484848; /* dark buttons when clicked */ + --bg-2: #453d41; /* dark buttons */ + --bg-3: #484848; /* spacing, secondary elements */ + --bg-4: #181818; /* main background color */ + --hover: #484848; /* channels and buttons when hovered */ + --active: #52494e; /* channels and buttons when selected */ + --message-hover: rgba(69, 61, 65, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gruvbox-dark b/build/base16-gruvbox-dark index 773ddd7..3077bc0 100644 --- a/build/base16-gruvbox-dark +++ b/build/base16-gruvbox-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #282828; /* Black */ - --base01: #3c3836; /* Bright Black */ - --base02: #504945; /* Grey */ - --base03: #665c54; /* Brighter Grey */ - --base04: #928374; /* Bright Grey */ - --base05: #ebdbb2; /* White */ - --base06: #fbf1c7; /* Brighter White */ - --base07: #f9f5d7; /* Bright White */ - --base08: #cc241d; /* Red */ - --base09: #d65d0e; /* Orange */ - --base0A: #d79921; /* Yellow */ - --base0B: #98971a; /* Green */ - --base0C: #689d6a; /* Cyan */ - --base0D: #458588; /* Blue */ - --base0E: #b16286; /* Purple */ - --base0F: #9d0006; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #98971a; /* Green */ + --dnd-indicator: #cc241d; /* Red */ + --idle-indicator: #d79921; /* Yellow */ + --streaming-indicator: #b16286; /* Purple */ + + /* accent colors */ + --accent-1: #458588; /* links */ + --accent-2: #b16286; /* general unread/mention elements */ + --accent-3: #458588; /* accent buttons */ + --accent-4: #689d6a; /* accent buttons when hovered */ + --accent-5: #98971a; /* accent buttons when clicked */ + --mention: rgba(177, 98, 134, 0.1); + --mention-hover: rgba(177, 98, 134, 0.2); + + /* text colors */ + --text-0: #282828; /* text on colored elements */ + --text-1: #ebdbb2; /* primary white-ish text */ + --text-2: #f9f5d7; /* headings */ + --text-3: #ebdbb2; /* normal text */ + --text-4: #928374; /* icon buttons and channels */ + --text-5: #665c54; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #504945; /* dark buttons when clicked */ + --bg-2: #3c3836; /* dark buttons */ + --bg-3: #504945; /* spacing, secondary elements */ + --bg-4: #282828; /* main background color */ + --hover: #504945; /* channels and buttons when hovered */ + --active: #665c54; /* channels and buttons when selected */ + --message-hover: rgba(60, 56, 54, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gruvbox-dark-hard b/build/base16-gruvbox-dark-hard index ddc86f3..f1a3aeb 100644 --- a/build/base16-gruvbox-dark-hard +++ b/build/base16-gruvbox-dark-hard @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1d2021; /* Black */ - --base01: #3c3836; /* Bright Black */ - --base02: #504945; /* Grey */ - --base03: #665c54; /* Brighter Grey */ - --base04: #bdae93; /* Bright Grey */ - --base05: #d5c4a1; /* White */ - --base06: #ebdbb2; /* Brighter White */ - --base07: #fbf1c7; /* Bright White */ - --base08: #fb4934; /* Red */ - --base09: #fe8019; /* Orange */ - --base0A: #fabd2f; /* Yellow */ - --base0B: #b8bb26; /* Green */ - --base0C: #8ec07c; /* Cyan */ - --base0D: #83a598; /* Blue */ - --base0E: #d3869b; /* Purple */ - --base0F: #d65d0e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #b8bb26; /* Green */ + --dnd-indicator: #fb4934; /* Red */ + --idle-indicator: #fabd2f; /* Yellow */ + --streaming-indicator: #d3869b; /* Purple */ + + /* accent colors */ + --accent-1: #83a598; /* links */ + --accent-2: #d3869b; /* general unread/mention elements */ + --accent-3: #83a598; /* accent buttons */ + --accent-4: #8ec07c; /* accent buttons when hovered */ + --accent-5: #b8bb26; /* accent buttons when clicked */ + --mention: rgba(211, 134, 155, 0.1); + --mention-hover: rgba(211, 134, 155, 0.2); + + /* text colors */ + --text-0: #1d2021; /* text on colored elements */ + --text-1: #d5c4a1; /* primary white-ish text */ + --text-2: #fbf1c7; /* headings */ + --text-3: #d5c4a1; /* normal text */ + --text-4: #bdae93; /* icon buttons and channels */ + --text-5: #665c54; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #504945; /* dark buttons when clicked */ + --bg-2: #3c3836; /* dark buttons */ + --bg-3: #504945; /* spacing, secondary elements */ + --bg-4: #1d2021; /* main background color */ + --hover: #504945; /* channels and buttons when hovered */ + --active: #665c54; /* channels and buttons when selected */ + --message-hover: rgba(60, 56, 54, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gruvbox-dark-medium b/build/base16-gruvbox-dark-medium index e47dc4e..3f1a154 100644 --- a/build/base16-gruvbox-dark-medium +++ b/build/base16-gruvbox-dark-medium @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #282828; /* Black */ - --base01: #3c3836; /* Bright Black */ - --base02: #504945; /* Grey */ - --base03: #665c54; /* Brighter Grey */ - --base04: #bdae93; /* Bright Grey */ - --base05: #d5c4a1; /* White */ - --base06: #ebdbb2; /* Brighter White */ - --base07: #fbf1c7; /* Bright White */ - --base08: #fb4934; /* Red */ - --base09: #fe8019; /* Orange */ - --base0A: #fabd2f; /* Yellow */ - --base0B: #b8bb26; /* Green */ - --base0C: #8ec07c; /* Cyan */ - --base0D: #83a598; /* Blue */ - --base0E: #d3869b; /* Purple */ - --base0F: #d65d0e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #b8bb26; /* Green */ + --dnd-indicator: #fb4934; /* Red */ + --idle-indicator: #fabd2f; /* Yellow */ + --streaming-indicator: #d3869b; /* Purple */ + + /* accent colors */ + --accent-1: #83a598; /* links */ + --accent-2: #d3869b; /* general unread/mention elements */ + --accent-3: #83a598; /* accent buttons */ + --accent-4: #8ec07c; /* accent buttons when hovered */ + --accent-5: #b8bb26; /* accent buttons when clicked */ + --mention: rgba(211, 134, 155, 0.1); + --mention-hover: rgba(211, 134, 155, 0.2); + + /* text colors */ + --text-0: #282828; /* text on colored elements */ + --text-1: #d5c4a1; /* primary white-ish text */ + --text-2: #fbf1c7; /* headings */ + --text-3: #d5c4a1; /* normal text */ + --text-4: #bdae93; /* icon buttons and channels */ + --text-5: #665c54; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #504945; /* dark buttons when clicked */ + --bg-2: #3c3836; /* dark buttons */ + --bg-3: #504945; /* spacing, secondary elements */ + --bg-4: #282828; /* main background color */ + --hover: #504945; /* channels and buttons when hovered */ + --active: #665c54; /* channels and buttons when selected */ + --message-hover: rgba(60, 56, 54, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gruvbox-dark-pale b/build/base16-gruvbox-dark-pale index 36743aa..c411040 100644 --- a/build/base16-gruvbox-dark-pale +++ b/build/base16-gruvbox-dark-pale @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #262626; /* Black */ - --base01: #3a3a3a; /* Bright Black */ - --base02: #4e4e4e; /* Grey */ - --base03: #8a8a8a; /* Brighter Grey */ - --base04: #949494; /* Bright Grey */ - --base05: #dab997; /* White */ - --base06: #d5c4a1; /* Brighter White */ - --base07: #ebdbb2; /* Bright White */ - --base08: #d75f5f; /* Red */ - --base09: #ff8700; /* Orange */ - --base0A: #ffaf00; /* Yellow */ - --base0B: #afaf00; /* Green */ - --base0C: #85ad85; /* Cyan */ - --base0D: #83adad; /* Blue */ - --base0E: #d485ad; /* Purple */ - --base0F: #d65d0e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #afaf00; /* Green */ + --dnd-indicator: #d75f5f; /* Red */ + --idle-indicator: #ffaf00; /* Yellow */ + --streaming-indicator: #d485ad; /* Purple */ + + /* accent colors */ + --accent-1: #83adad; /* links */ + --accent-2: #d485ad; /* general unread/mention elements */ + --accent-3: #83adad; /* accent buttons */ + --accent-4: #85ad85; /* accent buttons when hovered */ + --accent-5: #afaf00; /* accent buttons when clicked */ + --mention: rgba(212, 133, 173, 0.1); + --mention-hover: rgba(212, 133, 173, 0.2); + + /* text colors */ + --text-0: #262626; /* text on colored elements */ + --text-1: #dab997; /* primary white-ish text */ + --text-2: #ebdbb2; /* headings */ + --text-3: #dab997; /* normal text */ + --text-4: #949494; /* icon buttons and channels */ + --text-5: #8a8a8a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #4e4e4e; /* dark buttons when clicked */ + --bg-2: #3a3a3a; /* dark buttons */ + --bg-3: #4e4e4e; /* spacing, secondary elements */ + --bg-4: #262626; /* main background color */ + --hover: #4e4e4e; /* channels and buttons when hovered */ + --active: #8a8a8a; /* channels and buttons when selected */ + --message-hover: rgba(58, 58, 58, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gruvbox-dark-soft b/build/base16-gruvbox-dark-soft index 0c07321..96bb29a 100644 --- a/build/base16-gruvbox-dark-soft +++ b/build/base16-gruvbox-dark-soft @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #32302f; /* Black */ - --base01: #3c3836; /* Bright Black */ - --base02: #504945; /* Grey */ - --base03: #665c54; /* Brighter Grey */ - --base04: #bdae93; /* Bright Grey */ - --base05: #d5c4a1; /* White */ - --base06: #ebdbb2; /* Brighter White */ - --base07: #fbf1c7; /* Bright White */ - --base08: #fb4934; /* Red */ - --base09: #fe8019; /* Orange */ - --base0A: #fabd2f; /* Yellow */ - --base0B: #b8bb26; /* Green */ - --base0C: #8ec07c; /* Cyan */ - --base0D: #83a598; /* Blue */ - --base0E: #d3869b; /* Purple */ - --base0F: #d65d0e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #b8bb26; /* Green */ + --dnd-indicator: #fb4934; /* Red */ + --idle-indicator: #fabd2f; /* Yellow */ + --streaming-indicator: #d3869b; /* Purple */ + + /* accent colors */ + --accent-1: #83a598; /* links */ + --accent-2: #d3869b; /* general unread/mention elements */ + --accent-3: #83a598; /* accent buttons */ + --accent-4: #8ec07c; /* accent buttons when hovered */ + --accent-5: #b8bb26; /* accent buttons when clicked */ + --mention: rgba(211, 134, 155, 0.1); + --mention-hover: rgba(211, 134, 155, 0.2); + + /* text colors */ + --text-0: #32302f; /* text on colored elements */ + --text-1: #d5c4a1; /* primary white-ish text */ + --text-2: #fbf1c7; /* headings */ + --text-3: #d5c4a1; /* normal text */ + --text-4: #bdae93; /* icon buttons and channels */ + --text-5: #665c54; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #504945; /* dark buttons when clicked */ + --bg-2: #3c3836; /* dark buttons */ + --bg-3: #504945; /* spacing, secondary elements */ + --bg-4: #32302f; /* main background color */ + --hover: #504945; /* channels and buttons when hovered */ + --active: #665c54; /* channels and buttons when selected */ + --message-hover: rgba(60, 56, 54, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gruvbox-light b/build/base16-gruvbox-light index 35f303d..1d487e3 100644 --- a/build/base16-gruvbox-light +++ b/build/base16-gruvbox-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fbf1c7; /* Black */ - --base01: #ebdbb2; /* Bright Black */ - --base02: #d5c4a1; /* Grey */ - --base03: #bdae93; /* Brighter Grey */ - --base04: #7c6f64; /* Bright Grey */ - --base05: #3c3836; /* White */ - --base06: #282828; /* Brighter White */ - --base07: #1d2021; /* Bright White */ - --base08: #cc241d; /* Red */ - --base09: #d65d0e; /* Orange */ - --base0A: #d79921; /* Yellow */ - --base0B: #98971a; /* Green */ - --base0C: #689d6a; /* Cyan */ - --base0D: #458588; /* Blue */ - --base0E: #b16286; /* Purple */ - --base0F: #9d0006; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #98971a; /* Green */ + --dnd-indicator: #cc241d; /* Red */ + --idle-indicator: #d79921; /* Yellow */ + --streaming-indicator: #b16286; /* Purple */ + + /* accent colors */ + --accent-1: #458588; /* links */ + --accent-2: #b16286; /* general unread/mention elements */ + --accent-3: #458588; /* accent buttons */ + --accent-4: #689d6a; /* accent buttons when hovered */ + --accent-5: #98971a; /* accent buttons when clicked */ + --mention: rgba(177, 98, 134, 0.1); + --mention-hover: rgba(177, 98, 134, 0.2); + + /* text colors */ + --text-0: #fbf1c7; /* text on colored elements */ + --text-1: #3c3836; /* primary white-ish text */ + --text-2: #1d2021; /* headings */ + --text-3: #3c3836; /* normal text */ + --text-4: #7c6f64; /* icon buttons and channels */ + --text-5: #bdae93; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d5c4a1; /* dark buttons when clicked */ + --bg-2: #ebdbb2; /* dark buttons */ + --bg-3: #d5c4a1; /* spacing, secondary elements */ + --bg-4: #fbf1c7; /* main background color */ + --hover: #d5c4a1; /* channels and buttons when hovered */ + --active: #bdae93; /* channels and buttons when selected */ + --message-hover: rgba(235, 219, 178, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gruvbox-light-hard b/build/base16-gruvbox-light-hard index bddf49c..1695c4f 100644 --- a/build/base16-gruvbox-light-hard +++ b/build/base16-gruvbox-light-hard @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f9f5d7; /* Black */ - --base01: #ebdbb2; /* Bright Black */ - --base02: #d5c4a1; /* Grey */ - --base03: #bdae93; /* Brighter Grey */ - --base04: #665c54; /* Bright Grey */ - --base05: #504945; /* White */ - --base06: #3c3836; /* Brighter White */ - --base07: #282828; /* Bright White */ - --base08: #9d0006; /* Red */ - --base09: #af3a03; /* Orange */ - --base0A: #b57614; /* Yellow */ - --base0B: #79740e; /* Green */ - --base0C: #427b58; /* Cyan */ - --base0D: #076678; /* Blue */ - --base0E: #8f3f71; /* Purple */ - --base0F: #d65d0e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #79740e; /* Green */ + --dnd-indicator: #9d0006; /* Red */ + --idle-indicator: #b57614; /* Yellow */ + --streaming-indicator: #8f3f71; /* Purple */ + + /* accent colors */ + --accent-1: #076678; /* links */ + --accent-2: #8f3f71; /* general unread/mention elements */ + --accent-3: #076678; /* accent buttons */ + --accent-4: #427b58; /* accent buttons when hovered */ + --accent-5: #79740e; /* accent buttons when clicked */ + --mention: rgba(143, 63, 113, 0.1); + --mention-hover: rgba(143, 63, 113, 0.2); + + /* text colors */ + --text-0: #f9f5d7; /* text on colored elements */ + --text-1: #504945; /* primary white-ish text */ + --text-2: #282828; /* headings */ + --text-3: #504945; /* normal text */ + --text-4: #665c54; /* icon buttons and channels */ + --text-5: #bdae93; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d5c4a1; /* dark buttons when clicked */ + --bg-2: #ebdbb2; /* dark buttons */ + --bg-3: #d5c4a1; /* spacing, secondary elements */ + --bg-4: #f9f5d7; /* main background color */ + --hover: #d5c4a1; /* channels and buttons when hovered */ + --active: #bdae93; /* channels and buttons when selected */ + --message-hover: rgba(235, 219, 178, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gruvbox-light-medium b/build/base16-gruvbox-light-medium index 0d5ef3a..3cc6e78 100644 --- a/build/base16-gruvbox-light-medium +++ b/build/base16-gruvbox-light-medium @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fbf1c7; /* Black */ - --base01: #ebdbb2; /* Bright Black */ - --base02: #d5c4a1; /* Grey */ - --base03: #bdae93; /* Brighter Grey */ - --base04: #665c54; /* Bright Grey */ - --base05: #504945; /* White */ - --base06: #3c3836; /* Brighter White */ - --base07: #282828; /* Bright White */ - --base08: #9d0006; /* Red */ - --base09: #af3a03; /* Orange */ - --base0A: #b57614; /* Yellow */ - --base0B: #79740e; /* Green */ - --base0C: #427b58; /* Cyan */ - --base0D: #076678; /* Blue */ - --base0E: #8f3f71; /* Purple */ - --base0F: #d65d0e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #79740e; /* Green */ + --dnd-indicator: #9d0006; /* Red */ + --idle-indicator: #b57614; /* Yellow */ + --streaming-indicator: #8f3f71; /* Purple */ + + /* accent colors */ + --accent-1: #076678; /* links */ + --accent-2: #8f3f71; /* general unread/mention elements */ + --accent-3: #076678; /* accent buttons */ + --accent-4: #427b58; /* accent buttons when hovered */ + --accent-5: #79740e; /* accent buttons when clicked */ + --mention: rgba(143, 63, 113, 0.1); + --mention-hover: rgba(143, 63, 113, 0.2); + + /* text colors */ + --text-0: #fbf1c7; /* text on colored elements */ + --text-1: #504945; /* primary white-ish text */ + --text-2: #282828; /* headings */ + --text-3: #504945; /* normal text */ + --text-4: #665c54; /* icon buttons and channels */ + --text-5: #bdae93; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d5c4a1; /* dark buttons when clicked */ + --bg-2: #ebdbb2; /* dark buttons */ + --bg-3: #d5c4a1; /* spacing, secondary elements */ + --bg-4: #fbf1c7; /* main background color */ + --hover: #d5c4a1; /* channels and buttons when hovered */ + --active: #bdae93; /* channels and buttons when selected */ + --message-hover: rgba(235, 219, 178, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gruvbox-light-soft b/build/base16-gruvbox-light-soft index 08724f3..91c8754 100644 --- a/build/base16-gruvbox-light-soft +++ b/build/base16-gruvbox-light-soft @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f2e5bc; /* Black */ - --base01: #ebdbb2; /* Bright Black */ - --base02: #d5c4a1; /* Grey */ - --base03: #bdae93; /* Brighter Grey */ - --base04: #665c54; /* Bright Grey */ - --base05: #504945; /* White */ - --base06: #3c3836; /* Brighter White */ - --base07: #282828; /* Bright White */ - --base08: #9d0006; /* Red */ - --base09: #af3a03; /* Orange */ - --base0A: #b57614; /* Yellow */ - --base0B: #79740e; /* Green */ - --base0C: #427b58; /* Cyan */ - --base0D: #076678; /* Blue */ - --base0E: #8f3f71; /* Purple */ - --base0F: #d65d0e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #79740e; /* Green */ + --dnd-indicator: #9d0006; /* Red */ + --idle-indicator: #b57614; /* Yellow */ + --streaming-indicator: #8f3f71; /* Purple */ + + /* accent colors */ + --accent-1: #076678; /* links */ + --accent-2: #8f3f71; /* general unread/mention elements */ + --accent-3: #076678; /* accent buttons */ + --accent-4: #427b58; /* accent buttons when hovered */ + --accent-5: #79740e; /* accent buttons when clicked */ + --mention: rgba(143, 63, 113, 0.1); + --mention-hover: rgba(143, 63, 113, 0.2); + + /* text colors */ + --text-0: #f2e5bc; /* text on colored elements */ + --text-1: #504945; /* primary white-ish text */ + --text-2: #282828; /* headings */ + --text-3: #504945; /* normal text */ + --text-4: #665c54; /* icon buttons and channels */ + --text-5: #bdae93; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d5c4a1; /* dark buttons when clicked */ + --bg-2: #ebdbb2; /* dark buttons */ + --bg-3: #d5c4a1; /* spacing, secondary elements */ + --bg-4: #f2e5bc; /* main background color */ + --hover: #d5c4a1; /* channels and buttons when hovered */ + --active: #bdae93; /* channels and buttons when selected */ + --message-hover: rgba(235, 219, 178, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gruvbox-material-dark-hard b/build/base16-gruvbox-material-dark-hard index 3efbed0..ec96a12 100644 --- a/build/base16-gruvbox-material-dark-hard +++ b/build/base16-gruvbox-material-dark-hard @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #202020; /* Black */ - --base01: #2a2827; /* Bright Black */ - --base02: #504945; /* Grey */ - --base03: #5a524c; /* Brighter Grey */ - --base04: #bdae93; /* Bright Grey */ - --base05: #ddc7a1; /* White */ - --base06: #ebdbb2; /* Brighter White */ - --base07: #fbf1c7; /* Bright White */ - --base08: #ea6962; /* Red */ - --base09: #e78a4e; /* Orange */ - --base0A: #d8a657; /* Yellow */ - --base0B: #a9b665; /* Green */ - --base0C: #89b482; /* Cyan */ - --base0D: #7daea3; /* Blue */ - --base0E: #d3869b; /* Purple */ - --base0F: #bd6f3e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a9b665; /* Green */ + --dnd-indicator: #ea6962; /* Red */ + --idle-indicator: #d8a657; /* Yellow */ + --streaming-indicator: #d3869b; /* Purple */ + + /* accent colors */ + --accent-1: #7daea3; /* links */ + --accent-2: #d3869b; /* general unread/mention elements */ + --accent-3: #7daea3; /* accent buttons */ + --accent-4: #89b482; /* accent buttons when hovered */ + --accent-5: #a9b665; /* accent buttons when clicked */ + --mention: rgba(211, 134, 155, 0.1); + --mention-hover: rgba(211, 134, 155, 0.2); + + /* text colors */ + --text-0: #202020; /* text on colored elements */ + --text-1: #ddc7a1; /* primary white-ish text */ + --text-2: #fbf1c7; /* headings */ + --text-3: #ddc7a1; /* normal text */ + --text-4: #bdae93; /* icon buttons and channels */ + --text-5: #5a524c; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #504945; /* dark buttons when clicked */ + --bg-2: #2a2827; /* dark buttons */ + --bg-3: #504945; /* spacing, secondary elements */ + --bg-4: #202020; /* main background color */ + --hover: #504945; /* channels and buttons when hovered */ + --active: #5a524c; /* channels and buttons when selected */ + --message-hover: rgba(42, 40, 39, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gruvbox-material-dark-medium b/build/base16-gruvbox-material-dark-medium index 9bc626b..8be40ea 100644 --- a/build/base16-gruvbox-material-dark-medium +++ b/build/base16-gruvbox-material-dark-medium @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #292828; /* Black */ - --base01: #32302f; /* Bright Black */ - --base02: #504945; /* Grey */ - --base03: #665c54; /* Brighter Grey */ - --base04: #bdae93; /* Bright Grey */ - --base05: #ddc7a1; /* White */ - --base06: #ebdbb2; /* Brighter White */ - --base07: #fbf1c7; /* Bright White */ - --base08: #ea6962; /* Red */ - --base09: #e78a4e; /* Orange */ - --base0A: #d8a657; /* Yellow */ - --base0B: #a9b665; /* Green */ - --base0C: #89b482; /* Cyan */ - --base0D: #7daea3; /* Blue */ - --base0E: #d3869b; /* Purple */ - --base0F: #bd6f3e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a9b665; /* Green */ + --dnd-indicator: #ea6962; /* Red */ + --idle-indicator: #d8a657; /* Yellow */ + --streaming-indicator: #d3869b; /* Purple */ + + /* accent colors */ + --accent-1: #7daea3; /* links */ + --accent-2: #d3869b; /* general unread/mention elements */ + --accent-3: #7daea3; /* accent buttons */ + --accent-4: #89b482; /* accent buttons when hovered */ + --accent-5: #a9b665; /* accent buttons when clicked */ + --mention: rgba(211, 134, 155, 0.1); + --mention-hover: rgba(211, 134, 155, 0.2); + + /* text colors */ + --text-0: #292828; /* text on colored elements */ + --text-1: #ddc7a1; /* primary white-ish text */ + --text-2: #fbf1c7; /* headings */ + --text-3: #ddc7a1; /* normal text */ + --text-4: #bdae93; /* icon buttons and channels */ + --text-5: #665c54; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #504945; /* dark buttons when clicked */ + --bg-2: #32302f; /* dark buttons */ + --bg-3: #504945; /* spacing, secondary elements */ + --bg-4: #292828; /* main background color */ + --hover: #504945; /* channels and buttons when hovered */ + --active: #665c54; /* channels and buttons when selected */ + --message-hover: rgba(50, 48, 47, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gruvbox-material-dark-soft b/build/base16-gruvbox-material-dark-soft index 985d28b..98bdf64 100644 --- a/build/base16-gruvbox-material-dark-soft +++ b/build/base16-gruvbox-material-dark-soft @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #32302f; /* Black */ - --base01: #3c3836; /* Bright Black */ - --base02: #5a524c; /* Grey */ - --base03: #7c6f64; /* Brighter Grey */ - --base04: #bdae93; /* Bright Grey */ - --base05: #ddc7a1; /* White */ - --base06: #ebdbb2; /* Brighter White */ - --base07: #fbf1c7; /* Bright White */ - --base08: #ea6962; /* Red */ - --base09: #e78a4e; /* Orange */ - --base0A: #d8a657; /* Yellow */ - --base0B: #a9b665; /* Green */ - --base0C: #89b482; /* Cyan */ - --base0D: #7daea3; /* Blue */ - --base0E: #d3869b; /* Purple */ - --base0F: #bd6f3e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a9b665; /* Green */ + --dnd-indicator: #ea6962; /* Red */ + --idle-indicator: #d8a657; /* Yellow */ + --streaming-indicator: #d3869b; /* Purple */ + + /* accent colors */ + --accent-1: #7daea3; /* links */ + --accent-2: #d3869b; /* general unread/mention elements */ + --accent-3: #7daea3; /* accent buttons */ + --accent-4: #89b482; /* accent buttons when hovered */ + --accent-5: #a9b665; /* accent buttons when clicked */ + --mention: rgba(211, 134, 155, 0.1); + --mention-hover: rgba(211, 134, 155, 0.2); + + /* text colors */ + --text-0: #32302f; /* text on colored elements */ + --text-1: #ddc7a1; /* primary white-ish text */ + --text-2: #fbf1c7; /* headings */ + --text-3: #ddc7a1; /* normal text */ + --text-4: #bdae93; /* icon buttons and channels */ + --text-5: #7c6f64; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #5a524c; /* dark buttons when clicked */ + --bg-2: #3c3836; /* dark buttons */ + --bg-3: #5a524c; /* spacing, secondary elements */ + --bg-4: #32302f; /* main background color */ + --hover: #5a524c; /* channels and buttons when hovered */ + --active: #7c6f64; /* channels and buttons when selected */ + --message-hover: rgba(60, 56, 54, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gruvbox-material-light-hard b/build/base16-gruvbox-material-light-hard index ef55352..a9c9325 100644 --- a/build/base16-gruvbox-material-light-hard +++ b/build/base16-gruvbox-material-light-hard @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f9f5d7; /* Black */ - --base01: #fbf1c7; /* Bright Black */ - --base02: #e0cfa9; /* Grey */ - --base03: #a89984; /* Brighter Grey */ - --base04: #c9b99a; /* Bright Grey */ - --base05: #654735; /* White */ - --base06: #3c3836; /* Brighter White */ - --base07: #282828; /* Bright White */ - --base08: #c14a4a; /* Red */ - --base09: #c35e0a; /* Orange */ - --base0A: #b47109; /* Yellow */ - --base0B: #6c782e; /* Green */ - --base0C: #4c7a5d; /* Cyan */ - --base0D: #45707a; /* Blue */ - --base0E: #945e80; /* Purple */ - --base0F: #e78a4e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #6c782e; /* Green */ + --dnd-indicator: #c14a4a; /* Red */ + --idle-indicator: #b47109; /* Yellow */ + --streaming-indicator: #945e80; /* Purple */ + + /* accent colors */ + --accent-1: #45707a; /* links */ + --accent-2: #945e80; /* general unread/mention elements */ + --accent-3: #45707a; /* accent buttons */ + --accent-4: #4c7a5d; /* accent buttons when hovered */ + --accent-5: #6c782e; /* accent buttons when clicked */ + --mention: rgba(148, 94, 128, 0.1); + --mention-hover: rgba(148, 94, 128, 0.2); + + /* text colors */ + --text-0: #f9f5d7; /* text on colored elements */ + --text-1: #654735; /* primary white-ish text */ + --text-2: #282828; /* headings */ + --text-3: #654735; /* normal text */ + --text-4: #c9b99a; /* icon buttons and channels */ + --text-5: #a89984; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #e0cfa9; /* dark buttons when clicked */ + --bg-2: #fbf1c7; /* dark buttons */ + --bg-3: #e0cfa9; /* spacing, secondary elements */ + --bg-4: #f9f5d7; /* main background color */ + --hover: #e0cfa9; /* channels and buttons when hovered */ + --active: #a89984; /* channels and buttons when selected */ + --message-hover: rgba(251, 241, 199, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gruvbox-material-light-medium b/build/base16-gruvbox-material-light-medium index 39e8217..ac1be3d 100644 --- a/build/base16-gruvbox-material-light-medium +++ b/build/base16-gruvbox-material-light-medium @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fbf1c7; /* Black */ - --base01: #f2e5bc; /* Bright Black */ - --base02: #d5c4a1; /* Grey */ - --base03: #bdae93; /* Brighter Grey */ - --base04: #665c54; /* Bright Grey */ - --base05: #654735; /* White */ - --base06: #3c3836; /* Brighter White */ - --base07: #282828; /* Bright White */ - --base08: #c14a4a; /* Red */ - --base09: #c35e0a; /* Orange */ - --base0A: #b47109; /* Yellow */ - --base0B: #6c782e; /* Green */ - --base0C: #4c7a5d; /* Cyan */ - --base0D: #45707a; /* Blue */ - --base0E: #945e80; /* Purple */ - --base0F: #e78a4e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #6c782e; /* Green */ + --dnd-indicator: #c14a4a; /* Red */ + --idle-indicator: #b47109; /* Yellow */ + --streaming-indicator: #945e80; /* Purple */ + + /* accent colors */ + --accent-1: #45707a; /* links */ + --accent-2: #945e80; /* general unread/mention elements */ + --accent-3: #45707a; /* accent buttons */ + --accent-4: #4c7a5d; /* accent buttons when hovered */ + --accent-5: #6c782e; /* accent buttons when clicked */ + --mention: rgba(148, 94, 128, 0.1); + --mention-hover: rgba(148, 94, 128, 0.2); + + /* text colors */ + --text-0: #fbf1c7; /* text on colored elements */ + --text-1: #654735; /* primary white-ish text */ + --text-2: #282828; /* headings */ + --text-3: #654735; /* normal text */ + --text-4: #665c54; /* icon buttons and channels */ + --text-5: #bdae93; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d5c4a1; /* dark buttons when clicked */ + --bg-2: #f2e5bc; /* dark buttons */ + --bg-3: #d5c4a1; /* spacing, secondary elements */ + --bg-4: #fbf1c7; /* main background color */ + --hover: #d5c4a1; /* channels and buttons when hovered */ + --active: #bdae93; /* channels and buttons when selected */ + --message-hover: rgba(242, 229, 188, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-gruvbox-material-light-soft b/build/base16-gruvbox-material-light-soft index 9e8c4ed..b39103b 100644 --- a/build/base16-gruvbox-material-light-soft +++ b/build/base16-gruvbox-material-light-soft @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f2e5bc; /* Black */ - --base01: #ebdbb2; /* Bright Black */ - --base02: #c9b99a; /* Grey */ - --base03: #a89984; /* Brighter Grey */ - --base04: #665c54; /* Bright Grey */ - --base05: #654735; /* White */ - --base06: #3c3836; /* Brighter White */ - --base07: #282828; /* Bright White */ - --base08: #c14a4a; /* Red */ - --base09: #c35e0a; /* Orange */ - --base0A: #b47109; /* Yellow */ - --base0B: #6c782e; /* Green */ - --base0C: #4c7a5d; /* Cyan */ - --base0D: #45707a; /* Blue */ - --base0E: #945e80; /* Purple */ - --base0F: #e78a4e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #6c782e; /* Green */ + --dnd-indicator: #c14a4a; /* Red */ + --idle-indicator: #b47109; /* Yellow */ + --streaming-indicator: #945e80; /* Purple */ + + /* accent colors */ + --accent-1: #45707a; /* links */ + --accent-2: #945e80; /* general unread/mention elements */ + --accent-3: #45707a; /* accent buttons */ + --accent-4: #4c7a5d; /* accent buttons when hovered */ + --accent-5: #6c782e; /* accent buttons when clicked */ + --mention: rgba(148, 94, 128, 0.1); + --mention-hover: rgba(148, 94, 128, 0.2); + + /* text colors */ + --text-0: #f2e5bc; /* text on colored elements */ + --text-1: #654735; /* primary white-ish text */ + --text-2: #282828; /* headings */ + --text-3: #654735; /* normal text */ + --text-4: #665c54; /* icon buttons and channels */ + --text-5: #a89984; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #c9b99a; /* dark buttons when clicked */ + --bg-2: #ebdbb2; /* dark buttons */ + --bg-3: #c9b99a; /* spacing, secondary elements */ + --bg-4: #f2e5bc; /* main background color */ + --hover: #c9b99a; /* channels and buttons when hovered */ + --active: #a89984; /* channels and buttons when selected */ + --message-hover: rgba(235, 219, 178, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-hardcore b/build/base16-hardcore index 7c242f0..e839f8c 100644 --- a/build/base16-hardcore +++ b/build/base16-hardcore @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #212121; /* Black */ - --base01: #303030; /* Bright Black */ - --base02: #353535; /* Grey */ - --base03: #4a4a4a; /* Brighter Grey */ - --base04: #707070; /* Bright Grey */ - --base05: #cdcdcd; /* White */ - --base06: #e5e5e5; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #f92672; /* Red */ - --base09: #fd971f; /* Orange */ - --base0A: #e6db74; /* Yellow */ - --base0B: #a6e22e; /* Green */ - --base0C: #708387; /* Cyan */ - --base0D: #66d9ef; /* Blue */ - --base0E: #9e6ffe; /* Purple */ - --base0F: #e8b882; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a6e22e; /* Green */ + --dnd-indicator: #f92672; /* Red */ + --idle-indicator: #e6db74; /* Yellow */ + --streaming-indicator: #9e6ffe; /* Purple */ + + /* accent colors */ + --accent-1: #66d9ef; /* links */ + --accent-2: #9e6ffe; /* general unread/mention elements */ + --accent-3: #66d9ef; /* accent buttons */ + --accent-4: #708387; /* accent buttons when hovered */ + --accent-5: #a6e22e; /* accent buttons when clicked */ + --mention: rgba(158, 111, 254, 0.1); + --mention-hover: rgba(158, 111, 254, 0.2); + + /* text colors */ + --text-0: #212121; /* text on colored elements */ + --text-1: #cdcdcd; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #cdcdcd; /* normal text */ + --text-4: #707070; /* icon buttons and channels */ + --text-5: #4a4a4a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #353535; /* dark buttons when clicked */ + --bg-2: #303030; /* dark buttons */ + --bg-3: #353535; /* spacing, secondary elements */ + --bg-4: #212121; /* main background color */ + --hover: #353535; /* channels and buttons when hovered */ + --active: #4a4a4a; /* channels and buttons when selected */ + --message-hover: rgba(48, 48, 48, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-hardhacker b/build/base16-hardhacker index 39825f3..82e0e1a 100644 --- a/build/base16-hardhacker +++ b/build/base16-hardhacker @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #211e2a; /* Black */ - --base01: #2c2737; /* Bright Black */ - --base02: #3f3951; /* Grey */ - --base03: #6e6780; /* Brighter Grey */ - --base04: #8a829e; /* Bright Grey */ - --base05: #e4dee9; /* White */ - --base06: #f2e8f0; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #e965a5; /* Red */ - --base09: #f4b870; /* Orange */ - --base0A: #ebde76; /* Yellow */ - --base0B: #b1f2a7; /* Green */ - --base0C: #b3f4f3; /* Cyan */ - --base0D: #95a6f4; /* Blue */ - --base0E: #ff79c6; /* Purple */ - --base0F: #bd93f9; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #b1f2a7; /* Green */ + --dnd-indicator: #e965a5; /* Red */ + --idle-indicator: #ebde76; /* Yellow */ + --streaming-indicator: #ff79c6; /* Purple */ + + /* accent colors */ + --accent-1: #95a6f4; /* links */ + --accent-2: #ff79c6; /* general unread/mention elements */ + --accent-3: #95a6f4; /* accent buttons */ + --accent-4: #b3f4f3; /* accent buttons when hovered */ + --accent-5: #b1f2a7; /* accent buttons when clicked */ + --mention: rgba(255, 121, 198, 0.1); + --mention-hover: rgba(255, 121, 198, 0.2); + + /* text colors */ + --text-0: #211e2a; /* text on colored elements */ + --text-1: #e4dee9; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #e4dee9; /* normal text */ + --text-4: #8a829e; /* icon buttons and channels */ + --text-5: #6e6780; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3f3951; /* dark buttons when clicked */ + --bg-2: #2c2737; /* dark buttons */ + --bg-3: #3f3951; /* spacing, secondary elements */ + --bg-4: #211e2a; /* main background color */ + --hover: #3f3951; /* channels and buttons when hovered */ + --active: #6e6780; /* channels and buttons when selected */ + --message-hover: rgba(44, 39, 55, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-harmonic16-dark b/build/base16-harmonic16-dark index 810f914..1986454 100644 --- a/build/base16-harmonic16-dark +++ b/build/base16-harmonic16-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #0b1c2c; /* Black */ - --base01: #223b54; /* Bright Black */ - --base02: #405c79; /* Grey */ - --base03: #627e99; /* Brighter Grey */ - --base04: #aabcce; /* Bright Grey */ - --base05: #cbd6e2; /* White */ - --base06: #e5ebf1; /* Brighter White */ - --base07: #f7f9fb; /* Bright White */ - --base08: #bf8b56; /* Red */ - --base09: #bfbf56; /* Orange */ - --base0A: #8bbf56; /* Yellow */ - --base0B: #56bf8b; /* Green */ - --base0C: #568bbf; /* Cyan */ - --base0D: #8b56bf; /* Blue */ - --base0E: #bf568b; /* Purple */ - --base0F: #bf5656; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #56bf8b; /* Green */ + --dnd-indicator: #bf8b56; /* Red */ + --idle-indicator: #8bbf56; /* Yellow */ + --streaming-indicator: #bf568b; /* Purple */ + + /* accent colors */ + --accent-1: #8b56bf; /* links */ + --accent-2: #bf568b; /* general unread/mention elements */ + --accent-3: #8b56bf; /* accent buttons */ + --accent-4: #568bbf; /* accent buttons when hovered */ + --accent-5: #56bf8b; /* accent buttons when clicked */ + --mention: rgba(191, 86, 139, 0.1); + --mention-hover: rgba(191, 86, 139, 0.2); + + /* text colors */ + --text-0: #0b1c2c; /* text on colored elements */ + --text-1: #cbd6e2; /* primary white-ish text */ + --text-2: #f7f9fb; /* headings */ + --text-3: #cbd6e2; /* normal text */ + --text-4: #aabcce; /* icon buttons and channels */ + --text-5: #627e99; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #405c79; /* dark buttons when clicked */ + --bg-2: #223b54; /* dark buttons */ + --bg-3: #405c79; /* spacing, secondary elements */ + --bg-4: #0b1c2c; /* main background color */ + --hover: #405c79; /* channels and buttons when hovered */ + --active: #627e99; /* channels and buttons when selected */ + --message-hover: rgba(34, 59, 84, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-harmonic16-light b/build/base16-harmonic16-light index 28ad2ad..0a62bb6 100644 --- a/build/base16-harmonic16-light +++ b/build/base16-harmonic16-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f7f9fb; /* Black */ - --base01: #e5ebf1; /* Bright Black */ - --base02: #cbd6e2; /* Grey */ - --base03: #aabcce; /* Brighter Grey */ - --base04: #627e99; /* Bright Grey */ - --base05: #405c79; /* White */ - --base06: #223b54; /* Brighter White */ - --base07: #0b1c2c; /* Bright White */ - --base08: #bf8b56; /* Red */ - --base09: #bfbf56; /* Orange */ - --base0A: #8bbf56; /* Yellow */ - --base0B: #56bf8b; /* Green */ - --base0C: #568bbf; /* Cyan */ - --base0D: #8b56bf; /* Blue */ - --base0E: #bf568b; /* Purple */ - --base0F: #bf5656; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #56bf8b; /* Green */ + --dnd-indicator: #bf8b56; /* Red */ + --idle-indicator: #8bbf56; /* Yellow */ + --streaming-indicator: #bf568b; /* Purple */ + + /* accent colors */ + --accent-1: #8b56bf; /* links */ + --accent-2: #bf568b; /* general unread/mention elements */ + --accent-3: #8b56bf; /* accent buttons */ + --accent-4: #568bbf; /* accent buttons when hovered */ + --accent-5: #56bf8b; /* accent buttons when clicked */ + --mention: rgba(191, 86, 139, 0.1); + --mention-hover: rgba(191, 86, 139, 0.2); + + /* text colors */ + --text-0: #f7f9fb; /* text on colored elements */ + --text-1: #405c79; /* primary white-ish text */ + --text-2: #0b1c2c; /* headings */ + --text-3: #405c79; /* normal text */ + --text-4: #627e99; /* icon buttons and channels */ + --text-5: #aabcce; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #cbd6e2; /* dark buttons when clicked */ + --bg-2: #e5ebf1; /* dark buttons */ + --bg-3: #cbd6e2; /* spacing, secondary elements */ + --bg-4: #f7f9fb; /* main background color */ + --hover: #cbd6e2; /* channels and buttons when hovered */ + --active: #aabcce; /* channels and buttons when selected */ + --message-hover: rgba(229, 235, 241, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-heetch b/build/base16-heetch index 27dd1f7..ff696a3 100644 --- a/build/base16-heetch +++ b/build/base16-heetch @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #190134; /* Black */ - --base01: #392551; /* Bright Black */ - --base02: #5a496e; /* Grey */ - --base03: #7b6d8b; /* Brighter Grey */ - --base04: #9c92a8; /* Bright Grey */ - --base05: #bdb6c5; /* White */ - --base06: #dedae2; /* Brighter White */ - --base07: #feffff; /* Bright White */ - --base08: #27d9d5; /* Red */ - --base09: #5ba2b6; /* Orange */ - --base0A: #8f6c97; /* Yellow */ - --base0B: #c33678; /* Green */ - --base0C: #f80059; /* Cyan */ - --base0D: #bd0152; /* Blue */ - --base0E: #82034c; /* Purple */ - --base0F: #470546; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #c33678; /* Green */ + --dnd-indicator: #27d9d5; /* Red */ + --idle-indicator: #8f6c97; /* Yellow */ + --streaming-indicator: #82034c; /* Purple */ + + /* accent colors */ + --accent-1: #bd0152; /* links */ + --accent-2: #82034c; /* general unread/mention elements */ + --accent-3: #bd0152; /* accent buttons */ + --accent-4: #f80059; /* accent buttons when hovered */ + --accent-5: #c33678; /* accent buttons when clicked */ + --mention: rgba(130, 3, 76, 0.1); + --mention-hover: rgba(130, 3, 76, 0.2); + + /* text colors */ + --text-0: #190134; /* text on colored elements */ + --text-1: #bdb6c5; /* primary white-ish text */ + --text-2: #feffff; /* headings */ + --text-3: #bdb6c5; /* normal text */ + --text-4: #9c92a8; /* icon buttons and channels */ + --text-5: #7b6d8b; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #5a496e; /* dark buttons when clicked */ + --bg-2: #392551; /* dark buttons */ + --bg-3: #5a496e; /* spacing, secondary elements */ + --bg-4: #190134; /* main background color */ + --hover: #5a496e; /* channels and buttons when hovered */ + --active: #7b6d8b; /* channels and buttons when selected */ + --message-hover: rgba(57, 37, 81, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-heetch-light b/build/base16-heetch-light index 1466939..2547b3b 100644 --- a/build/base16-heetch-light +++ b/build/base16-heetch-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #feffff; /* Black */ - --base01: #dedae2; /* Bright Black */ - --base02: #bdb6c5; /* Grey */ - --base03: #9c92a8; /* Brighter Grey */ - --base04: #7b6d8b; /* Bright Grey */ - --base05: #5a496e; /* White */ - --base06: #392551; /* Brighter White */ - --base07: #190134; /* Bright White */ - --base08: #f80059; /* Red */ - --base09: #bd0152; /* Orange */ - --base0A: #bd9701; /* Yellow */ - --base0B: #5bb66a; /* Green */ - --base0C: #47f9f5; /* Cyan */ - --base0D: #5ba2b6; /* Blue */ - --base0E: #8f6c97; /* Purple */ - --base0F: #58425d; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #5bb66a; /* Green */ + --dnd-indicator: #f80059; /* Red */ + --idle-indicator: #bd9701; /* Yellow */ + --streaming-indicator: #8f6c97; /* Purple */ + + /* accent colors */ + --accent-1: #5ba2b6; /* links */ + --accent-2: #8f6c97; /* general unread/mention elements */ + --accent-3: #5ba2b6; /* accent buttons */ + --accent-4: #47f9f5; /* accent buttons when hovered */ + --accent-5: #5bb66a; /* accent buttons when clicked */ + --mention: rgba(143, 108, 151, 0.1); + --mention-hover: rgba(143, 108, 151, 0.2); + + /* text colors */ + --text-0: #feffff; /* text on colored elements */ + --text-1: #5a496e; /* primary white-ish text */ + --text-2: #190134; /* headings */ + --text-3: #5a496e; /* normal text */ + --text-4: #7b6d8b; /* icon buttons and channels */ + --text-5: #9c92a8; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #bdb6c5; /* dark buttons when clicked */ + --bg-2: #dedae2; /* dark buttons */ + --bg-3: #bdb6c5; /* spacing, secondary elements */ + --bg-4: #feffff; /* main background color */ + --hover: #bdb6c5; /* channels and buttons when hovered */ + --active: #9c92a8; /* channels and buttons when selected */ + --message-hover: rgba(222, 218, 226, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-helios b/build/base16-helios index 001e1f2..9acbdbe 100644 --- a/build/base16-helios +++ b/build/base16-helios @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1d2021; /* Black */ - --base01: #383c3e; /* Bright Black */ - --base02: #53585b; /* Grey */ - --base03: #6f7579; /* Brighter Grey */ - --base04: #cdcdcd; /* Bright Grey */ - --base05: #d5d5d5; /* White */ - --base06: #dddddd; /* Brighter White */ - --base07: #e5e5e5; /* Bright White */ - --base08: #d72638; /* Red */ - --base09: #eb8413; /* Orange */ - --base0A: #f19d1a; /* Yellow */ - --base0B: #88b92d; /* Green */ - --base0C: #1ba595; /* Cyan */ - --base0D: #1e8bac; /* Blue */ - --base0E: #be4264; /* Purple */ - --base0F: #c85e0d; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #88b92d; /* Green */ + --dnd-indicator: #d72638; /* Red */ + --idle-indicator: #f19d1a; /* Yellow */ + --streaming-indicator: #be4264; /* Purple */ + + /* accent colors */ + --accent-1: #1e8bac; /* links */ + --accent-2: #be4264; /* general unread/mention elements */ + --accent-3: #1e8bac; /* accent buttons */ + --accent-4: #1ba595; /* accent buttons when hovered */ + --accent-5: #88b92d; /* accent buttons when clicked */ + --mention: rgba(190, 66, 100, 0.1); + --mention-hover: rgba(190, 66, 100, 0.2); + + /* text colors */ + --text-0: #1d2021; /* text on colored elements */ + --text-1: #d5d5d5; /* primary white-ish text */ + --text-2: #e5e5e5; /* headings */ + --text-3: #d5d5d5; /* normal text */ + --text-4: #cdcdcd; /* icon buttons and channels */ + --text-5: #6f7579; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #53585b; /* dark buttons when clicked */ + --bg-2: #383c3e; /* dark buttons */ + --bg-3: #53585b; /* spacing, secondary elements */ + --bg-4: #1d2021; /* main background color */ + --hover: #53585b; /* channels and buttons when hovered */ + --active: #6f7579; /* channels and buttons when selected */ + --message-hover: rgba(56, 60, 62, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-hopscotch b/build/base16-hopscotch index ea8433f..3eb6a22 100644 --- a/build/base16-hopscotch +++ b/build/base16-hopscotch @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #322931; /* Black */ - --base01: #433b42; /* Bright Black */ - --base02: #5c545b; /* Grey */ - --base03: #797379; /* Brighter Grey */ - --base04: #989498; /* Bright Grey */ - --base05: #b9b5b8; /* White */ - --base06: #d5d3d5; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #dd464c; /* Red */ - --base09: #fd8b19; /* Orange */ - --base0A: #fdcc59; /* Yellow */ - --base0B: #8fc13e; /* Green */ - --base0C: #149b93; /* Cyan */ - --base0D: #1290bf; /* Blue */ - --base0E: #c85e7c; /* Purple */ - --base0F: #b33508; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #8fc13e; /* Green */ + --dnd-indicator: #dd464c; /* Red */ + --idle-indicator: #fdcc59; /* Yellow */ + --streaming-indicator: #c85e7c; /* Purple */ + + /* accent colors */ + --accent-1: #1290bf; /* links */ + --accent-2: #c85e7c; /* general unread/mention elements */ + --accent-3: #1290bf; /* accent buttons */ + --accent-4: #149b93; /* accent buttons when hovered */ + --accent-5: #8fc13e; /* accent buttons when clicked */ + --mention: rgba(200, 94, 124, 0.1); + --mention-hover: rgba(200, 94, 124, 0.2); + + /* text colors */ + --text-0: #322931; /* text on colored elements */ + --text-1: #b9b5b8; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #b9b5b8; /* normal text */ + --text-4: #989498; /* icon buttons and channels */ + --text-5: #797379; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #5c545b; /* dark buttons when clicked */ + --bg-2: #433b42; /* dark buttons */ + --bg-3: #5c545b; /* spacing, secondary elements */ + --bg-4: #322931; /* main background color */ + --hover: #5c545b; /* channels and buttons when hovered */ + --active: #797379; /* channels and buttons when selected */ + --message-hover: rgba(67, 59, 66, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-horizon-dark b/build/base16-horizon-dark index f4d292a..70422fb 100644 --- a/build/base16-horizon-dark +++ b/build/base16-horizon-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1c1e26; /* Black */ - --base01: #232530; /* Bright Black */ - --base02: #2e303e; /* Grey */ - --base03: #6f6f70; /* Brighter Grey */ - --base04: #9da0a2; /* Bright Grey */ - --base05: #cbced0; /* White */ - --base06: #dcdfe4; /* Brighter White */ - --base07: #e3e6ee; /* Bright White */ - --base08: #e93c58; /* Red */ - --base09: #e58d7d; /* Orange */ - --base0A: #efb993; /* Yellow */ - --base0B: #efaf8e; /* Green */ - --base0C: #24a8b4; /* Cyan */ - --base0D: #df5273; /* Blue */ - --base0E: #b072d1; /* Purple */ - --base0F: #e4a382; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #efaf8e; /* Green */ + --dnd-indicator: #e93c58; /* Red */ + --idle-indicator: #efb993; /* Yellow */ + --streaming-indicator: #b072d1; /* Purple */ + + /* accent colors */ + --accent-1: #df5273; /* links */ + --accent-2: #b072d1; /* general unread/mention elements */ + --accent-3: #df5273; /* accent buttons */ + --accent-4: #24a8b4; /* accent buttons when hovered */ + --accent-5: #efaf8e; /* accent buttons when clicked */ + --mention: rgba(176, 114, 209, 0.1); + --mention-hover: rgba(176, 114, 209, 0.2); + + /* text colors */ + --text-0: #1c1e26; /* text on colored elements */ + --text-1: #cbced0; /* primary white-ish text */ + --text-2: #e3e6ee; /* headings */ + --text-3: #cbced0; /* normal text */ + --text-4: #9da0a2; /* icon buttons and channels */ + --text-5: #6f6f70; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #2e303e; /* dark buttons when clicked */ + --bg-2: #232530; /* dark buttons */ + --bg-3: #2e303e; /* spacing, secondary elements */ + --bg-4: #1c1e26; /* main background color */ + --hover: #2e303e; /* channels and buttons when hovered */ + --active: #6f6f70; /* channels and buttons when selected */ + --message-hover: rgba(35, 37, 48, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-horizon-light b/build/base16-horizon-light index e213bbb..0248c53 100644 --- a/build/base16-horizon-light +++ b/build/base16-horizon-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fdf0ed; /* Black */ - --base01: #fadad1; /* Bright Black */ - --base02: #f9cbbe; /* Grey */ - --base03: #bdb3b1; /* Brighter Grey */ - --base04: #948c8a; /* Bright Grey */ - --base05: #403c3d; /* White */ - --base06: #302c2d; /* Brighter White */ - --base07: #201c1d; /* Bright White */ - --base08: #f7939b; /* Red */ - --base09: #f6661e; /* Orange */ - --base0A: #fbe0d9; /* Yellow */ - --base0B: #94e1b0; /* Green */ - --base0C: #dc3318; /* Cyan */ - --base0D: #da103f; /* Blue */ - --base0E: #1d8991; /* Purple */ - --base0F: #e58c92; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #94e1b0; /* Green */ + --dnd-indicator: #f7939b; /* Red */ + --idle-indicator: #fbe0d9; /* Yellow */ + --streaming-indicator: #1d8991; /* Purple */ + + /* accent colors */ + --accent-1: #da103f; /* links */ + --accent-2: #1d8991; /* general unread/mention elements */ + --accent-3: #da103f; /* accent buttons */ + --accent-4: #dc3318; /* accent buttons when hovered */ + --accent-5: #94e1b0; /* accent buttons when clicked */ + --mention: rgba(29, 137, 145, 0.1); + --mention-hover: rgba(29, 137, 145, 0.2); + + /* text colors */ + --text-0: #fdf0ed; /* text on colored elements */ + --text-1: #403c3d; /* primary white-ish text */ + --text-2: #201c1d; /* headings */ + --text-3: #403c3d; /* normal text */ + --text-4: #948c8a; /* icon buttons and channels */ + --text-5: #bdb3b1; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #f9cbbe; /* dark buttons when clicked */ + --bg-2: #fadad1; /* dark buttons */ + --bg-3: #f9cbbe; /* spacing, secondary elements */ + --bg-4: #fdf0ed; /* main background color */ + --hover: #f9cbbe; /* channels and buttons when hovered */ + --active: #bdb3b1; /* channels and buttons when selected */ + --message-hover: rgba(250, 218, 209, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-horizon-terminal-dark b/build/base16-horizon-terminal-dark index 45147c3..6e0dcd2 100644 --- a/build/base16-horizon-terminal-dark +++ b/build/base16-horizon-terminal-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1c1e26; /* Black */ - --base01: #232530; /* Bright Black */ - --base02: #2e303e; /* Grey */ - --base03: #6f6f70; /* Brighter Grey */ - --base04: #9da0a2; /* Bright Grey */ - --base05: #cbced0; /* White */ - --base06: #dcdfe4; /* Brighter White */ - --base07: #e3e6ee; /* Bright White */ - --base08: #e95678; /* Red */ - --base09: #fab795; /* Orange */ - --base0A: #fac29a; /* Yellow */ - --base0B: #29d398; /* Green */ - --base0C: #59e1e3; /* Cyan */ - --base0D: #26bbd9; /* Blue */ - --base0E: #ee64ac; /* Purple */ - --base0F: #f09383; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #29d398; /* Green */ + --dnd-indicator: #e95678; /* Red */ + --idle-indicator: #fac29a; /* Yellow */ + --streaming-indicator: #ee64ac; /* Purple */ + + /* accent colors */ + --accent-1: #26bbd9; /* links */ + --accent-2: #ee64ac; /* general unread/mention elements */ + --accent-3: #26bbd9; /* accent buttons */ + --accent-4: #59e1e3; /* accent buttons when hovered */ + --accent-5: #29d398; /* accent buttons when clicked */ + --mention: rgba(238, 100, 172, 0.1); + --mention-hover: rgba(238, 100, 172, 0.2); + + /* text colors */ + --text-0: #1c1e26; /* text on colored elements */ + --text-1: #cbced0; /* primary white-ish text */ + --text-2: #e3e6ee; /* headings */ + --text-3: #cbced0; /* normal text */ + --text-4: #9da0a2; /* icon buttons and channels */ + --text-5: #6f6f70; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #2e303e; /* dark buttons when clicked */ + --bg-2: #232530; /* dark buttons */ + --bg-3: #2e303e; /* spacing, secondary elements */ + --bg-4: #1c1e26; /* main background color */ + --hover: #2e303e; /* channels and buttons when hovered */ + --active: #6f6f70; /* channels and buttons when selected */ + --message-hover: rgba(35, 37, 48, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-horizon-terminal-light b/build/base16-horizon-terminal-light index 3497e77..31f3212 100644 --- a/build/base16-horizon-terminal-light +++ b/build/base16-horizon-terminal-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fdf0ed; /* Black */ - --base01: #fadad1; /* Bright Black */ - --base02: #f9cbbe; /* Grey */ - --base03: #bdb3b1; /* Brighter Grey */ - --base04: #948c8a; /* Bright Grey */ - --base05: #403c3d; /* White */ - --base06: #302c2d; /* Brighter White */ - --base07: #201c1d; /* Bright White */ - --base08: #e95678; /* Red */ - --base09: #f9cec3; /* Orange */ - --base0A: #fadad1; /* Yellow */ - --base0B: #29d398; /* Green */ - --base0C: #59e1e3; /* Cyan */ - --base0D: #26bbd9; /* Blue */ - --base0E: #ee64ac; /* Purple */ - --base0F: #f9cbbe; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #29d398; /* Green */ + --dnd-indicator: #e95678; /* Red */ + --idle-indicator: #fadad1; /* Yellow */ + --streaming-indicator: #ee64ac; /* Purple */ + + /* accent colors */ + --accent-1: #26bbd9; /* links */ + --accent-2: #ee64ac; /* general unread/mention elements */ + --accent-3: #26bbd9; /* accent buttons */ + --accent-4: #59e1e3; /* accent buttons when hovered */ + --accent-5: #29d398; /* accent buttons when clicked */ + --mention: rgba(238, 100, 172, 0.1); + --mention-hover: rgba(238, 100, 172, 0.2); + + /* text colors */ + --text-0: #fdf0ed; /* text on colored elements */ + --text-1: #403c3d; /* primary white-ish text */ + --text-2: #201c1d; /* headings */ + --text-3: #403c3d; /* normal text */ + --text-4: #948c8a; /* icon buttons and channels */ + --text-5: #bdb3b1; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #f9cbbe; /* dark buttons when clicked */ + --bg-2: #fadad1; /* dark buttons */ + --bg-3: #f9cbbe; /* spacing, secondary elements */ + --bg-4: #fdf0ed; /* main background color */ + --hover: #f9cbbe; /* channels and buttons when hovered */ + --active: #bdb3b1; /* channels and buttons when selected */ + --message-hover: rgba(250, 218, 209, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-humanoid-dark b/build/base16-humanoid-dark index 1d29149..aa063c3 100644 --- a/build/base16-humanoid-dark +++ b/build/base16-humanoid-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #232629; /* Black */ - --base01: #333b3d; /* Bright Black */ - --base02: #484e54; /* Grey */ - --base03: #60615d; /* Brighter Grey */ - --base04: #c0c0bd; /* Bright Grey */ - --base05: #f8f8f2; /* White */ - --base06: #fcfcf6; /* Brighter White */ - --base07: #fcfcfc; /* Bright White */ - --base08: #f11235; /* Red */ - --base09: #ff9505; /* Orange */ - --base0A: #ffb627; /* Yellow */ - --base0B: #02d849; /* Green */ - --base0C: #0dd9d6; /* Cyan */ - --base0D: #00a6fb; /* Blue */ - --base0E: #f15ee3; /* Purple */ - --base0F: #b27701; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #02d849; /* Green */ + --dnd-indicator: #f11235; /* Red */ + --idle-indicator: #ffb627; /* Yellow */ + --streaming-indicator: #f15ee3; /* Purple */ + + /* accent colors */ + --accent-1: #00a6fb; /* links */ + --accent-2: #f15ee3; /* general unread/mention elements */ + --accent-3: #00a6fb; /* accent buttons */ + --accent-4: #0dd9d6; /* accent buttons when hovered */ + --accent-5: #02d849; /* accent buttons when clicked */ + --mention: rgba(241, 94, 227, 0.1); + --mention-hover: rgba(241, 94, 227, 0.2); + + /* text colors */ + --text-0: #232629; /* text on colored elements */ + --text-1: #f8f8f2; /* primary white-ish text */ + --text-2: #fcfcfc; /* headings */ + --text-3: #f8f8f2; /* normal text */ + --text-4: #c0c0bd; /* icon buttons and channels */ + --text-5: #60615d; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #484e54; /* dark buttons when clicked */ + --bg-2: #333b3d; /* dark buttons */ + --bg-3: #484e54; /* spacing, secondary elements */ + --bg-4: #232629; /* main background color */ + --hover: #484e54; /* channels and buttons when hovered */ + --active: #60615d; /* channels and buttons when selected */ + --message-hover: rgba(51, 59, 61, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-humanoid-light b/build/base16-humanoid-light index d051962..9294aa9 100644 --- a/build/base16-humanoid-light +++ b/build/base16-humanoid-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f8f8f2; /* Black */ - --base01: #efefe9; /* Bright Black */ - --base02: #deded8; /* Grey */ - --base03: #c0c0bd; /* Brighter Grey */ - --base04: #60615d; /* Bright Grey */ - --base05: #232629; /* White */ - --base06: #2f3337; /* Brighter White */ - --base07: #070708; /* Bright White */ - --base08: #b0151a; /* Red */ - --base09: #ff3d00; /* Orange */ - --base0A: #ffb627; /* Yellow */ - --base0B: #388e3c; /* Green */ - --base0C: #008e8e; /* Cyan */ - --base0D: #0082c9; /* Blue */ - --base0E: #700f98; /* Purple */ - --base0F: #b27701; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #388e3c; /* Green */ + --dnd-indicator: #b0151a; /* Red */ + --idle-indicator: #ffb627; /* Yellow */ + --streaming-indicator: #700f98; /* Purple */ + + /* accent colors */ + --accent-1: #0082c9; /* links */ + --accent-2: #700f98; /* general unread/mention elements */ + --accent-3: #0082c9; /* accent buttons */ + --accent-4: #008e8e; /* accent buttons when hovered */ + --accent-5: #388e3c; /* accent buttons when clicked */ + --mention: rgba(112, 15, 152, 0.1); + --mention-hover: rgba(112, 15, 152, 0.2); + + /* text colors */ + --text-0: #f8f8f2; /* text on colored elements */ + --text-1: #232629; /* primary white-ish text */ + --text-2: #070708; /* headings */ + --text-3: #232629; /* normal text */ + --text-4: #60615d; /* icon buttons and channels */ + --text-5: #c0c0bd; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #deded8; /* dark buttons when clicked */ + --bg-2: #efefe9; /* dark buttons */ + --bg-3: #deded8; /* spacing, secondary elements */ + --bg-4: #f8f8f2; /* main background color */ + --hover: #deded8; /* channels and buttons when hovered */ + --active: #c0c0bd; /* channels and buttons when selected */ + --message-hover: rgba(239, 239, 233, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-ia-dark b/build/base16-ia-dark index 1057431..64c7f6c 100644 --- a/build/base16-ia-dark +++ b/build/base16-ia-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1a1a1a; /* Black */ - --base01: #222222; /* Bright Black */ - --base02: #1d414d; /* Grey */ - --base03: #767676; /* Brighter Grey */ - --base04: #b8b8b8; /* Bright Grey */ - --base05: #cccccc; /* White */ - --base06: #e8e8e8; /* Brighter White */ - --base07: #f8f8f8; /* Bright White */ - --base08: #d88568; /* Red */ - --base09: #d86868; /* Orange */ - --base0A: #b99353; /* Yellow */ - --base0B: #83a471; /* Green */ - --base0C: #7c9cae; /* Cyan */ - --base0D: #8eccdd; /* Blue */ - --base0E: #b98eb2; /* Purple */ - --base0F: #8b6c37; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #83a471; /* Green */ + --dnd-indicator: #d88568; /* Red */ + --idle-indicator: #b99353; /* Yellow */ + --streaming-indicator: #b98eb2; /* Purple */ + + /* accent colors */ + --accent-1: #8eccdd; /* links */ + --accent-2: #b98eb2; /* general unread/mention elements */ + --accent-3: #8eccdd; /* accent buttons */ + --accent-4: #7c9cae; /* accent buttons when hovered */ + --accent-5: #83a471; /* accent buttons when clicked */ + --mention: rgba(185, 142, 178, 0.1); + --mention-hover: rgba(185, 142, 178, 0.2); + + /* text colors */ + --text-0: #1a1a1a; /* text on colored elements */ + --text-1: #cccccc; /* primary white-ish text */ + --text-2: #f8f8f8; /* headings */ + --text-3: #cccccc; /* normal text */ + --text-4: #b8b8b8; /* icon buttons and channels */ + --text-5: #767676; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #1d414d; /* dark buttons when clicked */ + --bg-2: #222222; /* dark buttons */ + --bg-3: #1d414d; /* spacing, secondary elements */ + --bg-4: #1a1a1a; /* main background color */ + --hover: #1d414d; /* channels and buttons when hovered */ + --active: #767676; /* channels and buttons when selected */ + --message-hover: rgba(34, 34, 34, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-ia-light b/build/base16-ia-light index a6e60bb..e88b8f9 100644 --- a/build/base16-ia-light +++ b/build/base16-ia-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f6f6f6; /* Black */ - --base01: #dedede; /* Bright Black */ - --base02: #bde5f2; /* Grey */ - --base03: #898989; /* Brighter Grey */ - --base04: #767676; /* Bright Grey */ - --base05: #181818; /* White */ - --base06: #e8e8e8; /* Brighter White */ - --base07: #f8f8f8; /* Bright White */ - --base08: #9c5a02; /* Red */ - --base09: #c43e18; /* Orange */ - --base0A: #c48218; /* Yellow */ - --base0B: #38781c; /* Green */ - --base0C: #2d6bb1; /* Cyan */ - --base0D: #48bac2; /* Blue */ - --base0E: #a94598; /* Purple */ - --base0F: #8b6c37; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #38781c; /* Green */ + --dnd-indicator: #9c5a02; /* Red */ + --idle-indicator: #c48218; /* Yellow */ + --streaming-indicator: #a94598; /* Purple */ + + /* accent colors */ + --accent-1: #48bac2; /* links */ + --accent-2: #a94598; /* general unread/mention elements */ + --accent-3: #48bac2; /* accent buttons */ + --accent-4: #2d6bb1; /* accent buttons when hovered */ + --accent-5: #38781c; /* accent buttons when clicked */ + --mention: rgba(169, 69, 152, 0.1); + --mention-hover: rgba(169, 69, 152, 0.2); + + /* text colors */ + --text-0: #f6f6f6; /* text on colored elements */ + --text-1: #181818; /* primary white-ish text */ + --text-2: #f8f8f8; /* headings */ + --text-3: #181818; /* normal text */ + --text-4: #767676; /* icon buttons and channels */ + --text-5: #898989; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #bde5f2; /* dark buttons when clicked */ + --bg-2: #dedede; /* dark buttons */ + --bg-3: #bde5f2; /* spacing, secondary elements */ + --bg-4: #f6f6f6; /* main background color */ + --hover: #bde5f2; /* channels and buttons when hovered */ + --active: #898989; /* channels and buttons when selected */ + --message-hover: rgba(222, 222, 222, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-icy b/build/base16-icy index a2039c0..a08a31e 100644 --- a/build/base16-icy +++ b/build/base16-icy @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #021012; /* Black */ - --base01: #031619; /* Bright Black */ - --base02: #041f23; /* Grey */ - --base03: #052e34; /* Brighter Grey */ - --base04: #064048; /* Bright Grey */ - --base05: #095b67; /* White */ - --base06: #0c7c8c; /* Brighter White */ - --base07: #109cb0; /* Bright White */ - --base08: #16c1d9; /* Red */ - --base09: #b3ebf2; /* Orange */ - --base0A: #80deea; /* Yellow */ - --base0B: #4dd0e1; /* Green */ - --base0C: #26c6da; /* Cyan */ - --base0D: #00bcd4; /* Blue */ - --base0E: #00acc1; /* Purple */ - --base0F: #0097a7; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #4dd0e1; /* Green */ + --dnd-indicator: #16c1d9; /* Red */ + --idle-indicator: #80deea; /* Yellow */ + --streaming-indicator: #00acc1; /* Purple */ + + /* accent colors */ + --accent-1: #00bcd4; /* links */ + --accent-2: #00acc1; /* general unread/mention elements */ + --accent-3: #00bcd4; /* accent buttons */ + --accent-4: #26c6da; /* accent buttons when hovered */ + --accent-5: #4dd0e1; /* accent buttons when clicked */ + --mention: rgba(0, 172, 193, 0.1); + --mention-hover: rgba(0, 172, 193, 0.2); + + /* text colors */ + --text-0: #021012; /* text on colored elements */ + --text-1: #095b67; /* primary white-ish text */ + --text-2: #109cb0; /* headings */ + --text-3: #095b67; /* normal text */ + --text-4: #064048; /* icon buttons and channels */ + --text-5: #052e34; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #041f23; /* dark buttons when clicked */ + --bg-2: #031619; /* dark buttons */ + --bg-3: #041f23; /* spacing, secondary elements */ + --bg-4: #021012; /* main background color */ + --hover: #041f23; /* channels and buttons when hovered */ + --active: #052e34; /* channels and buttons when selected */ + --message-hover: rgba(3, 22, 25, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-irblack b/build/base16-irblack index bc4c698..1d22a22 100644 --- a/build/base16-irblack +++ b/build/base16-irblack @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #242422; /* Bright Black */ - --base02: #484844; /* Grey */ - --base03: #6c6c66; /* Brighter Grey */ - --base04: #918f88; /* Bright Grey */ - --base05: #b5b3aa; /* White */ - --base06: #d9d7cc; /* Brighter White */ - --base07: #fdfbee; /* Bright White */ - --base08: #ff6c60; /* Red */ - --base09: #e9c062; /* Orange */ - --base0A: #ffffb6; /* Yellow */ - --base0B: #a8ff60; /* Green */ - --base0C: #c6c5fe; /* Cyan */ - --base0D: #96cbfe; /* Blue */ - --base0E: #ff73fd; /* Purple */ - --base0F: #b18a3d; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a8ff60; /* Green */ + --dnd-indicator: #ff6c60; /* Red */ + --idle-indicator: #ffffb6; /* Yellow */ + --streaming-indicator: #ff73fd; /* Purple */ + + /* accent colors */ + --accent-1: #96cbfe; /* links */ + --accent-2: #ff73fd; /* general unread/mention elements */ + --accent-3: #96cbfe; /* accent buttons */ + --accent-4: #c6c5fe; /* accent buttons when hovered */ + --accent-5: #a8ff60; /* accent buttons when clicked */ + --mention: rgba(255, 115, 253, 0.1); + --mention-hover: rgba(255, 115, 253, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #b5b3aa; /* primary white-ish text */ + --text-2: #fdfbee; /* headings */ + --text-3: #b5b3aa; /* normal text */ + --text-4: #918f88; /* icon buttons and channels */ + --text-5: #6c6c66; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #484844; /* dark buttons when clicked */ + --bg-2: #242422; /* dark buttons */ + --bg-3: #484844; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #484844; /* channels and buttons when hovered */ + --active: #6c6c66; /* channels and buttons when selected */ + --message-hover: rgba(36, 36, 34, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-isotope b/build/base16-isotope index 29d72c8..4558d1b 100644 --- a/build/base16-isotope +++ b/build/base16-isotope @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #404040; /* Bright Black */ - --base02: #606060; /* Grey */ - --base03: #808080; /* Brighter Grey */ - --base04: #c0c0c0; /* Bright Grey */ - --base05: #d0d0d0; /* White */ - --base06: #e0e0e0; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #ff0000; /* Red */ - --base09: #ff9900; /* Orange */ - --base0A: #ff0099; /* Yellow */ - --base0B: #33ff00; /* Green */ - --base0C: #00ffff; /* Cyan */ - --base0D: #0066ff; /* Blue */ - --base0E: #cc00ff; /* Purple */ - --base0F: #3300ff; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #33ff00; /* Green */ + --dnd-indicator: #ff0000; /* Red */ + --idle-indicator: #ff0099; /* Yellow */ + --streaming-indicator: #cc00ff; /* Purple */ + + /* accent colors */ + --accent-1: #0066ff; /* links */ + --accent-2: #cc00ff; /* general unread/mention elements */ + --accent-3: #0066ff; /* accent buttons */ + --accent-4: #00ffff; /* accent buttons when hovered */ + --accent-5: #33ff00; /* accent buttons when clicked */ + --mention: rgba(204, 0, 255, 0.1); + --mention-hover: rgba(204, 0, 255, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #d0d0d0; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #d0d0d0; /* normal text */ + --text-4: #c0c0c0; /* icon buttons and channels */ + --text-5: #808080; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #606060; /* dark buttons when clicked */ + --bg-2: #404040; /* dark buttons */ + --bg-3: #606060; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #606060; /* channels and buttons when hovered */ + --active: #808080; /* channels and buttons when selected */ + --message-hover: rgba(64, 64, 64, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-jabuti b/build/base16-jabuti index 1a9157f..b420897 100644 --- a/build/base16-jabuti +++ b/build/base16-jabuti @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #292a37; /* Black */ - --base01: #343545; /* Bright Black */ - --base02: #3c3e51; /* Grey */ - --base03: #45475d; /* Brighter Grey */ - --base04: #50526b; /* Bright Grey */ - --base05: #c0cbe3; /* White */ - --base06: #d9e0ee; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #ec6a88; /* Red */ - --base09: #efb993; /* Orange */ - --base0A: #e1c697; /* Yellow */ - --base0B: #3fdaa4; /* Green */ - --base0C: #ff7eb6; /* Cyan */ - --base0D: #3fc6de; /* Blue */ - --base0E: #be95ff; /* Purple */ - --base0F: #8b8da9; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #3fdaa4; /* Green */ + --dnd-indicator: #ec6a88; /* Red */ + --idle-indicator: #e1c697; /* Yellow */ + --streaming-indicator: #be95ff; /* Purple */ + + /* accent colors */ + --accent-1: #3fc6de; /* links */ + --accent-2: #be95ff; /* general unread/mention elements */ + --accent-3: #3fc6de; /* accent buttons */ + --accent-4: #ff7eb6; /* accent buttons when hovered */ + --accent-5: #3fdaa4; /* accent buttons when clicked */ + --mention: rgba(190, 149, 255, 0.1); + --mention-hover: rgba(190, 149, 255, 0.2); + + /* text colors */ + --text-0: #292a37; /* text on colored elements */ + --text-1: #c0cbe3; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #c0cbe3; /* normal text */ + --text-4: #50526b; /* icon buttons and channels */ + --text-5: #45475d; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3c3e51; /* dark buttons when clicked */ + --bg-2: #343545; /* dark buttons */ + --bg-3: #3c3e51; /* spacing, secondary elements */ + --bg-4: #292a37; /* main background color */ + --hover: #3c3e51; /* channels and buttons when hovered */ + --active: #45475d; /* channels and buttons when selected */ + --message-hover: rgba(52, 53, 69, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-kanagawa b/build/base16-kanagawa index fb93d9c..cc1034d 100644 --- a/build/base16-kanagawa +++ b/build/base16-kanagawa @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1f1f28; /* Black */ - --base01: #16161d; /* Bright Black */ - --base02: #223249; /* Grey */ - --base03: #54546d; /* Brighter Grey */ - --base04: #727169; /* Bright Grey */ - --base05: #dcd7ba; /* White */ - --base06: #c8c093; /* Brighter White */ - --base07: #717c7c; /* Bright White */ - --base08: #c34043; /* Red */ - --base09: #ffa066; /* Orange */ - --base0A: #c0a36e; /* Yellow */ - --base0B: #76946a; /* Green */ - --base0C: #6a9589; /* Cyan */ - --base0D: #7e9cd8; /* Blue */ - --base0E: #957fb8; /* Purple */ - --base0F: #d27e99; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #76946a; /* Green */ + --dnd-indicator: #c34043; /* Red */ + --idle-indicator: #c0a36e; /* Yellow */ + --streaming-indicator: #957fb8; /* Purple */ + + /* accent colors */ + --accent-1: #7e9cd8; /* links */ + --accent-2: #957fb8; /* general unread/mention elements */ + --accent-3: #7e9cd8; /* accent buttons */ + --accent-4: #6a9589; /* accent buttons when hovered */ + --accent-5: #76946a; /* accent buttons when clicked */ + --mention: rgba(149, 127, 184, 0.1); + --mention-hover: rgba(149, 127, 184, 0.2); + + /* text colors */ + --text-0: #1f1f28; /* text on colored elements */ + --text-1: #dcd7ba; /* primary white-ish text */ + --text-2: #717c7c; /* headings */ + --text-3: #dcd7ba; /* normal text */ + --text-4: #727169; /* icon buttons and channels */ + --text-5: #54546d; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #223249; /* dark buttons when clicked */ + --bg-2: #16161d; /* dark buttons */ + --bg-3: #223249; /* spacing, secondary elements */ + --bg-4: #1f1f28; /* main background color */ + --hover: #223249; /* channels and buttons when hovered */ + --active: #54546d; /* channels and buttons when selected */ + --message-hover: rgba(22, 22, 29, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-kanagawa-dragon b/build/base16-kanagawa-dragon index 618c6c2..1c44d7f 100644 --- a/build/base16-kanagawa-dragon +++ b/build/base16-kanagawa-dragon @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #181616; /* Black */ - --base01: #282727; /* Bright Black */ - --base02: #393836; /* Grey */ - --base03: #625e5a; /* Brighter Grey */ - --base04: #737c73; /* Bright Grey */ - --base05: #c5c9c5; /* White */ - --base06: #c8c093; /* Brighter White */ - --base07: #c5c9c5; /* Bright White */ - --base08: #c4746e; /* Red */ - --base09: #b6927b; /* Orange */ - --base0A: #c4b28a; /* Yellow */ - --base0B: #8a9a7b; /* Green */ - --base0C: #8ea4a2; /* Cyan */ - --base0D: #8ba4b0; /* Blue */ - --base0E: #a292a3; /* Purple */ - --base0F: #b98d7b; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #8a9a7b; /* Green */ + --dnd-indicator: #c4746e; /* Red */ + --idle-indicator: #c4b28a; /* Yellow */ + --streaming-indicator: #a292a3; /* Purple */ + + /* accent colors */ + --accent-1: #8ba4b0; /* links */ + --accent-2: #a292a3; /* general unread/mention elements */ + --accent-3: #8ba4b0; /* accent buttons */ + --accent-4: #8ea4a2; /* accent buttons when hovered */ + --accent-5: #8a9a7b; /* accent buttons when clicked */ + --mention: rgba(162, 146, 163, 0.1); + --mention-hover: rgba(162, 146, 163, 0.2); + + /* text colors */ + --text-0: #181616; /* text on colored elements */ + --text-1: #c5c9c5; /* primary white-ish text */ + --text-2: #c5c9c5; /* headings */ + --text-3: #c5c9c5; /* normal text */ + --text-4: #737c73; /* icon buttons and channels */ + --text-5: #625e5a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #393836; /* dark buttons when clicked */ + --bg-2: #282727; /* dark buttons */ + --bg-3: #393836; /* spacing, secondary elements */ + --bg-4: #181616; /* main background color */ + --hover: #393836; /* channels and buttons when hovered */ + --active: #625e5a; /* channels and buttons when selected */ + --message-hover: rgba(40, 39, 39, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-katy b/build/base16-katy index 6f1746b..0d16f60 100644 --- a/build/base16-katy +++ b/build/base16-katy @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #292d3e; /* Black */ - --base01: #444267; /* Bright Black */ - --base02: #5c598b; /* Grey */ - --base03: #676e95; /* Brighter Grey */ - --base04: #8796b0; /* Bright Grey */ - --base05: #959dcb; /* White */ - --base06: #959dcb; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #6e98e1; /* Red */ - --base09: #f78c6c; /* Orange */ - --base0A: #e0a557; /* Yellow */ - --base0B: #78c06e; /* Green */ - --base0C: #83b7e5; /* Cyan */ - --base0D: #82aaff; /* Blue */ - --base0E: #c792ea; /* Purple */ - --base0F: #ff5370; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #78c06e; /* Green */ + --dnd-indicator: #6e98e1; /* Red */ + --idle-indicator: #e0a557; /* Yellow */ + --streaming-indicator: #c792ea; /* Purple */ + + /* accent colors */ + --accent-1: #82aaff; /* links */ + --accent-2: #c792ea; /* general unread/mention elements */ + --accent-3: #82aaff; /* accent buttons */ + --accent-4: #83b7e5; /* accent buttons when hovered */ + --accent-5: #78c06e; /* accent buttons when clicked */ + --mention: rgba(199, 146, 234, 0.1); + --mention-hover: rgba(199, 146, 234, 0.2); + + /* text colors */ + --text-0: #292d3e; /* text on colored elements */ + --text-1: #959dcb; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #959dcb; /* normal text */ + --text-4: #8796b0; /* icon buttons and channels */ + --text-5: #676e95; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #5c598b; /* dark buttons when clicked */ + --bg-2: #444267; /* dark buttons */ + --bg-3: #5c598b; /* spacing, secondary elements */ + --bg-4: #292d3e; /* main background color */ + --hover: #5c598b; /* channels and buttons when hovered */ + --active: #676e95; /* channels and buttons when selected */ + --message-hover: rgba(68, 66, 103, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-kimber b/build/base16-kimber index dd19495..5490645 100644 --- a/build/base16-kimber +++ b/build/base16-kimber @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #222222; /* Black */ - --base01: #313131; /* Bright Black */ - --base02: #555d55; /* Grey */ - --base03: #644646; /* Brighter Grey */ - --base04: #5a5a5a; /* Bright Grey */ - --base05: #dedee7; /* White */ - --base06: #c3c3b4; /* Brighter White */ - --base07: #ffffe6; /* Bright White */ - --base08: #c88c8c; /* Red */ - --base09: #476c88; /* Orange */ - --base0A: #d8b56d; /* Yellow */ - --base0B: #99c899; /* Green */ - --base0C: #78b4b4; /* Cyan */ - --base0D: #537c9c; /* Blue */ - --base0E: #86cacd; /* Purple */ - --base0F: #704f4f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #99c899; /* Green */ + --dnd-indicator: #c88c8c; /* Red */ + --idle-indicator: #d8b56d; /* Yellow */ + --streaming-indicator: #86cacd; /* Purple */ + + /* accent colors */ + --accent-1: #537c9c; /* links */ + --accent-2: #86cacd; /* general unread/mention elements */ + --accent-3: #537c9c; /* accent buttons */ + --accent-4: #78b4b4; /* accent buttons when hovered */ + --accent-5: #99c899; /* accent buttons when clicked */ + --mention: rgba(134, 202, 205, 0.1); + --mention-hover: rgba(134, 202, 205, 0.2); + + /* text colors */ + --text-0: #222222; /* text on colored elements */ + --text-1: #dedee7; /* primary white-ish text */ + --text-2: #ffffe6; /* headings */ + --text-3: #dedee7; /* normal text */ + --text-4: #5a5a5a; /* icon buttons and channels */ + --text-5: #644646; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #555d55; /* dark buttons when clicked */ + --bg-2: #313131; /* dark buttons */ + --bg-3: #555d55; /* spacing, secondary elements */ + --bg-4: #222222; /* main background color */ + --hover: #555d55; /* channels and buttons when hovered */ + --active: #644646; /* channels and buttons when selected */ + --message-hover: rgba(49, 49, 49, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-lime b/build/base16-lime index 909e1e2..c53be83 100644 --- a/build/base16-lime +++ b/build/base16-lime @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1a1a2f; /* Black */ - --base01: #202030; /* Bright Black */ - --base02: #2a2a3f; /* Grey */ - --base03: #313140; /* Brighter Grey */ - --base04: #515155; /* Bright Grey */ - --base05: #818175; /* White */ - --base06: #fff2d1; /* Brighter White */ - --base07: #fff8e1; /* Bright White */ - --base08: #ff662a; /* Red */ - --base09: #ff773a; /* Orange */ - --base0A: #ffd15e; /* Yellow */ - --base0B: #8cd97c; /* Green */ - --base0C: #4cad83; /* Cyan */ - --base0D: #2b926f; /* Blue */ - --base0E: #1b825f; /* Purple */ - --base0F: #b4d97c; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #8cd97c; /* Green */ + --dnd-indicator: #ff662a; /* Red */ + --idle-indicator: #ffd15e; /* Yellow */ + --streaming-indicator: #1b825f; /* Purple */ + + /* accent colors */ + --accent-1: #2b926f; /* links */ + --accent-2: #1b825f; /* general unread/mention elements */ + --accent-3: #2b926f; /* accent buttons */ + --accent-4: #4cad83; /* accent buttons when hovered */ + --accent-5: #8cd97c; /* accent buttons when clicked */ + --mention: rgba(27, 130, 95, 0.1); + --mention-hover: rgba(27, 130, 95, 0.2); + + /* text colors */ + --text-0: #1a1a2f; /* text on colored elements */ + --text-1: #818175; /* primary white-ish text */ + --text-2: #fff8e1; /* headings */ + --text-3: #818175; /* normal text */ + --text-4: #515155; /* icon buttons and channels */ + --text-5: #313140; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #2a2a3f; /* dark buttons when clicked */ + --bg-2: #202030; /* dark buttons */ + --bg-3: #2a2a3f; /* spacing, secondary elements */ + --bg-4: #1a1a2f; /* main background color */ + --hover: #2a2a3f; /* channels and buttons when hovered */ + --active: #313140; /* channels and buttons when selected */ + --message-hover: rgba(32, 32, 48, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-linux-vt b/build/base16-linux-vt index df8ea5c..7b2b609 100644 --- a/build/base16-linux-vt +++ b/build/base16-linux-vt @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #333333; /* Bright Black */ - --base02: #444444; /* Grey */ - --base03: #555555; /* Brighter Grey */ - --base04: #888888; /* Bright Grey */ - --base05: #aaaaaa; /* White */ - --base06: #cccccc; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #aa0000; /* Red */ - --base09: #ff5555; /* Orange */ - --base0A: #ffff55; /* Yellow */ - --base0B: #00aa00; /* Green */ - --base0C: #00aaaa; /* Cyan */ - --base0D: #5555ff; /* Blue */ - --base0E: #ff55ff; /* Purple */ - --base0F: #aa5500; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #00aa00; /* Green */ + --dnd-indicator: #aa0000; /* Red */ + --idle-indicator: #ffff55; /* Yellow */ + --streaming-indicator: #ff55ff; /* Purple */ + + /* accent colors */ + --accent-1: #5555ff; /* links */ + --accent-2: #ff55ff; /* general unread/mention elements */ + --accent-3: #5555ff; /* accent buttons */ + --accent-4: #00aaaa; /* accent buttons when hovered */ + --accent-5: #00aa00; /* accent buttons when clicked */ + --mention: rgba(255, 85, 255, 0.1); + --mention-hover: rgba(255, 85, 255, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #aaaaaa; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #aaaaaa; /* normal text */ + --text-4: #888888; /* icon buttons and channels */ + --text-5: #555555; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #444444; /* dark buttons when clicked */ + --bg-2: #333333; /* dark buttons */ + --bg-3: #444444; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #444444; /* channels and buttons when hovered */ + --active: #555555; /* channels and buttons when selected */ + --message-hover: rgba(51, 51, 51, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-macintosh b/build/base16-macintosh index 62232a9..6a1df0e 100644 --- a/build/base16-macintosh +++ b/build/base16-macintosh @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #404040; /* Bright Black */ - --base02: #404040; /* Grey */ - --base03: #808080; /* Brighter Grey */ - --base04: #808080; /* Bright Grey */ - --base05: #c0c0c0; /* White */ - --base06: #c0c0c0; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #dd0907; /* Red */ - --base09: #ff6403; /* Orange */ - --base0A: #fbf305; /* Yellow */ - --base0B: #1fb714; /* Green */ - --base0C: #02abea; /* Cyan */ - --base0D: #0000d3; /* Blue */ - --base0E: #4700a5; /* Purple */ - --base0F: #90713a; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #1fb714; /* Green */ + --dnd-indicator: #dd0907; /* Red */ + --idle-indicator: #fbf305; /* Yellow */ + --streaming-indicator: #4700a5; /* Purple */ + + /* accent colors */ + --accent-1: #0000d3; /* links */ + --accent-2: #4700a5; /* general unread/mention elements */ + --accent-3: #0000d3; /* accent buttons */ + --accent-4: #02abea; /* accent buttons when hovered */ + --accent-5: #1fb714; /* accent buttons when clicked */ + --mention: rgba(71, 0, 165, 0.1); + --mention-hover: rgba(71, 0, 165, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #c0c0c0; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #c0c0c0; /* normal text */ + --text-4: #808080; /* icon buttons and channels */ + --text-5: #808080; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #404040; /* dark buttons when clicked */ + --bg-2: #404040; /* dark buttons */ + --bg-3: #404040; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #404040; /* channels and buttons when hovered */ + --active: #808080; /* channels and buttons when selected */ + --message-hover: rgba(64, 64, 64, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-marrakesh b/build/base16-marrakesh index 69e2043..1b62a51 100644 --- a/build/base16-marrakesh +++ b/build/base16-marrakesh @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #201602; /* Black */ - --base01: #302e00; /* Bright Black */ - --base02: #5f5b17; /* Grey */ - --base03: #6c6823; /* Brighter Grey */ - --base04: #86813b; /* Bright Grey */ - --base05: #948e48; /* White */ - --base06: #ccc37a; /* Brighter White */ - --base07: #faf0a5; /* Bright White */ - --base08: #c35359; /* Red */ - --base09: #b36144; /* Orange */ - --base0A: #a88339; /* Yellow */ - --base0B: #18974e; /* Green */ - --base0C: #75a738; /* Cyan */ - --base0D: #477ca1; /* Blue */ - --base0E: #8868b3; /* Purple */ - --base0F: #b3588e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #18974e; /* Green */ + --dnd-indicator: #c35359; /* Red */ + --idle-indicator: #a88339; /* Yellow */ + --streaming-indicator: #8868b3; /* Purple */ + + /* accent colors */ + --accent-1: #477ca1; /* links */ + --accent-2: #8868b3; /* general unread/mention elements */ + --accent-3: #477ca1; /* accent buttons */ + --accent-4: #75a738; /* accent buttons when hovered */ + --accent-5: #18974e; /* accent buttons when clicked */ + --mention: rgba(136, 104, 179, 0.1); + --mention-hover: rgba(136, 104, 179, 0.2); + + /* text colors */ + --text-0: #201602; /* text on colored elements */ + --text-1: #948e48; /* primary white-ish text */ + --text-2: #faf0a5; /* headings */ + --text-3: #948e48; /* normal text */ + --text-4: #86813b; /* icon buttons and channels */ + --text-5: #6c6823; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #5f5b17; /* dark buttons when clicked */ + --bg-2: #302e00; /* dark buttons */ + --bg-3: #5f5b17; /* spacing, secondary elements */ + --bg-4: #201602; /* main background color */ + --hover: #5f5b17; /* channels and buttons when hovered */ + --active: #6c6823; /* channels and buttons when selected */ + --message-hover: rgba(48, 46, 0, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-materia b/build/base16-materia index 8537492..9887c72 100644 --- a/build/base16-materia +++ b/build/base16-materia @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #263238; /* Black */ - --base01: #2c393f; /* Bright Black */ - --base02: #37474f; /* Grey */ - --base03: #707880; /* Brighter Grey */ - --base04: #c9ccd3; /* Bright Grey */ - --base05: #cdd3de; /* White */ - --base06: #d5dbe5; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #ec5f67; /* Red */ - --base09: #ea9560; /* Orange */ - --base0A: #ffcc00; /* Yellow */ - --base0B: #8bd649; /* Green */ - --base0C: #80cbc4; /* Cyan */ - --base0D: #89ddff; /* Blue */ - --base0E: #82aaff; /* Purple */ - --base0F: #ec5f67; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #8bd649; /* Green */ + --dnd-indicator: #ec5f67; /* Red */ + --idle-indicator: #ffcc00; /* Yellow */ + --streaming-indicator: #82aaff; /* Purple */ + + /* accent colors */ + --accent-1: #89ddff; /* links */ + --accent-2: #82aaff; /* general unread/mention elements */ + --accent-3: #89ddff; /* accent buttons */ + --accent-4: #80cbc4; /* accent buttons when hovered */ + --accent-5: #8bd649; /* accent buttons when clicked */ + --mention: rgba(130, 170, 255, 0.1); + --mention-hover: rgba(130, 170, 255, 0.2); + + /* text colors */ + --text-0: #263238; /* text on colored elements */ + --text-1: #cdd3de; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #cdd3de; /* normal text */ + --text-4: #c9ccd3; /* icon buttons and channels */ + --text-5: #707880; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #37474f; /* dark buttons when clicked */ + --bg-2: #2c393f; /* dark buttons */ + --bg-3: #37474f; /* spacing, secondary elements */ + --bg-4: #263238; /* main background color */ + --hover: #37474f; /* channels and buttons when hovered */ + --active: #707880; /* channels and buttons when selected */ + --message-hover: rgba(44, 57, 63, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-material b/build/base16-material index 23f01db..f50a28f 100644 --- a/build/base16-material +++ b/build/base16-material @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #263238; /* Black */ - --base01: #2e3c43; /* Bright Black */ - --base02: #314549; /* Grey */ - --base03: #546e7a; /* Brighter Grey */ - --base04: #b2ccd6; /* Bright Grey */ - --base05: #eeffff; /* White */ - --base06: #eeffff; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #f07178; /* Red */ - --base09: #f78c6c; /* Orange */ - --base0A: #ffcb6b; /* Yellow */ - --base0B: #c3e88d; /* Green */ - --base0C: #89ddff; /* Cyan */ - --base0D: #82aaff; /* Blue */ - --base0E: #c792ea; /* Purple */ - --base0F: #ff5370; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #c3e88d; /* Green */ + --dnd-indicator: #f07178; /* Red */ + --idle-indicator: #ffcb6b; /* Yellow */ + --streaming-indicator: #c792ea; /* Purple */ + + /* accent colors */ + --accent-1: #82aaff; /* links */ + --accent-2: #c792ea; /* general unread/mention elements */ + --accent-3: #82aaff; /* accent buttons */ + --accent-4: #89ddff; /* accent buttons when hovered */ + --accent-5: #c3e88d; /* accent buttons when clicked */ + --mention: rgba(199, 146, 234, 0.1); + --mention-hover: rgba(199, 146, 234, 0.2); + + /* text colors */ + --text-0: #263238; /* text on colored elements */ + --text-1: #eeffff; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #eeffff; /* normal text */ + --text-4: #b2ccd6; /* icon buttons and channels */ + --text-5: #546e7a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #314549; /* dark buttons when clicked */ + --bg-2: #2e3c43; /* dark buttons */ + --bg-3: #314549; /* spacing, secondary elements */ + --bg-4: #263238; /* main background color */ + --hover: #314549; /* channels and buttons when hovered */ + --active: #546e7a; /* channels and buttons when selected */ + --message-hover: rgba(46, 60, 67, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-material-darker b/build/base16-material-darker index c76cd8f..5af579a 100644 --- a/build/base16-material-darker +++ b/build/base16-material-darker @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #212121; /* Black */ - --base01: #303030; /* Bright Black */ - --base02: #353535; /* Grey */ - --base03: #4a4a4a; /* Brighter Grey */ - --base04: #b2ccd6; /* Bright Grey */ - --base05: #eeffff; /* White */ - --base06: #eeffff; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #f07178; /* Red */ - --base09: #f78c6c; /* Orange */ - --base0A: #ffcb6b; /* Yellow */ - --base0B: #c3e88d; /* Green */ - --base0C: #89ddff; /* Cyan */ - --base0D: #82aaff; /* Blue */ - --base0E: #c792ea; /* Purple */ - --base0F: #ff5370; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #c3e88d; /* Green */ + --dnd-indicator: #f07178; /* Red */ + --idle-indicator: #ffcb6b; /* Yellow */ + --streaming-indicator: #c792ea; /* Purple */ + + /* accent colors */ + --accent-1: #82aaff; /* links */ + --accent-2: #c792ea; /* general unread/mention elements */ + --accent-3: #82aaff; /* accent buttons */ + --accent-4: #89ddff; /* accent buttons when hovered */ + --accent-5: #c3e88d; /* accent buttons when clicked */ + --mention: rgba(199, 146, 234, 0.1); + --mention-hover: rgba(199, 146, 234, 0.2); + + /* text colors */ + --text-0: #212121; /* text on colored elements */ + --text-1: #eeffff; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #eeffff; /* normal text */ + --text-4: #b2ccd6; /* icon buttons and channels */ + --text-5: #4a4a4a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #353535; /* dark buttons when clicked */ + --bg-2: #303030; /* dark buttons */ + --bg-3: #353535; /* spacing, secondary elements */ + --bg-4: #212121; /* main background color */ + --hover: #353535; /* channels and buttons when hovered */ + --active: #4a4a4a; /* channels and buttons when selected */ + --message-hover: rgba(48, 48, 48, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-material-lighter b/build/base16-material-lighter index 2560156..a583f6f 100644 --- a/build/base16-material-lighter +++ b/build/base16-material-lighter @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fafafa; /* Black */ - --base01: #e7eaec; /* Bright Black */ - --base02: #cceae7; /* Grey */ - --base03: #ccd7da; /* Brighter Grey */ - --base04: #8796b0; /* Bright Grey */ - --base05: #80cbc4; /* White */ - --base06: #43a39a; /* Brighter White */ - --base07: #000000; /* Bright White */ - --base08: #ff5370; /* Red */ - --base09: #f76d47; /* Orange */ - --base0A: #ffb62c; /* Yellow */ - --base0B: #91b859; /* Green */ - --base0C: #39adb5; /* Cyan */ - --base0D: #6182b8; /* Blue */ - --base0E: #7c4dff; /* Purple */ - --base0F: #e53935; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #91b859; /* Green */ + --dnd-indicator: #ff5370; /* Red */ + --idle-indicator: #ffb62c; /* Yellow */ + --streaming-indicator: #7c4dff; /* Purple */ + + /* accent colors */ + --accent-1: #6182b8; /* links */ + --accent-2: #7c4dff; /* general unread/mention elements */ + --accent-3: #6182b8; /* accent buttons */ + --accent-4: #39adb5; /* accent buttons when hovered */ + --accent-5: #91b859; /* accent buttons when clicked */ + --mention: rgba(124, 77, 255, 0.1); + --mention-hover: rgba(124, 77, 255, 0.2); + + /* text colors */ + --text-0: #fafafa; /* text on colored elements */ + --text-1: #80cbc4; /* primary white-ish text */ + --text-2: #000000; /* headings */ + --text-3: #80cbc4; /* normal text */ + --text-4: #8796b0; /* icon buttons and channels */ + --text-5: #ccd7da; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #cceae7; /* dark buttons when clicked */ + --bg-2: #e7eaec; /* dark buttons */ + --bg-3: #cceae7; /* spacing, secondary elements */ + --bg-4: #fafafa; /* main background color */ + --hover: #cceae7; /* channels and buttons when hovered */ + --active: #ccd7da; /* channels and buttons when selected */ + --message-hover: rgba(231, 234, 236, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-material-palenight b/build/base16-material-palenight index f09b0f3..031b772 100644 --- a/build/base16-material-palenight +++ b/build/base16-material-palenight @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #292d3e; /* Black */ - --base01: #444267; /* Bright Black */ - --base02: #32374d; /* Grey */ - --base03: #676e95; /* Brighter Grey */ - --base04: #8796b0; /* Bright Grey */ - --base05: #959dcb; /* White */ - --base06: #959dcb; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #f07178; /* Red */ - --base09: #f78c6c; /* Orange */ - --base0A: #ffcb6b; /* Yellow */ - --base0B: #c3e88d; /* Green */ - --base0C: #89ddff; /* Cyan */ - --base0D: #82aaff; /* Blue */ - --base0E: #c792ea; /* Purple */ - --base0F: #ff5370; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #c3e88d; /* Green */ + --dnd-indicator: #f07178; /* Red */ + --idle-indicator: #ffcb6b; /* Yellow */ + --streaming-indicator: #c792ea; /* Purple */ + + /* accent colors */ + --accent-1: #82aaff; /* links */ + --accent-2: #c792ea; /* general unread/mention elements */ + --accent-3: #82aaff; /* accent buttons */ + --accent-4: #89ddff; /* accent buttons when hovered */ + --accent-5: #c3e88d; /* accent buttons when clicked */ + --mention: rgba(199, 146, 234, 0.1); + --mention-hover: rgba(199, 146, 234, 0.2); + + /* text colors */ + --text-0: #292d3e; /* text on colored elements */ + --text-1: #959dcb; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #959dcb; /* normal text */ + --text-4: #8796b0; /* icon buttons and channels */ + --text-5: #676e95; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #32374d; /* dark buttons when clicked */ + --bg-2: #444267; /* dark buttons */ + --bg-3: #32374d; /* spacing, secondary elements */ + --bg-4: #292d3e; /* main background color */ + --hover: #32374d; /* channels and buttons when hovered */ + --active: #676e95; /* channels and buttons when selected */ + --message-hover: rgba(68, 66, 103, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-material-vivid b/build/base16-material-vivid index 86cd147..a9b415b 100644 --- a/build/base16-material-vivid +++ b/build/base16-material-vivid @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #202124; /* Black */ - --base01: #27292c; /* Bright Black */ - --base02: #323639; /* Grey */ - --base03: #44464d; /* Brighter Grey */ - --base04: #676c71; /* Bright Grey */ - --base05: #80868b; /* White */ - --base06: #9e9e9e; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #f44336; /* Red */ - --base09: #ff9800; /* Orange */ - --base0A: #ffeb3b; /* Yellow */ - --base0B: #00e676; /* Green */ - --base0C: #00bcd4; /* Cyan */ - --base0D: #2196f3; /* Blue */ - --base0E: #673ab7; /* Purple */ - --base0F: #8d6e63; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #00e676; /* Green */ + --dnd-indicator: #f44336; /* Red */ + --idle-indicator: #ffeb3b; /* Yellow */ + --streaming-indicator: #673ab7; /* Purple */ + + /* accent colors */ + --accent-1: #2196f3; /* links */ + --accent-2: #673ab7; /* general unread/mention elements */ + --accent-3: #2196f3; /* accent buttons */ + --accent-4: #00bcd4; /* accent buttons when hovered */ + --accent-5: #00e676; /* accent buttons when clicked */ + --mention: rgba(103, 58, 183, 0.1); + --mention-hover: rgba(103, 58, 183, 0.2); + + /* text colors */ + --text-0: #202124; /* text on colored elements */ + --text-1: #80868b; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #80868b; /* normal text */ + --text-4: #676c71; /* icon buttons and channels */ + --text-5: #44464d; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #323639; /* dark buttons when clicked */ + --bg-2: #27292c; /* dark buttons */ + --bg-3: #323639; /* spacing, secondary elements */ + --bg-4: #202124; /* main background color */ + --hover: #323639; /* channels and buttons when hovered */ + --active: #44464d; /* channels and buttons when selected */ + --message-hover: rgba(39, 41, 44, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-measured-dark b/build/base16-measured-dark index 49a8d3e..081ad2d 100644 --- a/build/base16-measured-dark +++ b/build/base16-measured-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #00211f; /* Black */ - --base01: #003a38; /* Bright Black */ - --base02: #005453; /* Grey */ - --base03: #ababab; /* Brighter Grey */ - --base04: #c3c3c3; /* Bright Grey */ - --base05: #dcdcdc; /* White */ - --base06: #efefef; /* Brighter White */ - --base07: #f5f5f5; /* Bright White */ - --base08: #ce7e8e; /* Red */ - --base09: #dca37c; /* Orange */ - --base0A: #bfac4e; /* Yellow */ - --base0B: #56c16f; /* Green */ - --base0C: #62c0be; /* Cyan */ - --base0D: #88b0da; /* Blue */ - --base0E: #b39be0; /* Purple */ - --base0F: #d89aba; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #56c16f; /* Green */ + --dnd-indicator: #ce7e8e; /* Red */ + --idle-indicator: #bfac4e; /* Yellow */ + --streaming-indicator: #b39be0; /* Purple */ + + /* accent colors */ + --accent-1: #88b0da; /* links */ + --accent-2: #b39be0; /* general unread/mention elements */ + --accent-3: #88b0da; /* accent buttons */ + --accent-4: #62c0be; /* accent buttons when hovered */ + --accent-5: #56c16f; /* accent buttons when clicked */ + --mention: rgba(179, 155, 224, 0.1); + --mention-hover: rgba(179, 155, 224, 0.2); + + /* text colors */ + --text-0: #00211f; /* text on colored elements */ + --text-1: #dcdcdc; /* primary white-ish text */ + --text-2: #f5f5f5; /* headings */ + --text-3: #dcdcdc; /* normal text */ + --text-4: #c3c3c3; /* icon buttons and channels */ + --text-5: #ababab; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #005453; /* dark buttons when clicked */ + --bg-2: #003a38; /* dark buttons */ + --bg-3: #005453; /* spacing, secondary elements */ + --bg-4: #00211f; /* main background color */ + --hover: #005453; /* channels and buttons when hovered */ + --active: #ababab; /* channels and buttons when selected */ + --message-hover: rgba(0, 58, 56, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-measured-light b/build/base16-measured-light index ad8520e..4490db1 100644 --- a/build/base16-measured-light +++ b/build/base16-measured-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fdf9f5; /* Black */ - --base01: #f9f5f1; /* Bright Black */ - --base02: #ffeada; /* Grey */ - --base03: #5a5a5a; /* Brighter Grey */ - --base04: #404040; /* Bright Grey */ - --base05: #292929; /* White */ - --base06: #181818; /* Brighter White */ - --base07: #000000; /* Bright White */ - --base08: #ac1f35; /* Red */ - --base09: #ad5601; /* Orange */ - --base0A: #645a00; /* Yellow */ - --base0B: #0c680c; /* Green */ - --base0C: #01716f; /* Cyan */ - --base0D: #0158ad; /* Blue */ - --base0E: #6645c2; /* Purple */ - --base0F: #a81a66; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #0c680c; /* Green */ + --dnd-indicator: #ac1f35; /* Red */ + --idle-indicator: #645a00; /* Yellow */ + --streaming-indicator: #6645c2; /* Purple */ + + /* accent colors */ + --accent-1: #0158ad; /* links */ + --accent-2: #6645c2; /* general unread/mention elements */ + --accent-3: #0158ad; /* accent buttons */ + --accent-4: #01716f; /* accent buttons when hovered */ + --accent-5: #0c680c; /* accent buttons when clicked */ + --mention: rgba(102, 69, 194, 0.1); + --mention-hover: rgba(102, 69, 194, 0.2); + + /* text colors */ + --text-0: #fdf9f5; /* text on colored elements */ + --text-1: #292929; /* primary white-ish text */ + --text-2: #000000; /* headings */ + --text-3: #292929; /* normal text */ + --text-4: #404040; /* icon buttons and channels */ + --text-5: #5a5a5a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #ffeada; /* dark buttons when clicked */ + --bg-2: #f9f5f1; /* dark buttons */ + --bg-3: #ffeada; /* spacing, secondary elements */ + --bg-4: #fdf9f5; /* main background color */ + --hover: #ffeada; /* channels and buttons when hovered */ + --active: #5a5a5a; /* channels and buttons when selected */ + --message-hover: rgba(249, 245, 241, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-mellow-purple b/build/base16-mellow-purple index 14a0ea9..29ba1f2 100644 --- a/build/base16-mellow-purple +++ b/build/base16-mellow-purple @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1e0528; /* Black */ - --base01: #1a092d; /* Bright Black */ - --base02: #331354; /* Grey */ - --base03: #320f55; /* Brighter Grey */ - --base04: #873582; /* Bright Grey */ - --base05: #ffeeff; /* White */ - --base06: #ffeeff; /* Brighter White */ - --base07: #f8c0ff; /* Bright White */ - --base08: #00d9e9; /* Red */ - --base09: #aa00a3; /* Orange */ - --base0A: #955ae7; /* Yellow */ - --base0B: #05cb0d; /* Green */ - --base0C: #b900b1; /* Cyan */ - --base0D: #550068; /* Blue */ - --base0E: #8991bb; /* Purple */ - --base0F: #4d6fff; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #05cb0d; /* Green */ + --dnd-indicator: #00d9e9; /* Red */ + --idle-indicator: #955ae7; /* Yellow */ + --streaming-indicator: #8991bb; /* Purple */ + + /* accent colors */ + --accent-1: #550068; /* links */ + --accent-2: #8991bb; /* general unread/mention elements */ + --accent-3: #550068; /* accent buttons */ + --accent-4: #b900b1; /* accent buttons when hovered */ + --accent-5: #05cb0d; /* accent buttons when clicked */ + --mention: rgba(137, 145, 187, 0.1); + --mention-hover: rgba(137, 145, 187, 0.2); + + /* text colors */ + --text-0: #1e0528; /* text on colored elements */ + --text-1: #ffeeff; /* primary white-ish text */ + --text-2: #f8c0ff; /* headings */ + --text-3: #ffeeff; /* normal text */ + --text-4: #873582; /* icon buttons and channels */ + --text-5: #320f55; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #331354; /* dark buttons when clicked */ + --bg-2: #1a092d; /* dark buttons */ + --bg-3: #331354; /* spacing, secondary elements */ + --bg-4: #1e0528; /* main background color */ + --hover: #331354; /* channels and buttons when hovered */ + --active: #320f55; /* channels and buttons when selected */ + --message-hover: rgba(26, 9, 45, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-mexico-light b/build/base16-mexico-light index 6e2defd..e328e47 100644 --- a/build/base16-mexico-light +++ b/build/base16-mexico-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f8f8f8; /* Black */ - --base01: #e8e8e8; /* Bright Black */ - --base02: #d8d8d8; /* Grey */ - --base03: #b8b8b8; /* Brighter Grey */ - --base04: #585858; /* Bright Grey */ - --base05: #383838; /* White */ - --base06: #282828; /* Brighter White */ - --base07: #181818; /* Bright White */ - --base08: #ab4642; /* Red */ - --base09: #dc9656; /* Orange */ - --base0A: #f79a0e; /* Yellow */ - --base0B: #538947; /* Green */ - --base0C: #4b8093; /* Cyan */ - --base0D: #7cafc2; /* Blue */ - --base0E: #96609e; /* Purple */ - --base0F: #a16946; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #538947; /* Green */ + --dnd-indicator: #ab4642; /* Red */ + --idle-indicator: #f79a0e; /* Yellow */ + --streaming-indicator: #96609e; /* Purple */ + + /* accent colors */ + --accent-1: #7cafc2; /* links */ + --accent-2: #96609e; /* general unread/mention elements */ + --accent-3: #7cafc2; /* accent buttons */ + --accent-4: #4b8093; /* accent buttons when hovered */ + --accent-5: #538947; /* accent buttons when clicked */ + --mention: rgba(150, 96, 158, 0.1); + --mention-hover: rgba(150, 96, 158, 0.2); + + /* text colors */ + --text-0: #f8f8f8; /* text on colored elements */ + --text-1: #383838; /* primary white-ish text */ + --text-2: #181818; /* headings */ + --text-3: #383838; /* normal text */ + --text-4: #585858; /* icon buttons and channels */ + --text-5: #b8b8b8; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d8d8d8; /* dark buttons when clicked */ + --bg-2: #e8e8e8; /* dark buttons */ + --bg-3: #d8d8d8; /* spacing, secondary elements */ + --bg-4: #f8f8f8; /* main background color */ + --hover: #d8d8d8; /* channels and buttons when hovered */ + --active: #b8b8b8; /* channels and buttons when selected */ + --message-hover: rgba(232, 232, 232, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-mocha b/build/base16-mocha index 84c2462..38009a4 100644 --- a/build/base16-mocha +++ b/build/base16-mocha @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #3b3228; /* Black */ - --base01: #534636; /* Bright Black */ - --base02: #645240; /* Grey */ - --base03: #7e705a; /* Brighter Grey */ - --base04: #b8afad; /* Bright Grey */ - --base05: #d0c8c6; /* White */ - --base06: #e9e1dd; /* Brighter White */ - --base07: #f5eeeb; /* Bright White */ - --base08: #cb6077; /* Red */ - --base09: #d28b71; /* Orange */ - --base0A: #f4bc87; /* Yellow */ - --base0B: #beb55b; /* Green */ - --base0C: #7bbda4; /* Cyan */ - --base0D: #8ab3b5; /* Blue */ - --base0E: #a89bb9; /* Purple */ - --base0F: #bb9584; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #beb55b; /* Green */ + --dnd-indicator: #cb6077; /* Red */ + --idle-indicator: #f4bc87; /* Yellow */ + --streaming-indicator: #a89bb9; /* Purple */ + + /* accent colors */ + --accent-1: #8ab3b5; /* links */ + --accent-2: #a89bb9; /* general unread/mention elements */ + --accent-3: #8ab3b5; /* accent buttons */ + --accent-4: #7bbda4; /* accent buttons when hovered */ + --accent-5: #beb55b; /* accent buttons when clicked */ + --mention: rgba(168, 155, 185, 0.1); + --mention-hover: rgba(168, 155, 185, 0.2); + + /* text colors */ + --text-0: #3b3228; /* text on colored elements */ + --text-1: #d0c8c6; /* primary white-ish text */ + --text-2: #f5eeeb; /* headings */ + --text-3: #d0c8c6; /* normal text */ + --text-4: #b8afad; /* icon buttons and channels */ + --text-5: #7e705a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #645240; /* dark buttons when clicked */ + --bg-2: #534636; /* dark buttons */ + --bg-3: #645240; /* spacing, secondary elements */ + --bg-4: #3b3228; /* main background color */ + --hover: #645240; /* channels and buttons when hovered */ + --active: #7e705a; /* channels and buttons when selected */ + --message-hover: rgba(83, 70, 54, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-monokai b/build/base16-monokai index 8c9a802..b444afa 100644 --- a/build/base16-monokai +++ b/build/base16-monokai @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #272822; /* Black */ - --base01: #383830; /* Bright Black */ - --base02: #49483e; /* Grey */ - --base03: #75715e; /* Brighter Grey */ - --base04: #a59f85; /* Bright Grey */ - --base05: #f8f8f2; /* White */ - --base06: #f5f4f1; /* Brighter White */ - --base07: #f9f8f5; /* Bright White */ - --base08: #f92672; /* Red */ - --base09: #fd971f; /* Orange */ - --base0A: #f4bf75; /* Yellow */ - --base0B: #a6e22e; /* Green */ - --base0C: #a1efe4; /* Cyan */ - --base0D: #66d9ef; /* Blue */ - --base0E: #ae81ff; /* Purple */ - --base0F: #cc6633; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a6e22e; /* Green */ + --dnd-indicator: #f92672; /* Red */ + --idle-indicator: #f4bf75; /* Yellow */ + --streaming-indicator: #ae81ff; /* Purple */ + + /* accent colors */ + --accent-1: #66d9ef; /* links */ + --accent-2: #ae81ff; /* general unread/mention elements */ + --accent-3: #66d9ef; /* accent buttons */ + --accent-4: #a1efe4; /* accent buttons when hovered */ + --accent-5: #a6e22e; /* accent buttons when clicked */ + --mention: rgba(174, 129, 255, 0.1); + --mention-hover: rgba(174, 129, 255, 0.2); + + /* text colors */ + --text-0: #272822; /* text on colored elements */ + --text-1: #f8f8f2; /* primary white-ish text */ + --text-2: #f9f8f5; /* headings */ + --text-3: #f8f8f2; /* normal text */ + --text-4: #a59f85; /* icon buttons and channels */ + --text-5: #75715e; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #49483e; /* dark buttons when clicked */ + --bg-2: #383830; /* dark buttons */ + --bg-3: #49483e; /* spacing, secondary elements */ + --bg-4: #272822; /* main background color */ + --hover: #49483e; /* channels and buttons when hovered */ + --active: #75715e; /* channels and buttons when selected */ + --message-hover: rgba(56, 56, 48, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-moonlight b/build/base16-moonlight index 84b56de..c44d334 100644 --- a/build/base16-moonlight +++ b/build/base16-moonlight @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #212337; /* Black */ - --base01: #403c64; /* Bright Black */ - --base02: #596399; /* Grey */ - --base03: #748cd6; /* Brighter Grey */ - --base04: #a1abe0; /* Bright Grey */ - --base05: #a3ace1; /* White */ - --base06: #b4a4f4; /* Brighter White */ - --base07: #ef43fa; /* Bright White */ - --base08: #ff5370; /* Red */ - --base09: #f67f81; /* Orange */ - --base0A: #ffc777; /* Yellow */ - --base0B: #2df4c0; /* Green */ - --base0C: #04d1f9; /* Cyan */ - --base0D: #40ffff; /* Blue */ - --base0E: #b994f1; /* Purple */ - --base0F: #ecb2f0; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #2df4c0; /* Green */ + --dnd-indicator: #ff5370; /* Red */ + --idle-indicator: #ffc777; /* Yellow */ + --streaming-indicator: #b994f1; /* Purple */ + + /* accent colors */ + --accent-1: #40ffff; /* links */ + --accent-2: #b994f1; /* general unread/mention elements */ + --accent-3: #40ffff; /* accent buttons */ + --accent-4: #04d1f9; /* accent buttons when hovered */ + --accent-5: #2df4c0; /* accent buttons when clicked */ + --mention: rgba(185, 148, 241, 0.1); + --mention-hover: rgba(185, 148, 241, 0.2); + + /* text colors */ + --text-0: #212337; /* text on colored elements */ + --text-1: #a3ace1; /* primary white-ish text */ + --text-2: #ef43fa; /* headings */ + --text-3: #a3ace1; /* normal text */ + --text-4: #a1abe0; /* icon buttons and channels */ + --text-5: #748cd6; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #596399; /* dark buttons when clicked */ + --bg-2: #403c64; /* dark buttons */ + --bg-3: #596399; /* spacing, secondary elements */ + --bg-4: #212337; /* main background color */ + --hover: #596399; /* channels and buttons when hovered */ + --active: #748cd6; /* channels and buttons when selected */ + --message-hover: rgba(64, 60, 100, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-mountain b/build/base16-mountain index ab01321..4a88321 100644 --- a/build/base16-mountain +++ b/build/base16-mountain @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #0f0f0f; /* Black */ - --base01: #191919; /* Bright Black */ - --base02: #262626; /* Grey */ - --base03: #393939; /* Brighter Grey */ - --base04: #4c4c4c; /* Bright Grey */ - --base05: #cacaca; /* White */ - --base06: #e7e7e7; /* Brighter White */ - --base07: #f0f0f0; /* Bright White */ - --base08: #ac8a8c; /* Red */ - --base09: #ceb188; /* Orange */ - --base0A: #aca98a; /* Yellow */ - --base0B: #8aac8b; /* Green */ - --base0C: #8aabac; /* Cyan */ - --base0D: #8f8aac; /* Blue */ - --base0E: #ac8aac; /* Purple */ - --base0F: #ac8a8c; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #8aac8b; /* Green */ + --dnd-indicator: #ac8a8c; /* Red */ + --idle-indicator: #aca98a; /* Yellow */ + --streaming-indicator: #ac8aac; /* Purple */ + + /* accent colors */ + --accent-1: #8f8aac; /* links */ + --accent-2: #ac8aac; /* general unread/mention elements */ + --accent-3: #8f8aac; /* accent buttons */ + --accent-4: #8aabac; /* accent buttons when hovered */ + --accent-5: #8aac8b; /* accent buttons when clicked */ + --mention: rgba(172, 138, 172, 0.1); + --mention-hover: rgba(172, 138, 172, 0.2); + + /* text colors */ + --text-0: #0f0f0f; /* text on colored elements */ + --text-1: #cacaca; /* primary white-ish text */ + --text-2: #f0f0f0; /* headings */ + --text-3: #cacaca; /* normal text */ + --text-4: #4c4c4c; /* icon buttons and channels */ + --text-5: #393939; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #262626; /* dark buttons when clicked */ + --bg-2: #191919; /* dark buttons */ + --bg-3: #262626; /* spacing, secondary elements */ + --bg-4: #0f0f0f; /* main background color */ + --hover: #262626; /* channels and buttons when hovered */ + --active: #393939; /* channels and buttons when selected */ + --message-hover: rgba(25, 25, 25, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-nebula b/build/base16-nebula index 44c8159..3d730ff 100644 --- a/build/base16-nebula +++ b/build/base16-nebula @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #22273b; /* Black */ - --base01: #414f60; /* Bright Black */ - --base02: #5a8380; /* Grey */ - --base03: #6e6f72; /* Brighter Grey */ - --base04: #87888b; /* Bright Grey */ - --base05: #a4a6a9; /* White */ - --base06: #c7c9cd; /* Brighter White */ - --base07: #8dbdaa; /* Bright White */ - --base08: #777abc; /* Red */ - --base09: #94929e; /* Orange */ - --base0A: #4f9062; /* Yellow */ - --base0B: #6562a8; /* Green */ - --base0C: #226f68; /* Cyan */ - --base0D: #4d6bb6; /* Blue */ - --base0E: #716cae; /* Purple */ - --base0F: #8c70a7; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #6562a8; /* Green */ + --dnd-indicator: #777abc; /* Red */ + --idle-indicator: #4f9062; /* Yellow */ + --streaming-indicator: #716cae; /* Purple */ + + /* accent colors */ + --accent-1: #4d6bb6; /* links */ + --accent-2: #716cae; /* general unread/mention elements */ + --accent-3: #4d6bb6; /* accent buttons */ + --accent-4: #226f68; /* accent buttons when hovered */ + --accent-5: #6562a8; /* accent buttons when clicked */ + --mention: rgba(113, 108, 174, 0.1); + --mention-hover: rgba(113, 108, 174, 0.2); + + /* text colors */ + --text-0: #22273b; /* text on colored elements */ + --text-1: #a4a6a9; /* primary white-ish text */ + --text-2: #8dbdaa; /* headings */ + --text-3: #a4a6a9; /* normal text */ + --text-4: #87888b; /* icon buttons and channels */ + --text-5: #6e6f72; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #5a8380; /* dark buttons when clicked */ + --bg-2: #414f60; /* dark buttons */ + --bg-3: #5a8380; /* spacing, secondary elements */ + --bg-4: #22273b; /* main background color */ + --hover: #5a8380; /* channels and buttons when hovered */ + --active: #6e6f72; /* channels and buttons when selected */ + --message-hover: rgba(65, 79, 96, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-nord b/build/base16-nord index 17096ae..a050f7e 100644 --- a/build/base16-nord +++ b/build/base16-nord @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2e3440; /* Black */ - --base01: #3b4252; /* Bright Black */ - --base02: #434c5e; /* Grey */ - --base03: #4c566a; /* Brighter Grey */ - --base04: #d8dee9; /* Bright Grey */ - --base05: #e5e9f0; /* White */ - --base06: #eceff4; /* Brighter White */ - --base07: #8fbcbb; /* Bright White */ - --base08: #bf616a; /* Red */ - --base09: #d08770; /* Orange */ - --base0A: #ebcb8b; /* Yellow */ - --base0B: #a3be8c; /* Green */ - --base0C: #88c0d0; /* Cyan */ - --base0D: #81a1c1; /* Blue */ - --base0E: #b48ead; /* Purple */ - --base0F: #5e81ac; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a3be8c; /* Green */ + --dnd-indicator: #bf616a; /* Red */ + --idle-indicator: #ebcb8b; /* Yellow */ + --streaming-indicator: #b48ead; /* Purple */ + + /* accent colors */ + --accent-1: #81a1c1; /* links */ + --accent-2: #b48ead; /* general unread/mention elements */ + --accent-3: #81a1c1; /* accent buttons */ + --accent-4: #88c0d0; /* accent buttons when hovered */ + --accent-5: #a3be8c; /* accent buttons when clicked */ + --mention: rgba(180, 142, 173, 0.1); + --mention-hover: rgba(180, 142, 173, 0.2); + + /* text colors */ + --text-0: #2e3440; /* text on colored elements */ + --text-1: #e5e9f0; /* primary white-ish text */ + --text-2: #8fbcbb; /* headings */ + --text-3: #e5e9f0; /* normal text */ + --text-4: #d8dee9; /* icon buttons and channels */ + --text-5: #4c566a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #434c5e; /* dark buttons when clicked */ + --bg-2: #3b4252; /* dark buttons */ + --bg-3: #434c5e; /* spacing, secondary elements */ + --bg-4: #2e3440; /* main background color */ + --hover: #434c5e; /* channels and buttons when hovered */ + --active: #4c566a; /* channels and buttons when selected */ + --message-hover: rgba(59, 66, 82, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-nord-light b/build/base16-nord-light index fab9c8b..493eb83 100644 --- a/build/base16-nord-light +++ b/build/base16-nord-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #e5e9f0; /* Black */ - --base01: #c2d0e7; /* Bright Black */ - --base02: #b8c5db; /* Grey */ - --base03: #aebacf; /* Brighter Grey */ - --base04: #60728c; /* Bright Grey */ - --base05: #2e3440; /* White */ - --base06: #3b4252; /* Brighter White */ - --base07: #29838d; /* Bright White */ - --base08: #99324b; /* Red */ - --base09: #ac4426; /* Orange */ - --base0A: #9a7500; /* Yellow */ - --base0B: #4f894c; /* Green */ - --base0C: #398eac; /* Cyan */ - --base0D: #3b6ea8; /* Blue */ - --base0E: #97365b; /* Purple */ - --base0F: #5272af; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #4f894c; /* Green */ + --dnd-indicator: #99324b; /* Red */ + --idle-indicator: #9a7500; /* Yellow */ + --streaming-indicator: #97365b; /* Purple */ + + /* accent colors */ + --accent-1: #3b6ea8; /* links */ + --accent-2: #97365b; /* general unread/mention elements */ + --accent-3: #3b6ea8; /* accent buttons */ + --accent-4: #398eac; /* accent buttons when hovered */ + --accent-5: #4f894c; /* accent buttons when clicked */ + --mention: rgba(151, 54, 91, 0.1); + --mention-hover: rgba(151, 54, 91, 0.2); + + /* text colors */ + --text-0: #e5e9f0; /* text on colored elements */ + --text-1: #2e3440; /* primary white-ish text */ + --text-2: #29838d; /* headings */ + --text-3: #2e3440; /* normal text */ + --text-4: #60728c; /* icon buttons and channels */ + --text-5: #aebacf; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #b8c5db; /* dark buttons when clicked */ + --bg-2: #c2d0e7; /* dark buttons */ + --bg-3: #b8c5db; /* spacing, secondary elements */ + --bg-4: #e5e9f0; /* main background color */ + --hover: #b8c5db; /* channels and buttons when hovered */ + --active: #aebacf; /* channels and buttons when selected */ + --message-hover: rgba(194, 208, 231, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-nova b/build/base16-nova index 235a6af..b250373 100644 --- a/build/base16-nova +++ b/build/base16-nova @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #3c4c55; /* Black */ - --base01: #556873; /* Bright Black */ - --base02: #6a7d89; /* Grey */ - --base03: #899ba6; /* Brighter Grey */ - --base04: #899ba6; /* Bright Grey */ - --base05: #c5d4dd; /* White */ - --base06: #899ba6; /* Brighter White */ - --base07: #556873; /* Bright White */ - --base08: #83afe5; /* Red */ - --base09: #7fc1ca; /* Orange */ - --base0A: #a8ce93; /* Yellow */ - --base0B: #7fc1ca; /* Green */ - --base0C: #f2c38f; /* Cyan */ - --base0D: #83afe5; /* Blue */ - --base0E: #9a93e1; /* Purple */ - --base0F: #f2c38f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #7fc1ca; /* Green */ + --dnd-indicator: #83afe5; /* Red */ + --idle-indicator: #a8ce93; /* Yellow */ + --streaming-indicator: #9a93e1; /* Purple */ + + /* accent colors */ + --accent-1: #83afe5; /* links */ + --accent-2: #9a93e1; /* general unread/mention elements */ + --accent-3: #83afe5; /* accent buttons */ + --accent-4: #f2c38f; /* accent buttons when hovered */ + --accent-5: #7fc1ca; /* accent buttons when clicked */ + --mention: rgba(154, 147, 225, 0.1); + --mention-hover: rgba(154, 147, 225, 0.2); + + /* text colors */ + --text-0: #3c4c55; /* text on colored elements */ + --text-1: #c5d4dd; /* primary white-ish text */ + --text-2: #556873; /* headings */ + --text-3: #c5d4dd; /* normal text */ + --text-4: #899ba6; /* icon buttons and channels */ + --text-5: #899ba6; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #6a7d89; /* dark buttons when clicked */ + --bg-2: #556873; /* dark buttons */ + --bg-3: #6a7d89; /* spacing, secondary elements */ + --bg-4: #3c4c55; /* main background color */ + --hover: #6a7d89; /* channels and buttons when hovered */ + --active: #899ba6; /* channels and buttons when selected */ + --message-hover: rgba(85, 104, 115, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-ocean b/build/base16-ocean index 657c614..bfa5d29 100644 --- a/build/base16-ocean +++ b/build/base16-ocean @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2b303b; /* Black */ - --base01: #343d46; /* Bright Black */ - --base02: #4f5b66; /* Grey */ - --base03: #65737e; /* Brighter Grey */ - --base04: #a7adba; /* Bright Grey */ - --base05: #c0c5ce; /* White */ - --base06: #dfe1e8; /* Brighter White */ - --base07: #eff1f5; /* Bright White */ - --base08: #bf616a; /* Red */ - --base09: #d08770; /* Orange */ - --base0A: #ebcb8b; /* Yellow */ - --base0B: #a3be8c; /* Green */ - --base0C: #96b5b4; /* Cyan */ - --base0D: #8fa1b3; /* Blue */ - --base0E: #b48ead; /* Purple */ - --base0F: #ab7967; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a3be8c; /* Green */ + --dnd-indicator: #bf616a; /* Red */ + --idle-indicator: #ebcb8b; /* Yellow */ + --streaming-indicator: #b48ead; /* Purple */ + + /* accent colors */ + --accent-1: #8fa1b3; /* links */ + --accent-2: #b48ead; /* general unread/mention elements */ + --accent-3: #8fa1b3; /* accent buttons */ + --accent-4: #96b5b4; /* accent buttons when hovered */ + --accent-5: #a3be8c; /* accent buttons when clicked */ + --mention: rgba(180, 142, 173, 0.1); + --mention-hover: rgba(180, 142, 173, 0.2); + + /* text colors */ + --text-0: #2b303b; /* text on colored elements */ + --text-1: #c0c5ce; /* primary white-ish text */ + --text-2: #eff1f5; /* headings */ + --text-3: #c0c5ce; /* normal text */ + --text-4: #a7adba; /* icon buttons and channels */ + --text-5: #65737e; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #4f5b66; /* dark buttons when clicked */ + --bg-2: #343d46; /* dark buttons */ + --bg-3: #4f5b66; /* spacing, secondary elements */ + --bg-4: #2b303b; /* main background color */ + --hover: #4f5b66; /* channels and buttons when hovered */ + --active: #65737e; /* channels and buttons when selected */ + --message-hover: rgba(52, 61, 70, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-oceanicnext b/build/base16-oceanicnext index 7935612..571c6b6 100644 --- a/build/base16-oceanicnext +++ b/build/base16-oceanicnext @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1b2b34; /* Black */ - --base01: #343d46; /* Bright Black */ - --base02: #4f5b66; /* Grey */ - --base03: #65737e; /* Brighter Grey */ - --base04: #a7adba; /* Bright Grey */ - --base05: #c0c5ce; /* White */ - --base06: #cdd3de; /* Brighter White */ - --base07: #d8dee9; /* Bright White */ - --base08: #ec5f67; /* Red */ - --base09: #f99157; /* Orange */ - --base0A: #fac863; /* Yellow */ - --base0B: #99c794; /* Green */ - --base0C: #5fb3b3; /* Cyan */ - --base0D: #6699cc; /* Blue */ - --base0E: #c594c5; /* Purple */ - --base0F: #ab7967; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #99c794; /* Green */ + --dnd-indicator: #ec5f67; /* Red */ + --idle-indicator: #fac863; /* Yellow */ + --streaming-indicator: #c594c5; /* Purple */ + + /* accent colors */ + --accent-1: #6699cc; /* links */ + --accent-2: #c594c5; /* general unread/mention elements */ + --accent-3: #6699cc; /* accent buttons */ + --accent-4: #5fb3b3; /* accent buttons when hovered */ + --accent-5: #99c794; /* accent buttons when clicked */ + --mention: rgba(197, 148, 197, 0.1); + --mention-hover: rgba(197, 148, 197, 0.2); + + /* text colors */ + --text-0: #1b2b34; /* text on colored elements */ + --text-1: #c0c5ce; /* primary white-ish text */ + --text-2: #d8dee9; /* headings */ + --text-3: #c0c5ce; /* normal text */ + --text-4: #a7adba; /* icon buttons and channels */ + --text-5: #65737e; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #4f5b66; /* dark buttons when clicked */ + --bg-2: #343d46; /* dark buttons */ + --bg-3: #4f5b66; /* spacing, secondary elements */ + --bg-4: #1b2b34; /* main background color */ + --hover: #4f5b66; /* channels and buttons when hovered */ + --active: #65737e; /* channels and buttons when selected */ + --message-hover: rgba(52, 61, 70, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-one-light b/build/base16-one-light index edfec74..78ce8ad 100644 --- a/build/base16-one-light +++ b/build/base16-one-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fafafa; /* Black */ - --base01: #f0f0f1; /* Bright Black */ - --base02: #e5e5e6; /* Grey */ - --base03: #a0a1a7; /* Brighter Grey */ - --base04: #696c77; /* Bright Grey */ - --base05: #383a42; /* White */ - --base06: #202227; /* Brighter White */ - --base07: #090a0b; /* Bright White */ - --base08: #ca1243; /* Red */ - --base09: #d75f00; /* Orange */ - --base0A: #c18401; /* Yellow */ - --base0B: #50a14f; /* Green */ - --base0C: #0184bc; /* Cyan */ - --base0D: #4078f2; /* Blue */ - --base0E: #a626a4; /* Purple */ - --base0F: #986801; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #50a14f; /* Green */ + --dnd-indicator: #ca1243; /* Red */ + --idle-indicator: #c18401; /* Yellow */ + --streaming-indicator: #a626a4; /* Purple */ + + /* accent colors */ + --accent-1: #4078f2; /* links */ + --accent-2: #a626a4; /* general unread/mention elements */ + --accent-3: #4078f2; /* accent buttons */ + --accent-4: #0184bc; /* accent buttons when hovered */ + --accent-5: #50a14f; /* accent buttons when clicked */ + --mention: rgba(166, 38, 164, 0.1); + --mention-hover: rgba(166, 38, 164, 0.2); + + /* text colors */ + --text-0: #fafafa; /* text on colored elements */ + --text-1: #383a42; /* primary white-ish text */ + --text-2: #090a0b; /* headings */ + --text-3: #383a42; /* normal text */ + --text-4: #696c77; /* icon buttons and channels */ + --text-5: #a0a1a7; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #e5e5e6; /* dark buttons when clicked */ + --bg-2: #f0f0f1; /* dark buttons */ + --bg-3: #e5e5e6; /* spacing, secondary elements */ + --bg-4: #fafafa; /* main background color */ + --hover: #e5e5e6; /* channels and buttons when hovered */ + --active: #a0a1a7; /* channels and buttons when selected */ + --message-hover: rgba(240, 240, 241, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-onedark b/build/base16-onedark index 9646cd1..a377645 100644 --- a/build/base16-onedark +++ b/build/base16-onedark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #282c34; /* Black */ - --base01: #353b45; /* Bright Black */ - --base02: #3e4451; /* Grey */ - --base03: #545862; /* Brighter Grey */ - --base04: #565c64; /* Bright Grey */ - --base05: #abb2bf; /* White */ - --base06: #b6bdca; /* Brighter White */ - --base07: #c8ccd4; /* Bright White */ - --base08: #e06c75; /* Red */ - --base09: #d19a66; /* Orange */ - --base0A: #e5c07b; /* Yellow */ - --base0B: #98c379; /* Green */ - --base0C: #56b6c2; /* Cyan */ - --base0D: #61afef; /* Blue */ - --base0E: #c678dd; /* Purple */ - --base0F: #be5046; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #98c379; /* Green */ + --dnd-indicator: #e06c75; /* Red */ + --idle-indicator: #e5c07b; /* Yellow */ + --streaming-indicator: #c678dd; /* Purple */ + + /* accent colors */ + --accent-1: #61afef; /* links */ + --accent-2: #c678dd; /* general unread/mention elements */ + --accent-3: #61afef; /* accent buttons */ + --accent-4: #56b6c2; /* accent buttons when hovered */ + --accent-5: #98c379; /* accent buttons when clicked */ + --mention: rgba(198, 120, 221, 0.1); + --mention-hover: rgba(198, 120, 221, 0.2); + + /* text colors */ + --text-0: #282c34; /* text on colored elements */ + --text-1: #abb2bf; /* primary white-ish text */ + --text-2: #c8ccd4; /* headings */ + --text-3: #abb2bf; /* normal text */ + --text-4: #565c64; /* icon buttons and channels */ + --text-5: #545862; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3e4451; /* dark buttons when clicked */ + --bg-2: #353b45; /* dark buttons */ + --bg-3: #3e4451; /* spacing, secondary elements */ + --bg-4: #282c34; /* main background color */ + --hover: #3e4451; /* channels and buttons when hovered */ + --active: #545862; /* channels and buttons when selected */ + --message-hover: rgba(53, 59, 69, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-onedark-dark b/build/base16-onedark-dark index d1ae94c..dd021d7 100644 --- a/build/base16-onedark-dark +++ b/build/base16-onedark-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #1c1f24; /* Bright Black */ - --base02: #2c313a; /* Grey */ - --base03: #434852; /* Brighter Grey */ - --base04: #565c64; /* Bright Grey */ - --base05: #abb2bf; /* White */ - --base06: #b6bdca; /* Brighter White */ - --base07: #c8ccd4; /* Bright White */ - --base08: #ef596f; /* Red */ - --base09: #d19a66; /* Orange */ - --base0A: #e5c07b; /* Yellow */ - --base0B: #89ca78; /* Green */ - --base0C: #2bbac5; /* Cyan */ - --base0D: #61afef; /* Blue */ - --base0E: #d55fde; /* Purple */ - --base0F: #be5046; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #89ca78; /* Green */ + --dnd-indicator: #ef596f; /* Red */ + --idle-indicator: #e5c07b; /* Yellow */ + --streaming-indicator: #d55fde; /* Purple */ + + /* accent colors */ + --accent-1: #61afef; /* links */ + --accent-2: #d55fde; /* general unread/mention elements */ + --accent-3: #61afef; /* accent buttons */ + --accent-4: #2bbac5; /* accent buttons when hovered */ + --accent-5: #89ca78; /* accent buttons when clicked */ + --mention: rgba(213, 95, 222, 0.1); + --mention-hover: rgba(213, 95, 222, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #abb2bf; /* primary white-ish text */ + --text-2: #c8ccd4; /* headings */ + --text-3: #abb2bf; /* normal text */ + --text-4: #565c64; /* icon buttons and channels */ + --text-5: #434852; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #2c313a; /* dark buttons when clicked */ + --bg-2: #1c1f24; /* dark buttons */ + --bg-3: #2c313a; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #2c313a; /* channels and buttons when hovered */ + --active: #434852; /* channels and buttons when selected */ + --message-hover: rgba(28, 31, 36, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-outrun-dark b/build/base16-outrun-dark index faf53c6..095b135 100644 --- a/build/base16-outrun-dark +++ b/build/base16-outrun-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #00002a; /* Black */ - --base01: #20204a; /* Bright Black */ - --base02: #30305a; /* Grey */ - --base03: #50507a; /* Brighter Grey */ - --base04: #b0b0da; /* Bright Grey */ - --base05: #d0d0fa; /* White */ - --base06: #e0e0ff; /* Brighter White */ - --base07: #f5f5ff; /* Bright White */ - --base08: #ff4242; /* Red */ - --base09: #fc8d28; /* Orange */ - --base0A: #f3e877; /* Yellow */ - --base0B: #59f176; /* Green */ - --base0C: #0ef0f0; /* Cyan */ - --base0D: #66b0ff; /* Blue */ - --base0E: #f10596; /* Purple */ - --base0F: #f003ef; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #59f176; /* Green */ + --dnd-indicator: #ff4242; /* Red */ + --idle-indicator: #f3e877; /* Yellow */ + --streaming-indicator: #f10596; /* Purple */ + + /* accent colors */ + --accent-1: #66b0ff; /* links */ + --accent-2: #f10596; /* general unread/mention elements */ + --accent-3: #66b0ff; /* accent buttons */ + --accent-4: #0ef0f0; /* accent buttons when hovered */ + --accent-5: #59f176; /* accent buttons when clicked */ + --mention: rgba(241, 5, 150, 0.1); + --mention-hover: rgba(241, 5, 150, 0.2); + + /* text colors */ + --text-0: #00002a; /* text on colored elements */ + --text-1: #d0d0fa; /* primary white-ish text */ + --text-2: #f5f5ff; /* headings */ + --text-3: #d0d0fa; /* normal text */ + --text-4: #b0b0da; /* icon buttons and channels */ + --text-5: #50507a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #30305a; /* dark buttons when clicked */ + --bg-2: #20204a; /* dark buttons */ + --bg-3: #30305a; /* spacing, secondary elements */ + --bg-4: #00002a; /* main background color */ + --hover: #30305a; /* channels and buttons when hovered */ + --active: #50507a; /* channels and buttons when selected */ + --message-hover: rgba(32, 32, 74, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-oxocarbon-dark b/build/base16-oxocarbon-dark index dc98191..1da8b6a 100644 --- a/build/base16-oxocarbon-dark +++ b/build/base16-oxocarbon-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #161616; /* Black */ - --base01: #262626; /* Bright Black */ - --base02: #393939; /* Grey */ - --base03: #525252; /* Brighter Grey */ - --base04: #dde1e6; /* Bright Grey */ - --base05: #f2f4f8; /* White */ - --base06: #ffffff; /* Brighter White */ - --base07: #08bdba; /* Bright White */ - --base08: #ee5396; /* Red */ - --base09: #ff7eb6; /* Orange */ - --base0A: #ff6f00; /* Yellow */ - --base0B: #42be65; /* Green */ - --base0C: #3ddbd9; /* Cyan */ - --base0D: #33b1ff; /* Blue */ - --base0E: #be95ff; /* Purple */ - --base0F: #82cfff; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #42be65; /* Green */ + --dnd-indicator: #ee5396; /* Red */ + --idle-indicator: #ff6f00; /* Yellow */ + --streaming-indicator: #be95ff; /* Purple */ + + /* accent colors */ + --accent-1: #33b1ff; /* links */ + --accent-2: #be95ff; /* general unread/mention elements */ + --accent-3: #33b1ff; /* accent buttons */ + --accent-4: #3ddbd9; /* accent buttons when hovered */ + --accent-5: #42be65; /* accent buttons when clicked */ + --mention: rgba(190, 149, 255, 0.1); + --mention-hover: rgba(190, 149, 255, 0.2); + + /* text colors */ + --text-0: #161616; /* text on colored elements */ + --text-1: #f2f4f8; /* primary white-ish text */ + --text-2: #08bdba; /* headings */ + --text-3: #f2f4f8; /* normal text */ + --text-4: #dde1e6; /* icon buttons and channels */ + --text-5: #525252; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #393939; /* dark buttons when clicked */ + --bg-2: #262626; /* dark buttons */ + --bg-3: #393939; /* spacing, secondary elements */ + --bg-4: #161616; /* main background color */ + --hover: #393939; /* channels and buttons when hovered */ + --active: #525252; /* channels and buttons when selected */ + --message-hover: rgba(38, 38, 38, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-oxocarbon-light b/build/base16-oxocarbon-light index f7c97e6..6174fb7 100644 --- a/build/base16-oxocarbon-light +++ b/build/base16-oxocarbon-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f2f4f8; /* Black */ - --base01: #dde1e6; /* Bright Black */ - --base02: #bec6cf; /* Grey */ - --base03: #a1acba; /* Brighter Grey */ - --base04: #68788d; /* Bright Grey */ - --base05: #525f70; /* White */ - --base06: #3d4652; /* Brighter White */ - --base07: #272d35; /* Bright White */ - --base08: #ff7eb6; /* Red */ - --base09: #ee5396; /* Orange */ - --base0A: #ff6f00; /* Yellow */ - --base0B: #42be65; /* Green */ - --base0C: #673ab7; /* Cyan */ - --base0D: #0f62fe; /* Blue */ - --base0E: #be95ff; /* Purple */ - --base0F: #803800; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #42be65; /* Green */ + --dnd-indicator: #ff7eb6; /* Red */ + --idle-indicator: #ff6f00; /* Yellow */ + --streaming-indicator: #be95ff; /* Purple */ + + /* accent colors */ + --accent-1: #0f62fe; /* links */ + --accent-2: #be95ff; /* general unread/mention elements */ + --accent-3: #0f62fe; /* accent buttons */ + --accent-4: #673ab7; /* accent buttons when hovered */ + --accent-5: #42be65; /* accent buttons when clicked */ + --mention: rgba(190, 149, 255, 0.1); + --mention-hover: rgba(190, 149, 255, 0.2); + + /* text colors */ + --text-0: #f2f4f8; /* text on colored elements */ + --text-1: #525f70; /* primary white-ish text */ + --text-2: #272d35; /* headings */ + --text-3: #525f70; /* normal text */ + --text-4: #68788d; /* icon buttons and channels */ + --text-5: #a1acba; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #bec6cf; /* dark buttons when clicked */ + --bg-2: #dde1e6; /* dark buttons */ + --bg-3: #bec6cf; /* spacing, secondary elements */ + --bg-4: #f2f4f8; /* main background color */ + --hover: #bec6cf; /* channels and buttons when hovered */ + --active: #a1acba; /* channels and buttons when selected */ + --message-hover: rgba(221, 225, 230, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-pandora b/build/base16-pandora index 7df8c27..eb43ed0 100644 --- a/build/base16-pandora +++ b/build/base16-pandora @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #131213; /* Black */ - --base01: #2f1823; /* Bright Black */ - --base02: #472234; /* Grey */ - --base03: #ffbee3; /* Brighter Grey */ - --base04: #9b2a46; /* Bright Grey */ - --base05: #f15c99; /* White */ - --base06: #81506a; /* Brighter White */ - --base07: #632227; /* Bright White */ - --base08: #b00b69; /* Red */ - --base09: #ff9153; /* Orange */ - --base0A: #ffcc00; /* Yellow */ - --base0B: #9ddf69; /* Green */ - --base0C: #714ca6; /* Cyan */ - --base0D: #008080; /* Blue */ - --base0E: #a24030; /* Purple */ - --base0F: #a24030; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #9ddf69; /* Green */ + --dnd-indicator: #b00b69; /* Red */ + --idle-indicator: #ffcc00; /* Yellow */ + --streaming-indicator: #a24030; /* Purple */ + + /* accent colors */ + --accent-1: #008080; /* links */ + --accent-2: #a24030; /* general unread/mention elements */ + --accent-3: #008080; /* accent buttons */ + --accent-4: #714ca6; /* accent buttons when hovered */ + --accent-5: #9ddf69; /* accent buttons when clicked */ + --mention: rgba(162, 64, 48, 0.1); + --mention-hover: rgba(162, 64, 48, 0.2); + + /* text colors */ + --text-0: #131213; /* text on colored elements */ + --text-1: #f15c99; /* primary white-ish text */ + --text-2: #632227; /* headings */ + --text-3: #f15c99; /* normal text */ + --text-4: #9b2a46; /* icon buttons and channels */ + --text-5: #ffbee3; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #472234; /* dark buttons when clicked */ + --bg-2: #2f1823; /* dark buttons */ + --bg-3: #472234; /* spacing, secondary elements */ + --bg-4: #131213; /* main background color */ + --hover: #472234; /* channels and buttons when hovered */ + --active: #ffbee3; /* channels and buttons when selected */ + --message-hover: rgba(47, 24, 35, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-papercolor-dark b/build/base16-papercolor-dark index 9e4fe2f..7d66835 100644 --- a/build/base16-papercolor-dark +++ b/build/base16-papercolor-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1c1c1c; /* Black */ - --base01: #363636; /* Bright Black */ - --base02: #424242; /* Grey */ - --base03: #585858; /* Brighter Grey */ - --base04: #808080; /* Bright Grey */ - --base05: #9e9e9e; /* White */ - --base06: #b8b8b8; /* Brighter White */ - --base07: #d0d0d0; /* Bright White */ - --base08: #ff5faf; /* Red */ - --base09: #d7af5f; /* Orange */ - --base0A: #ffaf00; /* Yellow */ - --base0B: #5faf5f; /* Green */ - --base0C: #00afaf; /* Cyan */ - --base0D: #5fafd7; /* Blue */ - --base0E: #af87d7; /* Purple */ - --base0F: #af005f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #5faf5f; /* Green */ + --dnd-indicator: #ff5faf; /* Red */ + --idle-indicator: #ffaf00; /* Yellow */ + --streaming-indicator: #af87d7; /* Purple */ + + /* accent colors */ + --accent-1: #5fafd7; /* links */ + --accent-2: #af87d7; /* general unread/mention elements */ + --accent-3: #5fafd7; /* accent buttons */ + --accent-4: #00afaf; /* accent buttons when hovered */ + --accent-5: #5faf5f; /* accent buttons when clicked */ + --mention: rgba(175, 135, 215, 0.1); + --mention-hover: rgba(175, 135, 215, 0.2); + + /* text colors */ + --text-0: #1c1c1c; /* text on colored elements */ + --text-1: #9e9e9e; /* primary white-ish text */ + --text-2: #d0d0d0; /* headings */ + --text-3: #9e9e9e; /* normal text */ + --text-4: #808080; /* icon buttons and channels */ + --text-5: #585858; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #424242; /* dark buttons when clicked */ + --bg-2: #363636; /* dark buttons */ + --bg-3: #424242; /* spacing, secondary elements */ + --bg-4: #1c1c1c; /* main background color */ + --hover: #424242; /* channels and buttons when hovered */ + --active: #585858; /* channels and buttons when selected */ + --message-hover: rgba(54, 54, 54, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-papercolor-light b/build/base16-papercolor-light index 84a2c6a..4768aab 100644 --- a/build/base16-papercolor-light +++ b/build/base16-papercolor-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #eeeeee; /* Black */ - --base01: #c4c4c4; /* Bright Black */ - --base02: #9e9e9e; /* Grey */ - --base03: #858585; /* Brighter Grey */ - --base04: #6b6b6b; /* Bright Grey */ - --base05: #5e5e5e; /* White */ - --base06: #525252; /* Brighter White */ - --base07: #444444; /* Bright White */ - --base08: #d70000; /* Red */ - --base09: #d75f00; /* Orange */ - --base0A: #d75f00; /* Yellow */ - --base0B: #008700; /* Green */ - --base0C: #0087af; /* Cyan */ - --base0D: #005f87; /* Blue */ - --base0E: #8700af; /* Purple */ - --base0F: #af0000; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #008700; /* Green */ + --dnd-indicator: #d70000; /* Red */ + --idle-indicator: #d75f00; /* Yellow */ + --streaming-indicator: #8700af; /* Purple */ + + /* accent colors */ + --accent-1: #005f87; /* links */ + --accent-2: #8700af; /* general unread/mention elements */ + --accent-3: #005f87; /* accent buttons */ + --accent-4: #0087af; /* accent buttons when hovered */ + --accent-5: #008700; /* accent buttons when clicked */ + --mention: rgba(135, 0, 175, 0.1); + --mention-hover: rgba(135, 0, 175, 0.2); + + /* text colors */ + --text-0: #eeeeee; /* text on colored elements */ + --text-1: #5e5e5e; /* primary white-ish text */ + --text-2: #444444; /* headings */ + --text-3: #5e5e5e; /* normal text */ + --text-4: #6b6b6b; /* icon buttons and channels */ + --text-5: #858585; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #9e9e9e; /* dark buttons when clicked */ + --bg-2: #c4c4c4; /* dark buttons */ + --bg-3: #9e9e9e; /* spacing, secondary elements */ + --bg-4: #eeeeee; /* main background color */ + --hover: #9e9e9e; /* channels and buttons when hovered */ + --active: #858585; /* channels and buttons when selected */ + --message-hover: rgba(196, 196, 196, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-paraiso b/build/base16-paraiso index 418e8a0..2844ce9 100644 --- a/build/base16-paraiso +++ b/build/base16-paraiso @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2f1e2e; /* Black */ - --base01: #41323f; /* Bright Black */ - --base02: #4f424c; /* Grey */ - --base03: #776e71; /* Brighter Grey */ - --base04: #8d8687; /* Bright Grey */ - --base05: #a39e9b; /* White */ - --base06: #b9b6b0; /* Brighter White */ - --base07: #e7e9db; /* Bright White */ - --base08: #ef6155; /* Red */ - --base09: #f99b15; /* Orange */ - --base0A: #fec418; /* Yellow */ - --base0B: #48b685; /* Green */ - --base0C: #5bc4bf; /* Cyan */ - --base0D: #06b6ef; /* Blue */ - --base0E: #815ba4; /* Purple */ - --base0F: #e96ba8; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #48b685; /* Green */ + --dnd-indicator: #ef6155; /* Red */ + --idle-indicator: #fec418; /* Yellow */ + --streaming-indicator: #815ba4; /* Purple */ + + /* accent colors */ + --accent-1: #06b6ef; /* links */ + --accent-2: #815ba4; /* general unread/mention elements */ + --accent-3: #06b6ef; /* accent buttons */ + --accent-4: #5bc4bf; /* accent buttons when hovered */ + --accent-5: #48b685; /* accent buttons when clicked */ + --mention: rgba(129, 91, 164, 0.1); + --mention-hover: rgba(129, 91, 164, 0.2); + + /* text colors */ + --text-0: #2f1e2e; /* text on colored elements */ + --text-1: #a39e9b; /* primary white-ish text */ + --text-2: #e7e9db; /* headings */ + --text-3: #a39e9b; /* normal text */ + --text-4: #8d8687; /* icon buttons and channels */ + --text-5: #776e71; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #4f424c; /* dark buttons when clicked */ + --bg-2: #41323f; /* dark buttons */ + --bg-3: #4f424c; /* spacing, secondary elements */ + --bg-4: #2f1e2e; /* main background color */ + --hover: #4f424c; /* channels and buttons when hovered */ + --active: #776e71; /* channels and buttons when selected */ + --message-hover: rgba(65, 50, 63, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-pasque b/build/base16-pasque index d52befd..0baec9d 100644 --- a/build/base16-pasque +++ b/build/base16-pasque @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #271c3a; /* Black */ - --base01: #100323; /* Bright Black */ - --base02: #3e2d5c; /* Grey */ - --base03: #5d5766; /* Brighter Grey */ - --base04: #bebcbf; /* Bright Grey */ - --base05: #dedcdf; /* White */ - --base06: #edeaef; /* Brighter White */ - --base07: #bbaadd; /* Bright White */ - --base08: #a92258; /* Red */ - --base09: #918889; /* Orange */ - --base0A: #804ead; /* Yellow */ - --base0B: #c6914b; /* Green */ - --base0C: #7263aa; /* Cyan */ - --base0D: #8e7dc6; /* Blue */ - --base0E: #953b9d; /* Purple */ - --base0F: #59325c; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #c6914b; /* Green */ + --dnd-indicator: #a92258; /* Red */ + --idle-indicator: #804ead; /* Yellow */ + --streaming-indicator: #953b9d; /* Purple */ + + /* accent colors */ + --accent-1: #8e7dc6; /* links */ + --accent-2: #953b9d; /* general unread/mention elements */ + --accent-3: #8e7dc6; /* accent buttons */ + --accent-4: #7263aa; /* accent buttons when hovered */ + --accent-5: #c6914b; /* accent buttons when clicked */ + --mention: rgba(149, 59, 157, 0.1); + --mention-hover: rgba(149, 59, 157, 0.2); + + /* text colors */ + --text-0: #271c3a; /* text on colored elements */ + --text-1: #dedcdf; /* primary white-ish text */ + --text-2: #bbaadd; /* headings */ + --text-3: #dedcdf; /* normal text */ + --text-4: #bebcbf; /* icon buttons and channels */ + --text-5: #5d5766; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3e2d5c; /* dark buttons when clicked */ + --bg-2: #100323; /* dark buttons */ + --bg-3: #3e2d5c; /* spacing, secondary elements */ + --bg-4: #271c3a; /* main background color */ + --hover: #3e2d5c; /* channels and buttons when hovered */ + --active: #5d5766; /* channels and buttons when selected */ + --message-hover: rgba(16, 3, 35, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-penumbra-dark b/build/base16-penumbra-dark index 6419144..a53a545 100644 --- a/build/base16-penumbra-dark +++ b/build/base16-penumbra-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #24272b; /* Black */ - --base01: #303338; /* Bright Black */ - --base02: #3e4044; /* Grey */ - --base03: #636363; /* Brighter Grey */ - --base04: #8f8f8f; /* Bright Grey */ - --base05: #bebebe; /* White */ - --base06: #fff7ed; /* Brighter White */ - --base07: #fffdfb; /* Bright White */ - --base08: #ca736c; /* Red */ - --base09: #ba823a; /* Orange */ - --base0A: #8d9741; /* Yellow */ - --base0B: #47a477; /* Green */ - --base0C: #00a2af; /* Cyan */ - --base0D: #5794d0; /* Blue */ - --base0E: #9481cc; /* Purple */ - --base0F: #bc73a4; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #47a477; /* Green */ + --dnd-indicator: #ca736c; /* Red */ + --idle-indicator: #8d9741; /* Yellow */ + --streaming-indicator: #9481cc; /* Purple */ + + /* accent colors */ + --accent-1: #5794d0; /* links */ + --accent-2: #9481cc; /* general unread/mention elements */ + --accent-3: #5794d0; /* accent buttons */ + --accent-4: #00a2af; /* accent buttons when hovered */ + --accent-5: #47a477; /* accent buttons when clicked */ + --mention: rgba(148, 129, 204, 0.1); + --mention-hover: rgba(148, 129, 204, 0.2); + + /* text colors */ + --text-0: #24272b; /* text on colored elements */ + --text-1: #bebebe; /* primary white-ish text */ + --text-2: #fffdfb; /* headings */ + --text-3: #bebebe; /* normal text */ + --text-4: #8f8f8f; /* icon buttons and channels */ + --text-5: #636363; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3e4044; /* dark buttons when clicked */ + --bg-2: #303338; /* dark buttons */ + --bg-3: #3e4044; /* spacing, secondary elements */ + --bg-4: #24272b; /* main background color */ + --hover: #3e4044; /* channels and buttons when hovered */ + --active: #636363; /* channels and buttons when selected */ + --message-hover: rgba(48, 51, 56, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-penumbra-dark-contrast-plus b/build/base16-penumbra-dark-contrast-plus index c136412..e535bd4 100644 --- a/build/base16-penumbra-dark-contrast-plus +++ b/build/base16-penumbra-dark-contrast-plus @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #181b1f; /* Black */ - --base01: #24272b; /* Bright Black */ - --base02: #3e4044; /* Grey */ - --base03: #636363; /* Brighter Grey */ - --base04: #9e9e9e; /* Bright Grey */ - --base05: #cecece; /* White */ - --base06: #fff7ed; /* Brighter White */ - --base07: #fffdfb; /* Bright White */ - --base08: #df7f78; /* Red */ - --base09: #ce9042; /* Orange */ - --base0A: #9ca748; /* Yellow */ - --base0B: #50b584; /* Green */ - --base0C: #00b3c2; /* Cyan */ - --base0D: #61a3e6; /* Blue */ - --base0E: #a48fe1; /* Purple */ - --base0F: #d080b6; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #50b584; /* Green */ + --dnd-indicator: #df7f78; /* Red */ + --idle-indicator: #9ca748; /* Yellow */ + --streaming-indicator: #a48fe1; /* Purple */ + + /* accent colors */ + --accent-1: #61a3e6; /* links */ + --accent-2: #a48fe1; /* general unread/mention elements */ + --accent-3: #61a3e6; /* accent buttons */ + --accent-4: #00b3c2; /* accent buttons when hovered */ + --accent-5: #50b584; /* accent buttons when clicked */ + --mention: rgba(164, 143, 225, 0.1); + --mention-hover: rgba(164, 143, 225, 0.2); + + /* text colors */ + --text-0: #181b1f; /* text on colored elements */ + --text-1: #cecece; /* primary white-ish text */ + --text-2: #fffdfb; /* headings */ + --text-3: #cecece; /* normal text */ + --text-4: #9e9e9e; /* icon buttons and channels */ + --text-5: #636363; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3e4044; /* dark buttons when clicked */ + --bg-2: #24272b; /* dark buttons */ + --bg-3: #3e4044; /* spacing, secondary elements */ + --bg-4: #181b1f; /* main background color */ + --hover: #3e4044; /* channels and buttons when hovered */ + --active: #636363; /* channels and buttons when selected */ + --message-hover: rgba(36, 39, 43, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-penumbra-dark-contrast-plus-plus b/build/base16-penumbra-dark-contrast-plus-plus index d74c242..bc515ca 100644 --- a/build/base16-penumbra-dark-contrast-plus-plus +++ b/build/base16-penumbra-dark-contrast-plus-plus @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #0d0f13; /* Black */ - --base01: #181b1f; /* Bright Black */ - --base02: #3e4044; /* Grey */ - --base03: #636363; /* Brighter Grey */ - --base04: #aeaeae; /* Bright Grey */ - --base05: #dedede; /* White */ - --base06: #fff7ed; /* Brighter White */ - --base07: #fffdfb; /* Bright White */ - --base08: #f58c81; /* Red */ - --base09: #e09f47; /* Orange */ - --base0A: #a9b852; /* Yellow */ - --base0B: #54c794; /* Green */ - --base0C: #00c4d7; /* Cyan */ - --base0D: #6eb2fd; /* Blue */ - --base0E: #b69cf6; /* Purple */ - --base0F: #e58cc5; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #54c794; /* Green */ + --dnd-indicator: #f58c81; /* Red */ + --idle-indicator: #a9b852; /* Yellow */ + --streaming-indicator: #b69cf6; /* Purple */ + + /* accent colors */ + --accent-1: #6eb2fd; /* links */ + --accent-2: #b69cf6; /* general unread/mention elements */ + --accent-3: #6eb2fd; /* accent buttons */ + --accent-4: #00c4d7; /* accent buttons when hovered */ + --accent-5: #54c794; /* accent buttons when clicked */ + --mention: rgba(182, 156, 246, 0.1); + --mention-hover: rgba(182, 156, 246, 0.2); + + /* text colors */ + --text-0: #0d0f13; /* text on colored elements */ + --text-1: #dedede; /* primary white-ish text */ + --text-2: #fffdfb; /* headings */ + --text-3: #dedede; /* normal text */ + --text-4: #aeaeae; /* icon buttons and channels */ + --text-5: #636363; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3e4044; /* dark buttons when clicked */ + --bg-2: #181b1f; /* dark buttons */ + --bg-3: #3e4044; /* spacing, secondary elements */ + --bg-4: #0d0f13; /* main background color */ + --hover: #3e4044; /* channels and buttons when hovered */ + --active: #636363; /* channels and buttons when selected */ + --message-hover: rgba(24, 27, 31, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-penumbra-light b/build/base16-penumbra-light index b5fbd04..1b257c8 100644 --- a/build/base16-penumbra-light +++ b/build/base16-penumbra-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fffdfb; /* Black */ - --base01: #fff7ed; /* Bright Black */ - --base02: #f2e6d4; /* Grey */ - --base03: #bebebe; /* Brighter Grey */ - --base04: #8f8f8f; /* Bright Grey */ - --base05: #636363; /* White */ - --base06: #303338; /* Brighter White */ - --base07: #24272b; /* Bright White */ - --base08: #ca736c; /* Red */ - --base09: #ba823a; /* Orange */ - --base0A: #8d9741; /* Yellow */ - --base0B: #47a477; /* Green */ - --base0C: #00a2af; /* Cyan */ - --base0D: #5794d0; /* Blue */ - --base0E: #9481cc; /* Purple */ - --base0F: #bc73a4; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #47a477; /* Green */ + --dnd-indicator: #ca736c; /* Red */ + --idle-indicator: #8d9741; /* Yellow */ + --streaming-indicator: #9481cc; /* Purple */ + + /* accent colors */ + --accent-1: #5794d0; /* links */ + --accent-2: #9481cc; /* general unread/mention elements */ + --accent-3: #5794d0; /* accent buttons */ + --accent-4: #00a2af; /* accent buttons when hovered */ + --accent-5: #47a477; /* accent buttons when clicked */ + --mention: rgba(148, 129, 204, 0.1); + --mention-hover: rgba(148, 129, 204, 0.2); + + /* text colors */ + --text-0: #fffdfb; /* text on colored elements */ + --text-1: #636363; /* primary white-ish text */ + --text-2: #24272b; /* headings */ + --text-3: #636363; /* normal text */ + --text-4: #8f8f8f; /* icon buttons and channels */ + --text-5: #bebebe; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #f2e6d4; /* dark buttons when clicked */ + --bg-2: #fff7ed; /* dark buttons */ + --bg-3: #f2e6d4; /* spacing, secondary elements */ + --bg-4: #fffdfb; /* main background color */ + --hover: #f2e6d4; /* channels and buttons when hovered */ + --active: #bebebe; /* channels and buttons when selected */ + --message-hover: rgba(255, 247, 237, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-penumbra-light-contrast-plus b/build/base16-penumbra-light-contrast-plus index 5fece90..a46d56e 100644 --- a/build/base16-penumbra-light-contrast-plus +++ b/build/base16-penumbra-light-contrast-plus @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fffdfb; /* Black */ - --base01: #fff7ed; /* Bright Black */ - --base02: #f2e6d4; /* Grey */ - --base03: #cecece; /* Brighter Grey */ - --base04: #9e9e9e; /* Bright Grey */ - --base05: #636363; /* White */ - --base06: #24272b; /* Brighter White */ - --base07: #181b1f; /* Bright White */ - --base08: #df7f78; /* Red */ - --base09: #ce9042; /* Orange */ - --base0A: #9ca748; /* Yellow */ - --base0B: #50b584; /* Green */ - --base0C: #00b3c2; /* Cyan */ - --base0D: #61a3e6; /* Blue */ - --base0E: #a48fe1; /* Purple */ - --base0F: #d080b6; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #50b584; /* Green */ + --dnd-indicator: #df7f78; /* Red */ + --idle-indicator: #9ca748; /* Yellow */ + --streaming-indicator: #a48fe1; /* Purple */ + + /* accent colors */ + --accent-1: #61a3e6; /* links */ + --accent-2: #a48fe1; /* general unread/mention elements */ + --accent-3: #61a3e6; /* accent buttons */ + --accent-4: #00b3c2; /* accent buttons when hovered */ + --accent-5: #50b584; /* accent buttons when clicked */ + --mention: rgba(164, 143, 225, 0.1); + --mention-hover: rgba(164, 143, 225, 0.2); + + /* text colors */ + --text-0: #fffdfb; /* text on colored elements */ + --text-1: #636363; /* primary white-ish text */ + --text-2: #181b1f; /* headings */ + --text-3: #636363; /* normal text */ + --text-4: #9e9e9e; /* icon buttons and channels */ + --text-5: #cecece; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #f2e6d4; /* dark buttons when clicked */ + --bg-2: #fff7ed; /* dark buttons */ + --bg-3: #f2e6d4; /* spacing, secondary elements */ + --bg-4: #fffdfb; /* main background color */ + --hover: #f2e6d4; /* channels and buttons when hovered */ + --active: #cecece; /* channels and buttons when selected */ + --message-hover: rgba(255, 247, 237, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-penumbra-light-contrast-plus-plus b/build/base16-penumbra-light-contrast-plus-plus index ca934b9..202e965 100644 --- a/build/base16-penumbra-light-contrast-plus-plus +++ b/build/base16-penumbra-light-contrast-plus-plus @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fffdfb; /* Black */ - --base01: #fff7ed; /* Bright Black */ - --base02: #f2e6d4; /* Grey */ - --base03: #dedede; /* Brighter Grey */ - --base04: #aeaeae; /* Bright Grey */ - --base05: #636363; /* White */ - --base06: #181b1f; /* Brighter White */ - --base07: #0d0f13; /* Bright White */ - --base08: #f58c81; /* Red */ - --base09: #e09f47; /* Orange */ - --base0A: #a9b852; /* Yellow */ - --base0B: #54c794; /* Green */ - --base0C: #00c4d7; /* Cyan */ - --base0D: #6eb2fd; /* Blue */ - --base0E: #b69cf6; /* Purple */ - --base0F: #e58cc5; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #54c794; /* Green */ + --dnd-indicator: #f58c81; /* Red */ + --idle-indicator: #a9b852; /* Yellow */ + --streaming-indicator: #b69cf6; /* Purple */ + + /* accent colors */ + --accent-1: #6eb2fd; /* links */ + --accent-2: #b69cf6; /* general unread/mention elements */ + --accent-3: #6eb2fd; /* accent buttons */ + --accent-4: #00c4d7; /* accent buttons when hovered */ + --accent-5: #54c794; /* accent buttons when clicked */ + --mention: rgba(182, 156, 246, 0.1); + --mention-hover: rgba(182, 156, 246, 0.2); + + /* text colors */ + --text-0: #fffdfb; /* text on colored elements */ + --text-1: #636363; /* primary white-ish text */ + --text-2: #0d0f13; /* headings */ + --text-3: #636363; /* normal text */ + --text-4: #aeaeae; /* icon buttons and channels */ + --text-5: #dedede; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #f2e6d4; /* dark buttons when clicked */ + --bg-2: #fff7ed; /* dark buttons */ + --bg-3: #f2e6d4; /* spacing, secondary elements */ + --bg-4: #fffdfb; /* main background color */ + --hover: #f2e6d4; /* channels and buttons when hovered */ + --active: #dedede; /* channels and buttons when selected */ + --message-hover: rgba(255, 247, 237, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-phd b/build/base16-phd index 8c68ebf..e864f84 100644 --- a/build/base16-phd +++ b/build/base16-phd @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #061229; /* Black */ - --base01: #2a3448; /* Bright Black */ - --base02: #4d5666; /* Grey */ - --base03: #717885; /* Brighter Grey */ - --base04: #9a99a3; /* Bright Grey */ - --base05: #b8bbc2; /* White */ - --base06: #dbdde0; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #d07346; /* Red */ - --base09: #f0a000; /* Orange */ - --base0A: #fbd461; /* Yellow */ - --base0B: #99bf52; /* Green */ - --base0C: #72b9bf; /* Cyan */ - --base0D: #5299bf; /* Blue */ - --base0E: #9989cc; /* Purple */ - --base0F: #b08060; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #99bf52; /* Green */ + --dnd-indicator: #d07346; /* Red */ + --idle-indicator: #fbd461; /* Yellow */ + --streaming-indicator: #9989cc; /* Purple */ + + /* accent colors */ + --accent-1: #5299bf; /* links */ + --accent-2: #9989cc; /* general unread/mention elements */ + --accent-3: #5299bf; /* accent buttons */ + --accent-4: #72b9bf; /* accent buttons when hovered */ + --accent-5: #99bf52; /* accent buttons when clicked */ + --mention: rgba(153, 137, 204, 0.1); + --mention-hover: rgba(153, 137, 204, 0.2); + + /* text colors */ + --text-0: #061229; /* text on colored elements */ + --text-1: #b8bbc2; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #b8bbc2; /* normal text */ + --text-4: #9a99a3; /* icon buttons and channels */ + --text-5: #717885; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #4d5666; /* dark buttons when clicked */ + --bg-2: #2a3448; /* dark buttons */ + --bg-3: #4d5666; /* spacing, secondary elements */ + --bg-4: #061229; /* main background color */ + --hover: #4d5666; /* channels and buttons when hovered */ + --active: #717885; /* channels and buttons when selected */ + --message-hover: rgba(42, 52, 72, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-pico b/build/base16-pico index fe9aec2..b4bf923 100644 --- a/build/base16-pico +++ b/build/base16-pico @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #1d2b53; /* Bright Black */ - --base02: #7e2553; /* Grey */ - --base03: #008751; /* Brighter Grey */ - --base04: #ab5236; /* Bright Grey */ - --base05: #5f574f; /* White */ - --base06: #c2c3c7; /* Brighter White */ - --base07: #fff1e8; /* Bright White */ - --base08: #ff004d; /* Red */ - --base09: #ffa300; /* Orange */ - --base0A: #fff024; /* Yellow */ - --base0B: #00e756; /* Green */ - --base0C: #29adff; /* Cyan */ - --base0D: #83769c; /* Blue */ - --base0E: #ff77a8; /* Purple */ - --base0F: #ffccaa; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #00e756; /* Green */ + --dnd-indicator: #ff004d; /* Red */ + --idle-indicator: #fff024; /* Yellow */ + --streaming-indicator: #ff77a8; /* Purple */ + + /* accent colors */ + --accent-1: #83769c; /* links */ + --accent-2: #ff77a8; /* general unread/mention elements */ + --accent-3: #83769c; /* accent buttons */ + --accent-4: #29adff; /* accent buttons when hovered */ + --accent-5: #00e756; /* accent buttons when clicked */ + --mention: rgba(255, 119, 168, 0.1); + --mention-hover: rgba(255, 119, 168, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #5f574f; /* primary white-ish text */ + --text-2: #fff1e8; /* headings */ + --text-3: #5f574f; /* normal text */ + --text-4: #ab5236; /* icon buttons and channels */ + --text-5: #008751; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #7e2553; /* dark buttons when clicked */ + --bg-2: #1d2b53; /* dark buttons */ + --bg-3: #7e2553; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #7e2553; /* channels and buttons when hovered */ + --active: #008751; /* channels and buttons when selected */ + --message-hover: rgba(29, 43, 83, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-pinky b/build/base16-pinky index 87fdd48..92e93b1 100644 --- a/build/base16-pinky +++ b/build/base16-pinky @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #171517; /* Black */ - --base01: #1b181b; /* Bright Black */ - --base02: #1d1b1d; /* Grey */ - --base03: #383338; /* Brighter Grey */ - --base04: #e7dbdb; /* Bright Grey */ - --base05: #f5f5f5; /* White */ - --base06: #ffffff; /* Brighter White */ - --base07: #f7f3f7; /* Bright White */ - --base08: #ffa600; /* Red */ - --base09: #00ff66; /* Orange */ - --base0A: #20df6c; /* Yellow */ - --base0B: #ff0066; /* Green */ - --base0C: #6600ff; /* Cyan */ - --base0D: #00ffff; /* Blue */ - --base0E: #007fff; /* Purple */ - --base0F: #df206c; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #ff0066; /* Green */ + --dnd-indicator: #ffa600; /* Red */ + --idle-indicator: #20df6c; /* Yellow */ + --streaming-indicator: #007fff; /* Purple */ + + /* accent colors */ + --accent-1: #00ffff; /* links */ + --accent-2: #007fff; /* general unread/mention elements */ + --accent-3: #00ffff; /* accent buttons */ + --accent-4: #6600ff; /* accent buttons when hovered */ + --accent-5: #ff0066; /* accent buttons when clicked */ + --mention: rgba(0, 127, 255, 0.1); + --mention-hover: rgba(0, 127, 255, 0.2); + + /* text colors */ + --text-0: #171517; /* text on colored elements */ + --text-1: #f5f5f5; /* primary white-ish text */ + --text-2: #f7f3f7; /* headings */ + --text-3: #f5f5f5; /* normal text */ + --text-4: #e7dbdb; /* icon buttons and channels */ + --text-5: #383338; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #1d1b1d; /* dark buttons when clicked */ + --bg-2: #1b181b; /* dark buttons */ + --bg-3: #1d1b1d; /* spacing, secondary elements */ + --bg-4: #171517; /* main background color */ + --hover: #1d1b1d; /* channels and buttons when hovered */ + --active: #383338; /* channels and buttons when selected */ + --message-hover: rgba(27, 24, 27, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-pop b/build/base16-pop index b193f66..01fdb8f 100644 --- a/build/base16-pop +++ b/build/base16-pop @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #202020; /* Bright Black */ - --base02: #303030; /* Grey */ - --base03: #505050; /* Brighter Grey */ - --base04: #b0b0b0; /* Bright Grey */ - --base05: #d0d0d0; /* White */ - --base06: #e0e0e0; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #eb008a; /* Red */ - --base09: #f29333; /* Orange */ - --base0A: #f8ca12; /* Yellow */ - --base0B: #37b349; /* Green */ - --base0C: #00aabb; /* Cyan */ - --base0D: #0e5a94; /* Blue */ - --base0E: #b31e8d; /* Purple */ - --base0F: #7a2d00; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #37b349; /* Green */ + --dnd-indicator: #eb008a; /* Red */ + --idle-indicator: #f8ca12; /* Yellow */ + --streaming-indicator: #b31e8d; /* Purple */ + + /* accent colors */ + --accent-1: #0e5a94; /* links */ + --accent-2: #b31e8d; /* general unread/mention elements */ + --accent-3: #0e5a94; /* accent buttons */ + --accent-4: #00aabb; /* accent buttons when hovered */ + --accent-5: #37b349; /* accent buttons when clicked */ + --mention: rgba(179, 30, 141, 0.1); + --mention-hover: rgba(179, 30, 141, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #d0d0d0; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #d0d0d0; /* normal text */ + --text-4: #b0b0b0; /* icon buttons and channels */ + --text-5: #505050; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #303030; /* dark buttons when clicked */ + --bg-2: #202020; /* dark buttons */ + --bg-3: #303030; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #303030; /* channels and buttons when hovered */ + --active: #505050; /* channels and buttons when selected */ + --message-hover: rgba(32, 32, 32, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-porple b/build/base16-porple index 7a636d7..8f2afa4 100644 --- a/build/base16-porple +++ b/build/base16-porple @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #292c36; /* Black */ - --base01: #333344; /* Bright Black */ - --base02: #474160; /* Grey */ - --base03: #65568a; /* Brighter Grey */ - --base04: #b8b8b8; /* Bright Grey */ - --base05: #d8d8d8; /* White */ - --base06: #e8e8e8; /* Brighter White */ - --base07: #f8f8f8; /* Bright White */ - --base08: #f84547; /* Red */ - --base09: #d28e5d; /* Orange */ - --base0A: #efa16b; /* Yellow */ - --base0B: #95c76f; /* Green */ - --base0C: #64878f; /* Cyan */ - --base0D: #8485ce; /* Blue */ - --base0E: #b74989; /* Purple */ - --base0F: #986841; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #95c76f; /* Green */ + --dnd-indicator: #f84547; /* Red */ + --idle-indicator: #efa16b; /* Yellow */ + --streaming-indicator: #b74989; /* Purple */ + + /* accent colors */ + --accent-1: #8485ce; /* links */ + --accent-2: #b74989; /* general unread/mention elements */ + --accent-3: #8485ce; /* accent buttons */ + --accent-4: #64878f; /* accent buttons when hovered */ + --accent-5: #95c76f; /* accent buttons when clicked */ + --mention: rgba(183, 73, 137, 0.1); + --mention-hover: rgba(183, 73, 137, 0.2); + + /* text colors */ + --text-0: #292c36; /* text on colored elements */ + --text-1: #d8d8d8; /* primary white-ish text */ + --text-2: #f8f8f8; /* headings */ + --text-3: #d8d8d8; /* normal text */ + --text-4: #b8b8b8; /* icon buttons and channels */ + --text-5: #65568a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #474160; /* dark buttons when clicked */ + --bg-2: #333344; /* dark buttons */ + --bg-3: #474160; /* spacing, secondary elements */ + --bg-4: #292c36; /* main background color */ + --hover: #474160; /* channels and buttons when hovered */ + --active: #65568a; /* channels and buttons when selected */ + --message-hover: rgba(51, 51, 68, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-precious-dark-eleven b/build/base16-precious-dark-eleven index f94011d..496589b 100644 --- a/build/base16-precious-dark-eleven +++ b/build/base16-precious-dark-eleven @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1c1e20; /* Black */ - --base01: #292b2d; /* Bright Black */ - --base02: #37393a; /* Grey */ - --base03: #858585; /* Brighter Grey */ - --base04: #a8a8a7; /* Bright Grey */ - --base05: #b8b7b6; /* White */ - --base06: #b8b7b6; /* Brighter White */ - --base07: #b8b7b6; /* Bright White */ - --base08: #ff8782; /* Red */ - --base09: #ea9755; /* Orange */ - --base0A: #d0a543; /* Yellow */ - --base0B: #95b658; /* Green */ - --base0C: #42bda7; /* Cyan */ - --base0D: #68b0ee; /* Blue */ - --base0E: #b799fe; /* Purple */ - --base0F: #f382d8; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #95b658; /* Green */ + --dnd-indicator: #ff8782; /* Red */ + --idle-indicator: #d0a543; /* Yellow */ + --streaming-indicator: #b799fe; /* Purple */ + + /* accent colors */ + --accent-1: #68b0ee; /* links */ + --accent-2: #b799fe; /* general unread/mention elements */ + --accent-3: #68b0ee; /* accent buttons */ + --accent-4: #42bda7; /* accent buttons when hovered */ + --accent-5: #95b658; /* accent buttons when clicked */ + --mention: rgba(183, 153, 254, 0.1); + --mention-hover: rgba(183, 153, 254, 0.2); + + /* text colors */ + --text-0: #1c1e20; /* text on colored elements */ + --text-1: #b8b7b6; /* primary white-ish text */ + --text-2: #b8b7b6; /* headings */ + --text-3: #b8b7b6; /* normal text */ + --text-4: #a8a8a7; /* icon buttons and channels */ + --text-5: #858585; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #37393a; /* dark buttons when clicked */ + --bg-2: #292b2d; /* dark buttons */ + --bg-3: #37393a; /* spacing, secondary elements */ + --bg-4: #1c1e20; /* main background color */ + --hover: #37393a; /* channels and buttons when hovered */ + --active: #858585; /* channels and buttons when selected */ + --message-hover: rgba(41, 43, 45, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-precious-dark-fifteen b/build/base16-precious-dark-fifteen index 137c139..3818df8 100644 --- a/build/base16-precious-dark-fifteen +++ b/build/base16-precious-dark-fifteen @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #23262b; /* Black */ - --base01: #303337; /* Bright Black */ - --base02: #3e4044; /* Grey */ - --base03: #898989; /* Brighter Grey */ - --base04: #abaaa8; /* Bright Grey */ - --base05: #bab9b6; /* White */ - --base06: #bab9b6; /* Brighter White */ - --base07: #bab9b6; /* Bright White */ - --base08: #ff8782; /* Red */ - --base09: #e99857; /* Orange */ - --base0A: #cfa546; /* Yellow */ - --base0B: #95b659; /* Green */ - --base0C: #42bda7; /* Cyan */ - --base0D: #66b0ef; /* Blue */ - --base0E: #b799ff; /* Purple */ - --base0F: #f382d8; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #95b659; /* Green */ + --dnd-indicator: #ff8782; /* Red */ + --idle-indicator: #cfa546; /* Yellow */ + --streaming-indicator: #b799ff; /* Purple */ + + /* accent colors */ + --accent-1: #66b0ef; /* links */ + --accent-2: #b799ff; /* general unread/mention elements */ + --accent-3: #66b0ef; /* accent buttons */ + --accent-4: #42bda7; /* accent buttons when hovered */ + --accent-5: #95b659; /* accent buttons when clicked */ + --mention: rgba(183, 153, 255, 0.1); + --mention-hover: rgba(183, 153, 255, 0.2); + + /* text colors */ + --text-0: #23262b; /* text on colored elements */ + --text-1: #bab9b6; /* primary white-ish text */ + --text-2: #bab9b6; /* headings */ + --text-3: #bab9b6; /* normal text */ + --text-4: #abaaa8; /* icon buttons and channels */ + --text-5: #898989; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3e4044; /* dark buttons when clicked */ + --bg-2: #303337; /* dark buttons */ + --bg-3: #3e4044; /* spacing, secondary elements */ + --bg-4: #23262b; /* main background color */ + --hover: #3e4044; /* channels and buttons when hovered */ + --active: #898989; /* channels and buttons when selected */ + --message-hover: rgba(48, 51, 55, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-precious-light-warm b/build/base16-precious-light-warm index 5b1ddde..38f4900 100644 --- a/build/base16-precious-light-warm +++ b/build/base16-precious-light-warm @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fff5e5; /* Black */ - --base01: #ece4d6; /* Bright Black */ - --base02: #d9d3c8; /* Grey */ - --base03: #7f8080; /* Brighter Grey */ - --base04: #5d6065; /* Bright Grey */ - --base05: #4e5359; /* White */ - --base06: #4e5359; /* Brighter White */ - --base07: #4e5359; /* Bright White */ - --base08: #b14745; /* Red */ - --base09: #a25600; /* Orange */ - --base0A: #876500; /* Yellow */ - --base0B: #557300; /* Green */ - --base0C: #0e7767; /* Cyan */ - --base0D: #246da5; /* Blue */ - --base0E: #7a50c6; /* Purple */ - --base0F: #a83f92; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #557300; /* Green */ + --dnd-indicator: #b14745; /* Red */ + --idle-indicator: #876500; /* Yellow */ + --streaming-indicator: #7a50c6; /* Purple */ + + /* accent colors */ + --accent-1: #246da5; /* links */ + --accent-2: #7a50c6; /* general unread/mention elements */ + --accent-3: #246da5; /* accent buttons */ + --accent-4: #0e7767; /* accent buttons when hovered */ + --accent-5: #557300; /* accent buttons when clicked */ + --mention: rgba(122, 80, 198, 0.1); + --mention-hover: rgba(122, 80, 198, 0.2); + + /* text colors */ + --text-0: #fff5e5; /* text on colored elements */ + --text-1: #4e5359; /* primary white-ish text */ + --text-2: #4e5359; /* headings */ + --text-3: #4e5359; /* normal text */ + --text-4: #5d6065; /* icon buttons and channels */ + --text-5: #7f8080; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d9d3c8; /* dark buttons when clicked */ + --bg-2: #ece4d6; /* dark buttons */ + --bg-3: #d9d3c8; /* spacing, secondary elements */ + --bg-4: #fff5e5; /* main background color */ + --hover: #d9d3c8; /* channels and buttons when hovered */ + --active: #7f8080; /* channels and buttons when selected */ + --message-hover: rgba(236, 228, 214, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-precious-light-white b/build/base16-precious-light-white index cb8e211..4537548 100644 --- a/build/base16-precious-light-white +++ b/build/base16-precious-light-white @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #ffffff; /* Black */ - --base01: #ededed; /* Bright Black */ - --base02: #dbdbdb; /* Grey */ - --base03: #848484; /* Brighter Grey */ - --base04: #636363; /* Bright Grey */ - --base05: #555555; /* White */ - --base06: #555555; /* Brighter White */ - --base07: #555555; /* Bright White */ - --base08: #af4947; /* Red */ - --base09: #a0570d; /* Orange */ - --base0A: #876500; /* Yellow */ - --base0B: #557301; /* Green */ - --base0C: #087767; /* Cyan */ - --base0D: #186daa; /* Blue */ - --base0E: #7b4ecb; /* Purple */ - --base0F: #a93e93; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #557301; /* Green */ + --dnd-indicator: #af4947; /* Red */ + --idle-indicator: #876500; /* Yellow */ + --streaming-indicator: #7b4ecb; /* Purple */ + + /* accent colors */ + --accent-1: #186daa; /* links */ + --accent-2: #7b4ecb; /* general unread/mention elements */ + --accent-3: #186daa; /* accent buttons */ + --accent-4: #087767; /* accent buttons when hovered */ + --accent-5: #557301; /* accent buttons when clicked */ + --mention: rgba(123, 78, 203, 0.1); + --mention-hover: rgba(123, 78, 203, 0.2); + + /* text colors */ + --text-0: #ffffff; /* text on colored elements */ + --text-1: #555555; /* primary white-ish text */ + --text-2: #555555; /* headings */ + --text-3: #555555; /* normal text */ + --text-4: #636363; /* icon buttons and channels */ + --text-5: #848484; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #dbdbdb; /* dark buttons when clicked */ + --bg-2: #ededed; /* dark buttons */ + --bg-3: #dbdbdb; /* spacing, secondary elements */ + --bg-4: #ffffff; /* main background color */ + --hover: #dbdbdb; /* channels and buttons when hovered */ + --active: #848484; /* channels and buttons when selected */ + --message-hover: rgba(237, 237, 237, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-primer-dark b/build/base16-primer-dark index c91f16c..7da6ee2 100644 --- a/build/base16-primer-dark +++ b/build/base16-primer-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #010409; /* Black */ - --base01: #21262d; /* Bright Black */ - --base02: #30363d; /* Grey */ - --base03: #484f58; /* Brighter Grey */ - --base04: #8b949e; /* Bright Grey */ - --base05: #b1bac4; /* White */ - --base06: #c9d1d9; /* Brighter White */ - --base07: #f0f6fc; /* Bright White */ - --base08: #ff7b72; /* Red */ - --base09: #f0883e; /* Orange */ - --base0A: #d29922; /* Yellow */ - --base0B: #3fb950; /* Green */ - --base0C: #a5d6ff; /* Cyan */ - --base0D: #58a6ff; /* Blue */ - --base0E: #f778ba; /* Purple */ - --base0F: #bd561d; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #3fb950; /* Green */ + --dnd-indicator: #ff7b72; /* Red */ + --idle-indicator: #d29922; /* Yellow */ + --streaming-indicator: #f778ba; /* Purple */ + + /* accent colors */ + --accent-1: #58a6ff; /* links */ + --accent-2: #f778ba; /* general unread/mention elements */ + --accent-3: #58a6ff; /* accent buttons */ + --accent-4: #a5d6ff; /* accent buttons when hovered */ + --accent-5: #3fb950; /* accent buttons when clicked */ + --mention: rgba(247, 120, 186, 0.1); + --mention-hover: rgba(247, 120, 186, 0.2); + + /* text colors */ + --text-0: #010409; /* text on colored elements */ + --text-1: #b1bac4; /* primary white-ish text */ + --text-2: #f0f6fc; /* headings */ + --text-3: #b1bac4; /* normal text */ + --text-4: #8b949e; /* icon buttons and channels */ + --text-5: #484f58; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #30363d; /* dark buttons when clicked */ + --bg-2: #21262d; /* dark buttons */ + --bg-3: #30363d; /* spacing, secondary elements */ + --bg-4: #010409; /* main background color */ + --hover: #30363d; /* channels and buttons when hovered */ + --active: #484f58; /* channels and buttons when selected */ + --message-hover: rgba(33, 38, 45, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-primer-dark-dimmed b/build/base16-primer-dark-dimmed index 1455b5f..38bf209 100644 --- a/build/base16-primer-dark-dimmed +++ b/build/base16-primer-dark-dimmed @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1c2128; /* Black */ - --base01: #373e47; /* Bright Black */ - --base02: #444c56; /* Grey */ - --base03: #545d68; /* Brighter Grey */ - --base04: #768390; /* Bright Grey */ - --base05: #909dab; /* White */ - --base06: #adbac7; /* Brighter White */ - --base07: #cdd9e5; /* Bright White */ - --base08: #f47067; /* Red */ - --base09: #e0823d; /* Orange */ - --base0A: #c69026; /* Yellow */ - --base0B: #57ab5a; /* Green */ - --base0C: #96d0ff; /* Cyan */ - --base0D: #539bf5; /* Blue */ - --base0E: #e275ad; /* Purple */ - --base0F: #ae5622; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #57ab5a; /* Green */ + --dnd-indicator: #f47067; /* Red */ + --idle-indicator: #c69026; /* Yellow */ + --streaming-indicator: #e275ad; /* Purple */ + + /* accent colors */ + --accent-1: #539bf5; /* links */ + --accent-2: #e275ad; /* general unread/mention elements */ + --accent-3: #539bf5; /* accent buttons */ + --accent-4: #96d0ff; /* accent buttons when hovered */ + --accent-5: #57ab5a; /* accent buttons when clicked */ + --mention: rgba(226, 117, 173, 0.1); + --mention-hover: rgba(226, 117, 173, 0.2); + + /* text colors */ + --text-0: #1c2128; /* text on colored elements */ + --text-1: #909dab; /* primary white-ish text */ + --text-2: #cdd9e5; /* headings */ + --text-3: #909dab; /* normal text */ + --text-4: #768390; /* icon buttons and channels */ + --text-5: #545d68; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #444c56; /* dark buttons when clicked */ + --bg-2: #373e47; /* dark buttons */ + --bg-3: #444c56; /* spacing, secondary elements */ + --bg-4: #1c2128; /* main background color */ + --hover: #444c56; /* channels and buttons when hovered */ + --active: #545d68; /* channels and buttons when selected */ + --message-hover: rgba(55, 62, 71, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-primer-light b/build/base16-primer-light index 42caa99..2768743 100644 --- a/build/base16-primer-light +++ b/build/base16-primer-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fafbfc; /* Black */ - --base01: #e1e4e8; /* Bright Black */ - --base02: #d1d5da; /* Grey */ - --base03: #959da5; /* Brighter Grey */ - --base04: #444d56; /* Bright Grey */ - --base05: #2f363d; /* White */ - --base06: #24292e; /* Brighter White */ - --base07: #1b1f23; /* Bright White */ - --base08: #d73a49; /* Red */ - --base09: #f66a0a; /* Orange */ - --base0A: #ffd33d; /* Yellow */ - --base0B: #28a745; /* Green */ - --base0C: #79b8ff; /* Cyan */ - --base0D: #0366d6; /* Blue */ - --base0E: #ea4aaa; /* Purple */ - --base0F: #a04100; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #28a745; /* Green */ + --dnd-indicator: #d73a49; /* Red */ + --idle-indicator: #ffd33d; /* Yellow */ + --streaming-indicator: #ea4aaa; /* Purple */ + + /* accent colors */ + --accent-1: #0366d6; /* links */ + --accent-2: #ea4aaa; /* general unread/mention elements */ + --accent-3: #0366d6; /* accent buttons */ + --accent-4: #79b8ff; /* accent buttons when hovered */ + --accent-5: #28a745; /* accent buttons when clicked */ + --mention: rgba(234, 74, 170, 0.1); + --mention-hover: rgba(234, 74, 170, 0.2); + + /* text colors */ + --text-0: #fafbfc; /* text on colored elements */ + --text-1: #2f363d; /* primary white-ish text */ + --text-2: #1b1f23; /* headings */ + --text-3: #2f363d; /* normal text */ + --text-4: #444d56; /* icon buttons and channels */ + --text-5: #959da5; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d1d5da; /* dark buttons when clicked */ + --bg-2: #e1e4e8; /* dark buttons */ + --bg-3: #d1d5da; /* spacing, secondary elements */ + --bg-4: #fafbfc; /* main background color */ + --hover: #d1d5da; /* channels and buttons when hovered */ + --active: #959da5; /* channels and buttons when selected */ + --message-hover: rgba(225, 228, 232, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-purpledream b/build/base16-purpledream index 7ca0f32..84602b9 100644 --- a/build/base16-purpledream +++ b/build/base16-purpledream @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #100510; /* Black */ - --base01: #302030; /* Bright Black */ - --base02: #403040; /* Grey */ - --base03: #605060; /* Brighter Grey */ - --base04: #bbb0bb; /* Bright Grey */ - --base05: #ddd0dd; /* White */ - --base06: #eee0ee; /* Brighter White */ - --base07: #fff0ff; /* Bright White */ - --base08: #ff1d0d; /* Red */ - --base09: #ccae14; /* Orange */ - --base0A: #f000a0; /* Yellow */ - --base0B: #14cc64; /* Green */ - --base0C: #0075b0; /* Cyan */ - --base0D: #00a0f0; /* Blue */ - --base0E: #b000d0; /* Purple */ - --base0F: #6a2a3c; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #14cc64; /* Green */ + --dnd-indicator: #ff1d0d; /* Red */ + --idle-indicator: #f000a0; /* Yellow */ + --streaming-indicator: #b000d0; /* Purple */ + + /* accent colors */ + --accent-1: #00a0f0; /* links */ + --accent-2: #b000d0; /* general unread/mention elements */ + --accent-3: #00a0f0; /* accent buttons */ + --accent-4: #0075b0; /* accent buttons when hovered */ + --accent-5: #14cc64; /* accent buttons when clicked */ + --mention: rgba(176, 0, 208, 0.1); + --mention-hover: rgba(176, 0, 208, 0.2); + + /* text colors */ + --text-0: #100510; /* text on colored elements */ + --text-1: #ddd0dd; /* primary white-ish text */ + --text-2: #fff0ff; /* headings */ + --text-3: #ddd0dd; /* normal text */ + --text-4: #bbb0bb; /* icon buttons and channels */ + --text-5: #605060; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #403040; /* dark buttons when clicked */ + --bg-2: #302030; /* dark buttons */ + --bg-3: #403040; /* spacing, secondary elements */ + --bg-4: #100510; /* main background color */ + --hover: #403040; /* channels and buttons when hovered */ + --active: #605060; /* channels and buttons when selected */ + --message-hover: rgba(48, 32, 48, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-qualia b/build/base16-qualia index 91dc59a..001b89d 100644 --- a/build/base16-qualia +++ b/build/base16-qualia @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #101010; /* Black */ - --base01: #454545; /* Bright Black */ - --base02: #454545; /* Grey */ - --base03: #454545; /* Brighter Grey */ - --base04: #808080; /* Bright Grey */ - --base05: #c0c0c0; /* White */ - --base06: #c0c0c0; /* Brighter White */ - --base07: #454545; /* Bright White */ - --base08: #efa6a2; /* Red */ - --base09: #a3b8ef; /* Orange */ - --base0A: #e6a3dc; /* Yellow */ - --base0B: #80c990; /* Green */ - --base0C: #c8c874; /* Cyan */ - --base0D: #50cacd; /* Blue */ - --base0E: #e0af85; /* Purple */ - --base0F: #808080; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #80c990; /* Green */ + --dnd-indicator: #efa6a2; /* Red */ + --idle-indicator: #e6a3dc; /* Yellow */ + --streaming-indicator: #e0af85; /* Purple */ + + /* accent colors */ + --accent-1: #50cacd; /* links */ + --accent-2: #e0af85; /* general unread/mention elements */ + --accent-3: #50cacd; /* accent buttons */ + --accent-4: #c8c874; /* accent buttons when hovered */ + --accent-5: #80c990; /* accent buttons when clicked */ + --mention: rgba(224, 175, 133, 0.1); + --mention-hover: rgba(224, 175, 133, 0.2); + + /* text colors */ + --text-0: #101010; /* text on colored elements */ + --text-1: #c0c0c0; /* primary white-ish text */ + --text-2: #454545; /* headings */ + --text-3: #c0c0c0; /* normal text */ + --text-4: #808080; /* icon buttons and channels */ + --text-5: #454545; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #454545; /* dark buttons when clicked */ + --bg-2: #454545; /* dark buttons */ + --bg-3: #454545; /* spacing, secondary elements */ + --bg-4: #101010; /* main background color */ + --hover: #454545; /* channels and buttons when hovered */ + --active: #454545; /* channels and buttons when selected */ + --message-hover: rgba(69, 69, 69, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-railscasts b/build/base16-railscasts index 12262e6..7b2fcc6 100644 --- a/build/base16-railscasts +++ b/build/base16-railscasts @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2b2b2b; /* Black */ - --base01: #272935; /* Bright Black */ - --base02: #3a4055; /* Grey */ - --base03: #5a647e; /* Brighter Grey */ - --base04: #d4cfc9; /* Bright Grey */ - --base05: #e6e1dc; /* White */ - --base06: #f4f1ed; /* Brighter White */ - --base07: #f9f7f3; /* Bright White */ - --base08: #da4939; /* Red */ - --base09: #cc7833; /* Orange */ - --base0A: #ffc66d; /* Yellow */ - --base0B: #a5c261; /* Green */ - --base0C: #519f50; /* Cyan */ - --base0D: #6d9cbe; /* Blue */ - --base0E: #b6b3eb; /* Purple */ - --base0F: #bc9458; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a5c261; /* Green */ + --dnd-indicator: #da4939; /* Red */ + --idle-indicator: #ffc66d; /* Yellow */ + --streaming-indicator: #b6b3eb; /* Purple */ + + /* accent colors */ + --accent-1: #6d9cbe; /* links */ + --accent-2: #b6b3eb; /* general unread/mention elements */ + --accent-3: #6d9cbe; /* accent buttons */ + --accent-4: #519f50; /* accent buttons when hovered */ + --accent-5: #a5c261; /* accent buttons when clicked */ + --mention: rgba(182, 179, 235, 0.1); + --mention-hover: rgba(182, 179, 235, 0.2); + + /* text colors */ + --text-0: #2b2b2b; /* text on colored elements */ + --text-1: #e6e1dc; /* primary white-ish text */ + --text-2: #f9f7f3; /* headings */ + --text-3: #e6e1dc; /* normal text */ + --text-4: #d4cfc9; /* icon buttons and channels */ + --text-5: #5a647e; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3a4055; /* dark buttons when clicked */ + --bg-2: #272935; /* dark buttons */ + --bg-3: #3a4055; /* spacing, secondary elements */ + --bg-4: #2b2b2b; /* main background color */ + --hover: #3a4055; /* channels and buttons when hovered */ + --active: #5a647e; /* channels and buttons when selected */ + --message-hover: rgba(39, 41, 53, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-rebecca b/build/base16-rebecca index 497c0ac..e645800 100644 --- a/build/base16-rebecca +++ b/build/base16-rebecca @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #292a44; /* Black */ - --base01: #663399; /* Bright Black */ - --base02: #383a62; /* Grey */ - --base03: #666699; /* Brighter Grey */ - --base04: #a0a0c5; /* Bright Grey */ - --base05: #f1eff8; /* White */ - --base06: #ccccff; /* Brighter White */ - --base07: #53495d; /* Bright White */ - --base08: #a0a0c5; /* Red */ - --base09: #efe4a1; /* Orange */ - --base0A: #ae81ff; /* Yellow */ - --base0B: #6dfedf; /* Green */ - --base0C: #8eaee0; /* Cyan */ - --base0D: #2de0a7; /* Blue */ - --base0E: #7aa5ff; /* Purple */ - --base0F: #ff79c6; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #6dfedf; /* Green */ + --dnd-indicator: #a0a0c5; /* Red */ + --idle-indicator: #ae81ff; /* Yellow */ + --streaming-indicator: #7aa5ff; /* Purple */ + + /* accent colors */ + --accent-1: #2de0a7; /* links */ + --accent-2: #7aa5ff; /* general unread/mention elements */ + --accent-3: #2de0a7; /* accent buttons */ + --accent-4: #8eaee0; /* accent buttons when hovered */ + --accent-5: #6dfedf; /* accent buttons when clicked */ + --mention: rgba(122, 165, 255, 0.1); + --mention-hover: rgba(122, 165, 255, 0.2); + + /* text colors */ + --text-0: #292a44; /* text on colored elements */ + --text-1: #f1eff8; /* primary white-ish text */ + --text-2: #53495d; /* headings */ + --text-3: #f1eff8; /* normal text */ + --text-4: #a0a0c5; /* icon buttons and channels */ + --text-5: #666699; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #383a62; /* dark buttons when clicked */ + --bg-2: #663399; /* dark buttons */ + --bg-3: #383a62; /* spacing, secondary elements */ + --bg-4: #292a44; /* main background color */ + --hover: #383a62; /* channels and buttons when hovered */ + --active: #666699; /* channels and buttons when selected */ + --message-hover: rgba(102, 51, 153, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-rose-pine b/build/base16-rose-pine index 3daac8e..cbfd9b3 100644 --- a/build/base16-rose-pine +++ b/build/base16-rose-pine @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #191724; /* Black */ - --base01: #1f1d2e; /* Bright Black */ - --base02: #26233a; /* Grey */ - --base03: #6e6a86; /* Brighter Grey */ - --base04: #908caa; /* Bright Grey */ - --base05: #e0def4; /* White */ - --base06: #e0def4; /* Brighter White */ - --base07: #524f67; /* Bright White */ - --base08: #eb6f92; /* Red */ - --base09: #f6c177; /* Orange */ - --base0A: #ebbcba; /* Yellow */ - --base0B: #31748f; /* Green */ - --base0C: #9ccfd8; /* Cyan */ - --base0D: #c4a7e7; /* Blue */ - --base0E: #f6c177; /* Purple */ - --base0F: #524f67; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #31748f; /* Green */ + --dnd-indicator: #eb6f92; /* Red */ + --idle-indicator: #ebbcba; /* Yellow */ + --streaming-indicator: #f6c177; /* Purple */ + + /* accent colors */ + --accent-1: #c4a7e7; /* links */ + --accent-2: #f6c177; /* general unread/mention elements */ + --accent-3: #c4a7e7; /* accent buttons */ + --accent-4: #9ccfd8; /* accent buttons when hovered */ + --accent-5: #31748f; /* accent buttons when clicked */ + --mention: rgba(246, 193, 119, 0.1); + --mention-hover: rgba(246, 193, 119, 0.2); + + /* text colors */ + --text-0: #191724; /* text on colored elements */ + --text-1: #e0def4; /* primary white-ish text */ + --text-2: #524f67; /* headings */ + --text-3: #e0def4; /* normal text */ + --text-4: #908caa; /* icon buttons and channels */ + --text-5: #6e6a86; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #26233a; /* dark buttons when clicked */ + --bg-2: #1f1d2e; /* dark buttons */ + --bg-3: #26233a; /* spacing, secondary elements */ + --bg-4: #191724; /* main background color */ + --hover: #26233a; /* channels and buttons when hovered */ + --active: #6e6a86; /* channels and buttons when selected */ + --message-hover: rgba(31, 29, 46, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-rose-pine-dawn b/build/base16-rose-pine-dawn index 905a642..4313bfe 100644 --- a/build/base16-rose-pine-dawn +++ b/build/base16-rose-pine-dawn @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #faf4ed; /* Black */ - --base01: #fffaf3; /* Bright Black */ - --base02: #f2e9de; /* Grey */ - --base03: #9893a5; /* Brighter Grey */ - --base04: #797593; /* Bright Grey */ - --base05: #575279; /* White */ - --base06: #575279; /* Brighter White */ - --base07: #cecacd; /* Bright White */ - --base08: #b4637a; /* Red */ - --base09: #ea9d34; /* Orange */ - --base0A: #d7827e; /* Yellow */ - --base0B: #286983; /* Green */ - --base0C: #56949f; /* Cyan */ - --base0D: #907aa9; /* Blue */ - --base0E: #ea9d34; /* Purple */ - --base0F: #cecacd; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #286983; /* Green */ + --dnd-indicator: #b4637a; /* Red */ + --idle-indicator: #d7827e; /* Yellow */ + --streaming-indicator: #ea9d34; /* Purple */ + + /* accent colors */ + --accent-1: #907aa9; /* links */ + --accent-2: #ea9d34; /* general unread/mention elements */ + --accent-3: #907aa9; /* accent buttons */ + --accent-4: #56949f; /* accent buttons when hovered */ + --accent-5: #286983; /* accent buttons when clicked */ + --mention: rgba(234, 157, 52, 0.1); + --mention-hover: rgba(234, 157, 52, 0.2); + + /* text colors */ + --text-0: #faf4ed; /* text on colored elements */ + --text-1: #575279; /* primary white-ish text */ + --text-2: #cecacd; /* headings */ + --text-3: #575279; /* normal text */ + --text-4: #797593; /* icon buttons and channels */ + --text-5: #9893a5; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #f2e9de; /* dark buttons when clicked */ + --bg-2: #fffaf3; /* dark buttons */ + --bg-3: #f2e9de; /* spacing, secondary elements */ + --bg-4: #faf4ed; /* main background color */ + --hover: #f2e9de; /* channels and buttons when hovered */ + --active: #9893a5; /* channels and buttons when selected */ + --message-hover: rgba(255, 250, 243, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-rose-pine-moon b/build/base16-rose-pine-moon index 6701634..215fd55 100644 --- a/build/base16-rose-pine-moon +++ b/build/base16-rose-pine-moon @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #232136; /* Black */ - --base01: #2a273f; /* Bright Black */ - --base02: #393552; /* Grey */ - --base03: #6e6a86; /* Brighter Grey */ - --base04: #908caa; /* Bright Grey */ - --base05: #e0def4; /* White */ - --base06: #e0def4; /* Brighter White */ - --base07: #56526e; /* Bright White */ - --base08: #eb6f92; /* Red */ - --base09: #f6c177; /* Orange */ - --base0A: #ea9a97; /* Yellow */ - --base0B: #3e8fb0; /* Green */ - --base0C: #9ccfd8; /* Cyan */ - --base0D: #c4a7e7; /* Blue */ - --base0E: #f6c177; /* Purple */ - --base0F: #56526e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #3e8fb0; /* Green */ + --dnd-indicator: #eb6f92; /* Red */ + --idle-indicator: #ea9a97; /* Yellow */ + --streaming-indicator: #f6c177; /* Purple */ + + /* accent colors */ + --accent-1: #c4a7e7; /* links */ + --accent-2: #f6c177; /* general unread/mention elements */ + --accent-3: #c4a7e7; /* accent buttons */ + --accent-4: #9ccfd8; /* accent buttons when hovered */ + --accent-5: #3e8fb0; /* accent buttons when clicked */ + --mention: rgba(246, 193, 119, 0.1); + --mention-hover: rgba(246, 193, 119, 0.2); + + /* text colors */ + --text-0: #232136; /* text on colored elements */ + --text-1: #e0def4; /* primary white-ish text */ + --text-2: #56526e; /* headings */ + --text-3: #e0def4; /* normal text */ + --text-4: #908caa; /* icon buttons and channels */ + --text-5: #6e6a86; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #393552; /* dark buttons when clicked */ + --bg-2: #2a273f; /* dark buttons */ + --bg-3: #393552; /* spacing, secondary elements */ + --bg-4: #232136; /* main background color */ + --hover: #393552; /* channels and buttons when hovered */ + --active: #6e6a86; /* channels and buttons when selected */ + --message-hover: rgba(42, 39, 63, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-saga b/build/base16-saga index a94cc0a..f2af5e5 100644 --- a/build/base16-saga +++ b/build/base16-saga @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #05080a; /* Black */ - --base01: #0a1014; /* Bright Black */ - --base02: #0f181e; /* Grey */ - --base03: #141f27; /* Brighter Grey */ - --base04: #192630; /* Bright Grey */ - --base05: #dce2f7; /* White */ - --base06: #f8eae7; /* Brighter White */ - --base07: #ccd3fe; /* Bright White */ - --base08: #ffd4e9; /* Red */ - --base09: #fbcbae; /* Orange */ - --base0A: #fbebc8; /* Yellow */ - --base0B: #f7ddff; /* Green */ - --base0C: #c5edc1; /* Cyan */ - --base0D: #c9fff7; /* Blue */ - --base0E: #dcc3f9; /* Purple */ - --base0F: #f6dddd; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #f7ddff; /* Green */ + --dnd-indicator: #ffd4e9; /* Red */ + --idle-indicator: #fbebc8; /* Yellow */ + --streaming-indicator: #dcc3f9; /* Purple */ + + /* accent colors */ + --accent-1: #c9fff7; /* links */ + --accent-2: #dcc3f9; /* general unread/mention elements */ + --accent-3: #c9fff7; /* accent buttons */ + --accent-4: #c5edc1; /* accent buttons when hovered */ + --accent-5: #f7ddff; /* accent buttons when clicked */ + --mention: rgba(220, 195, 249, 0.1); + --mention-hover: rgba(220, 195, 249, 0.2); + + /* text colors */ + --text-0: #05080a; /* text on colored elements */ + --text-1: #dce2f7; /* primary white-ish text */ + --text-2: #ccd3fe; /* headings */ + --text-3: #dce2f7; /* normal text */ + --text-4: #192630; /* icon buttons and channels */ + --text-5: #141f27; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #0f181e; /* dark buttons when clicked */ + --bg-2: #0a1014; /* dark buttons */ + --bg-3: #0f181e; /* spacing, secondary elements */ + --bg-4: #05080a; /* main background color */ + --hover: #0f181e; /* channels and buttons when hovered */ + --active: #141f27; /* channels and buttons when selected */ + --message-hover: rgba(10, 16, 20, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-sagelight b/build/base16-sagelight index acde3f2..fd3d418 100644 --- a/build/base16-sagelight +++ b/build/base16-sagelight @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f8f8f8; /* Black */ - --base01: #e8e8e8; /* Bright Black */ - --base02: #d8d8d8; /* Grey */ - --base03: #b8b8b8; /* Brighter Grey */ - --base04: #585858; /* Bright Grey */ - --base05: #383838; /* White */ - --base06: #282828; /* Brighter White */ - --base07: #181818; /* Bright White */ - --base08: #fa8480; /* Red */ - --base09: #ffaa61; /* Orange */ - --base0A: #ffdc61; /* Yellow */ - --base0B: #a0d2c8; /* Green */ - --base0C: #a2d6f5; /* Cyan */ - --base0D: #a0a7d2; /* Blue */ - --base0E: #c8a0d2; /* Purple */ - --base0F: #d2b2a0; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a0d2c8; /* Green */ + --dnd-indicator: #fa8480; /* Red */ + --idle-indicator: #ffdc61; /* Yellow */ + --streaming-indicator: #c8a0d2; /* Purple */ + + /* accent colors */ + --accent-1: #a0a7d2; /* links */ + --accent-2: #c8a0d2; /* general unread/mention elements */ + --accent-3: #a0a7d2; /* accent buttons */ + --accent-4: #a2d6f5; /* accent buttons when hovered */ + --accent-5: #a0d2c8; /* accent buttons when clicked */ + --mention: rgba(200, 160, 210, 0.1); + --mention-hover: rgba(200, 160, 210, 0.2); + + /* text colors */ + --text-0: #f8f8f8; /* text on colored elements */ + --text-1: #383838; /* primary white-ish text */ + --text-2: #181818; /* headings */ + --text-3: #383838; /* normal text */ + --text-4: #585858; /* icon buttons and channels */ + --text-5: #b8b8b8; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d8d8d8; /* dark buttons when clicked */ + --bg-2: #e8e8e8; /* dark buttons */ + --bg-3: #d8d8d8; /* spacing, secondary elements */ + --bg-4: #f8f8f8; /* main background color */ + --hover: #d8d8d8; /* channels and buttons when hovered */ + --active: #b8b8b8; /* channels and buttons when selected */ + --message-hover: rgba(232, 232, 232, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-sakura b/build/base16-sakura index 769e973..9531287 100644 --- a/build/base16-sakura +++ b/build/base16-sakura @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #feedf3; /* Black */ - --base01: #f8e2e7; /* Bright Black */ - --base02: #e0ccd1; /* Grey */ - --base03: #755f64; /* Brighter Grey */ - --base04: #665055; /* Bright Grey */ - --base05: #564448; /* White */ - --base06: #42383a; /* Brighter White */ - --base07: #33292b; /* Bright White */ - --base08: #df2d52; /* Red */ - --base09: #f6661e; /* Orange */ - --base0A: #c29461; /* Yellow */ - --base0B: #2e916d; /* Green */ - --base0C: #1d8991; /* Cyan */ - --base0D: #006e93; /* Blue */ - --base0E: #5e2180; /* Purple */ - --base0F: #ba0d35; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #2e916d; /* Green */ + --dnd-indicator: #df2d52; /* Red */ + --idle-indicator: #c29461; /* Yellow */ + --streaming-indicator: #5e2180; /* Purple */ + + /* accent colors */ + --accent-1: #006e93; /* links */ + --accent-2: #5e2180; /* general unread/mention elements */ + --accent-3: #006e93; /* accent buttons */ + --accent-4: #1d8991; /* accent buttons when hovered */ + --accent-5: #2e916d; /* accent buttons when clicked */ + --mention: rgba(94, 33, 128, 0.1); + --mention-hover: rgba(94, 33, 128, 0.2); + + /* text colors */ + --text-0: #feedf3; /* text on colored elements */ + --text-1: #564448; /* primary white-ish text */ + --text-2: #33292b; /* headings */ + --text-3: #564448; /* normal text */ + --text-4: #665055; /* icon buttons and channels */ + --text-5: #755f64; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #e0ccd1; /* dark buttons when clicked */ + --bg-2: #f8e2e7; /* dark buttons */ + --bg-3: #e0ccd1; /* spacing, secondary elements */ + --bg-4: #feedf3; /* main background color */ + --hover: #e0ccd1; /* channels and buttons when hovered */ + --active: #755f64; /* channels and buttons when selected */ + --message-hover: rgba(248, 226, 231, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-sandcastle b/build/base16-sandcastle index 9f4385a..e8981bf 100644 --- a/build/base16-sandcastle +++ b/build/base16-sandcastle @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #282c34; /* Black */ - --base01: #2c323b; /* Bright Black */ - --base02: #3e4451; /* Grey */ - --base03: #665c54; /* Brighter Grey */ - --base04: #928374; /* Bright Grey */ - --base05: #a89984; /* White */ - --base06: #d5c4a1; /* Brighter White */ - --base07: #fdf4c1; /* Bright White */ - --base08: #83a598; /* Red */ - --base09: #a07e3b; /* Orange */ - --base0A: #a07e3b; /* Yellow */ - --base0B: #528b8b; /* Green */ - --base0C: #83a598; /* Cyan */ - --base0D: #83a598; /* Blue */ - --base0E: #d75f5f; /* Purple */ - --base0F: #a87322; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #528b8b; /* Green */ + --dnd-indicator: #83a598; /* Red */ + --idle-indicator: #a07e3b; /* Yellow */ + --streaming-indicator: #d75f5f; /* Purple */ + + /* accent colors */ + --accent-1: #83a598; /* links */ + --accent-2: #d75f5f; /* general unread/mention elements */ + --accent-3: #83a598; /* accent buttons */ + --accent-4: #83a598; /* accent buttons when hovered */ + --accent-5: #528b8b; /* accent buttons when clicked */ + --mention: rgba(215, 95, 95, 0.1); + --mention-hover: rgba(215, 95, 95, 0.2); + + /* text colors */ + --text-0: #282c34; /* text on colored elements */ + --text-1: #a89984; /* primary white-ish text */ + --text-2: #fdf4c1; /* headings */ + --text-3: #a89984; /* normal text */ + --text-4: #928374; /* icon buttons and channels */ + --text-5: #665c54; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3e4451; /* dark buttons when clicked */ + --bg-2: #2c323b; /* dark buttons */ + --bg-3: #3e4451; /* spacing, secondary elements */ + --bg-4: #282c34; /* main background color */ + --hover: #3e4451; /* channels and buttons when hovered */ + --active: #665c54; /* channels and buttons when selected */ + --message-hover: rgba(44, 50, 59, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-selenized-black b/build/base16-selenized-black index 855b888..139c4e7 100644 --- a/build/base16-selenized-black +++ b/build/base16-selenized-black @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #181818; /* Black */ - --base01: #252525; /* Bright Black */ - --base02: #3b3b3b; /* Grey */ - --base03: #777777; /* Brighter Grey */ - --base04: #777777; /* Bright Grey */ - --base05: #b9b9b9; /* White */ - --base06: #dedede; /* Brighter White */ - --base07: #dedede; /* Bright White */ - --base08: #ed4a46; /* Red */ - --base09: #e67f43; /* Orange */ - --base0A: #dbb32d; /* Yellow */ - --base0B: #70b433; /* Green */ - --base0C: #3fc5b7; /* Cyan */ - --base0D: #368aeb; /* Blue */ - --base0E: #a580e2; /* Purple */ - --base0F: #eb6eb7; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #70b433; /* Green */ + --dnd-indicator: #ed4a46; /* Red */ + --idle-indicator: #dbb32d; /* Yellow */ + --streaming-indicator: #a580e2; /* Purple */ + + /* accent colors */ + --accent-1: #368aeb; /* links */ + --accent-2: #a580e2; /* general unread/mention elements */ + --accent-3: #368aeb; /* accent buttons */ + --accent-4: #3fc5b7; /* accent buttons when hovered */ + --accent-5: #70b433; /* accent buttons when clicked */ + --mention: rgba(165, 128, 226, 0.1); + --mention-hover: rgba(165, 128, 226, 0.2); + + /* text colors */ + --text-0: #181818; /* text on colored elements */ + --text-1: #b9b9b9; /* primary white-ish text */ + --text-2: #dedede; /* headings */ + --text-3: #b9b9b9; /* normal text */ + --text-4: #777777; /* icon buttons and channels */ + --text-5: #777777; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3b3b3b; /* dark buttons when clicked */ + --bg-2: #252525; /* dark buttons */ + --bg-3: #3b3b3b; /* spacing, secondary elements */ + --bg-4: #181818; /* main background color */ + --hover: #3b3b3b; /* channels and buttons when hovered */ + --active: #777777; /* channels and buttons when selected */ + --message-hover: rgba(37, 37, 37, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-selenized-dark b/build/base16-selenized-dark index 2657526..9b2f2b7 100644 --- a/build/base16-selenized-dark +++ b/build/base16-selenized-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #103c48; /* Black */ - --base01: #184956; /* Bright Black */ - --base02: #2d5b69; /* Grey */ - --base03: #72898f; /* Brighter Grey */ - --base04: #72898f; /* Bright Grey */ - --base05: #adbcbc; /* White */ - --base06: #cad8d9; /* Brighter White */ - --base07: #cad8d9; /* Bright White */ - --base08: #fa5750; /* Red */ - --base09: #ed8649; /* Orange */ - --base0A: #dbb32d; /* Yellow */ - --base0B: #75b938; /* Green */ - --base0C: #41c7b9; /* Cyan */ - --base0D: #4695f7; /* Blue */ - --base0E: #af88eb; /* Purple */ - --base0F: #f275be; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #75b938; /* Green */ + --dnd-indicator: #fa5750; /* Red */ + --idle-indicator: #dbb32d; /* Yellow */ + --streaming-indicator: #af88eb; /* Purple */ + + /* accent colors */ + --accent-1: #4695f7; /* links */ + --accent-2: #af88eb; /* general unread/mention elements */ + --accent-3: #4695f7; /* accent buttons */ + --accent-4: #41c7b9; /* accent buttons when hovered */ + --accent-5: #75b938; /* accent buttons when clicked */ + --mention: rgba(175, 136, 235, 0.1); + --mention-hover: rgba(175, 136, 235, 0.2); + + /* text colors */ + --text-0: #103c48; /* text on colored elements */ + --text-1: #adbcbc; /* primary white-ish text */ + --text-2: #cad8d9; /* headings */ + --text-3: #adbcbc; /* normal text */ + --text-4: #72898f; /* icon buttons and channels */ + --text-5: #72898f; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #2d5b69; /* dark buttons when clicked */ + --bg-2: #184956; /* dark buttons */ + --bg-3: #2d5b69; /* spacing, secondary elements */ + --bg-4: #103c48; /* main background color */ + --hover: #2d5b69; /* channels and buttons when hovered */ + --active: #72898f; /* channels and buttons when selected */ + --message-hover: rgba(24, 73, 86, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-selenized-light b/build/base16-selenized-light index 789d09a..f8f08e1 100644 --- a/build/base16-selenized-light +++ b/build/base16-selenized-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fbf3db; /* Black */ - --base01: #ece3cc; /* Bright Black */ - --base02: #d5cdb6; /* Grey */ - --base03: #909995; /* Brighter Grey */ - --base04: #909995; /* Bright Grey */ - --base05: #53676d; /* White */ - --base06: #3a4d53; /* Brighter White */ - --base07: #3a4d53; /* Bright White */ - --base08: #cc1729; /* Red */ - --base09: #bc5819; /* Orange */ - --base0A: #a78300; /* Yellow */ - --base0B: #428b00; /* Green */ - --base0C: #00978a; /* Cyan */ - --base0D: #006dce; /* Blue */ - --base0E: #825dc0; /* Purple */ - --base0F: #c44392; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #428b00; /* Green */ + --dnd-indicator: #cc1729; /* Red */ + --idle-indicator: #a78300; /* Yellow */ + --streaming-indicator: #825dc0; /* Purple */ + + /* accent colors */ + --accent-1: #006dce; /* links */ + --accent-2: #825dc0; /* general unread/mention elements */ + --accent-3: #006dce; /* accent buttons */ + --accent-4: #00978a; /* accent buttons when hovered */ + --accent-5: #428b00; /* accent buttons when clicked */ + --mention: rgba(130, 93, 192, 0.1); + --mention-hover: rgba(130, 93, 192, 0.2); + + /* text colors */ + --text-0: #fbf3db; /* text on colored elements */ + --text-1: #53676d; /* primary white-ish text */ + --text-2: #3a4d53; /* headings */ + --text-3: #53676d; /* normal text */ + --text-4: #909995; /* icon buttons and channels */ + --text-5: #909995; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d5cdb6; /* dark buttons when clicked */ + --bg-2: #ece3cc; /* dark buttons */ + --bg-3: #d5cdb6; /* spacing, secondary elements */ + --bg-4: #fbf3db; /* main background color */ + --hover: #d5cdb6; /* channels and buttons when hovered */ + --active: #909995; /* channels and buttons when selected */ + --message-hover: rgba(236, 227, 204, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-selenized-white b/build/base16-selenized-white index c5f6311..f43b0c2 100644 --- a/build/base16-selenized-white +++ b/build/base16-selenized-white @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #ffffff; /* Black */ - --base01: #ebebeb; /* Bright Black */ - --base02: #cdcdcd; /* Grey */ - --base03: #878787; /* Brighter Grey */ - --base04: #878787; /* Bright Grey */ - --base05: #474747; /* White */ - --base06: #282828; /* Brighter White */ - --base07: #282828; /* Bright White */ - --base08: #bf0000; /* Red */ - --base09: #ba3700; /* Orange */ - --base0A: #af8500; /* Yellow */ - --base0B: #008400; /* Green */ - --base0C: #009a8a; /* Cyan */ - --base0D: #0054cf; /* Blue */ - --base0E: #6b40c3; /* Purple */ - --base0F: #dd0f9d; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #008400; /* Green */ + --dnd-indicator: #bf0000; /* Red */ + --idle-indicator: #af8500; /* Yellow */ + --streaming-indicator: #6b40c3; /* Purple */ + + /* accent colors */ + --accent-1: #0054cf; /* links */ + --accent-2: #6b40c3; /* general unread/mention elements */ + --accent-3: #0054cf; /* accent buttons */ + --accent-4: #009a8a; /* accent buttons when hovered */ + --accent-5: #008400; /* accent buttons when clicked */ + --mention: rgba(107, 64, 195, 0.1); + --mention-hover: rgba(107, 64, 195, 0.2); + + /* text colors */ + --text-0: #ffffff; /* text on colored elements */ + --text-1: #474747; /* primary white-ish text */ + --text-2: #282828; /* headings */ + --text-3: #474747; /* normal text */ + --text-4: #878787; /* icon buttons and channels */ + --text-5: #878787; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #cdcdcd; /* dark buttons when clicked */ + --bg-2: #ebebeb; /* dark buttons */ + --bg-3: #cdcdcd; /* spacing, secondary elements */ + --bg-4: #ffffff; /* main background color */ + --hover: #cdcdcd; /* channels and buttons when hovered */ + --active: #878787; /* channels and buttons when selected */ + --message-hover: rgba(235, 235, 235, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-seti b/build/base16-seti index 86d0708..2aedbd0 100644 --- a/build/base16-seti +++ b/build/base16-seti @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #151718; /* Black */ - --base01: #282a2b; /* Bright Black */ - --base02: #3b758c; /* Grey */ - --base03: #41535b; /* Brighter Grey */ - --base04: #43a5d5; /* Bright Grey */ - --base05: #d6d6d6; /* White */ - --base06: #eeeeee; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #cd3f45; /* Red */ - --base09: #db7b55; /* Orange */ - --base0A: #e6cd69; /* Yellow */ - --base0B: #9fca56; /* Green */ - --base0C: #55dbbe; /* Cyan */ - --base0D: #55b5db; /* Blue */ - --base0E: #a074c4; /* Purple */ - --base0F: #8a553f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #9fca56; /* Green */ + --dnd-indicator: #cd3f45; /* Red */ + --idle-indicator: #e6cd69; /* Yellow */ + --streaming-indicator: #a074c4; /* Purple */ + + /* accent colors */ + --accent-1: #55b5db; /* links */ + --accent-2: #a074c4; /* general unread/mention elements */ + --accent-3: #55b5db; /* accent buttons */ + --accent-4: #55dbbe; /* accent buttons when hovered */ + --accent-5: #9fca56; /* accent buttons when clicked */ + --mention: rgba(160, 116, 196, 0.1); + --mention-hover: rgba(160, 116, 196, 0.2); + + /* text colors */ + --text-0: #151718; /* text on colored elements */ + --text-1: #d6d6d6; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #d6d6d6; /* normal text */ + --text-4: #43a5d5; /* icon buttons and channels */ + --text-5: #41535b; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3b758c; /* dark buttons when clicked */ + --bg-2: #282a2b; /* dark buttons */ + --bg-3: #3b758c; /* spacing, secondary elements */ + --bg-4: #151718; /* main background color */ + --hover: #3b758c; /* channels and buttons when hovered */ + --active: #41535b; /* channels and buttons when selected */ + --message-hover: rgba(40, 42, 43, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-shades-of-purple b/build/base16-shades-of-purple index 41d6c73..6ce3156 100644 --- a/build/base16-shades-of-purple +++ b/build/base16-shades-of-purple @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1e1e3f; /* Black */ - --base01: #43d426; /* Bright Black */ - --base02: #f1d000; /* Grey */ - --base03: #808080; /* Brighter Grey */ - --base04: #6871ff; /* Bright Grey */ - --base05: #c7c7c7; /* White */ - --base06: #ff77ff; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #d90429; /* Red */ - --base09: #f92a1c; /* Orange */ - --base0A: #ffe700; /* Yellow */ - --base0B: #3ad900; /* Green */ - --base0C: #00c5c7; /* Cyan */ - --base0D: #6943ff; /* Blue */ - --base0E: #ff2c70; /* Purple */ - --base0F: #79e8fb; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #3ad900; /* Green */ + --dnd-indicator: #d90429; /* Red */ + --idle-indicator: #ffe700; /* Yellow */ + --streaming-indicator: #ff2c70; /* Purple */ + + /* accent colors */ + --accent-1: #6943ff; /* links */ + --accent-2: #ff2c70; /* general unread/mention elements */ + --accent-3: #6943ff; /* accent buttons */ + --accent-4: #00c5c7; /* accent buttons when hovered */ + --accent-5: #3ad900; /* accent buttons when clicked */ + --mention: rgba(255, 44, 112, 0.1); + --mention-hover: rgba(255, 44, 112, 0.2); + + /* text colors */ + --text-0: #1e1e3f; /* text on colored elements */ + --text-1: #c7c7c7; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #c7c7c7; /* normal text */ + --text-4: #6871ff; /* icon buttons and channels */ + --text-5: #808080; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #f1d000; /* dark buttons when clicked */ + --bg-2: #43d426; /* dark buttons */ + --bg-3: #f1d000; /* spacing, secondary elements */ + --bg-4: #1e1e3f; /* main background color */ + --hover: #f1d000; /* channels and buttons when hovered */ + --active: #808080; /* channels and buttons when selected */ + --message-hover: rgba(67, 212, 38, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-shadesmear-dark b/build/base16-shadesmear-dark index fc8c05e..a981436 100644 --- a/build/base16-shadesmear-dark +++ b/build/base16-shadesmear-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #232323; /* Black */ - --base01: #1c1c1c; /* Bright Black */ - --base02: #4e4e4e; /* Grey */ - --base03: #c0c0c0; /* Brighter Grey */ - --base04: #e4e4e4; /* Bright Grey */ - --base05: #dbdbdb; /* White */ - --base06: #e4e4e4; /* Brighter White */ - --base07: #1c1c1c; /* Bright White */ - --base08: #cc5450; /* Red */ - --base09: #a64270; /* Orange */ - --base0A: #307878; /* Yellow */ - --base0B: #71983b; /* Green */ - --base0C: #c57d42; /* Cyan */ - --base0D: #376388; /* Blue */ - --base0E: #d7ab54; /* Purple */ - --base0F: #6d6d6d; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #71983b; /* Green */ + --dnd-indicator: #cc5450; /* Red */ + --idle-indicator: #307878; /* Yellow */ + --streaming-indicator: #d7ab54; /* Purple */ + + /* accent colors */ + --accent-1: #376388; /* links */ + --accent-2: #d7ab54; /* general unread/mention elements */ + --accent-3: #376388; /* accent buttons */ + --accent-4: #c57d42; /* accent buttons when hovered */ + --accent-5: #71983b; /* accent buttons when clicked */ + --mention: rgba(215, 171, 84, 0.1); + --mention-hover: rgba(215, 171, 84, 0.2); + + /* text colors */ + --text-0: #232323; /* text on colored elements */ + --text-1: #dbdbdb; /* primary white-ish text */ + --text-2: #1c1c1c; /* headings */ + --text-3: #dbdbdb; /* normal text */ + --text-4: #e4e4e4; /* icon buttons and channels */ + --text-5: #c0c0c0; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #4e4e4e; /* dark buttons when clicked */ + --bg-2: #1c1c1c; /* dark buttons */ + --bg-3: #4e4e4e; /* spacing, secondary elements */ + --bg-4: #232323; /* main background color */ + --hover: #4e4e4e; /* channels and buttons when hovered */ + --active: #c0c0c0; /* channels and buttons when selected */ + --message-hover: rgba(28, 28, 28, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-shadesmear-light b/build/base16-shadesmear-light index 3016d8f..0326f15 100644 --- a/build/base16-shadesmear-light +++ b/build/base16-shadesmear-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #dbdbdb; /* Black */ - --base01: #e4e4e4; /* Bright Black */ - --base02: #c0c0c0; /* Grey */ - --base03: #4e4e4e; /* Brighter Grey */ - --base04: #1c1c1c; /* Bright Grey */ - --base05: #232323; /* White */ - --base06: #1c1c1c; /* Brighter White */ - --base07: #e4e4e4; /* Bright White */ - --base08: #cc5450; /* Red */ - --base09: #a64270; /* Orange */ - --base0A: #307878; /* Yellow */ - --base0B: #71983b; /* Green */ - --base0C: #c57d42; /* Cyan */ - --base0D: #376388; /* Blue */ - --base0E: #d7ab54; /* Purple */ - --base0F: #6d6d6d; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #71983b; /* Green */ + --dnd-indicator: #cc5450; /* Red */ + --idle-indicator: #307878; /* Yellow */ + --streaming-indicator: #d7ab54; /* Purple */ + + /* accent colors */ + --accent-1: #376388; /* links */ + --accent-2: #d7ab54; /* general unread/mention elements */ + --accent-3: #376388; /* accent buttons */ + --accent-4: #c57d42; /* accent buttons when hovered */ + --accent-5: #71983b; /* accent buttons when clicked */ + --mention: rgba(215, 171, 84, 0.1); + --mention-hover: rgba(215, 171, 84, 0.2); + + /* text colors */ + --text-0: #dbdbdb; /* text on colored elements */ + --text-1: #232323; /* primary white-ish text */ + --text-2: #e4e4e4; /* headings */ + --text-3: #232323; /* normal text */ + --text-4: #1c1c1c; /* icon buttons and channels */ + --text-5: #4e4e4e; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #c0c0c0; /* dark buttons when clicked */ + --bg-2: #e4e4e4; /* dark buttons */ + --bg-3: #c0c0c0; /* spacing, secondary elements */ + --bg-4: #dbdbdb; /* main background color */ + --hover: #c0c0c0; /* channels and buttons when hovered */ + --active: #4e4e4e; /* channels and buttons when selected */ + --message-hover: rgba(228, 228, 228, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-shapeshifter b/build/base16-shapeshifter index ee0db3f..852b383 100644 --- a/build/base16-shapeshifter +++ b/build/base16-shapeshifter @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f9f9f9; /* Black */ - --base01: #e0e0e0; /* Bright Black */ - --base02: #ababab; /* Grey */ - --base03: #555555; /* Brighter Grey */ - --base04: #343434; /* Bright Grey */ - --base05: #102015; /* White */ - --base06: #040404; /* Brighter White */ - --base07: #000000; /* Bright White */ - --base08: #e92f2f; /* Red */ - --base09: #e09448; /* Orange */ - --base0A: #dddd13; /* Yellow */ - --base0B: #0ed839; /* Green */ - --base0C: #23edda; /* Cyan */ - --base0D: #3b48e3; /* Blue */ - --base0E: #f996e2; /* Purple */ - --base0F: #69542d; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #0ed839; /* Green */ + --dnd-indicator: #e92f2f; /* Red */ + --idle-indicator: #dddd13; /* Yellow */ + --streaming-indicator: #f996e2; /* Purple */ + + /* accent colors */ + --accent-1: #3b48e3; /* links */ + --accent-2: #f996e2; /* general unread/mention elements */ + --accent-3: #3b48e3; /* accent buttons */ + --accent-4: #23edda; /* accent buttons when hovered */ + --accent-5: #0ed839; /* accent buttons when clicked */ + --mention: rgba(249, 150, 226, 0.1); + --mention-hover: rgba(249, 150, 226, 0.2); + + /* text colors */ + --text-0: #f9f9f9; /* text on colored elements */ + --text-1: #102015; /* primary white-ish text */ + --text-2: #000000; /* headings */ + --text-3: #102015; /* normal text */ + --text-4: #343434; /* icon buttons and channels */ + --text-5: #555555; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #ababab; /* dark buttons when clicked */ + --bg-2: #e0e0e0; /* dark buttons */ + --bg-3: #ababab; /* spacing, secondary elements */ + --bg-4: #f9f9f9; /* main background color */ + --hover: #ababab; /* channels and buttons when hovered */ + --active: #555555; /* channels and buttons when selected */ + --message-hover: rgba(224, 224, 224, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-silk-dark b/build/base16-silk-dark index 3b21d0b..e543770 100644 --- a/build/base16-silk-dark +++ b/build/base16-silk-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #0e3c46; /* Black */ - --base01: #1d494e; /* Bright Black */ - --base02: #2a5054; /* Grey */ - --base03: #587073; /* Brighter Grey */ - --base04: #9dc8cd; /* Bright Grey */ - --base05: #c7dbdd; /* White */ - --base06: #cbf2f7; /* Brighter White */ - --base07: #d2faff; /* Bright White */ - --base08: #fb6953; /* Red */ - --base09: #fcab74; /* Orange */ - --base0A: #fce380; /* Yellow */ - --base0B: #73d8ad; /* Green */ - --base0C: #3fb2b9; /* Cyan */ - --base0D: #46bddd; /* Blue */ - --base0E: #756b8a; /* Purple */ - --base0F: #9b647b; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #73d8ad; /* Green */ + --dnd-indicator: #fb6953; /* Red */ + --idle-indicator: #fce380; /* Yellow */ + --streaming-indicator: #756b8a; /* Purple */ + + /* accent colors */ + --accent-1: #46bddd; /* links */ + --accent-2: #756b8a; /* general unread/mention elements */ + --accent-3: #46bddd; /* accent buttons */ + --accent-4: #3fb2b9; /* accent buttons when hovered */ + --accent-5: #73d8ad; /* accent buttons when clicked */ + --mention: rgba(117, 107, 138, 0.1); + --mention-hover: rgba(117, 107, 138, 0.2); + + /* text colors */ + --text-0: #0e3c46; /* text on colored elements */ + --text-1: #c7dbdd; /* primary white-ish text */ + --text-2: #d2faff; /* headings */ + --text-3: #c7dbdd; /* normal text */ + --text-4: #9dc8cd; /* icon buttons and channels */ + --text-5: #587073; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #2a5054; /* dark buttons when clicked */ + --bg-2: #1d494e; /* dark buttons */ + --bg-3: #2a5054; /* spacing, secondary elements */ + --bg-4: #0e3c46; /* main background color */ + --hover: #2a5054; /* channels and buttons when hovered */ + --active: #587073; /* channels and buttons when selected */ + --message-hover: rgba(29, 73, 78, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-silk-light b/build/base16-silk-light index 520f98e..396d854 100644 --- a/build/base16-silk-light +++ b/build/base16-silk-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #e9f1ef; /* Black */ - --base01: #ccd4d3; /* Bright Black */ - --base02: #90b7b6; /* Grey */ - --base03: #5c787b; /* Brighter Grey */ - --base04: #4b5b5f; /* Bright Grey */ - --base05: #385156; /* White */ - --base06: #0e3c46; /* Brighter White */ - --base07: #d2faff; /* Bright White */ - --base08: #cf432e; /* Red */ - --base09: #d27f46; /* Orange */ - --base0A: #cfad25; /* Yellow */ - --base0B: #6ca38c; /* Green */ - --base0C: #329ca2; /* Cyan */ - --base0D: #39aac9; /* Blue */ - --base0E: #6e6582; /* Purple */ - --base0F: #865369; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #6ca38c; /* Green */ + --dnd-indicator: #cf432e; /* Red */ + --idle-indicator: #cfad25; /* Yellow */ + --streaming-indicator: #6e6582; /* Purple */ + + /* accent colors */ + --accent-1: #39aac9; /* links */ + --accent-2: #6e6582; /* general unread/mention elements */ + --accent-3: #39aac9; /* accent buttons */ + --accent-4: #329ca2; /* accent buttons when hovered */ + --accent-5: #6ca38c; /* accent buttons when clicked */ + --mention: rgba(110, 101, 130, 0.1); + --mention-hover: rgba(110, 101, 130, 0.2); + + /* text colors */ + --text-0: #e9f1ef; /* text on colored elements */ + --text-1: #385156; /* primary white-ish text */ + --text-2: #d2faff; /* headings */ + --text-3: #385156; /* normal text */ + --text-4: #4b5b5f; /* icon buttons and channels */ + --text-5: #5c787b; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #90b7b6; /* dark buttons when clicked */ + --bg-2: #ccd4d3; /* dark buttons */ + --bg-3: #90b7b6; /* spacing, secondary elements */ + --bg-4: #e9f1ef; /* main background color */ + --hover: #90b7b6; /* channels and buttons when hovered */ + --active: #5c787b; /* channels and buttons when selected */ + --message-hover: rgba(204, 212, 211, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-snazzy b/build/base16-snazzy index 2771d2a..9fd031d 100644 --- a/build/base16-snazzy +++ b/build/base16-snazzy @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #282a36; /* Black */ - --base01: #34353e; /* Bright Black */ - --base02: #43454f; /* Grey */ - --base03: #78787e; /* Brighter Grey */ - --base04: #a5a5a9; /* Bright Grey */ - --base05: #e2e4e5; /* White */ - --base06: #eff0eb; /* Brighter White */ - --base07: #f1f1f0; /* Bright White */ - --base08: #ff5c57; /* Red */ - --base09: #ff9f43; /* Orange */ - --base0A: #f3f99d; /* Yellow */ - --base0B: #5af78e; /* Green */ - --base0C: #9aedfe; /* Cyan */ - --base0D: #57c7ff; /* Blue */ - --base0E: #ff6ac1; /* Purple */ - --base0F: #b2643c; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #5af78e; /* Green */ + --dnd-indicator: #ff5c57; /* Red */ + --idle-indicator: #f3f99d; /* Yellow */ + --streaming-indicator: #ff6ac1; /* Purple */ + + /* accent colors */ + --accent-1: #57c7ff; /* links */ + --accent-2: #ff6ac1; /* general unread/mention elements */ + --accent-3: #57c7ff; /* accent buttons */ + --accent-4: #9aedfe; /* accent buttons when hovered */ + --accent-5: #5af78e; /* accent buttons when clicked */ + --mention: rgba(255, 106, 193, 0.1); + --mention-hover: rgba(255, 106, 193, 0.2); + + /* text colors */ + --text-0: #282a36; /* text on colored elements */ + --text-1: #e2e4e5; /* primary white-ish text */ + --text-2: #f1f1f0; /* headings */ + --text-3: #e2e4e5; /* normal text */ + --text-4: #a5a5a9; /* icon buttons and channels */ + --text-5: #78787e; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #43454f; /* dark buttons when clicked */ + --bg-2: #34353e; /* dark buttons */ + --bg-3: #43454f; /* spacing, secondary elements */ + --bg-4: #282a36; /* main background color */ + --hover: #43454f; /* channels and buttons when hovered */ + --active: #78787e; /* channels and buttons when selected */ + --message-hover: rgba(52, 53, 62, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-soft-server b/build/base16-soft-server index 39825f3..82e0e1a 100644 --- a/build/base16-soft-server +++ b/build/base16-soft-server @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #211e2a; /* Black */ - --base01: #2c2737; /* Bright Black */ - --base02: #3f3951; /* Grey */ - --base03: #6e6780; /* Brighter Grey */ - --base04: #8a829e; /* Bright Grey */ - --base05: #e4dee9; /* White */ - --base06: #f2e8f0; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #e965a5; /* Red */ - --base09: #f4b870; /* Orange */ - --base0A: #ebde76; /* Yellow */ - --base0B: #b1f2a7; /* Green */ - --base0C: #b3f4f3; /* Cyan */ - --base0D: #95a6f4; /* Blue */ - --base0E: #ff79c6; /* Purple */ - --base0F: #bd93f9; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #b1f2a7; /* Green */ + --dnd-indicator: #e965a5; /* Red */ + --idle-indicator: #ebde76; /* Yellow */ + --streaming-indicator: #ff79c6; /* Purple */ + + /* accent colors */ + --accent-1: #95a6f4; /* links */ + --accent-2: #ff79c6; /* general unread/mention elements */ + --accent-3: #95a6f4; /* accent buttons */ + --accent-4: #b3f4f3; /* accent buttons when hovered */ + --accent-5: #b1f2a7; /* accent buttons when clicked */ + --mention: rgba(255, 121, 198, 0.1); + --mention-hover: rgba(255, 121, 198, 0.2); + + /* text colors */ + --text-0: #211e2a; /* text on colored elements */ + --text-1: #e4dee9; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #e4dee9; /* normal text */ + --text-4: #8a829e; /* icon buttons and channels */ + --text-5: #6e6780; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3f3951; /* dark buttons when clicked */ + --bg-2: #2c2737; /* dark buttons */ + --bg-3: #3f3951; /* spacing, secondary elements */ + --bg-4: #211e2a; /* main background color */ + --hover: #3f3951; /* channels and buttons when hovered */ + --active: #6e6780; /* channels and buttons when selected */ + --message-hover: rgba(44, 39, 55, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-solarflare b/build/base16-solarflare index 679e8de..30eb5c1 100644 --- a/build/base16-solarflare +++ b/build/base16-solarflare @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #18262f; /* Black */ - --base01: #222e38; /* Bright Black */ - --base02: #586875; /* Grey */ - --base03: #667581; /* Brighter Grey */ - --base04: #85939e; /* Bright Grey */ - --base05: #a6afb8; /* White */ - --base06: #e8e9ed; /* Brighter White */ - --base07: #f5f7fa; /* Bright White */ - --base08: #ef5253; /* Red */ - --base09: #e66b2b; /* Orange */ - --base0A: #e4b51c; /* Yellow */ - --base0B: #7cc844; /* Green */ - --base0C: #52cbb0; /* Cyan */ - --base0D: #33b5e1; /* Blue */ - --base0E: #a363d5; /* Purple */ - --base0F: #d73c9a; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #7cc844; /* Green */ + --dnd-indicator: #ef5253; /* Red */ + --idle-indicator: #e4b51c; /* Yellow */ + --streaming-indicator: #a363d5; /* Purple */ + + /* accent colors */ + --accent-1: #33b5e1; /* links */ + --accent-2: #a363d5; /* general unread/mention elements */ + --accent-3: #33b5e1; /* accent buttons */ + --accent-4: #52cbb0; /* accent buttons when hovered */ + --accent-5: #7cc844; /* accent buttons when clicked */ + --mention: rgba(163, 99, 213, 0.1); + --mention-hover: rgba(163, 99, 213, 0.2); + + /* text colors */ + --text-0: #18262f; /* text on colored elements */ + --text-1: #a6afb8; /* primary white-ish text */ + --text-2: #f5f7fa; /* headings */ + --text-3: #a6afb8; /* normal text */ + --text-4: #85939e; /* icon buttons and channels */ + --text-5: #667581; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #586875; /* dark buttons when clicked */ + --bg-2: #222e38; /* dark buttons */ + --bg-3: #586875; /* spacing, secondary elements */ + --bg-4: #18262f; /* main background color */ + --hover: #586875; /* channels and buttons when hovered */ + --active: #667581; /* channels and buttons when selected */ + --message-hover: rgba(34, 46, 56, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-solarflare-light b/build/base16-solarflare-light index fc3d29d..06ee302 100644 --- a/build/base16-solarflare-light +++ b/build/base16-solarflare-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f5f7fa; /* Black */ - --base01: #e8e9ed; /* Bright Black */ - --base02: #a6afb8; /* Grey */ - --base03: #85939e; /* Brighter Grey */ - --base04: #667581; /* Bright Grey */ - --base05: #586875; /* White */ - --base06: #222e38; /* Brighter White */ - --base07: #18262f; /* Bright White */ - --base08: #ef5253; /* Red */ - --base09: #e66b2b; /* Orange */ - --base0A: #e4b51c; /* Yellow */ - --base0B: #7cc844; /* Green */ - --base0C: #52cbb0; /* Cyan */ - --base0D: #33b5e1; /* Blue */ - --base0E: #a363d5; /* Purple */ - --base0F: #d73c9a; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #7cc844; /* Green */ + --dnd-indicator: #ef5253; /* Red */ + --idle-indicator: #e4b51c; /* Yellow */ + --streaming-indicator: #a363d5; /* Purple */ + + /* accent colors */ + --accent-1: #33b5e1; /* links */ + --accent-2: #a363d5; /* general unread/mention elements */ + --accent-3: #33b5e1; /* accent buttons */ + --accent-4: #52cbb0; /* accent buttons when hovered */ + --accent-5: #7cc844; /* accent buttons when clicked */ + --mention: rgba(163, 99, 213, 0.1); + --mention-hover: rgba(163, 99, 213, 0.2); + + /* text colors */ + --text-0: #f5f7fa; /* text on colored elements */ + --text-1: #586875; /* primary white-ish text */ + --text-2: #18262f; /* headings */ + --text-3: #586875; /* normal text */ + --text-4: #667581; /* icon buttons and channels */ + --text-5: #85939e; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #a6afb8; /* dark buttons when clicked */ + --bg-2: #e8e9ed; /* dark buttons */ + --bg-3: #a6afb8; /* spacing, secondary elements */ + --bg-4: #f5f7fa; /* main background color */ + --hover: #a6afb8; /* channels and buttons when hovered */ + --active: #85939e; /* channels and buttons when selected */ + --message-hover: rgba(232, 233, 237, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-solarized-dark b/build/base16-solarized-dark index ee6a02c..d9bbcb1 100644 --- a/build/base16-solarized-dark +++ b/build/base16-solarized-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #002b36; /* Black */ - --base01: #073642; /* Bright Black */ - --base02: #586e75; /* Grey */ - --base03: #657b83; /* Brighter Grey */ - --base04: #839496; /* Bright Grey */ - --base05: #93a1a1; /* White */ - --base06: #eee8d5; /* Brighter White */ - --base07: #fdf6e3; /* Bright White */ - --base08: #dc322f; /* Red */ - --base09: #cb4b16; /* Orange */ - --base0A: #b58900; /* Yellow */ - --base0B: #859900; /* Green */ - --base0C: #2aa198; /* Cyan */ - --base0D: #268bd2; /* Blue */ - --base0E: #6c71c4; /* Purple */ - --base0F: #d33682; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #859900; /* Green */ + --dnd-indicator: #dc322f; /* Red */ + --idle-indicator: #b58900; /* Yellow */ + --streaming-indicator: #6c71c4; /* Purple */ + + /* accent colors */ + --accent-1: #268bd2; /* links */ + --accent-2: #6c71c4; /* general unread/mention elements */ + --accent-3: #268bd2; /* accent buttons */ + --accent-4: #2aa198; /* accent buttons when hovered */ + --accent-5: #859900; /* accent buttons when clicked */ + --mention: rgba(108, 113, 196, 0.1); + --mention-hover: rgba(108, 113, 196, 0.2); + + /* text colors */ + --text-0: #002b36; /* text on colored elements */ + --text-1: #93a1a1; /* primary white-ish text */ + --text-2: #fdf6e3; /* headings */ + --text-3: #93a1a1; /* normal text */ + --text-4: #839496; /* icon buttons and channels */ + --text-5: #657b83; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #586e75; /* dark buttons when clicked */ + --bg-2: #073642; /* dark buttons */ + --bg-3: #586e75; /* spacing, secondary elements */ + --bg-4: #002b36; /* main background color */ + --hover: #586e75; /* channels and buttons when hovered */ + --active: #657b83; /* channels and buttons when selected */ + --message-hover: rgba(7, 54, 66, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-solarized-light b/build/base16-solarized-light index 029a38d..8e1098c 100644 --- a/build/base16-solarized-light +++ b/build/base16-solarized-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fdf6e3; /* Black */ - --base01: #eee8d5; /* Bright Black */ - --base02: #93a1a1; /* Grey */ - --base03: #839496; /* Brighter Grey */ - --base04: #657b83; /* Bright Grey */ - --base05: #586e75; /* White */ - --base06: #073642; /* Brighter White */ - --base07: #002b36; /* Bright White */ - --base08: #dc322f; /* Red */ - --base09: #cb4b16; /* Orange */ - --base0A: #b58900; /* Yellow */ - --base0B: #859900; /* Green */ - --base0C: #2aa198; /* Cyan */ - --base0D: #268bd2; /* Blue */ - --base0E: #6c71c4; /* Purple */ - --base0F: #d33682; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #859900; /* Green */ + --dnd-indicator: #dc322f; /* Red */ + --idle-indicator: #b58900; /* Yellow */ + --streaming-indicator: #6c71c4; /* Purple */ + + /* accent colors */ + --accent-1: #268bd2; /* links */ + --accent-2: #6c71c4; /* general unread/mention elements */ + --accent-3: #268bd2; /* accent buttons */ + --accent-4: #2aa198; /* accent buttons when hovered */ + --accent-5: #859900; /* accent buttons when clicked */ + --mention: rgba(108, 113, 196, 0.1); + --mention-hover: rgba(108, 113, 196, 0.2); + + /* text colors */ + --text-0: #fdf6e3; /* text on colored elements */ + --text-1: #586e75; /* primary white-ish text */ + --text-2: #002b36; /* headings */ + --text-3: #586e75; /* normal text */ + --text-4: #657b83; /* icon buttons and channels */ + --text-5: #839496; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #93a1a1; /* dark buttons when clicked */ + --bg-2: #eee8d5; /* dark buttons */ + --bg-3: #93a1a1; /* spacing, secondary elements */ + --bg-4: #fdf6e3; /* main background color */ + --hover: #93a1a1; /* channels and buttons when hovered */ + --active: #839496; /* channels and buttons when selected */ + --message-hover: rgba(238, 232, 213, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-spaceduck b/build/base16-spaceduck index 378fae7..d1d8df2 100644 --- a/build/base16-spaceduck +++ b/build/base16-spaceduck @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #16172d; /* Black */ - --base01: #1b1c36; /* Bright Black */ - --base02: #30365f; /* Grey */ - --base03: #686f9a; /* Brighter Grey */ - --base04: #818596; /* Bright Grey */ - --base05: #ecf0c1; /* White */ - --base06: #c1c3cc; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #e33400; /* Red */ - --base09: #e39400; /* Orange */ - --base0A: #f2ce00; /* Yellow */ - --base0B: #5ccc96; /* Green */ - --base0C: #00a3cc; /* Cyan */ - --base0D: #7a5ccc; /* Blue */ - --base0E: #b3a1e6; /* Purple */ - --base0F: #ce6f8f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #5ccc96; /* Green */ + --dnd-indicator: #e33400; /* Red */ + --idle-indicator: #f2ce00; /* Yellow */ + --streaming-indicator: #b3a1e6; /* Purple */ + + /* accent colors */ + --accent-1: #7a5ccc; /* links */ + --accent-2: #b3a1e6; /* general unread/mention elements */ + --accent-3: #7a5ccc; /* accent buttons */ + --accent-4: #00a3cc; /* accent buttons when hovered */ + --accent-5: #5ccc96; /* accent buttons when clicked */ + --mention: rgba(179, 161, 230, 0.1); + --mention-hover: rgba(179, 161, 230, 0.2); + + /* text colors */ + --text-0: #16172d; /* text on colored elements */ + --text-1: #ecf0c1; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #ecf0c1; /* normal text */ + --text-4: #818596; /* icon buttons and channels */ + --text-5: #686f9a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #30365f; /* dark buttons when clicked */ + --bg-2: #1b1c36; /* dark buttons */ + --bg-3: #30365f; /* spacing, secondary elements */ + --bg-4: #16172d; /* main background color */ + --hover: #30365f; /* channels and buttons when hovered */ + --active: #686f9a; /* channels and buttons when selected */ + --message-hover: rgba(27, 28, 54, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-spacemacs b/build/base16-spacemacs index 20a1f0b..469de95 100644 --- a/build/base16-spacemacs +++ b/build/base16-spacemacs @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1f2022; /* Black */ - --base01: #282828; /* Bright Black */ - --base02: #444155; /* Grey */ - --base03: #585858; /* Brighter Grey */ - --base04: #b8b8b8; /* Bright Grey */ - --base05: #a3a3a3; /* White */ - --base06: #e8e8e8; /* Brighter White */ - --base07: #f8f8f8; /* Bright White */ - --base08: #f2241f; /* Red */ - --base09: #ffa500; /* Orange */ - --base0A: #b1951d; /* Yellow */ - --base0B: #67b11d; /* Green */ - --base0C: #2d9574; /* Cyan */ - --base0D: #4f97d7; /* Blue */ - --base0E: #a31db1; /* Purple */ - --base0F: #b03060; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #67b11d; /* Green */ + --dnd-indicator: #f2241f; /* Red */ + --idle-indicator: #b1951d; /* Yellow */ + --streaming-indicator: #a31db1; /* Purple */ + + /* accent colors */ + --accent-1: #4f97d7; /* links */ + --accent-2: #a31db1; /* general unread/mention elements */ + --accent-3: #4f97d7; /* accent buttons */ + --accent-4: #2d9574; /* accent buttons when hovered */ + --accent-5: #67b11d; /* accent buttons when clicked */ + --mention: rgba(163, 29, 177, 0.1); + --mention-hover: rgba(163, 29, 177, 0.2); + + /* text colors */ + --text-0: #1f2022; /* text on colored elements */ + --text-1: #a3a3a3; /* primary white-ish text */ + --text-2: #f8f8f8; /* headings */ + --text-3: #a3a3a3; /* normal text */ + --text-4: #b8b8b8; /* icon buttons and channels */ + --text-5: #585858; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #444155; /* dark buttons when clicked */ + --bg-2: #282828; /* dark buttons */ + --bg-3: #444155; /* spacing, secondary elements */ + --bg-4: #1f2022; /* main background color */ + --hover: #444155; /* channels and buttons when hovered */ + --active: #585858; /* channels and buttons when selected */ + --message-hover: rgba(40, 40, 40, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-sparky b/build/base16-sparky index 46f95ad..8efa25f 100644 --- a/build/base16-sparky +++ b/build/base16-sparky @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #072b31; /* Black */ - --base01: #00313c; /* Bright Black */ - --base02: #003c46; /* Grey */ - --base03: #003b49; /* Brighter Grey */ - --base04: #00778b; /* Bright Grey */ - --base05: #f4f5f0; /* White */ - --base06: #f5f5f1; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #ff585d; /* Red */ - --base09: #ff8f1c; /* Orange */ - --base0A: #fbdd40; /* Yellow */ - --base0B: #78d64b; /* Green */ - --base0C: #2dccd3; /* Cyan */ - --base0D: #4698cb; /* Blue */ - --base0E: #d59ed7; /* Purple */ - --base0F: #9b704d; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #78d64b; /* Green */ + --dnd-indicator: #ff585d; /* Red */ + --idle-indicator: #fbdd40; /* Yellow */ + --streaming-indicator: #d59ed7; /* Purple */ + + /* accent colors */ + --accent-1: #4698cb; /* links */ + --accent-2: #d59ed7; /* general unread/mention elements */ + --accent-3: #4698cb; /* accent buttons */ + --accent-4: #2dccd3; /* accent buttons when hovered */ + --accent-5: #78d64b; /* accent buttons when clicked */ + --mention: rgba(213, 158, 215, 0.1); + --mention-hover: rgba(213, 158, 215, 0.2); + + /* text colors */ + --text-0: #072b31; /* text on colored elements */ + --text-1: #f4f5f0; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #f4f5f0; /* normal text */ + --text-4: #00778b; /* icon buttons and channels */ + --text-5: #003b49; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #003c46; /* dark buttons when clicked */ + --bg-2: #00313c; /* dark buttons */ + --bg-3: #003c46; /* spacing, secondary elements */ + --bg-4: #072b31; /* main background color */ + --hover: #003c46; /* channels and buttons when hovered */ + --active: #003b49; /* channels and buttons when selected */ + --message-hover: rgba(0, 49, 60, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-standardized-dark b/build/base16-standardized-dark index 5da470d..6107cfc 100644 --- a/build/base16-standardized-dark +++ b/build/base16-standardized-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #222222; /* Black */ - --base01: #303030; /* Bright Black */ - --base02: #555555; /* Grey */ - --base03: #898989; /* Brighter Grey */ - --base04: #898989; /* Bright Grey */ - --base05: #c0c0c0; /* White */ - --base06: #e0e0e0; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #e15d67; /* Red */ - --base09: #fc804e; /* Orange */ - --base0A: #e1b31a; /* Yellow */ - --base0B: #5db129; /* Green */ - --base0C: #21c992; /* Cyan */ - --base0D: #00a3f2; /* Blue */ - --base0E: #b46ee0; /* Purple */ - --base0F: #b87d28; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #5db129; /* Green */ + --dnd-indicator: #e15d67; /* Red */ + --idle-indicator: #e1b31a; /* Yellow */ + --streaming-indicator: #b46ee0; /* Purple */ + + /* accent colors */ + --accent-1: #00a3f2; /* links */ + --accent-2: #b46ee0; /* general unread/mention elements */ + --accent-3: #00a3f2; /* accent buttons */ + --accent-4: #21c992; /* accent buttons when hovered */ + --accent-5: #5db129; /* accent buttons when clicked */ + --mention: rgba(180, 110, 224, 0.1); + --mention-hover: rgba(180, 110, 224, 0.2); + + /* text colors */ + --text-0: #222222; /* text on colored elements */ + --text-1: #c0c0c0; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #c0c0c0; /* normal text */ + --text-4: #898989; /* icon buttons and channels */ + --text-5: #898989; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #555555; /* dark buttons when clicked */ + --bg-2: #303030; /* dark buttons */ + --bg-3: #555555; /* spacing, secondary elements */ + --bg-4: #222222; /* main background color */ + --hover: #555555; /* channels and buttons when hovered */ + --active: #898989; /* channels and buttons when selected */ + --message-hover: rgba(48, 48, 48, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-standardized-light b/build/base16-standardized-light index a07832e..5a0703f 100644 --- a/build/base16-standardized-light +++ b/build/base16-standardized-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #ffffff; /* Black */ - --base01: #eeeeee; /* Bright Black */ - --base02: #cccccc; /* Grey */ - --base03: #767676; /* Brighter Grey */ - --base04: #767676; /* Bright Grey */ - --base05: #444444; /* White */ - --base06: #333333; /* Brighter White */ - --base07: #222222; /* Bright White */ - --base08: #d03e3e; /* Red */ - --base09: #d7691d; /* Orange */ - --base0A: #ad8200; /* Yellow */ - --base0B: #31861f; /* Green */ - --base0C: #00998f; /* Cyan */ - --base0D: #3173c5; /* Blue */ - --base0E: #9e57c2; /* Purple */ - --base0F: #895025; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #31861f; /* Green */ + --dnd-indicator: #d03e3e; /* Red */ + --idle-indicator: #ad8200; /* Yellow */ + --streaming-indicator: #9e57c2; /* Purple */ + + /* accent colors */ + --accent-1: #3173c5; /* links */ + --accent-2: #9e57c2; /* general unread/mention elements */ + --accent-3: #3173c5; /* accent buttons */ + --accent-4: #00998f; /* accent buttons when hovered */ + --accent-5: #31861f; /* accent buttons when clicked */ + --mention: rgba(158, 87, 194, 0.1); + --mention-hover: rgba(158, 87, 194, 0.2); + + /* text colors */ + --text-0: #ffffff; /* text on colored elements */ + --text-1: #444444; /* primary white-ish text */ + --text-2: #222222; /* headings */ + --text-3: #444444; /* normal text */ + --text-4: #767676; /* icon buttons and channels */ + --text-5: #767676; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #cccccc; /* dark buttons when clicked */ + --bg-2: #eeeeee; /* dark buttons */ + --bg-3: #cccccc; /* spacing, secondary elements */ + --bg-4: #ffffff; /* main background color */ + --hover: #cccccc; /* channels and buttons when hovered */ + --active: #767676; /* channels and buttons when selected */ + --message-hover: rgba(238, 238, 238, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-stella b/build/base16-stella index f9234a6..e332d12 100644 --- a/build/base16-stella +++ b/build/base16-stella @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2b213c; /* Black */ - --base01: #362b48; /* Bright Black */ - --base02: #4d4160; /* Grey */ - --base03: #655978; /* Brighter Grey */ - --base04: #7f7192; /* Bright Grey */ - --base05: #998bad; /* White */ - --base06: #b4a5c8; /* Brighter White */ - --base07: #ebdcff; /* Bright White */ - --base08: #c79987; /* Red */ - --base09: #8865c6; /* Orange */ - --base0A: #c7c691; /* Yellow */ - --base0B: #acc79b; /* Green */ - --base0C: #9bc7bf; /* Cyan */ - --base0D: #a5aad4; /* Blue */ - --base0E: #c594ff; /* Purple */ - --base0F: #c7ab87; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #acc79b; /* Green */ + --dnd-indicator: #c79987; /* Red */ + --idle-indicator: #c7c691; /* Yellow */ + --streaming-indicator: #c594ff; /* Purple */ + + /* accent colors */ + --accent-1: #a5aad4; /* links */ + --accent-2: #c594ff; /* general unread/mention elements */ + --accent-3: #a5aad4; /* accent buttons */ + --accent-4: #9bc7bf; /* accent buttons when hovered */ + --accent-5: #acc79b; /* accent buttons when clicked */ + --mention: rgba(197, 148, 255, 0.1); + --mention-hover: rgba(197, 148, 255, 0.2); + + /* text colors */ + --text-0: #2b213c; /* text on colored elements */ + --text-1: #998bad; /* primary white-ish text */ + --text-2: #ebdcff; /* headings */ + --text-3: #998bad; /* normal text */ + --text-4: #7f7192; /* icon buttons and channels */ + --text-5: #655978; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #4d4160; /* dark buttons when clicked */ + --bg-2: #362b48; /* dark buttons */ + --bg-3: #4d4160; /* spacing, secondary elements */ + --bg-4: #2b213c; /* main background color */ + --hover: #4d4160; /* channels and buttons when hovered */ + --active: #655978; /* channels and buttons when selected */ + --message-hover: rgba(54, 43, 72, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-still-alive b/build/base16-still-alive index a908be7..191655f 100644 --- a/build/base16-still-alive +++ b/build/base16-still-alive @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f0f0f0; /* Black */ - --base01: #d6d6d6; /* Bright Black */ - --base02: #bdbdbd; /* Grey */ - --base03: #a3a3a3; /* Brighter Grey */ - --base04: #605758; /* Bright Grey */ - --base05: #4c383b; /* White */ - --base06: #331f21; /* Brighter White */ - --base07: #140c0d; /* Bright White */ - --base08: #d80000; /* Red */ - --base09: #f0d848; /* Orange */ - --base0A: #fff018; /* Yellow */ - --base0B: #30a860; /* Green */ - --base0C: #36d3ff; /* Cyan */ - --base0D: #365eff; /* Blue */ - --base0E: #9036ff; /* Purple */ - --base0F: #140c0d; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #30a860; /* Green */ + --dnd-indicator: #d80000; /* Red */ + --idle-indicator: #fff018; /* Yellow */ + --streaming-indicator: #9036ff; /* Purple */ + + /* accent colors */ + --accent-1: #365eff; /* links */ + --accent-2: #9036ff; /* general unread/mention elements */ + --accent-3: #365eff; /* accent buttons */ + --accent-4: #36d3ff; /* accent buttons when hovered */ + --accent-5: #30a860; /* accent buttons when clicked */ + --mention: rgba(144, 54, 255, 0.1); + --mention-hover: rgba(144, 54, 255, 0.2); + + /* text colors */ + --text-0: #f0f0f0; /* text on colored elements */ + --text-1: #4c383b; /* primary white-ish text */ + --text-2: #140c0d; /* headings */ + --text-3: #4c383b; /* normal text */ + --text-4: #605758; /* icon buttons and channels */ + --text-5: #a3a3a3; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #bdbdbd; /* dark buttons when clicked */ + --bg-2: #d6d6d6; /* dark buttons */ + --bg-3: #bdbdbd; /* spacing, secondary elements */ + --bg-4: #f0f0f0; /* main background color */ + --hover: #bdbdbd; /* channels and buttons when hovered */ + --active: #a3a3a3; /* channels and buttons when selected */ + --message-hover: rgba(214, 214, 214, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-summercamp b/build/base16-summercamp index 8ba933d..7989bda 100644 --- a/build/base16-summercamp +++ b/build/base16-summercamp @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1c1810; /* Black */ - --base01: #2a261c; /* Bright Black */ - --base02: #3a3527; /* Grey */ - --base03: #504b38; /* Brighter Grey */ - --base04: #5f5b45; /* Bright Grey */ - --base05: #736e55; /* White */ - --base06: #bab696; /* Brighter White */ - --base07: #f8f5de; /* Bright White */ - --base08: #e35142; /* Red */ - --base09: #fba11b; /* Orange */ - --base0A: #f2ff27; /* Yellow */ - --base0B: #5ceb5a; /* Green */ - --base0C: #5aebbc; /* Cyan */ - --base0D: #489bf0; /* Blue */ - --base0E: #ff8080; /* Purple */ - --base0F: #f69be7; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #5ceb5a; /* Green */ + --dnd-indicator: #e35142; /* Red */ + --idle-indicator: #f2ff27; /* Yellow */ + --streaming-indicator: #ff8080; /* Purple */ + + /* accent colors */ + --accent-1: #489bf0; /* links */ + --accent-2: #ff8080; /* general unread/mention elements */ + --accent-3: #489bf0; /* accent buttons */ + --accent-4: #5aebbc; /* accent buttons when hovered */ + --accent-5: #5ceb5a; /* accent buttons when clicked */ + --mention: rgba(255, 128, 128, 0.1); + --mention-hover: rgba(255, 128, 128, 0.2); + + /* text colors */ + --text-0: #1c1810; /* text on colored elements */ + --text-1: #736e55; /* primary white-ish text */ + --text-2: #f8f5de; /* headings */ + --text-3: #736e55; /* normal text */ + --text-4: #5f5b45; /* icon buttons and channels */ + --text-5: #504b38; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3a3527; /* dark buttons when clicked */ + --bg-2: #2a261c; /* dark buttons */ + --bg-3: #3a3527; /* spacing, secondary elements */ + --bg-4: #1c1810; /* main background color */ + --hover: #3a3527; /* channels and buttons when hovered */ + --active: #504b38; /* channels and buttons when selected */ + --message-hover: rgba(42, 38, 28, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-summerfruit-dark b/build/base16-summerfruit-dark index 11d7012..dc6f47e 100644 --- a/build/base16-summerfruit-dark +++ b/build/base16-summerfruit-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #151515; /* Black */ - --base01: #202020; /* Bright Black */ - --base02: #303030; /* Grey */ - --base03: #505050; /* Brighter Grey */ - --base04: #b0b0b0; /* Bright Grey */ - --base05: #d0d0d0; /* White */ - --base06: #e0e0e0; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #ff0086; /* Red */ - --base09: #fd8900; /* Orange */ - --base0A: #aba800; /* Yellow */ - --base0B: #00c918; /* Green */ - --base0C: #1faaaa; /* Cyan */ - --base0D: #3777e6; /* Blue */ - --base0E: #ad00a1; /* Purple */ - --base0F: #cc6633; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #00c918; /* Green */ + --dnd-indicator: #ff0086; /* Red */ + --idle-indicator: #aba800; /* Yellow */ + --streaming-indicator: #ad00a1; /* Purple */ + + /* accent colors */ + --accent-1: #3777e6; /* links */ + --accent-2: #ad00a1; /* general unread/mention elements */ + --accent-3: #3777e6; /* accent buttons */ + --accent-4: #1faaaa; /* accent buttons when hovered */ + --accent-5: #00c918; /* accent buttons when clicked */ + --mention: rgba(173, 0, 161, 0.1); + --mention-hover: rgba(173, 0, 161, 0.2); + + /* text colors */ + --text-0: #151515; /* text on colored elements */ + --text-1: #d0d0d0; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #d0d0d0; /* normal text */ + --text-4: #b0b0b0; /* icon buttons and channels */ + --text-5: #505050; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #303030; /* dark buttons when clicked */ + --bg-2: #202020; /* dark buttons */ + --bg-3: #303030; /* spacing, secondary elements */ + --bg-4: #151515; /* main background color */ + --hover: #303030; /* channels and buttons when hovered */ + --active: #505050; /* channels and buttons when selected */ + --message-hover: rgba(32, 32, 32, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-summerfruit-light b/build/base16-summerfruit-light index 36cbcea..9b20497 100644 --- a/build/base16-summerfruit-light +++ b/build/base16-summerfruit-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #ffffff; /* Black */ - --base01: #e0e0e0; /* Bright Black */ - --base02: #d0d0d0; /* Grey */ - --base03: #b0b0b0; /* Brighter Grey */ - --base04: #000000; /* Bright Grey */ - --base05: #101010; /* White */ - --base06: #151515; /* Brighter White */ - --base07: #202020; /* Bright White */ - --base08: #ff0086; /* Red */ - --base09: #fd8900; /* Orange */ - --base0A: #aba800; /* Yellow */ - --base0B: #00c918; /* Green */ - --base0C: #1faaaa; /* Cyan */ - --base0D: #3777e6; /* Blue */ - --base0E: #ad00a1; /* Purple */ - --base0F: #cc6633; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #00c918; /* Green */ + --dnd-indicator: #ff0086; /* Red */ + --idle-indicator: #aba800; /* Yellow */ + --streaming-indicator: #ad00a1; /* Purple */ + + /* accent colors */ + --accent-1: #3777e6; /* links */ + --accent-2: #ad00a1; /* general unread/mention elements */ + --accent-3: #3777e6; /* accent buttons */ + --accent-4: #1faaaa; /* accent buttons when hovered */ + --accent-5: #00c918; /* accent buttons when clicked */ + --mention: rgba(173, 0, 161, 0.1); + --mention-hover: rgba(173, 0, 161, 0.2); + + /* text colors */ + --text-0: #ffffff; /* text on colored elements */ + --text-1: #101010; /* primary white-ish text */ + --text-2: #202020; /* headings */ + --text-3: #101010; /* normal text */ + --text-4: #000000; /* icon buttons and channels */ + --text-5: #b0b0b0; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d0d0d0; /* dark buttons when clicked */ + --bg-2: #e0e0e0; /* dark buttons */ + --bg-3: #d0d0d0; /* spacing, secondary elements */ + --bg-4: #ffffff; /* main background color */ + --hover: #d0d0d0; /* channels and buttons when hovered */ + --active: #b0b0b0; /* channels and buttons when selected */ + --message-hover: rgba(224, 224, 224, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-synth-midnight-dark b/build/base16-synth-midnight-dark index ccaa187..5c5ec01 100644 --- a/build/base16-synth-midnight-dark +++ b/build/base16-synth-midnight-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #050608; /* Black */ - --base01: #1a1b1c; /* Bright Black */ - --base02: #28292a; /* Grey */ - --base03: #474849; /* Brighter Grey */ - --base04: #a3a5a6; /* Bright Grey */ - --base05: #c1c3c4; /* White */ - --base06: #cfd1d2; /* Brighter White */ - --base07: #dddfe0; /* Bright White */ - --base08: #b53b50; /* Red */ - --base09: #ea770d; /* Orange */ - --base0A: #c9d364; /* Yellow */ - --base0B: #06ea61; /* Green */ - --base0C: #42fff9; /* Cyan */ - --base0D: #03aeff; /* Blue */ - --base0E: #ea5ce2; /* Purple */ - --base0F: #cd6320; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #06ea61; /* Green */ + --dnd-indicator: #b53b50; /* Red */ + --idle-indicator: #c9d364; /* Yellow */ + --streaming-indicator: #ea5ce2; /* Purple */ + + /* accent colors */ + --accent-1: #03aeff; /* links */ + --accent-2: #ea5ce2; /* general unread/mention elements */ + --accent-3: #03aeff; /* accent buttons */ + --accent-4: #42fff9; /* accent buttons when hovered */ + --accent-5: #06ea61; /* accent buttons when clicked */ + --mention: rgba(234, 92, 226, 0.1); + --mention-hover: rgba(234, 92, 226, 0.2); + + /* text colors */ + --text-0: #050608; /* text on colored elements */ + --text-1: #c1c3c4; /* primary white-ish text */ + --text-2: #dddfe0; /* headings */ + --text-3: #c1c3c4; /* normal text */ + --text-4: #a3a5a6; /* icon buttons and channels */ + --text-5: #474849; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #28292a; /* dark buttons when clicked */ + --bg-2: #1a1b1c; /* dark buttons */ + --bg-3: #28292a; /* spacing, secondary elements */ + --bg-4: #050608; /* main background color */ + --hover: #28292a; /* channels and buttons when hovered */ + --active: #474849; /* channels and buttons when selected */ + --message-hover: rgba(26, 27, 28, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-synth-midnight-light b/build/base16-synth-midnight-light index a107740..7e6d11e 100644 --- a/build/base16-synth-midnight-light +++ b/build/base16-synth-midnight-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #dddfe0; /* Black */ - --base01: #cfd1d2; /* Bright Black */ - --base02: #c1c3c4; /* Grey */ - --base03: #a3a5a6; /* Brighter Grey */ - --base04: #474849; /* Bright Grey */ - --base05: #28292a; /* White */ - --base06: #1a1b1c; /* Brighter White */ - --base07: #050608; /* Bright White */ - --base08: #b53b50; /* Red */ - --base09: #ea770d; /* Orange */ - --base0A: #c9d364; /* Yellow */ - --base0B: #06ea61; /* Green */ - --base0C: #42fff9; /* Cyan */ - --base0D: #03aeff; /* Blue */ - --base0E: #ea5ce2; /* Purple */ - --base0F: #cd6320; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #06ea61; /* Green */ + --dnd-indicator: #b53b50; /* Red */ + --idle-indicator: #c9d364; /* Yellow */ + --streaming-indicator: #ea5ce2; /* Purple */ + + /* accent colors */ + --accent-1: #03aeff; /* links */ + --accent-2: #ea5ce2; /* general unread/mention elements */ + --accent-3: #03aeff; /* accent buttons */ + --accent-4: #42fff9; /* accent buttons when hovered */ + --accent-5: #06ea61; /* accent buttons when clicked */ + --mention: rgba(234, 92, 226, 0.1); + --mention-hover: rgba(234, 92, 226, 0.2); + + /* text colors */ + --text-0: #dddfe0; /* text on colored elements */ + --text-1: #28292a; /* primary white-ish text */ + --text-2: #050608; /* headings */ + --text-3: #28292a; /* normal text */ + --text-4: #474849; /* icon buttons and channels */ + --text-5: #a3a5a6; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #c1c3c4; /* dark buttons when clicked */ + --bg-2: #cfd1d2; /* dark buttons */ + --bg-3: #c1c3c4; /* spacing, secondary elements */ + --bg-4: #dddfe0; /* main background color */ + --hover: #c1c3c4; /* channels and buttons when hovered */ + --active: #a3a5a6; /* channels and buttons when selected */ + --message-hover: rgba(207, 209, 210, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tango b/build/base16-tango index f152b65..0b4c6b5 100644 --- a/build/base16-tango +++ b/build/base16-tango @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2e3436; /* Black */ - --base01: #8ae234; /* Bright Black */ - --base02: #fce94f; /* Grey */ - --base03: #555753; /* Brighter Grey */ - --base04: #729fcf; /* Bright Grey */ - --base05: #d3d7cf; /* White */ - --base06: #ad7fa8; /* Brighter White */ - --base07: #eeeeec; /* Bright White */ - --base08: #cc0000; /* Red */ - --base09: #ef2929; /* Orange */ - --base0A: #c4a000; /* Yellow */ - --base0B: #4e9a06; /* Green */ - --base0C: #06989a; /* Cyan */ - --base0D: #3465a4; /* Blue */ - --base0E: #75507b; /* Purple */ - --base0F: #34e2e2; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #4e9a06; /* Green */ + --dnd-indicator: #cc0000; /* Red */ + --idle-indicator: #c4a000; /* Yellow */ + --streaming-indicator: #75507b; /* Purple */ + + /* accent colors */ + --accent-1: #3465a4; /* links */ + --accent-2: #75507b; /* general unread/mention elements */ + --accent-3: #3465a4; /* accent buttons */ + --accent-4: #06989a; /* accent buttons when hovered */ + --accent-5: #4e9a06; /* accent buttons when clicked */ + --mention: rgba(117, 80, 123, 0.1); + --mention-hover: rgba(117, 80, 123, 0.2); + + /* text colors */ + --text-0: #2e3436; /* text on colored elements */ + --text-1: #d3d7cf; /* primary white-ish text */ + --text-2: #eeeeec; /* headings */ + --text-3: #d3d7cf; /* normal text */ + --text-4: #729fcf; /* icon buttons and channels */ + --text-5: #555753; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #fce94f; /* dark buttons when clicked */ + --bg-2: #8ae234; /* dark buttons */ + --bg-3: #fce94f; /* spacing, secondary elements */ + --bg-4: #2e3436; /* main background color */ + --hover: #fce94f; /* channels and buttons when hovered */ + --active: #555753; /* channels and buttons when selected */ + --message-hover: rgba(138, 226, 52, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tarot b/build/base16-tarot index 722a568..e4a4108 100644 --- a/build/base16-tarot +++ b/build/base16-tarot @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #0e091d; /* Black */ - --base01: #2a153c; /* Bright Black */ - --base02: #4b2054; /* Grey */ - --base03: #74316b; /* Brighter Grey */ - --base04: #8c406f; /* Bright Grey */ - --base05: #aa556f; /* White */ - --base06: #c4686d; /* Brighter White */ - --base07: #dc8f7c; /* Bright White */ - --base08: #c53253; /* Red */ - --base09: #ea4d60; /* Orange */ - --base0A: #ff6565; /* Yellow */ - --base0B: #a68e5a; /* Green */ - --base0C: #8c9785; /* Cyan */ - --base0D: #6e6080; /* Blue */ - --base0E: #a45782; /* Purple */ - --base0F: #984d51; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #a68e5a; /* Green */ + --dnd-indicator: #c53253; /* Red */ + --idle-indicator: #ff6565; /* Yellow */ + --streaming-indicator: #a45782; /* Purple */ + + /* accent colors */ + --accent-1: #6e6080; /* links */ + --accent-2: #a45782; /* general unread/mention elements */ + --accent-3: #6e6080; /* accent buttons */ + --accent-4: #8c9785; /* accent buttons when hovered */ + --accent-5: #a68e5a; /* accent buttons when clicked */ + --mention: rgba(164, 87, 130, 0.1); + --mention-hover: rgba(164, 87, 130, 0.2); + + /* text colors */ + --text-0: #0e091d; /* text on colored elements */ + --text-1: #aa556f; /* primary white-ish text */ + --text-2: #dc8f7c; /* headings */ + --text-3: #aa556f; /* normal text */ + --text-4: #8c406f; /* icon buttons and channels */ + --text-5: #74316b; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #4b2054; /* dark buttons when clicked */ + --bg-2: #2a153c; /* dark buttons */ + --bg-3: #4b2054; /* spacing, secondary elements */ + --bg-4: #0e091d; /* main background color */ + --hover: #4b2054; /* channels and buttons when hovered */ + --active: #74316b; /* channels and buttons when selected */ + --message-hover: rgba(42, 21, 60, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tender b/build/base16-tender index f7b88a7..56a70e9 100644 --- a/build/base16-tender +++ b/build/base16-tender @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #282828; /* Black */ - --base01: #383838; /* Bright Black */ - --base02: #484848; /* Grey */ - --base03: #4c4c4c; /* Brighter Grey */ - --base04: #b8b8b8; /* Bright Grey */ - --base05: #eeeeee; /* White */ - --base06: #e8e8e8; /* Brighter White */ - --base07: #feffff; /* Bright White */ - --base08: #f43753; /* Red */ - --base09: #dc9656; /* Orange */ - --base0A: #ffc24b; /* Yellow */ - --base0B: #c9d05c; /* Green */ - --base0C: #73cef4; /* Cyan */ - --base0D: #b3deef; /* Blue */ - --base0E: #d3b987; /* Purple */ - --base0F: #a16946; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #c9d05c; /* Green */ + --dnd-indicator: #f43753; /* Red */ + --idle-indicator: #ffc24b; /* Yellow */ + --streaming-indicator: #d3b987; /* Purple */ + + /* accent colors */ + --accent-1: #b3deef; /* links */ + --accent-2: #d3b987; /* general unread/mention elements */ + --accent-3: #b3deef; /* accent buttons */ + --accent-4: #73cef4; /* accent buttons when hovered */ + --accent-5: #c9d05c; /* accent buttons when clicked */ + --mention: rgba(211, 185, 135, 0.1); + --mention-hover: rgba(211, 185, 135, 0.2); + + /* text colors */ + --text-0: #282828; /* text on colored elements */ + --text-1: #eeeeee; /* primary white-ish text */ + --text-2: #feffff; /* headings */ + --text-3: #eeeeee; /* normal text */ + --text-4: #b8b8b8; /* icon buttons and channels */ + --text-5: #4c4c4c; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #484848; /* dark buttons when clicked */ + --bg-2: #383838; /* dark buttons */ + --bg-3: #484848; /* spacing, secondary elements */ + --bg-4: #282828; /* main background color */ + --hover: #484848; /* channels and buttons when hovered */ + --active: #4c4c4c; /* channels and buttons when selected */ + --message-hover: rgba(56, 56, 56, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-terracotta b/build/base16-terracotta index a8dd2fe..7b7d5b3 100644 --- a/build/base16-terracotta +++ b/build/base16-terracotta @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #efeae8; /* Black */ - --base01: #dfd6d1; /* Bright Black */ - --base02: #d0c1bb; /* Grey */ - --base03: #c0aca4; /* Brighter Grey */ - --base04: #59453d; /* Bright Grey */ - --base05: #473731; /* White */ - --base06: #352a25; /* Brighter White */ - --base07: #241c19; /* Bright White */ - --base08: #a75045; /* Red */ - --base09: #bd6942; /* Orange */ - --base0A: #ce943e; /* Yellow */ - --base0B: #7a894a; /* Green */ - --base0C: #847f9e; /* Cyan */ - --base0D: #625574; /* Blue */ - --base0E: #8d5968; /* Purple */ - --base0F: #b07158; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #7a894a; /* Green */ + --dnd-indicator: #a75045; /* Red */ + --idle-indicator: #ce943e; /* Yellow */ + --streaming-indicator: #8d5968; /* Purple */ + + /* accent colors */ + --accent-1: #625574; /* links */ + --accent-2: #8d5968; /* general unread/mention elements */ + --accent-3: #625574; /* accent buttons */ + --accent-4: #847f9e; /* accent buttons when hovered */ + --accent-5: #7a894a; /* accent buttons when clicked */ + --mention: rgba(141, 89, 104, 0.1); + --mention-hover: rgba(141, 89, 104, 0.2); + + /* text colors */ + --text-0: #efeae8; /* text on colored elements */ + --text-1: #473731; /* primary white-ish text */ + --text-2: #241c19; /* headings */ + --text-3: #473731; /* normal text */ + --text-4: #59453d; /* icon buttons and channels */ + --text-5: #c0aca4; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d0c1bb; /* dark buttons when clicked */ + --bg-2: #dfd6d1; /* dark buttons */ + --bg-3: #d0c1bb; /* spacing, secondary elements */ + --bg-4: #efeae8; /* main background color */ + --hover: #d0c1bb; /* channels and buttons when hovered */ + --active: #c0aca4; /* channels and buttons when selected */ + --message-hover: rgba(223, 214, 209, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-terracotta-dark b/build/base16-terracotta-dark index 69f0af8..fb64362 100644 --- a/build/base16-terracotta-dark +++ b/build/base16-terracotta-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #241d1a; /* Black */ - --base01: #362b27; /* Bright Black */ - --base02: #473933; /* Grey */ - --base03: #594740; /* Brighter Grey */ - --base04: #a78e84; /* Bright Grey */ - --base05: #b8a59d; /* White */ - --base06: #cabbb5; /* Brighter White */ - --base07: #dcd2ce; /* Bright White */ - --base08: #f6998f; /* Red */ - --base09: #ffa888; /* Orange */ - --base0A: #ffc37a; /* Yellow */ - --base0B: #b6c68a; /* Green */ - --base0C: #c0bcdb; /* Cyan */ - --base0D: #b0a4c3; /* Blue */ - --base0E: #d8a2b0; /* Purple */ - --base0F: #f1ae97; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #b6c68a; /* Green */ + --dnd-indicator: #f6998f; /* Red */ + --idle-indicator: #ffc37a; /* Yellow */ + --streaming-indicator: #d8a2b0; /* Purple */ + + /* accent colors */ + --accent-1: #b0a4c3; /* links */ + --accent-2: #d8a2b0; /* general unread/mention elements */ + --accent-3: #b0a4c3; /* accent buttons */ + --accent-4: #c0bcdb; /* accent buttons when hovered */ + --accent-5: #b6c68a; /* accent buttons when clicked */ + --mention: rgba(216, 162, 176, 0.1); + --mention-hover: rgba(216, 162, 176, 0.2); + + /* text colors */ + --text-0: #241d1a; /* text on colored elements */ + --text-1: #b8a59d; /* primary white-ish text */ + --text-2: #dcd2ce; /* headings */ + --text-3: #b8a59d; /* normal text */ + --text-4: #a78e84; /* icon buttons and channels */ + --text-5: #594740; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #473933; /* dark buttons when clicked */ + --bg-2: #362b27; /* dark buttons */ + --bg-3: #473933; /* spacing, secondary elements */ + --bg-4: #241d1a; /* main background color */ + --hover: #473933; /* channels and buttons when hovered */ + --active: #594740; /* channels and buttons when selected */ + --message-hover: rgba(54, 43, 39, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tokyo-city-dark b/build/base16-tokyo-city-dark index d8d6948..a990cfa 100644 --- a/build/base16-tokyo-city-dark +++ b/build/base16-tokyo-city-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #171d23; /* Black */ - --base01: #1d252c; /* Bright Black */ - --base02: #28323a; /* Grey */ - --base03: #526270; /* Brighter Grey */ - --base04: #b7c5d3; /* Bright Grey */ - --base05: #d8e2ec; /* White */ - --base06: #f6f6f8; /* Brighter White */ - --base07: #fbfbfd; /* Bright White */ - --base08: #f7768e; /* Red */ - --base09: #ff9e64; /* Orange */ - --base0A: #b7c5d3; /* Yellow */ - --base0B: #9ece6a; /* Green */ - --base0C: #89ddff; /* Cyan */ - --base0D: #7aa2f7; /* Blue */ - --base0E: #bb9af7; /* Purple */ - --base0F: #bb9af7; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #9ece6a; /* Green */ + --dnd-indicator: #f7768e; /* Red */ + --idle-indicator: #b7c5d3; /* Yellow */ + --streaming-indicator: #bb9af7; /* Purple */ + + /* accent colors */ + --accent-1: #7aa2f7; /* links */ + --accent-2: #bb9af7; /* general unread/mention elements */ + --accent-3: #7aa2f7; /* accent buttons */ + --accent-4: #89ddff; /* accent buttons when hovered */ + --accent-5: #9ece6a; /* accent buttons when clicked */ + --mention: rgba(187, 154, 247, 0.1); + --mention-hover: rgba(187, 154, 247, 0.2); + + /* text colors */ + --text-0: #171d23; /* text on colored elements */ + --text-1: #d8e2ec; /* primary white-ish text */ + --text-2: #fbfbfd; /* headings */ + --text-3: #d8e2ec; /* normal text */ + --text-4: #b7c5d3; /* icon buttons and channels */ + --text-5: #526270; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #28323a; /* dark buttons when clicked */ + --bg-2: #1d252c; /* dark buttons */ + --bg-3: #28323a; /* spacing, secondary elements */ + --bg-4: #171d23; /* main background color */ + --hover: #28323a; /* channels and buttons when hovered */ + --active: #526270; /* channels and buttons when selected */ + --message-hover: rgba(29, 37, 44, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tokyo-city-light b/build/base16-tokyo-city-light index 08fd25b..b103d58 100644 --- a/build/base16-tokyo-city-light +++ b/build/base16-tokyo-city-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fbfbfd; /* Black */ - --base01: #f6f6f8; /* Bright Black */ - --base02: #edeff6; /* Grey */ - --base03: #9699a3; /* Brighter Grey */ - --base04: #4c505e; /* Bright Grey */ - --base05: #343b59; /* White */ - --base06: #1d252c; /* Brighter White */ - --base07: #171d23; /* Bright White */ - --base08: #8c4351; /* Red */ - --base09: #965027; /* Orange */ - --base0A: #4c505e; /* Yellow */ - --base0B: #485e30; /* Green */ - --base0C: #4c505e; /* Cyan */ - --base0D: #34548a; /* Blue */ - --base0E: #5a4a78; /* Purple */ - --base0F: #5a4a78; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #485e30; /* Green */ + --dnd-indicator: #8c4351; /* Red */ + --idle-indicator: #4c505e; /* Yellow */ + --streaming-indicator: #5a4a78; /* Purple */ + + /* accent colors */ + --accent-1: #34548a; /* links */ + --accent-2: #5a4a78; /* general unread/mention elements */ + --accent-3: #34548a; /* accent buttons */ + --accent-4: #4c505e; /* accent buttons when hovered */ + --accent-5: #485e30; /* accent buttons when clicked */ + --mention: rgba(90, 74, 120, 0.1); + --mention-hover: rgba(90, 74, 120, 0.2); + + /* text colors */ + --text-0: #fbfbfd; /* text on colored elements */ + --text-1: #343b59; /* primary white-ish text */ + --text-2: #171d23; /* headings */ + --text-3: #343b59; /* normal text */ + --text-4: #4c505e; /* icon buttons and channels */ + --text-5: #9699a3; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #edeff6; /* dark buttons when clicked */ + --bg-2: #f6f6f8; /* dark buttons */ + --bg-3: #edeff6; /* spacing, secondary elements */ + --bg-4: #fbfbfd; /* main background color */ + --hover: #edeff6; /* channels and buttons when hovered */ + --active: #9699a3; /* channels and buttons when selected */ + --message-hover: rgba(246, 246, 248, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tokyo-city-terminal-dark b/build/base16-tokyo-city-terminal-dark index eeb01b0..b861d04 100644 --- a/build/base16-tokyo-city-terminal-dark +++ b/build/base16-tokyo-city-terminal-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #171d23; /* Black */ - --base01: #1d252c; /* Bright Black */ - --base02: #28323a; /* Grey */ - --base03: #526270; /* Brighter Grey */ - --base04: #b7c5d3; /* Bright Grey */ - --base05: #d8e2ec; /* White */ - --base06: #f6f6f8; /* Brighter White */ - --base07: #fbfbfd; /* Bright White */ - --base08: #d95468; /* Red */ - --base09: #ff9e64; /* Orange */ - --base0A: #ebbf83; /* Yellow */ - --base0B: #8bd49c; /* Green */ - --base0C: #70e1e8; /* Cyan */ - --base0D: #539afc; /* Blue */ - --base0E: #b62d65; /* Purple */ - --base0F: #dd9d82; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #8bd49c; /* Green */ + --dnd-indicator: #d95468; /* Red */ + --idle-indicator: #ebbf83; /* Yellow */ + --streaming-indicator: #b62d65; /* Purple */ + + /* accent colors */ + --accent-1: #539afc; /* links */ + --accent-2: #b62d65; /* general unread/mention elements */ + --accent-3: #539afc; /* accent buttons */ + --accent-4: #70e1e8; /* accent buttons when hovered */ + --accent-5: #8bd49c; /* accent buttons when clicked */ + --mention: rgba(182, 45, 101, 0.1); + --mention-hover: rgba(182, 45, 101, 0.2); + + /* text colors */ + --text-0: #171d23; /* text on colored elements */ + --text-1: #d8e2ec; /* primary white-ish text */ + --text-2: #fbfbfd; /* headings */ + --text-3: #d8e2ec; /* normal text */ + --text-4: #b7c5d3; /* icon buttons and channels */ + --text-5: #526270; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #28323a; /* dark buttons when clicked */ + --bg-2: #1d252c; /* dark buttons */ + --bg-3: #28323a; /* spacing, secondary elements */ + --bg-4: #171d23; /* main background color */ + --hover: #28323a; /* channels and buttons when hovered */ + --active: #526270; /* channels and buttons when selected */ + --message-hover: rgba(29, 37, 44, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tokyo-city-terminal-light b/build/base16-tokyo-city-terminal-light index a8e136b..c2ac8d2 100644 --- a/build/base16-tokyo-city-terminal-light +++ b/build/base16-tokyo-city-terminal-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fbfbfd; /* Black */ - --base01: #f6f6f8; /* Bright Black */ - --base02: #d8e2ec; /* Grey */ - --base03: #b7c5d3; /* Brighter Grey */ - --base04: #526270; /* Bright Grey */ - --base05: #28323a; /* White */ - --base06: #1d252c; /* Brighter White */ - --base07: #171d23; /* Bright White */ - --base08: #8c4351; /* Red */ - --base09: #965027; /* Orange */ - --base0A: #8f5e15; /* Yellow */ - --base0B: #33635c; /* Green */ - --base0C: #0f4b6e; /* Cyan */ - --base0D: #34548a; /* Blue */ - --base0E: #5a4a78; /* Purple */ - --base0F: #7e5140; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #33635c; /* Green */ + --dnd-indicator: #8c4351; /* Red */ + --idle-indicator: #8f5e15; /* Yellow */ + --streaming-indicator: #5a4a78; /* Purple */ + + /* accent colors */ + --accent-1: #34548a; /* links */ + --accent-2: #5a4a78; /* general unread/mention elements */ + --accent-3: #34548a; /* accent buttons */ + --accent-4: #0f4b6e; /* accent buttons when hovered */ + --accent-5: #33635c; /* accent buttons when clicked */ + --mention: rgba(90, 74, 120, 0.1); + --mention-hover: rgba(90, 74, 120, 0.2); + + /* text colors */ + --text-0: #fbfbfd; /* text on colored elements */ + --text-1: #28323a; /* primary white-ish text */ + --text-2: #171d23; /* headings */ + --text-3: #28323a; /* normal text */ + --text-4: #526270; /* icon buttons and channels */ + --text-5: #b7c5d3; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d8e2ec; /* dark buttons when clicked */ + --bg-2: #f6f6f8; /* dark buttons */ + --bg-3: #d8e2ec; /* spacing, secondary elements */ + --bg-4: #fbfbfd; /* main background color */ + --hover: #d8e2ec; /* channels and buttons when hovered */ + --active: #b7c5d3; /* channels and buttons when selected */ + --message-hover: rgba(246, 246, 248, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tokyo-night-dark b/build/base16-tokyo-night-dark index 71531f8..6b7da51 100644 --- a/build/base16-tokyo-night-dark +++ b/build/base16-tokyo-night-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1a1b26; /* Black */ - --base01: #16161e; /* Bright Black */ - --base02: #2f3549; /* Grey */ - --base03: #444b6a; /* Brighter Grey */ - --base04: #787c99; /* Bright Grey */ - --base05: #a9b1d6; /* White */ - --base06: #cbccd1; /* Brighter White */ - --base07: #d5d6db; /* Bright White */ - --base08: #c0caf5; /* Red */ - --base09: #a9b1d6; /* Orange */ - --base0A: #0db9d7; /* Yellow */ - --base0B: #9ece6a; /* Green */ - --base0C: #b4f9f8; /* Cyan */ - --base0D: #2ac3de; /* Blue */ - --base0E: #bb9af7; /* Purple */ - --base0F: #f7768e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #9ece6a; /* Green */ + --dnd-indicator: #c0caf5; /* Red */ + --idle-indicator: #0db9d7; /* Yellow */ + --streaming-indicator: #bb9af7; /* Purple */ + + /* accent colors */ + --accent-1: #2ac3de; /* links */ + --accent-2: #bb9af7; /* general unread/mention elements */ + --accent-3: #2ac3de; /* accent buttons */ + --accent-4: #b4f9f8; /* accent buttons when hovered */ + --accent-5: #9ece6a; /* accent buttons when clicked */ + --mention: rgba(187, 154, 247, 0.1); + --mention-hover: rgba(187, 154, 247, 0.2); + + /* text colors */ + --text-0: #1a1b26; /* text on colored elements */ + --text-1: #a9b1d6; /* primary white-ish text */ + --text-2: #d5d6db; /* headings */ + --text-3: #a9b1d6; /* normal text */ + --text-4: #787c99; /* icon buttons and channels */ + --text-5: #444b6a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #2f3549; /* dark buttons when clicked */ + --bg-2: #16161e; /* dark buttons */ + --bg-3: #2f3549; /* spacing, secondary elements */ + --bg-4: #1a1b26; /* main background color */ + --hover: #2f3549; /* channels and buttons when hovered */ + --active: #444b6a; /* channels and buttons when selected */ + --message-hover: rgba(22, 22, 30, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tokyo-night-light b/build/base16-tokyo-night-light index 13e909a..5e0bb12 100644 --- a/build/base16-tokyo-night-light +++ b/build/base16-tokyo-night-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #d5d6db; /* Black */ - --base01: #cbccd1; /* Bright Black */ - --base02: #dfe0e5; /* Grey */ - --base03: #9699a3; /* Brighter Grey */ - --base04: #4c505e; /* Bright Grey */ - --base05: #343b59; /* White */ - --base06: #1a1b26; /* Brighter White */ - --base07: #1a1b26; /* Bright White */ - --base08: #343b58; /* Red */ - --base09: #965027; /* Orange */ - --base0A: #166775; /* Yellow */ - --base0B: #485e30; /* Green */ - --base0C: #3e6968; /* Cyan */ - --base0D: #34548a; /* Blue */ - --base0E: #5a4a78; /* Purple */ - --base0F: #8c4351; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #485e30; /* Green */ + --dnd-indicator: #343b58; /* Red */ + --idle-indicator: #166775; /* Yellow */ + --streaming-indicator: #5a4a78; /* Purple */ + + /* accent colors */ + --accent-1: #34548a; /* links */ + --accent-2: #5a4a78; /* general unread/mention elements */ + --accent-3: #34548a; /* accent buttons */ + --accent-4: #3e6968; /* accent buttons when hovered */ + --accent-5: #485e30; /* accent buttons when clicked */ + --mention: rgba(90, 74, 120, 0.1); + --mention-hover: rgba(90, 74, 120, 0.2); + + /* text colors */ + --text-0: #d5d6db; /* text on colored elements */ + --text-1: #343b59; /* primary white-ish text */ + --text-2: #1a1b26; /* headings */ + --text-3: #343b59; /* normal text */ + --text-4: #4c505e; /* icon buttons and channels */ + --text-5: #9699a3; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #dfe0e5; /* dark buttons when clicked */ + --bg-2: #cbccd1; /* dark buttons */ + --bg-3: #dfe0e5; /* spacing, secondary elements */ + --bg-4: #d5d6db; /* main background color */ + --hover: #dfe0e5; /* channels and buttons when hovered */ + --active: #9699a3; /* channels and buttons when selected */ + --message-hover: rgba(203, 204, 209, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tokyo-night-moon b/build/base16-tokyo-night-moon index 767aa69..7e6abfc 100644 --- a/build/base16-tokyo-night-moon +++ b/build/base16-tokyo-night-moon @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #222436; /* Black */ - --base01: #1e2030; /* Bright Black */ - --base02: #2d3f76; /* Grey */ - --base03: #3b4261; /* Brighter Grey */ - --base04: #636da6; /* Bright Grey */ - --base05: #828bb8; /* White */ - --base06: #aeb4d1; /* Brighter White */ - --base07: #c8d3f5; /* Bright White */ - --base08: #ff757f; /* Red */ - --base09: #ffc777; /* Orange */ - --base0A: #ffdf77; /* Yellow */ - --base0B: #c3e88d; /* Green */ - --base0C: #86e1fc; /* Cyan */ - --base0D: #82aaff; /* Blue */ - --base0E: #fca7ea; /* Purple */ - --base0F: #c53b53; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #c3e88d; /* Green */ + --dnd-indicator: #ff757f; /* Red */ + --idle-indicator: #ffdf77; /* Yellow */ + --streaming-indicator: #fca7ea; /* Purple */ + + /* accent colors */ + --accent-1: #82aaff; /* links */ + --accent-2: #fca7ea; /* general unread/mention elements */ + --accent-3: #82aaff; /* accent buttons */ + --accent-4: #86e1fc; /* accent buttons when hovered */ + --accent-5: #c3e88d; /* accent buttons when clicked */ + --mention: rgba(252, 167, 234, 0.1); + --mention-hover: rgba(252, 167, 234, 0.2); + + /* text colors */ + --text-0: #222436; /* text on colored elements */ + --text-1: #828bb8; /* primary white-ish text */ + --text-2: #c8d3f5; /* headings */ + --text-3: #828bb8; /* normal text */ + --text-4: #636da6; /* icon buttons and channels */ + --text-5: #3b4261; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #2d3f76; /* dark buttons when clicked */ + --bg-2: #1e2030; /* dark buttons */ + --bg-3: #2d3f76; /* spacing, secondary elements */ + --bg-4: #222436; /* main background color */ + --hover: #2d3f76; /* channels and buttons when hovered */ + --active: #3b4261; /* channels and buttons when selected */ + --message-hover: rgba(30, 32, 48, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tokyo-night-storm b/build/base16-tokyo-night-storm index fc3c002..0b9a580 100644 --- a/build/base16-tokyo-night-storm +++ b/build/base16-tokyo-night-storm @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #24283b; /* Black */ - --base01: #16161e; /* Bright Black */ - --base02: #343a52; /* Grey */ - --base03: #444b6a; /* Brighter Grey */ - --base04: #787c99; /* Bright Grey */ - --base05: #a9b1d6; /* White */ - --base06: #cbccd1; /* Brighter White */ - --base07: #d5d6db; /* Bright White */ - --base08: #c0caf5; /* Red */ - --base09: #a9b1d6; /* Orange */ - --base0A: #0db9d7; /* Yellow */ - --base0B: #9ece6a; /* Green */ - --base0C: #b4f9f8; /* Cyan */ - --base0D: #2ac3de; /* Blue */ - --base0E: #bb9af7; /* Purple */ - --base0F: #f7768e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #9ece6a; /* Green */ + --dnd-indicator: #c0caf5; /* Red */ + --idle-indicator: #0db9d7; /* Yellow */ + --streaming-indicator: #bb9af7; /* Purple */ + + /* accent colors */ + --accent-1: #2ac3de; /* links */ + --accent-2: #bb9af7; /* general unread/mention elements */ + --accent-3: #2ac3de; /* accent buttons */ + --accent-4: #b4f9f8; /* accent buttons when hovered */ + --accent-5: #9ece6a; /* accent buttons when clicked */ + --mention: rgba(187, 154, 247, 0.1); + --mention-hover: rgba(187, 154, 247, 0.2); + + /* text colors */ + --text-0: #24283b; /* text on colored elements */ + --text-1: #a9b1d6; /* primary white-ish text */ + --text-2: #d5d6db; /* headings */ + --text-3: #a9b1d6; /* normal text */ + --text-4: #787c99; /* icon buttons and channels */ + --text-5: #444b6a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #343a52; /* dark buttons when clicked */ + --bg-2: #16161e; /* dark buttons */ + --bg-3: #343a52; /* spacing, secondary elements */ + --bg-4: #24283b; /* main background color */ + --hover: #343a52; /* channels and buttons when hovered */ + --active: #444b6a; /* channels and buttons when selected */ + --message-hover: rgba(22, 22, 30, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tokyo-night-terminal-dark b/build/base16-tokyo-night-terminal-dark index d820eda..556389f 100644 --- a/build/base16-tokyo-night-terminal-dark +++ b/build/base16-tokyo-night-terminal-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #16161e; /* Black */ - --base01: #1a1b26; /* Bright Black */ - --base02: #2f3549; /* Grey */ - --base03: #444b6a; /* Brighter Grey */ - --base04: #787c99; /* Bright Grey */ - --base05: #787c99; /* White */ - --base06: #cbccd1; /* Brighter White */ - --base07: #d5d6db; /* Bright White */ - --base08: #f7768e; /* Red */ - --base09: #ff9e64; /* Orange */ - --base0A: #e0af68; /* Yellow */ - --base0B: #41a6b5; /* Green */ - --base0C: #7dcfff; /* Cyan */ - --base0D: #7aa2f7; /* Blue */ - --base0E: #bb9af7; /* Purple */ - --base0F: #d18616; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #41a6b5; /* Green */ + --dnd-indicator: #f7768e; /* Red */ + --idle-indicator: #e0af68; /* Yellow */ + --streaming-indicator: #bb9af7; /* Purple */ + + /* accent colors */ + --accent-1: #7aa2f7; /* links */ + --accent-2: #bb9af7; /* general unread/mention elements */ + --accent-3: #7aa2f7; /* accent buttons */ + --accent-4: #7dcfff; /* accent buttons when hovered */ + --accent-5: #41a6b5; /* accent buttons when clicked */ + --mention: rgba(187, 154, 247, 0.1); + --mention-hover: rgba(187, 154, 247, 0.2); + + /* text colors */ + --text-0: #16161e; /* text on colored elements */ + --text-1: #787c99; /* primary white-ish text */ + --text-2: #d5d6db; /* headings */ + --text-3: #787c99; /* normal text */ + --text-4: #787c99; /* icon buttons and channels */ + --text-5: #444b6a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #2f3549; /* dark buttons when clicked */ + --bg-2: #1a1b26; /* dark buttons */ + --bg-3: #2f3549; /* spacing, secondary elements */ + --bg-4: #16161e; /* main background color */ + --hover: #2f3549; /* channels and buttons when hovered */ + --active: #444b6a; /* channels and buttons when selected */ + --message-hover: rgba(26, 27, 38, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tokyo-night-terminal-light b/build/base16-tokyo-night-terminal-light index 965f4d8..7c4aa89 100644 --- a/build/base16-tokyo-night-terminal-light +++ b/build/base16-tokyo-night-terminal-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #d5d6db; /* Black */ - --base01: #cbccd1; /* Bright Black */ - --base02: #dfe0e5; /* Grey */ - --base03: #9699a3; /* Brighter Grey */ - --base04: #4c505e; /* Bright Grey */ - --base05: #4c505e; /* White */ - --base06: #1a1b26; /* Brighter White */ - --base07: #1a1b26; /* Bright White */ - --base08: #8c4351; /* Red */ - --base09: #965027; /* Orange */ - --base0A: #8f5e15; /* Yellow */ - --base0B: #33635c; /* Green */ - --base0C: #0f4b6e; /* Cyan */ - --base0D: #34548a; /* Blue */ - --base0E: #5a4a78; /* Purple */ - --base0F: #655259; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #33635c; /* Green */ + --dnd-indicator: #8c4351; /* Red */ + --idle-indicator: #8f5e15; /* Yellow */ + --streaming-indicator: #5a4a78; /* Purple */ + + /* accent colors */ + --accent-1: #34548a; /* links */ + --accent-2: #5a4a78; /* general unread/mention elements */ + --accent-3: #34548a; /* accent buttons */ + --accent-4: #0f4b6e; /* accent buttons when hovered */ + --accent-5: #33635c; /* accent buttons when clicked */ + --mention: rgba(90, 74, 120, 0.1); + --mention-hover: rgba(90, 74, 120, 0.2); + + /* text colors */ + --text-0: #d5d6db; /* text on colored elements */ + --text-1: #4c505e; /* primary white-ish text */ + --text-2: #1a1b26; /* headings */ + --text-3: #4c505e; /* normal text */ + --text-4: #4c505e; /* icon buttons and channels */ + --text-5: #9699a3; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #dfe0e5; /* dark buttons when clicked */ + --bg-2: #cbccd1; /* dark buttons */ + --bg-3: #dfe0e5; /* spacing, secondary elements */ + --bg-4: #d5d6db; /* main background color */ + --hover: #dfe0e5; /* channels and buttons when hovered */ + --active: #9699a3; /* channels and buttons when selected */ + --message-hover: rgba(203, 204, 209, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tokyo-night-terminal-storm b/build/base16-tokyo-night-terminal-storm index cd5aa6a..eb7b385 100644 --- a/build/base16-tokyo-night-terminal-storm +++ b/build/base16-tokyo-night-terminal-storm @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #24283b; /* Black */ - --base01: #1a1b26; /* Bright Black */ - --base02: #343a52; /* Grey */ - --base03: #444b6a; /* Brighter Grey */ - --base04: #787c99; /* Bright Grey */ - --base05: #787c99; /* White */ - --base06: #cbccd1; /* Brighter White */ - --base07: #d5d6db; /* Bright White */ - --base08: #f7768e; /* Red */ - --base09: #ff9e64; /* Orange */ - --base0A: #e0af68; /* Yellow */ - --base0B: #41a6b5; /* Green */ - --base0C: #7dcfff; /* Cyan */ - --base0D: #7aa2f7; /* Blue */ - --base0E: #bb9af7; /* Purple */ - --base0F: #d18616; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #41a6b5; /* Green */ + --dnd-indicator: #f7768e; /* Red */ + --idle-indicator: #e0af68; /* Yellow */ + --streaming-indicator: #bb9af7; /* Purple */ + + /* accent colors */ + --accent-1: #7aa2f7; /* links */ + --accent-2: #bb9af7; /* general unread/mention elements */ + --accent-3: #7aa2f7; /* accent buttons */ + --accent-4: #7dcfff; /* accent buttons when hovered */ + --accent-5: #41a6b5; /* accent buttons when clicked */ + --mention: rgba(187, 154, 247, 0.1); + --mention-hover: rgba(187, 154, 247, 0.2); + + /* text colors */ + --text-0: #24283b; /* text on colored elements */ + --text-1: #787c99; /* primary white-ish text */ + --text-2: #d5d6db; /* headings */ + --text-3: #787c99; /* normal text */ + --text-4: #787c99; /* icon buttons and channels */ + --text-5: #444b6a; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #343a52; /* dark buttons when clicked */ + --bg-2: #1a1b26; /* dark buttons */ + --bg-3: #343a52; /* spacing, secondary elements */ + --bg-4: #24283b; /* main background color */ + --hover: #343a52; /* channels and buttons when hovered */ + --active: #444b6a; /* channels and buttons when selected */ + --message-hover: rgba(26, 27, 38, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tokyodark b/build/base16-tokyodark index 2a5fcb1..c6f9742 100644 --- a/build/base16-tokyodark +++ b/build/base16-tokyodark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #11121d; /* Black */ - --base01: #212234; /* Bright Black */ - --base02: #212234; /* Grey */ - --base03: #353945; /* Brighter Grey */ - --base04: #4a5057; /* Bright Grey */ - --base05: #a0a8cd; /* White */ - --base06: #abb2bf; /* Brighter White */ - --base07: #bcc2dc; /* Bright White */ - --base08: #ee6d85; /* Red */ - --base09: #f6955b; /* Orange */ - --base0A: #d7a65f; /* Yellow */ - --base0B: #95c561; /* Green */ - --base0C: #9fbbf3; /* Cyan */ - --base0D: #7199ee; /* Blue */ - --base0E: #a485dd; /* Purple */ - --base0F: #773440; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #95c561; /* Green */ + --dnd-indicator: #ee6d85; /* Red */ + --idle-indicator: #d7a65f; /* Yellow */ + --streaming-indicator: #a485dd; /* Purple */ + + /* accent colors */ + --accent-1: #7199ee; /* links */ + --accent-2: #a485dd; /* general unread/mention elements */ + --accent-3: #7199ee; /* accent buttons */ + --accent-4: #9fbbf3; /* accent buttons when hovered */ + --accent-5: #95c561; /* accent buttons when clicked */ + --mention: rgba(164, 133, 221, 0.1); + --mention-hover: rgba(164, 133, 221, 0.2); + + /* text colors */ + --text-0: #11121d; /* text on colored elements */ + --text-1: #a0a8cd; /* primary white-ish text */ + --text-2: #bcc2dc; /* headings */ + --text-3: #a0a8cd; /* normal text */ + --text-4: #4a5057; /* icon buttons and channels */ + --text-5: #353945; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #212234; /* dark buttons when clicked */ + --bg-2: #212234; /* dark buttons */ + --bg-3: #212234; /* spacing, secondary elements */ + --bg-4: #11121d; /* main background color */ + --hover: #212234; /* channels and buttons when hovered */ + --active: #353945; /* channels and buttons when selected */ + --message-hover: rgba(33, 34, 52, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tokyodark-terminal b/build/base16-tokyodark-terminal index d005150..8584257 100644 --- a/build/base16-tokyodark-terminal +++ b/build/base16-tokyodark-terminal @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #11121d; /* Black */ - --base01: #1a1b2a; /* Bright Black */ - --base02: #212234; /* Grey */ - --base03: #282c34; /* Brighter Grey */ - --base04: #4a5057; /* Bright Grey */ - --base05: #a0a8cd; /* White */ - --base06: #a0a8cd; /* Brighter White */ - --base07: #a0a8cd; /* Bright White */ - --base08: #ee6d85; /* Red */ - --base09: #f6955b; /* Orange */ - --base0A: #d7a65f; /* Yellow */ - --base0B: #95c561; /* Green */ - --base0C: #38a89d; /* Cyan */ - --base0D: #7199ee; /* Blue */ - --base0E: #a485dd; /* Purple */ - --base0F: #773440; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #95c561; /* Green */ + --dnd-indicator: #ee6d85; /* Red */ + --idle-indicator: #d7a65f; /* Yellow */ + --streaming-indicator: #a485dd; /* Purple */ + + /* accent colors */ + --accent-1: #7199ee; /* links */ + --accent-2: #a485dd; /* general unread/mention elements */ + --accent-3: #7199ee; /* accent buttons */ + --accent-4: #38a89d; /* accent buttons when hovered */ + --accent-5: #95c561; /* accent buttons when clicked */ + --mention: rgba(164, 133, 221, 0.1); + --mention-hover: rgba(164, 133, 221, 0.2); + + /* text colors */ + --text-0: #11121d; /* text on colored elements */ + --text-1: #a0a8cd; /* primary white-ish text */ + --text-2: #a0a8cd; /* headings */ + --text-3: #a0a8cd; /* normal text */ + --text-4: #4a5057; /* icon buttons and channels */ + --text-5: #282c34; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #212234; /* dark buttons when clicked */ + --bg-2: #1a1b2a; /* dark buttons */ + --bg-3: #212234; /* spacing, secondary elements */ + --bg-4: #11121d; /* main background color */ + --hover: #212234; /* channels and buttons when hovered */ + --active: #282c34; /* channels and buttons when selected */ + --message-hover: rgba(26, 27, 42, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tomorrow b/build/base16-tomorrow index 03920c3..88a7fb5 100644 --- a/build/base16-tomorrow +++ b/build/base16-tomorrow @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #ffffff; /* Black */ - --base01: #e0e0e0; /* Bright Black */ - --base02: #c5c8c6; /* Grey */ - --base03: #b4b7b4; /* Brighter Grey */ - --base04: #969896; /* Bright Grey */ - --base05: #373b41; /* White */ - --base06: #282a2e; /* Brighter White */ - --base07: #1d1f21; /* Bright White */ - --base08: #c82829; /* Red */ - --base09: #f5871f; /* Orange */ - --base0A: #eab700; /* Yellow */ - --base0B: #718c00; /* Green */ - --base0C: #3e999f; /* Cyan */ - --base0D: #4271ae; /* Blue */ - --base0E: #8959a8; /* Purple */ - --base0F: #a3685a; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #718c00; /* Green */ + --dnd-indicator: #c82829; /* Red */ + --idle-indicator: #eab700; /* Yellow */ + --streaming-indicator: #8959a8; /* Purple */ + + /* accent colors */ + --accent-1: #4271ae; /* links */ + --accent-2: #8959a8; /* general unread/mention elements */ + --accent-3: #4271ae; /* accent buttons */ + --accent-4: #3e999f; /* accent buttons when hovered */ + --accent-5: #718c00; /* accent buttons when clicked */ + --mention: rgba(137, 89, 168, 0.1); + --mention-hover: rgba(137, 89, 168, 0.2); + + /* text colors */ + --text-0: #ffffff; /* text on colored elements */ + --text-1: #373b41; /* primary white-ish text */ + --text-2: #1d1f21; /* headings */ + --text-3: #373b41; /* normal text */ + --text-4: #969896; /* icon buttons and channels */ + --text-5: #b4b7b4; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #c5c8c6; /* dark buttons when clicked */ + --bg-2: #e0e0e0; /* dark buttons */ + --bg-3: #c5c8c6; /* spacing, secondary elements */ + --bg-4: #ffffff; /* main background color */ + --hover: #c5c8c6; /* channels and buttons when hovered */ + --active: #b4b7b4; /* channels and buttons when selected */ + --message-hover: rgba(224, 224, 224, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tomorrow-night b/build/base16-tomorrow-night index d3c897f..04d9bdd 100644 --- a/build/base16-tomorrow-night +++ b/build/base16-tomorrow-night @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1d1f21; /* Black */ - --base01: #282a2e; /* Bright Black */ - --base02: #373b41; /* Grey */ - --base03: #969896; /* Brighter Grey */ - --base04: #b4b7b4; /* Bright Grey */ - --base05: #c5c8c6; /* White */ - --base06: #e0e0e0; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #cc6666; /* Red */ - --base09: #de935f; /* Orange */ - --base0A: #f0c674; /* Yellow */ - --base0B: #b5bd68; /* Green */ - --base0C: #8abeb7; /* Cyan */ - --base0D: #81a2be; /* Blue */ - --base0E: #b294bb; /* Purple */ - --base0F: #a3685a; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #b5bd68; /* Green */ + --dnd-indicator: #cc6666; /* Red */ + --idle-indicator: #f0c674; /* Yellow */ + --streaming-indicator: #b294bb; /* Purple */ + + /* accent colors */ + --accent-1: #81a2be; /* links */ + --accent-2: #b294bb; /* general unread/mention elements */ + --accent-3: #81a2be; /* accent buttons */ + --accent-4: #8abeb7; /* accent buttons when hovered */ + --accent-5: #b5bd68; /* accent buttons when clicked */ + --mention: rgba(178, 148, 187, 0.1); + --mention-hover: rgba(178, 148, 187, 0.2); + + /* text colors */ + --text-0: #1d1f21; /* text on colored elements */ + --text-1: #c5c8c6; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #c5c8c6; /* normal text */ + --text-4: #b4b7b4; /* icon buttons and channels */ + --text-5: #969896; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #373b41; /* dark buttons when clicked */ + --bg-2: #282a2e; /* dark buttons */ + --bg-3: #373b41; /* spacing, secondary elements */ + --bg-4: #1d1f21; /* main background color */ + --hover: #373b41; /* channels and buttons when hovered */ + --active: #969896; /* channels and buttons when selected */ + --message-hover: rgba(40, 42, 46, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tomorrow-night-eighties b/build/base16-tomorrow-night-eighties index 2aaa8db..7ca8c32 100644 --- a/build/base16-tomorrow-night-eighties +++ b/build/base16-tomorrow-night-eighties @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2d2d2d; /* Black */ - --base01: #393939; /* Bright Black */ - --base02: #515151; /* Grey */ - --base03: #999999; /* Brighter Grey */ - --base04: #b4b7b4; /* Bright Grey */ - --base05: #cccccc; /* White */ - --base06: #e0e0e0; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #f2777a; /* Red */ - --base09: #f99157; /* Orange */ - --base0A: #ffcc66; /* Yellow */ - --base0B: #99cc99; /* Green */ - --base0C: #66cccc; /* Cyan */ - --base0D: #6699cc; /* Blue */ - --base0E: #cc99cc; /* Purple */ - --base0F: #a3685a; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #99cc99; /* Green */ + --dnd-indicator: #f2777a; /* Red */ + --idle-indicator: #ffcc66; /* Yellow */ + --streaming-indicator: #cc99cc; /* Purple */ + + /* accent colors */ + --accent-1: #6699cc; /* links */ + --accent-2: #cc99cc; /* general unread/mention elements */ + --accent-3: #6699cc; /* accent buttons */ + --accent-4: #66cccc; /* accent buttons when hovered */ + --accent-5: #99cc99; /* accent buttons when clicked */ + --mention: rgba(204, 153, 204, 0.1); + --mention-hover: rgba(204, 153, 204, 0.2); + + /* text colors */ + --text-0: #2d2d2d; /* text on colored elements */ + --text-1: #cccccc; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #cccccc; /* normal text */ + --text-4: #b4b7b4; /* icon buttons and channels */ + --text-5: #999999; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #515151; /* dark buttons when clicked */ + --bg-2: #393939; /* dark buttons */ + --bg-3: #515151; /* spacing, secondary elements */ + --bg-4: #2d2d2d; /* main background color */ + --hover: #515151; /* channels and buttons when hovered */ + --active: #999999; /* channels and buttons when selected */ + --message-hover: rgba(57, 57, 57, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-tube b/build/base16-tube index dc52a4a..41ab303 100644 --- a/build/base16-tube +++ b/build/base16-tube @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #231f20; /* Black */ - --base01: #1c3f95; /* Bright Black */ - --base02: #5a5758; /* Grey */ - --base03: #737171; /* Brighter Grey */ - --base04: #959ca1; /* Bright Grey */ - --base05: #d9d8d8; /* White */ - --base06: #e7e7e8; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #ee2e24; /* Red */ - --base09: #f386a1; /* Orange */ - --base0A: #ffd204; /* Yellow */ - --base0B: #00853e; /* Green */ - --base0C: #85cebc; /* Cyan */ - --base0D: #009ddc; /* Blue */ - --base0E: #98005d; /* Purple */ - --base0F: #b06110; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #00853e; /* Green */ + --dnd-indicator: #ee2e24; /* Red */ + --idle-indicator: #ffd204; /* Yellow */ + --streaming-indicator: #98005d; /* Purple */ + + /* accent colors */ + --accent-1: #009ddc; /* links */ + --accent-2: #98005d; /* general unread/mention elements */ + --accent-3: #009ddc; /* accent buttons */ + --accent-4: #85cebc; /* accent buttons when hovered */ + --accent-5: #00853e; /* accent buttons when clicked */ + --mention: rgba(152, 0, 93, 0.1); + --mention-hover: rgba(152, 0, 93, 0.2); + + /* text colors */ + --text-0: #231f20; /* text on colored elements */ + --text-1: #d9d8d8; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #d9d8d8; /* normal text */ + --text-4: #959ca1; /* icon buttons and channels */ + --text-5: #737171; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #5a5758; /* dark buttons when clicked */ + --bg-2: #1c3f95; /* dark buttons */ + --bg-3: #5a5758; /* spacing, secondary elements */ + --bg-4: #231f20; /* main background color */ + --hover: #5a5758; /* channels and buttons when hovered */ + --active: #737171; /* channels and buttons when selected */ + --message-hover: rgba(28, 63, 149, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-twilight b/build/base16-twilight index 6c659c2..97edb90 100644 --- a/build/base16-twilight +++ b/build/base16-twilight @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1e1e1e; /* Black */ - --base01: #323537; /* Bright Black */ - --base02: #464b50; /* Grey */ - --base03: #5f5a60; /* Brighter Grey */ - --base04: #838184; /* Bright Grey */ - --base05: #a7a7a7; /* White */ - --base06: #c3c3c3; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #cf6a4c; /* Red */ - --base09: #cda869; /* Orange */ - --base0A: #f9ee98; /* Yellow */ - --base0B: #8f9d6a; /* Green */ - --base0C: #afc4db; /* Cyan */ - --base0D: #7587a6; /* Blue */ - --base0E: #9b859d; /* Purple */ - --base0F: #9b703f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #8f9d6a; /* Green */ + --dnd-indicator: #cf6a4c; /* Red */ + --idle-indicator: #f9ee98; /* Yellow */ + --streaming-indicator: #9b859d; /* Purple */ + + /* accent colors */ + --accent-1: #7587a6; /* links */ + --accent-2: #9b859d; /* general unread/mention elements */ + --accent-3: #7587a6; /* accent buttons */ + --accent-4: #afc4db; /* accent buttons when hovered */ + --accent-5: #8f9d6a; /* accent buttons when clicked */ + --mention: rgba(155, 133, 157, 0.1); + --mention-hover: rgba(155, 133, 157, 0.2); + + /* text colors */ + --text-0: #1e1e1e; /* text on colored elements */ + --text-1: #a7a7a7; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #a7a7a7; /* normal text */ + --text-4: #838184; /* icon buttons and channels */ + --text-5: #5f5a60; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #464b50; /* dark buttons when clicked */ + --bg-2: #323537; /* dark buttons */ + --bg-3: #464b50; /* spacing, secondary elements */ + --bg-4: #1e1e1e; /* main background color */ + --hover: #464b50; /* channels and buttons when hovered */ + --active: #5f5a60; /* channels and buttons when selected */ + --message-hover: rgba(50, 53, 55, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-unikitty-dark b/build/base16-unikitty-dark index 826a65a..2496c4a 100644 --- a/build/base16-unikitty-dark +++ b/build/base16-unikitty-dark @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2e2a31; /* Black */ - --base01: #4a464d; /* Bright Black */ - --base02: #666369; /* Grey */ - --base03: #838085; /* Brighter Grey */ - --base04: #9f9da2; /* Bright Grey */ - --base05: #bcbabe; /* White */ - --base06: #d8d7da; /* Brighter White */ - --base07: #f5f4f7; /* Bright White */ - --base08: #d8137f; /* Red */ - --base09: #d65407; /* Orange */ - --base0A: #dc8a0e; /* Yellow */ - --base0B: #17ad98; /* Green */ - --base0C: #149bda; /* Cyan */ - --base0D: #796af5; /* Blue */ - --base0E: #bb60ea; /* Purple */ - --base0F: #c720ca; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #17ad98; /* Green */ + --dnd-indicator: #d8137f; /* Red */ + --idle-indicator: #dc8a0e; /* Yellow */ + --streaming-indicator: #bb60ea; /* Purple */ + + /* accent colors */ + --accent-1: #796af5; /* links */ + --accent-2: #bb60ea; /* general unread/mention elements */ + --accent-3: #796af5; /* accent buttons */ + --accent-4: #149bda; /* accent buttons when hovered */ + --accent-5: #17ad98; /* accent buttons when clicked */ + --mention: rgba(187, 96, 234, 0.1); + --mention-hover: rgba(187, 96, 234, 0.2); + + /* text colors */ + --text-0: #2e2a31; /* text on colored elements */ + --text-1: #bcbabe; /* primary white-ish text */ + --text-2: #f5f4f7; /* headings */ + --text-3: #bcbabe; /* normal text */ + --text-4: #9f9da2; /* icon buttons and channels */ + --text-5: #838085; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #666369; /* dark buttons when clicked */ + --bg-2: #4a464d; /* dark buttons */ + --bg-3: #666369; /* spacing, secondary elements */ + --bg-4: #2e2a31; /* main background color */ + --hover: #666369; /* channels and buttons when hovered */ + --active: #838085; /* channels and buttons when selected */ + --message-hover: rgba(74, 70, 77, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-unikitty-light b/build/base16-unikitty-light index 181d4ba..173f50d 100644 --- a/build/base16-unikitty-light +++ b/build/base16-unikitty-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #ffffff; /* Black */ - --base01: #e1e1e2; /* Bright Black */ - --base02: #c4c3c5; /* Grey */ - --base03: #a7a5a8; /* Brighter Grey */ - --base04: #89878b; /* Bright Grey */ - --base05: #6c696e; /* White */ - --base06: #4f4b51; /* Brighter White */ - --base07: #322d34; /* Bright White */ - --base08: #d8137f; /* Red */ - --base09: #d65407; /* Orange */ - --base0A: #dc8a0e; /* Yellow */ - --base0B: #17ad98; /* Green */ - --base0C: #149bda; /* Cyan */ - --base0D: #775dff; /* Blue */ - --base0E: #aa17e6; /* Purple */ - --base0F: #e013d0; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #17ad98; /* Green */ + --dnd-indicator: #d8137f; /* Red */ + --idle-indicator: #dc8a0e; /* Yellow */ + --streaming-indicator: #aa17e6; /* Purple */ + + /* accent colors */ + --accent-1: #775dff; /* links */ + --accent-2: #aa17e6; /* general unread/mention elements */ + --accent-3: #775dff; /* accent buttons */ + --accent-4: #149bda; /* accent buttons when hovered */ + --accent-5: #17ad98; /* accent buttons when clicked */ + --mention: rgba(170, 23, 230, 0.1); + --mention-hover: rgba(170, 23, 230, 0.2); + + /* text colors */ + --text-0: #ffffff; /* text on colored elements */ + --text-1: #6c696e; /* primary white-ish text */ + --text-2: #322d34; /* headings */ + --text-3: #6c696e; /* normal text */ + --text-4: #89878b; /* icon buttons and channels */ + --text-5: #a7a5a8; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #c4c3c5; /* dark buttons when clicked */ + --bg-2: #e1e1e2; /* dark buttons */ + --bg-3: #c4c3c5; /* spacing, secondary elements */ + --bg-4: #ffffff; /* main background color */ + --hover: #c4c3c5; /* channels and buttons when hovered */ + --active: #a7a5a8; /* channels and buttons when selected */ + --message-hover: rgba(225, 225, 226, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-unikitty-reversible b/build/base16-unikitty-reversible index a92dd26..a668b34 100644 --- a/build/base16-unikitty-reversible +++ b/build/base16-unikitty-reversible @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #2e2a31; /* Black */ - --base01: #4b484e; /* Bright Black */ - --base02: #69666b; /* Grey */ - --base03: #878589; /* Brighter Grey */ - --base04: #a5a3a6; /* Bright Grey */ - --base05: #c3c2c4; /* White */ - --base06: #e1e0e1; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #d8137f; /* Red */ - --base09: #d65407; /* Orange */ - --base0A: #dc8a0e; /* Yellow */ - --base0B: #17ad98; /* Green */ - --base0C: #149bda; /* Cyan */ - --base0D: #7864fa; /* Blue */ - --base0E: #b33ce8; /* Purple */ - --base0F: #d41acd; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #17ad98; /* Green */ + --dnd-indicator: #d8137f; /* Red */ + --idle-indicator: #dc8a0e; /* Yellow */ + --streaming-indicator: #b33ce8; /* Purple */ + + /* accent colors */ + --accent-1: #7864fa; /* links */ + --accent-2: #b33ce8; /* general unread/mention elements */ + --accent-3: #7864fa; /* accent buttons */ + --accent-4: #149bda; /* accent buttons when hovered */ + --accent-5: #17ad98; /* accent buttons when clicked */ + --mention: rgba(179, 60, 232, 0.1); + --mention-hover: rgba(179, 60, 232, 0.2); + + /* text colors */ + --text-0: #2e2a31; /* text on colored elements */ + --text-1: #c3c2c4; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #c3c2c4; /* normal text */ + --text-4: #a5a3a6; /* icon buttons and channels */ + --text-5: #878589; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #69666b; /* dark buttons when clicked */ + --bg-2: #4b484e; /* dark buttons */ + --bg-3: #69666b; /* spacing, secondary elements */ + --bg-4: #2e2a31; /* main background color */ + --hover: #69666b; /* channels and buttons when hovered */ + --active: #878589; /* channels and buttons when selected */ + --message-hover: rgba(75, 72, 78, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-uwunicorn b/build/base16-uwunicorn index 5fbf21b..982d7e6 100644 --- a/build/base16-uwunicorn +++ b/build/base16-uwunicorn @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #241b26; /* Black */ - --base01: #2f2a3f; /* Bright Black */ - --base02: #46354a; /* Grey */ - --base03: #6c3cb2; /* Brighter Grey */ - --base04: #7e5f83; /* Bright Grey */ - --base05: #eed5d9; /* White */ - --base06: #d9c2c6; /* Brighter White */ - --base07: #e4ccd0; /* Bright White */ - --base08: #877bb6; /* Red */ - --base09: #de5b44; /* Orange */ - --base0A: #a84a73; /* Yellow */ - --base0B: #c965bf; /* Green */ - --base0C: #9c5fce; /* Cyan */ - --base0D: #6a9eb5; /* Blue */ - --base0E: #78a38f; /* Purple */ - --base0F: #a3a079; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #c965bf; /* Green */ + --dnd-indicator: #877bb6; /* Red */ + --idle-indicator: #a84a73; /* Yellow */ + --streaming-indicator: #78a38f; /* Purple */ + + /* accent colors */ + --accent-1: #6a9eb5; /* links */ + --accent-2: #78a38f; /* general unread/mention elements */ + --accent-3: #6a9eb5; /* accent buttons */ + --accent-4: #9c5fce; /* accent buttons when hovered */ + --accent-5: #c965bf; /* accent buttons when clicked */ + --mention: rgba(120, 163, 143, 0.1); + --mention-hover: rgba(120, 163, 143, 0.2); + + /* text colors */ + --text-0: #241b26; /* text on colored elements */ + --text-1: #eed5d9; /* primary white-ish text */ + --text-2: #e4ccd0; /* headings */ + --text-3: #eed5d9; /* normal text */ + --text-4: #7e5f83; /* icon buttons and channels */ + --text-5: #6c3cb2; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #46354a; /* dark buttons when clicked */ + --bg-2: #2f2a3f; /* dark buttons */ + --bg-3: #46354a; /* spacing, secondary elements */ + --bg-4: #241b26; /* main background color */ + --hover: #46354a; /* channels and buttons when hovered */ + --active: #6c3cb2; /* channels and buttons when selected */ + --message-hover: rgba(47, 42, 63, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-valua b/build/base16-valua index 1165969..604f956 100644 --- a/build/base16-valua +++ b/build/base16-valua @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #131f1f; /* Black */ - --base01: #213132; /* Bright Black */ - --base02: #273d3c; /* Grey */ - --base03: #3e5c53; /* Brighter Grey */ - --base04: #6d9877; /* Bright Grey */ - --base05: #98c1a3; /* White */ - --base06: #a5cbb9; /* Brighter White */ - --base07: #aacbcb; /* Bright White */ - --base08: #d7586e; /* Red */ - --base09: #e6b466; /* Orange */ - --base0A: #dfe754; /* Yellow */ - --base0B: #59d678; /* Green */ - --base0C: #76dbd2; /* Cyan */ - --base0D: #4ed2d2; /* Blue */ - --base0E: #a874e0; /* Purple */ - --base0F: #c05a8f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #59d678; /* Green */ + --dnd-indicator: #d7586e; /* Red */ + --idle-indicator: #dfe754; /* Yellow */ + --streaming-indicator: #a874e0; /* Purple */ + + /* accent colors */ + --accent-1: #4ed2d2; /* links */ + --accent-2: #a874e0; /* general unread/mention elements */ + --accent-3: #4ed2d2; /* accent buttons */ + --accent-4: #76dbd2; /* accent buttons when hovered */ + --accent-5: #59d678; /* accent buttons when clicked */ + --mention: rgba(168, 116, 224, 0.1); + --mention-hover: rgba(168, 116, 224, 0.2); + + /* text colors */ + --text-0: #131f1f; /* text on colored elements */ + --text-1: #98c1a3; /* primary white-ish text */ + --text-2: #aacbcb; /* headings */ + --text-3: #98c1a3; /* normal text */ + --text-4: #6d9877; /* icon buttons and channels */ + --text-5: #3e5c53; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #273d3c; /* dark buttons when clicked */ + --bg-2: #213132; /* dark buttons */ + --bg-3: #273d3c; /* spacing, secondary elements */ + --bg-4: #131f1f; /* main background color */ + --hover: #273d3c; /* channels and buttons when hovered */ + --active: #3e5c53; /* channels and buttons when selected */ + --message-hover: rgba(33, 49, 50, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-vesper b/build/base16-vesper index 54d7c12..863fbbc 100644 --- a/build/base16-vesper +++ b/build/base16-vesper @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #101010; /* Black */ - --base01: #232323; /* Bright Black */ - --base02: #222222; /* Grey */ - --base03: #333333; /* Brighter Grey */ - --base04: #999999; /* Bright Grey */ - --base05: #b7b7b7; /* White */ - --base06: #c1c1c1; /* Brighter White */ - --base07: #d5d5d5; /* Bright White */ - --base08: #de6e6e; /* Red */ - --base09: #dab083; /* Orange */ - --base0A: #ffc799; /* Yellow */ - --base0B: #5f8787; /* Green */ - --base0C: #60a592; /* Cyan */ - --base0D: #8eaaaa; /* Blue */ - --base0E: #d69094; /* Purple */ - --base0F: #876c4f; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #5f8787; /* Green */ + --dnd-indicator: #de6e6e; /* Red */ + --idle-indicator: #ffc799; /* Yellow */ + --streaming-indicator: #d69094; /* Purple */ + + /* accent colors */ + --accent-1: #8eaaaa; /* links */ + --accent-2: #d69094; /* general unread/mention elements */ + --accent-3: #8eaaaa; /* accent buttons */ + --accent-4: #60a592; /* accent buttons when hovered */ + --accent-5: #5f8787; /* accent buttons when clicked */ + --mention: rgba(214, 144, 148, 0.1); + --mention-hover: rgba(214, 144, 148, 0.2); + + /* text colors */ + --text-0: #101010; /* text on colored elements */ + --text-1: #b7b7b7; /* primary white-ish text */ + --text-2: #d5d5d5; /* headings */ + --text-3: #b7b7b7; /* normal text */ + --text-4: #999999; /* icon buttons and channels */ + --text-5: #333333; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #222222; /* dark buttons when clicked */ + --bg-2: #232323; /* dark buttons */ + --bg-3: #222222; /* spacing, secondary elements */ + --bg-4: #101010; /* main background color */ + --hover: #222222; /* channels and buttons when hovered */ + --active: #333333; /* channels and buttons when selected */ + --message-hover: rgba(35, 35, 35, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-vice b/build/base16-vice index f279fd0..6ffddba 100644 --- a/build/base16-vice +++ b/build/base16-vice @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #17191e; /* Black */ - --base01: #22262d; /* Bright Black */ - --base02: #3c3f4c; /* Grey */ - --base03: #383a47; /* Brighter Grey */ - --base04: #555e70; /* Bright Grey */ - --base05: #8b9cbe; /* White */ - --base06: #b2bfd9; /* Brighter White */ - --base07: #f4f4f7; /* Bright White */ - --base08: #ff29a8; /* Red */ - --base09: #85ffe0; /* Orange */ - --base0A: #f0ffaa; /* Yellow */ - --base0B: #0badff; /* Green */ - --base0C: #8265ff; /* Cyan */ - --base0D: #00eaff; /* Blue */ - --base0E: #00f6d9; /* Purple */ - --base0F: #ff3d81; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #0badff; /* Green */ + --dnd-indicator: #ff29a8; /* Red */ + --idle-indicator: #f0ffaa; /* Yellow */ + --streaming-indicator: #00f6d9; /* Purple */ + + /* accent colors */ + --accent-1: #00eaff; /* links */ + --accent-2: #00f6d9; /* general unread/mention elements */ + --accent-3: #00eaff; /* accent buttons */ + --accent-4: #8265ff; /* accent buttons when hovered */ + --accent-5: #0badff; /* accent buttons when clicked */ + --mention: rgba(0, 246, 217, 0.1); + --mention-hover: rgba(0, 246, 217, 0.2); + + /* text colors */ + --text-0: #17191e; /* text on colored elements */ + --text-1: #8b9cbe; /* primary white-ish text */ + --text-2: #f4f4f7; /* headings */ + --text-3: #8b9cbe; /* normal text */ + --text-4: #555e70; /* icon buttons and channels */ + --text-5: #383a47; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #3c3f4c; /* dark buttons when clicked */ + --bg-2: #22262d; /* dark buttons */ + --bg-3: #3c3f4c; /* spacing, secondary elements */ + --bg-4: #17191e; /* main background color */ + --hover: #3c3f4c; /* channels and buttons when hovered */ + --active: #383a47; /* channels and buttons when selected */ + --message-hover: rgba(34, 38, 45, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-vulcan b/build/base16-vulcan index 25db9fb..0679e67 100644 --- a/build/base16-vulcan +++ b/build/base16-vulcan @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #041523; /* Black */ - --base01: #122339; /* Bright Black */ - --base02: #003552; /* Grey */ - --base03: #7a5759; /* Brighter Grey */ - --base04: #6b6977; /* Bright Grey */ - --base05: #5b778c; /* White */ - --base06: #333238; /* Brighter White */ - --base07: #214d68; /* Bright White */ - --base08: #818591; /* Red */ - --base09: #9198a3; /* Orange */ - --base0A: #adb4b9; /* Yellow */ - --base0B: #977d7c; /* Green */ - --base0C: #977d7c; /* Cyan */ - --base0D: #977d7c; /* Blue */ - --base0E: #9198a3; /* Purple */ - --base0F: #977d7c; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #977d7c; /* Green */ + --dnd-indicator: #818591; /* Red */ + --idle-indicator: #adb4b9; /* Yellow */ + --streaming-indicator: #9198a3; /* Purple */ + + /* accent colors */ + --accent-1: #977d7c; /* links */ + --accent-2: #9198a3; /* general unread/mention elements */ + --accent-3: #977d7c; /* accent buttons */ + --accent-4: #977d7c; /* accent buttons when hovered */ + --accent-5: #977d7c; /* accent buttons when clicked */ + --mention: rgba(145, 152, 163, 0.1); + --mention-hover: rgba(145, 152, 163, 0.2); + + /* text colors */ + --text-0: #041523; /* text on colored elements */ + --text-1: #5b778c; /* primary white-ish text */ + --text-2: #214d68; /* headings */ + --text-3: #5b778c; /* normal text */ + --text-4: #6b6977; /* icon buttons and channels */ + --text-5: #7a5759; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #003552; /* dark buttons when clicked */ + --bg-2: #122339; /* dark buttons */ + --bg-3: #003552; /* spacing, secondary elements */ + --bg-4: #041523; /* main background color */ + --hover: #003552; /* channels and buttons when hovered */ + --active: #7a5759; /* channels and buttons when selected */ + --message-hover: rgba(18, 35, 57, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-windows-10 b/build/base16-windows-10 index 6c3cb0f..c12cdea 100644 --- a/build/base16-windows-10 +++ b/build/base16-windows-10 @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #0c0c0c; /* Black */ - --base01: #2f2f2f; /* Bright Black */ - --base02: #535353; /* Grey */ - --base03: #767676; /* Brighter Grey */ - --base04: #b9b9b9; /* Bright Grey */ - --base05: #cccccc; /* White */ - --base06: #dfdfdf; /* Brighter White */ - --base07: #f2f2f2; /* Bright White */ - --base08: #e74856; /* Red */ - --base09: #c19c00; /* Orange */ - --base0A: #f9f1a5; /* Yellow */ - --base0B: #16c60c; /* Green */ - --base0C: #61d6d6; /* Cyan */ - --base0D: #3b78ff; /* Blue */ - --base0E: #b4009e; /* Purple */ - --base0F: #13a10e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #16c60c; /* Green */ + --dnd-indicator: #e74856; /* Red */ + --idle-indicator: #f9f1a5; /* Yellow */ + --streaming-indicator: #b4009e; /* Purple */ + + /* accent colors */ + --accent-1: #3b78ff; /* links */ + --accent-2: #b4009e; /* general unread/mention elements */ + --accent-3: #3b78ff; /* accent buttons */ + --accent-4: #61d6d6; /* accent buttons when hovered */ + --accent-5: #16c60c; /* accent buttons when clicked */ + --mention: rgba(180, 0, 158, 0.1); + --mention-hover: rgba(180, 0, 158, 0.2); + + /* text colors */ + --text-0: #0c0c0c; /* text on colored elements */ + --text-1: #cccccc; /* primary white-ish text */ + --text-2: #f2f2f2; /* headings */ + --text-3: #cccccc; /* normal text */ + --text-4: #b9b9b9; /* icon buttons and channels */ + --text-5: #767676; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #535353; /* dark buttons when clicked */ + --bg-2: #2f2f2f; /* dark buttons */ + --bg-3: #535353; /* spacing, secondary elements */ + --bg-4: #0c0c0c; /* main background color */ + --hover: #535353; /* channels and buttons when hovered */ + --active: #767676; /* channels and buttons when selected */ + --message-hover: rgba(47, 47, 47, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-windows-10-light b/build/base16-windows-10-light index 1f3453f..86a8622 100644 --- a/build/base16-windows-10-light +++ b/build/base16-windows-10-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #f2f2f2; /* Black */ - --base01: #e5e5e5; /* Bright Black */ - --base02: #d9d9d9; /* Grey */ - --base03: #cccccc; /* Brighter Grey */ - --base04: #ababab; /* Bright Grey */ - --base05: #767676; /* White */ - --base06: #414141; /* Brighter White */ - --base07: #0c0c0c; /* Bright White */ - --base08: #c50f1f; /* Red */ - --base09: #f9f1a5; /* Orange */ - --base0A: #c19c00; /* Yellow */ - --base0B: #13a10e; /* Green */ - --base0C: #3a96dd; /* Cyan */ - --base0D: #0037da; /* Blue */ - --base0E: #881798; /* Purple */ - --base0F: #16c60c; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #13a10e; /* Green */ + --dnd-indicator: #c50f1f; /* Red */ + --idle-indicator: #c19c00; /* Yellow */ + --streaming-indicator: #881798; /* Purple */ + + /* accent colors */ + --accent-1: #0037da; /* links */ + --accent-2: #881798; /* general unread/mention elements */ + --accent-3: #0037da; /* accent buttons */ + --accent-4: #3a96dd; /* accent buttons when hovered */ + --accent-5: #13a10e; /* accent buttons when clicked */ + --mention: rgba(136, 23, 152, 0.1); + --mention-hover: rgba(136, 23, 152, 0.2); + + /* text colors */ + --text-0: #f2f2f2; /* text on colored elements */ + --text-1: #767676; /* primary white-ish text */ + --text-2: #0c0c0c; /* headings */ + --text-3: #767676; /* normal text */ + --text-4: #ababab; /* icon buttons and channels */ + --text-5: #cccccc; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d9d9d9; /* dark buttons when clicked */ + --bg-2: #e5e5e5; /* dark buttons */ + --bg-3: #d9d9d9; /* spacing, secondary elements */ + --bg-4: #f2f2f2; /* main background color */ + --hover: #d9d9d9; /* channels and buttons when hovered */ + --active: #cccccc; /* channels and buttons when selected */ + --message-hover: rgba(229, 229, 229, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-windows-95 b/build/base16-windows-95 index b39aaf5..e79003a 100644 --- a/build/base16-windows-95 +++ b/build/base16-windows-95 @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #1c1c1c; /* Bright Black */ - --base02: #383838; /* Grey */ - --base03: #545454; /* Brighter Grey */ - --base04: #7e7e7e; /* Bright Grey */ - --base05: #a8a8a8; /* White */ - --base06: #d2d2d2; /* Brighter White */ - --base07: #fcfcfc; /* Bright White */ - --base08: #fc5454; /* Red */ - --base09: #a85400; /* Orange */ - --base0A: #fcfc54; /* Yellow */ - --base0B: #54fc54; /* Green */ - --base0C: #54fcfc; /* Cyan */ - --base0D: #5454fc; /* Blue */ - --base0E: #fc54fc; /* Purple */ - --base0F: #00a800; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #54fc54; /* Green */ + --dnd-indicator: #fc5454; /* Red */ + --idle-indicator: #fcfc54; /* Yellow */ + --streaming-indicator: #fc54fc; /* Purple */ + + /* accent colors */ + --accent-1: #5454fc; /* links */ + --accent-2: #fc54fc; /* general unread/mention elements */ + --accent-3: #5454fc; /* accent buttons */ + --accent-4: #54fcfc; /* accent buttons when hovered */ + --accent-5: #54fc54; /* accent buttons when clicked */ + --mention: rgba(252, 84, 252, 0.1); + --mention-hover: rgba(252, 84, 252, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #a8a8a8; /* primary white-ish text */ + --text-2: #fcfcfc; /* headings */ + --text-3: #a8a8a8; /* normal text */ + --text-4: #7e7e7e; /* icon buttons and channels */ + --text-5: #545454; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #383838; /* dark buttons when clicked */ + --bg-2: #1c1c1c; /* dark buttons */ + --bg-3: #383838; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #383838; /* channels and buttons when hovered */ + --active: #545454; /* channels and buttons when selected */ + --message-hover: rgba(28, 28, 28, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-windows-95-light b/build/base16-windows-95-light index 4ee713a..1f213d7 100644 --- a/build/base16-windows-95-light +++ b/build/base16-windows-95-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fcfcfc; /* Black */ - --base01: #e0e0e0; /* Bright Black */ - --base02: #c4c4c4; /* Grey */ - --base03: #a8a8a8; /* Brighter Grey */ - --base04: #7e7e7e; /* Bright Grey */ - --base05: #545454; /* White */ - --base06: #2a2a2a; /* Brighter White */ - --base07: #000000; /* Bright White */ - --base08: #a80000; /* Red */ - --base09: #fcfc54; /* Orange */ - --base0A: #a85400; /* Yellow */ - --base0B: #00a800; /* Green */ - --base0C: #00a8a8; /* Cyan */ - --base0D: #0000a8; /* Blue */ - --base0E: #a800a8; /* Purple */ - --base0F: #54fc54; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #00a800; /* Green */ + --dnd-indicator: #a80000; /* Red */ + --idle-indicator: #a85400; /* Yellow */ + --streaming-indicator: #a800a8; /* Purple */ + + /* accent colors */ + --accent-1: #0000a8; /* links */ + --accent-2: #a800a8; /* general unread/mention elements */ + --accent-3: #0000a8; /* accent buttons */ + --accent-4: #00a8a8; /* accent buttons when hovered */ + --accent-5: #00a800; /* accent buttons when clicked */ + --mention: rgba(168, 0, 168, 0.1); + --mention-hover: rgba(168, 0, 168, 0.2); + + /* text colors */ + --text-0: #fcfcfc; /* text on colored elements */ + --text-1: #545454; /* primary white-ish text */ + --text-2: #000000; /* headings */ + --text-3: #545454; /* normal text */ + --text-4: #7e7e7e; /* icon buttons and channels */ + --text-5: #a8a8a8; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #c4c4c4; /* dark buttons when clicked */ + --bg-2: #e0e0e0; /* dark buttons */ + --bg-3: #c4c4c4; /* spacing, secondary elements */ + --bg-4: #fcfcfc; /* main background color */ + --hover: #c4c4c4; /* channels and buttons when hovered */ + --active: #a8a8a8; /* channels and buttons when selected */ + --message-hover: rgba(224, 224, 224, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-windows-highcontrast b/build/base16-windows-highcontrast index bc481b6..b205abd 100644 --- a/build/base16-windows-highcontrast +++ b/build/base16-windows-highcontrast @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #1c1c1c; /* Bright Black */ - --base02: #383838; /* Grey */ - --base03: #545454; /* Brighter Grey */ - --base04: #a2a2a2; /* Bright Grey */ - --base05: #c0c0c0; /* White */ - --base06: #dedede; /* Brighter White */ - --base07: #fcfcfc; /* Bright White */ - --base08: #fc5454; /* Red */ - --base09: #808000; /* Orange */ - --base0A: #fcfc54; /* Yellow */ - --base0B: #54fc54; /* Green */ - --base0C: #54fcfc; /* Cyan */ - --base0D: #5454fc; /* Blue */ - --base0E: #fc54fc; /* Purple */ - --base0F: #008000; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #54fc54; /* Green */ + --dnd-indicator: #fc5454; /* Red */ + --idle-indicator: #fcfc54; /* Yellow */ + --streaming-indicator: #fc54fc; /* Purple */ + + /* accent colors */ + --accent-1: #5454fc; /* links */ + --accent-2: #fc54fc; /* general unread/mention elements */ + --accent-3: #5454fc; /* accent buttons */ + --accent-4: #54fcfc; /* accent buttons when hovered */ + --accent-5: #54fc54; /* accent buttons when clicked */ + --mention: rgba(252, 84, 252, 0.1); + --mention-hover: rgba(252, 84, 252, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #c0c0c0; /* primary white-ish text */ + --text-2: #fcfcfc; /* headings */ + --text-3: #c0c0c0; /* normal text */ + --text-4: #a2a2a2; /* icon buttons and channels */ + --text-5: #545454; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #383838; /* dark buttons when clicked */ + --bg-2: #1c1c1c; /* dark buttons */ + --bg-3: #383838; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #383838; /* channels and buttons when hovered */ + --active: #545454; /* channels and buttons when selected */ + --message-hover: rgba(28, 28, 28, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-windows-highcontrast-light b/build/base16-windows-highcontrast-light index 555b360..e6a9b83 100644 --- a/build/base16-windows-highcontrast-light +++ b/build/base16-windows-highcontrast-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #fcfcfc; /* Black */ - --base01: #e8e8e8; /* Bright Black */ - --base02: #d4d4d4; /* Grey */ - --base03: #c0c0c0; /* Brighter Grey */ - --base04: #7e7e7e; /* Bright Grey */ - --base05: #545454; /* White */ - --base06: #2a2a2a; /* Brighter White */ - --base07: #000000; /* Bright White */ - --base08: #800000; /* Red */ - --base09: #fcfc54; /* Orange */ - --base0A: #808000; /* Yellow */ - --base0B: #008000; /* Green */ - --base0C: #008080; /* Cyan */ - --base0D: #000080; /* Blue */ - --base0E: #800080; /* Purple */ - --base0F: #54fc54; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #008000; /* Green */ + --dnd-indicator: #800000; /* Red */ + --idle-indicator: #808000; /* Yellow */ + --streaming-indicator: #800080; /* Purple */ + + /* accent colors */ + --accent-1: #000080; /* links */ + --accent-2: #800080; /* general unread/mention elements */ + --accent-3: #000080; /* accent buttons */ + --accent-4: #008080; /* accent buttons when hovered */ + --accent-5: #008000; /* accent buttons when clicked */ + --mention: rgba(128, 0, 128, 0.1); + --mention-hover: rgba(128, 0, 128, 0.2); + + /* text colors */ + --text-0: #fcfcfc; /* text on colored elements */ + --text-1: #545454; /* primary white-ish text */ + --text-2: #000000; /* headings */ + --text-3: #545454; /* normal text */ + --text-4: #7e7e7e; /* icon buttons and channels */ + --text-5: #c0c0c0; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d4d4d4; /* dark buttons when clicked */ + --bg-2: #e8e8e8; /* dark buttons */ + --bg-3: #d4d4d4; /* spacing, secondary elements */ + --bg-4: #fcfcfc; /* main background color */ + --hover: #d4d4d4; /* channels and buttons when hovered */ + --active: #c0c0c0; /* channels and buttons when selected */ + --message-hover: rgba(232, 232, 232, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-windows-nt b/build/base16-windows-nt index a37188e..11d17db 100644 --- a/build/base16-windows-nt +++ b/build/base16-windows-nt @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #000000; /* Black */ - --base01: #2a2a2a; /* Bright Black */ - --base02: #555555; /* Grey */ - --base03: #808080; /* Brighter Grey */ - --base04: #a1a1a1; /* Bright Grey */ - --base05: #c0c0c0; /* White */ - --base06: #e0e0e0; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #ff0000; /* Red */ - --base09: #808000; /* Orange */ - --base0A: #ffff00; /* Yellow */ - --base0B: #00ff00; /* Green */ - --base0C: #00ffff; /* Cyan */ - --base0D: #0000ff; /* Blue */ - --base0E: #ff00ff; /* Purple */ - --base0F: #008000; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #00ff00; /* Green */ + --dnd-indicator: #ff0000; /* Red */ + --idle-indicator: #ffff00; /* Yellow */ + --streaming-indicator: #ff00ff; /* Purple */ + + /* accent colors */ + --accent-1: #0000ff; /* links */ + --accent-2: #ff00ff; /* general unread/mention elements */ + --accent-3: #0000ff; /* accent buttons */ + --accent-4: #00ffff; /* accent buttons when hovered */ + --accent-5: #00ff00; /* accent buttons when clicked */ + --mention: rgba(255, 0, 255, 0.1); + --mention-hover: rgba(255, 0, 255, 0.2); + + /* text colors */ + --text-0: #000000; /* text on colored elements */ + --text-1: #c0c0c0; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #c0c0c0; /* normal text */ + --text-4: #a1a1a1; /* icon buttons and channels */ + --text-5: #808080; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #555555; /* dark buttons when clicked */ + --bg-2: #2a2a2a; /* dark buttons */ + --bg-3: #555555; /* spacing, secondary elements */ + --bg-4: #000000; /* main background color */ + --hover: #555555; /* channels and buttons when hovered */ + --active: #808080; /* channels and buttons when selected */ + --message-hover: rgba(42, 42, 42, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-windows-nt-light b/build/base16-windows-nt-light index 2ed530f..0e0f5af 100644 --- a/build/base16-windows-nt-light +++ b/build/base16-windows-nt-light @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #ffffff; /* Black */ - --base01: #eaeaea; /* Bright Black */ - --base02: #d5d5d5; /* Grey */ - --base03: #c0c0c0; /* Brighter Grey */ - --base04: #a0a0a0; /* Bright Grey */ - --base05: #808080; /* White */ - --base06: #404040; /* Brighter White */ - --base07: #000000; /* Bright White */ - --base08: #800000; /* Red */ - --base09: #ffff00; /* Orange */ - --base0A: #808000; /* Yellow */ - --base0B: #008000; /* Green */ - --base0C: #008080; /* Cyan */ - --base0D: #000080; /* Blue */ - --base0E: #800080; /* Purple */ - --base0F: #00ff00; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #008000; /* Green */ + --dnd-indicator: #800000; /* Red */ + --idle-indicator: #808000; /* Yellow */ + --streaming-indicator: #800080; /* Purple */ + + /* accent colors */ + --accent-1: #000080; /* links */ + --accent-2: #800080; /* general unread/mention elements */ + --accent-3: #000080; /* accent buttons */ + --accent-4: #008080; /* accent buttons when hovered */ + --accent-5: #008000; /* accent buttons when clicked */ + --mention: rgba(128, 0, 128, 0.1); + --mention-hover: rgba(128, 0, 128, 0.2); + + /* text colors */ + --text-0: #ffffff; /* text on colored elements */ + --text-1: #808080; /* primary white-ish text */ + --text-2: #000000; /* headings */ + --text-3: #808080; /* normal text */ + --text-4: #a0a0a0; /* icon buttons and channels */ + --text-5: #c0c0c0; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #d5d5d5; /* dark buttons when clicked */ + --bg-2: #eaeaea; /* dark buttons */ + --bg-3: #d5d5d5; /* spacing, secondary elements */ + --bg-4: #ffffff; /* main background color */ + --hover: #d5d5d5; /* channels and buttons when hovered */ + --active: #c0c0c0; /* channels and buttons when selected */ + --message-hover: rgba(234, 234, 234, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-woodland b/build/base16-woodland index 6c17a6e..1f154bc 100644 --- a/build/base16-woodland +++ b/build/base16-woodland @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #231e18; /* Black */ - --base01: #302b25; /* Bright Black */ - --base02: #48413a; /* Grey */ - --base03: #9d8b70; /* Brighter Grey */ - --base04: #b4a490; /* Bright Grey */ - --base05: #cabcb1; /* White */ - --base06: #d7c8bc; /* Brighter White */ - --base07: #e4d4c8; /* Bright White */ - --base08: #d35c5c; /* Red */ - --base09: #ca7f32; /* Orange */ - --base0A: #e0ac16; /* Yellow */ - --base0B: #b7ba53; /* Green */ - --base0C: #6eb958; /* Cyan */ - --base0D: #88a4d3; /* Blue */ - --base0E: #bb90e2; /* Purple */ - --base0F: #b49368; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #b7ba53; /* Green */ + --dnd-indicator: #d35c5c; /* Red */ + --idle-indicator: #e0ac16; /* Yellow */ + --streaming-indicator: #bb90e2; /* Purple */ + + /* accent colors */ + --accent-1: #88a4d3; /* links */ + --accent-2: #bb90e2; /* general unread/mention elements */ + --accent-3: #88a4d3; /* accent buttons */ + --accent-4: #6eb958; /* accent buttons when hovered */ + --accent-5: #b7ba53; /* accent buttons when clicked */ + --mention: rgba(187, 144, 226, 0.1); + --mention-hover: rgba(187, 144, 226, 0.2); + + /* text colors */ + --text-0: #231e18; /* text on colored elements */ + --text-1: #cabcb1; /* primary white-ish text */ + --text-2: #e4d4c8; /* headings */ + --text-3: #cabcb1; /* normal text */ + --text-4: #b4a490; /* icon buttons and channels */ + --text-5: #9d8b70; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #48413a; /* dark buttons when clicked */ + --bg-2: #302b25; /* dark buttons */ + --bg-3: #48413a; /* spacing, secondary elements */ + --bg-4: #231e18; /* main background color */ + --hover: #48413a; /* channels and buttons when hovered */ + --active: #9d8b70; /* channels and buttons when selected */ + --message-hover: rgba(48, 43, 37, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-xcode-dusk b/build/base16-xcode-dusk index e4e3cad..25519c1 100644 --- a/build/base16-xcode-dusk +++ b/build/base16-xcode-dusk @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #282b35; /* Black */ - --base01: #3d4048; /* Bright Black */ - --base02: #53555d; /* Grey */ - --base03: #686a71; /* Brighter Grey */ - --base04: #7e8086; /* Bright Grey */ - --base05: #939599; /* White */ - --base06: #a9aaae; /* Brighter White */ - --base07: #bebfc2; /* Bright White */ - --base08: #b21889; /* Red */ - --base09: #786dc5; /* Orange */ - --base0A: #438288; /* Yellow */ - --base0B: #df0002; /* Green */ - --base0C: #00a0be; /* Cyan */ - --base0D: #790ead; /* Blue */ - --base0E: #b21889; /* Purple */ - --base0F: #c77c48; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #df0002; /* Green */ + --dnd-indicator: #b21889; /* Red */ + --idle-indicator: #438288; /* Yellow */ + --streaming-indicator: #b21889; /* Purple */ + + /* accent colors */ + --accent-1: #790ead; /* links */ + --accent-2: #b21889; /* general unread/mention elements */ + --accent-3: #790ead; /* accent buttons */ + --accent-4: #00a0be; /* accent buttons when hovered */ + --accent-5: #df0002; /* accent buttons when clicked */ + --mention: rgba(178, 24, 137, 0.1); + --mention-hover: rgba(178, 24, 137, 0.2); + + /* text colors */ + --text-0: #282b35; /* text on colored elements */ + --text-1: #939599; /* primary white-ish text */ + --text-2: #bebfc2; /* headings */ + --text-3: #939599; /* normal text */ + --text-4: #7e8086; /* icon buttons and channels */ + --text-5: #686a71; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #53555d; /* dark buttons when clicked */ + --bg-2: #3d4048; /* dark buttons */ + --bg-3: #53555d; /* spacing, secondary elements */ + --bg-4: #282b35; /* main background color */ + --hover: #53555d; /* channels and buttons when hovered */ + --active: #686a71; /* channels and buttons when selected */ + --message-hover: rgba(61, 64, 72, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-yesterday b/build/base16-yesterday index 4aae7b1..a917ae0 100644 --- a/build/base16-yesterday +++ b/build/base16-yesterday @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #1d1f21; /* Black */ - --base01: #282a2e; /* Bright Black */ - --base02: #4d4d4c; /* Grey */ - --base03: #969896; /* Brighter Grey */ - --base04: #8e908c; /* Bright Grey */ - --base05: #d6d6d6; /* White */ - --base06: #efefef; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #c82829; /* Red */ - --base09: #f5871f; /* Orange */ - --base0A: #eab700; /* Yellow */ - --base0B: #718c00; /* Green */ - --base0C: #3e999f; /* Cyan */ - --base0D: #4271ae; /* Blue */ - --base0E: #8959a8; /* Purple */ - --base0F: #7f2a1d; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #718c00; /* Green */ + --dnd-indicator: #c82829; /* Red */ + --idle-indicator: #eab700; /* Yellow */ + --streaming-indicator: #8959a8; /* Purple */ + + /* accent colors */ + --accent-1: #4271ae; /* links */ + --accent-2: #8959a8; /* general unread/mention elements */ + --accent-3: #4271ae; /* accent buttons */ + --accent-4: #3e999f; /* accent buttons when hovered */ + --accent-5: #718c00; /* accent buttons when clicked */ + --mention: rgba(137, 89, 168, 0.1); + --mention-hover: rgba(137, 89, 168, 0.2); + + /* text colors */ + --text-0: #1d1f21; /* text on colored elements */ + --text-1: #d6d6d6; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #d6d6d6; /* normal text */ + --text-4: #8e908c; /* icon buttons and channels */ + --text-5: #969896; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #4d4d4c; /* dark buttons when clicked */ + --bg-2: #282a2e; /* dark buttons */ + --bg-3: #4d4d4c; /* spacing, secondary elements */ + --bg-4: #1d1f21; /* main background color */ + --hover: #4d4d4c; /* channels and buttons when hovered */ + --active: #969896; /* channels and buttons when selected */ + --message-hover: rgba(40, 42, 46, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-yesterday-bright b/build/base16-yesterday-bright index 3821b04..a17c6ac 100644 --- a/build/base16-yesterday-bright +++ b/build/base16-yesterday-bright @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #343d46; /* Black */ - --base01: #4f5b66; /* Bright Black */ - --base02: #65737e; /* Grey */ - --base03: #a7adba; /* Brighter Grey */ - --base04: #c0c5ce; /* Bright Grey */ - --base05: #dfe1e8; /* White */ - --base06: #eff1f5; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #d54e53; /* Red */ - --base09: #e78c45; /* Orange */ - --base0A: #e7c547; /* Yellow */ - --base0B: #b9ca4a; /* Green */ - --base0C: #70c0b1; /* Cyan */ - --base0D: #7aa6da; /* Blue */ - --base0E: #c397d8; /* Purple */ - --base0F: #9a806d; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #b9ca4a; /* Green */ + --dnd-indicator: #d54e53; /* Red */ + --idle-indicator: #e7c547; /* Yellow */ + --streaming-indicator: #c397d8; /* Purple */ + + /* accent colors */ + --accent-1: #7aa6da; /* links */ + --accent-2: #c397d8; /* general unread/mention elements */ + --accent-3: #7aa6da; /* accent buttons */ + --accent-4: #70c0b1; /* accent buttons when hovered */ + --accent-5: #b9ca4a; /* accent buttons when clicked */ + --mention: rgba(195, 151, 216, 0.1); + --mention-hover: rgba(195, 151, 216, 0.2); + + /* text colors */ + --text-0: #343d46; /* text on colored elements */ + --text-1: #dfe1e8; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #dfe1e8; /* normal text */ + --text-4: #c0c5ce; /* icon buttons and channels */ + --text-5: #a7adba; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #65737e; /* dark buttons when clicked */ + --bg-2: #4f5b66; /* dark buttons */ + --bg-3: #65737e; /* spacing, secondary elements */ + --bg-4: #343d46; /* main background color */ + --hover: #65737e; /* channels and buttons when hovered */ + --active: #a7adba; /* channels and buttons when selected */ + --message-hover: rgba(79, 91, 102, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-yesterday-night b/build/base16-yesterday-night index 2dfd5ac..fb82611 100644 --- a/build/base16-yesterday-night +++ b/build/base16-yesterday-night @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #343d46; /* Black */ - --base01: #4f5b66; /* Bright Black */ - --base02: #65737e; /* Grey */ - --base03: #a7adba; /* Brighter Grey */ - --base04: #c0c5ce; /* Bright Grey */ - --base05: #dfe1e8; /* White */ - --base06: #eff1f5; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #cc6666; /* Red */ - --base09: #de935f; /* Orange */ - --base0A: #f0c674; /* Yellow */ - --base0B: #b5bd68; /* Green */ - --base0C: #8abeb7; /* Cyan */ - --base0D: #81a2be; /* Blue */ - --base0E: #b294bb; /* Purple */ - --base0F: #a3685a; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #b5bd68; /* Green */ + --dnd-indicator: #cc6666; /* Red */ + --idle-indicator: #f0c674; /* Yellow */ + --streaming-indicator: #b294bb; /* Purple */ + + /* accent colors */ + --accent-1: #81a2be; /* links */ + --accent-2: #b294bb; /* general unread/mention elements */ + --accent-3: #81a2be; /* accent buttons */ + --accent-4: #8abeb7; /* accent buttons when hovered */ + --accent-5: #b5bd68; /* accent buttons when clicked */ + --mention: rgba(178, 148, 187, 0.1); + --mention-hover: rgba(178, 148, 187, 0.2); + + /* text colors */ + --text-0: #343d46; /* text on colored elements */ + --text-1: #dfe1e8; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #dfe1e8; /* normal text */ + --text-4: #c0c5ce; /* icon buttons and channels */ + --text-5: #a7adba; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #65737e; /* dark buttons when clicked */ + --bg-2: #4f5b66; /* dark buttons */ + --bg-3: #65737e; /* spacing, secondary elements */ + --bg-4: #343d46; /* main background color */ + --hover: #65737e; /* channels and buttons when hovered */ + --active: #a7adba; /* channels and buttons when selected */ + --message-hover: rgba(79, 91, 102, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-zenbones b/build/base16-zenbones index 56f2ace..a8a780e 100644 --- a/build/base16-zenbones +++ b/build/base16-zenbones @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #191919; /* Black */ - --base01: #de6e7c; /* Bright Black */ - --base02: #819b69; /* Grey */ - --base03: #b77e64; /* Brighter Grey */ - --base04: #6099c0; /* Bright Grey */ - --base05: #b279a7; /* White */ - --base06: #66a5ad; /* Brighter White */ - --base07: #bbbbbb; /* Bright White */ - --base08: #3d3839; /* Red */ - --base09: #e8838f; /* Orange */ - --base0A: #8bae68; /* Yellow */ - --base0B: #d68c67; /* Green */ - --base0C: #61abda; /* Cyan */ - --base0D: #cf86c1; /* Blue */ - --base0E: #65b8c1; /* Purple */ - --base0F: #8e8e8e; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #d68c67; /* Green */ + --dnd-indicator: #3d3839; /* Red */ + --idle-indicator: #8bae68; /* Yellow */ + --streaming-indicator: #65b8c1; /* Purple */ + + /* accent colors */ + --accent-1: #cf86c1; /* links */ + --accent-2: #65b8c1; /* general unread/mention elements */ + --accent-3: #cf86c1; /* accent buttons */ + --accent-4: #61abda; /* accent buttons when hovered */ + --accent-5: #d68c67; /* accent buttons when clicked */ + --mention: rgba(101, 184, 193, 0.1); + --mention-hover: rgba(101, 184, 193, 0.2); + + /* text colors */ + --text-0: #191919; /* text on colored elements */ + --text-1: #b279a7; /* primary white-ish text */ + --text-2: #bbbbbb; /* headings */ + --text-3: #b279a7; /* normal text */ + --text-4: #6099c0; /* icon buttons and channels */ + --text-5: #b77e64; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #819b69; /* dark buttons when clicked */ + --bg-2: #de6e7c; /* dark buttons */ + --bg-3: #819b69; /* spacing, secondary elements */ + --bg-4: #191919; /* main background color */ + --hover: #819b69; /* channels and buttons when hovered */ + --active: #b77e64; /* channels and buttons when selected */ + --message-hover: rgba(222, 110, 124, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/build/base16-zenburn b/build/base16-zenburn index 60a3381..d58806a 100644 --- a/build/base16-zenburn +++ b/build/base16-zenburn @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #383838; /* Black */ - --base01: #404040; /* Bright Black */ - --base02: #606060; /* Grey */ - --base03: #6f6f6f; /* Brighter Grey */ - --base04: #808080; /* Bright Grey */ - --base05: #dcdccc; /* White */ - --base06: #c0c0c0; /* Brighter White */ - --base07: #ffffff; /* Bright White */ - --base08: #dca3a3; /* Red */ - --base09: #dfaf8f; /* Orange */ - --base0A: #e0cf9f; /* Yellow */ - --base0B: #5f7f5f; /* Green */ - --base0C: #93e0e3; /* Cyan */ - --base0D: #7cb8bb; /* Blue */ - --base0E: #dc8cc3; /* Purple */ - --base0F: #000000; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #5f7f5f; /* Green */ + --dnd-indicator: #dca3a3; /* Red */ + --idle-indicator: #e0cf9f; /* Yellow */ + --streaming-indicator: #dc8cc3; /* Purple */ + + /* accent colors */ + --accent-1: #7cb8bb; /* links */ + --accent-2: #dc8cc3; /* general unread/mention elements */ + --accent-3: #7cb8bb; /* accent buttons */ + --accent-4: #93e0e3; /* accent buttons when hovered */ + --accent-5: #5f7f5f; /* accent buttons when clicked */ + --mention: rgba(220, 140, 195, 0.1); + --mention-hover: rgba(220, 140, 195, 0.2); + + /* text colors */ + --text-0: #383838; /* text on colored elements */ + --text-1: #dcdccc; /* primary white-ish text */ + --text-2: #ffffff; /* headings */ + --text-3: #dcdccc; /* normal text */ + --text-4: #808080; /* icon buttons and channels */ + --text-5: #6f6f6f; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #606060; /* dark buttons when clicked */ + --bg-2: #404040; /* dark buttons */ + --bg-3: #606060; /* spacing, secondary elements */ + --bg-4: #383838; /* main background color */ + --hover: #606060; /* channels and buttons when hovered */ + --active: #6f6f6f; /* channels and buttons when selected */ + --message-hover: rgba(64, 64, 64, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; } diff --git a/templates/default.mustache b/templates/default.mustache index c499d93..cf5eb2b 100644 --- a/templates/default.mustache +++ b/templates/default.mustache @@ -1,185 +1,94 @@ /** - * @name Stylix - * @author Stylix - * @version 0.0.0 - * @description Theme configured via NixOS or Home Manager. - **/ + * @name midnight + * @description A dark, rounded discord theme. + * @author refact0r + * @version 1.6.2 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + +/* customize things here */ :root { - --base00: #{{base00-hex}}; /* Black */ - --base01: #{{base01-hex}}; /* Bright Black */ - --base02: #{{base02-hex}}; /* Grey */ - --base03: #{{base03-hex}}; /* Brighter Grey */ - --base04: #{{base04-hex}}; /* Bright Grey */ - --base05: #{{base05-hex}}; /* White */ - --base06: #{{base06-hex}}; /* Brighter White */ - --base07: #{{base07-hex}}; /* Bright White */ - --base08: #{{base08-hex}}; /* Red */ - --base09: #{{base09-hex}}; /* Orange */ - --base0A: #{{base0A-hex}}; /* Yellow */ - --base0B: #{{base0B-hex}}; /* Green */ - --base0C: #{{base0C-hex}}; /* Cyan */ - --base0D: #{{base0D-hex}}; /* Blue */ - --base0E: #{{base0E-hex}}; /* Purple */ - --base0F: #{{base0F-hex}}; /* Magenta */ + /* font, change to 'gg sans' for default discord font*/ + --font: 'figtree'; - --primary-630: var(--base00); /* Autocomplete background */ - --primary-660: var(--base00); /* Search input background */ + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: #{{base0B-hex}}; /* Green */ + --dnd-indicator: #{{base08-hex}}; /* Red */ + --idle-indicator: #{{base0A-hex}}; /* Yellow */ + --streaming-indicator: #{{base0E-hex}}; /* Purple */ + + /* accent colors */ + --accent-1: #{{base0D-hex}}; /* links */ + --accent-2: #{{base0E-hex}}; /* general unread/mention elements */ + --accent-3: #{{base0D-hex}}; /* accent buttons */ + --accent-4: #{{base0C-hex}}; /* accent buttons when hovered */ + --accent-5: #{{base0B-hex}}; /* accent buttons when clicked */ + --mention: rgba({{base0E-rgb-r}}, {{base0E-rgb-g}}, {{base0E-rgb-b}}, 0.1); + --mention-hover: rgba({{base0E-rgb-r}}, {{base0E-rgb-g}}, {{base0E-rgb-b}}, 0.2); + + /* text colors */ + --text-0: #{{base00-hex}}; /* text on colored elements */ + --text-1: #{{base05-hex}}; /* primary white-ish text */ + --text-2: #{{base07-hex}}; /* headings */ + --text-3: #{{base05-hex}}; /* normal text */ + --text-4: #{{base04-hex}}; /* icon buttons and channels */ + --text-5: #{{base03-hex}}; /* muted channels/timestamps */ + + /* background and dark colors */ + --bg-1: #{{base02-hex}}; /* dark buttons when clicked */ + --bg-2: #{{base01-hex}}; /* dark buttons */ + --bg-3: #{{base02-hex}}; /* spacing, secondary elements */ + --bg-4: #{{base00-hex}}; /* main background color */ + --hover: #{{base02-hex}}; /* channels and buttons when hovered */ + --active: #{{base03-hex}}; /* channels and buttons when selected */ + --message-hover: rgba({{base01-rgb-r}}, {{base01-rgb-g}}, {{base01-rgb-b}}, 0.3); + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --list-item-transition: 0.2s ease; + --unread-bar-transition: 0.2s ease; + --moon-spin-transition: 0.4s ease; + --icon-spin-transition: 1s ease; + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; + --roundness-l: 20px; + --roundness-m: 16px; + --roundness-s: 12px; + --roundness-xs: 10px; + --roundness-xxs: 8px; + + /* direct messages moon icon */ + --discord-icon: none; + --moon-icon: block; + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); + --green-to-accent-3-filter: none; + --blurple-to-accent-3-filter: none; } -.theme-light, -.theme-dark, -.theme-darker, -.theme-midnight, -.visual-refresh { - --activity-card-background: var(--base01) !important; - --background-accent: var(--base03) !important; - --background-floating: var(--base02) !important; - --background-mentioned-hover: var(--base02) !important; - --background-mentioned: var(--base01) !important; - --background-message-highlight: var(--base01) !important; - --background-message-hover: var(--base00) !important; - --background-modifier-accent: var(--base02) !important; - --background-modifier-active: var(--base02) !important; - --background-modifier-hover: var(--base00) !important; - --background-modifier-selected: var(--base01) !important; - --background-primary: var(--base00) !important; - --background-secondary-alt: var(--base01) !important; - --background-secondary: var(--base01) !important; - --background-surface-highest: var(--base02) !important; - --background-surface-higher: var(--base02) !important; - --background-surface-high: var(--base02) !important; - --background-tertiary: var(--base00) !important; - --background-base-low: var(--base01) !important; - --background-base-lower: var(--base00) !important; - --background-base-lowest: var(--base00) !important; - --background-base-tertiary: var(--base00) !important; - --background-code: var(--base02) !important; - --background-mod-subtle: var(--base02) !important; - --bg-base-secondary: var(--base01) !important; - --bg-base-tertiary: var(--base00) !important; - --bg-brand: var(--base03) !important; - --bg-mod-faint: var(--base01) !important; - --bg-overlay-2: var(--base01) !important; - --bg-overlay-3: var(--base01) !important; - --bg-overlay-color-inverse: var(--base03) !important; - --bg-surface-raised: var(--base02) !important; - --bg-surface-overlay: var(--base00) !important; - --black: var(--base00) !important; - --blurple-50: var(--base0B) !important; - --border-faint: var(--base02) !important; - --brand-05a: var(--base01) !important; - --brand-10a: var(--base01) !important; - --brand-15a: var(--base01) !important; - --brand-260: var(--base0D) !important; - --brand-360: var(--base0D) !important; - --brand-500: var(--base0F) !important; - --brand-560: var(--base01) !important; - --button-danger-background: var(--base08) !important; - --button-filled-brand-background: var(--base0D) !important; - --button-filled-brand-background-hover: var(--base03) !important; - --button-filled-brand-text: var(--base00) !important; - --button-filled-brand-text-hover: var(--base05) !important; - --button-outline-positive-border: var(--base0B) !important; - --button-outline-danger-background-hover: var(--base08) !important; - --button-outline-danger-border-hover: var(--base08) !important; - --button-positive-background: var(--base0B) !important; - --button-positive-background-hover: var(--base03) !important; - --button-secondary-background: var(--base02) !important; - --button-secondary-background-hover: var(--base03) !important; - --card-primary-bg: var(--base02) !important; - --channel-icon: var(--base04) !important; - --channels-default: var(--base04) !important; - --channel-text-area-placeholder: var(--base03) !important; - --channeltextarea-background: var(--base01) !important; - --chat-background-default: var(--base02) !important; - --checkbox-background-checked: var(--base0D) !important; - --checkbox-border-checked: var(--base0D) !important; - --checkbox-background-default: var(--base02) !important; - --checkbox-border-default: var(--base03) !important; - --control-brand-foreground-new: var(--base0D) !important; - --control-brand-foreground: var(--base04) !important; - --custom-notice-text: var(--base01) !important; - --green-330: var(--base0B) !important; - --green-360: var(--base0B) !important; - --header-primary: var(--base04) !important; - --header-secondary: var(--base04) !important; - --home-background: var(--base00) !important; - --info-warning-foreground: var(--base0A) !important; - --input-background: var(--base02) !important; - --interactive-active: var(--base05) !important; - --interactive-hover: var(--base05) !important; - --interactive-muted: var(--base03) !important; - --interactive-normal: var(--base05) !important; - --mention-background: var(--base03) !important; - --mention-foreground: var(--base05) !important; - --menu-item-danger-active-bg: var(--base08) !important; - --menu-item-danger-hover-bg: var(--base08) !important; - --menu-item-default-hover-bg: var(--base03) !important; - --message-reacted-background: var(--base02) !important; - --message-reacted-text: var(--base05) !important; - --modal-background: var(--base01) !important; - --modal-footer-background: var(--base00) !important; - --notice-background-positive: var(--base0B) !important; - --notice-text-positive: var(--base01) !important; - --plum-23: var(--base02) !important; - --primary-130: var(--base05) !important; - --primary-300: var(--base05) !important; - --primary-500: var(--base02) !important; - --primary-600: var(--base00) !important; - --primary-630: var(--base01) !important; - --primary-660: var(--base00) !important; - --primary-800: var(--base00) !important; - --red-400: var(--base08) !important; - --red-460: var(--base08) !important; - --red-500: var(--base08) !important; - --red-630: var(--base08) !important; - --red: var(--base08) !important; - --scrollbar-auto-thumb: var(--base00) !important; - --scrollbar-thin-thumb: var(--base00) !important; - --status-danger-background: var(--base08) !important; - --status-danger: var(--base08) !important; - --status-negative: var(--base08) !important; - --status-positive-background: var(--base0B) !important; - --status-positive-text: var(--base0B) !important; - --status-positive: var(--base0B) !important; - --status-success: var(--base0B) !important; - --status-warning-background: var(--base03) !important; - --status-warning: var(--base09) !important; - --teal-430: var(--base0C) !important; - --text-brand: var(--base07) !important; - --text-feedback-positive: var(--base0B) !important; - --text-feedback-negative: var(--base08) !important; - --text-feedback-warning: var(--base09) !important; - --text-feedback-success: var(--base0B) !important; - --text-link: var(--base04) !important; - --text-muted: var(--base05) !important; - --text-negative: var(--base08) !important; - --text-normal: var(--base05) !important; - --text-positive: var(--base0B) !important; - --text-primary: var(--base05) !important; - --text-secondary: var(--base04) !important; - --text-tertiary: var(--base03) !important; - --text-warning: var(--base09) !important; - --textbox-markdown-syntax: var(--base05) !important; - --theme-base-color: var(--base00) !important; - --white: var(--base05) !important; - --yellow-360: var(--base0A) !important; - --yellow-300: var(--base0A) !important; +/* Selected chat/friend text */ +.selected_f5eb4b, +.selected_f6f816 .link_d8bfb3 { + color: var(--text-0) !important; + background: var(--accent-3) !important; } -/* Syntax Highlighting */ -.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; } -.hljs-comment, .hljs-meta { color: var(--base03) !important; } -.hljs-subst { color: var(--base0D) !important; } -.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; } -.hljs-keyword, .hljs-variable { color: var(--base08) !important; } -.hljs-built_in { color: var(--base09) !important; } -.hljs-title { color: var(--base0E) !important; } - -/* Visual Refresh Specifics */ -.visual-refresh { - .bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; } - .chatContent_f75fb0 { background-color: var(--base01) !important; } - .searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; } +.selected_f6f816 .link_d8bfb3 * { + color: var(--text-0) !important; + fill: var(--text-0) !important; }