go back to midnight
This commit is contained in:
parent
67cd0ac4c1
commit
c2c1437da7
306 changed files with 26010 additions and 53856 deletions
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,185 +1,94 @@
|
|||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
* @name midnight
|
||||
* @description A dark, rounded discord theme.
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in 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;
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue