Cyberpunk Neon theme for Discord
/* ==UserStyle==
@name Discord Cyberpunk Neon
@name:es Discord Cyberpunk Neon
@description Cyberpunk Neon theme for Discord
@description:es Tema Cyberpunk Neon para Discord
@namespace https://greasyfork.org/en/users/109012
@author @Roboron3042 <robertoms258 at gmail dot com>
@homepageURL https://github.com/Roboron3042/Cyberpunk-Neon
@supportURL https://github.com/Roboron3042/Cyberpunk-Neon/issues
@version 4
@license CC-BY-SA 4.0
@preprocessor stylus
==/UserStyle== */
@-moz-document url-prefix("https://discord.com/") {
/* Custom CSS goes here */
/* Main Index
0. Colorscheme
1. Miscelaneus
*/
/* 0. Colorscheme */
html {
--background: #000b1e;
--background-text: #091833;
--button: #133e7c;
--button-alt: #0b2956;
--button-alt-svg: invert(15%) sepia(81%) saturate(952%) hue-rotate(186deg) brightness(88%) contrast(102%);
--text: #0abdc6;
--text-svg: invert(50%) sepia(85%) saturate(1552%) hue-rotate(144deg) brightness(101%) contrast(92%);
--text-alt: rgba(10, 189, 198, .6);
--border: rgba(10, 189, 198, .25);
--accent: #ea00d9;
--accent-svg: invert(17%) sepia(98%) saturate(7408%) hue-rotate(299deg) brightness(106%) contrast(108%);
--select: #711c91;
--select-alt: #321959;
--green: #00ff00;
}
.theme-dark {
--activity-card-background: #000b1e !important;
--app-border-frame: var(--border) !important;
--background-accent: #321959 !important;
--background-base-lowest: #000b1e !important;
--background-base-lower: var(--background-text) !important;
--background-base-low: var(--background-text) !important;
--background-floating: #091833 !important;
--background-nested-floating: #000b1e !important;
--background-mentioned-hover: #321959 !important;
--background-mentioned: rgba(50, 25, 89, .6) !important;
--background-message-hover: #091833 !important;
--background-mobile-primary: #091833 !important;
--background-mobile-secondary: #000b1e !important;
--background-mod-normal: var(--select-alt) !important;
--background-mod-subtle: var(--button-alt) !important;
--background-modifier: var(--button) !important;
--background-modifier-accent: rgba(10, 189, 198, .4) !important;
--background-modifier-active: rgba(113, 28, 145, .6) !important;
--background-modifier-hover: #0b2956 !important;
--background-modifier-selected: rgba(113, 28, 145, .6) !important;
--background-primary: #091833 !important;
--background-secondary-alt: #091833 !important;
--background-secondary: #000b1e !important;
--background-surface-high: var(--background-text) !important;
--background-surface-higher: var(--background) !important;
--background-surface-highest: var(--button) !important;
--background-tertiary: #000b1e !important;
--bg-brand: #321959 !important;
--bg-base-tertiary: #000b1e !important;
--bg-mod-subtle: var(--button-alt) !important;
--bg-surface-raised: var(--button-alt);
--bg-mod-strong: var(--button-alt) !important;
--bg-overlay-app-frame: #000b1e;
--border-subtle: var(--border) !important;
--button-secondary-text: var(--text) !important;
--button-secondary-background: var(--button-alt) !important;
--button-secondary-background-hover: var(--select-alt) !important;
--button-filled-brand-background: var(--button) !important;
--button-filled-brand-background-hover: var(--select-alt) !important;
--button-outline-danger-text: red !important;
--button-outline-danger-text-hover: red !important;
--button-outline-danger-background: var(--button) !important;
--button-outline-danger-background-hover: var(--select-alt) !important;
--button-danger-background: var(--button) !important;
--button-danger-background-hover: var(--select-alt) !important;
--brand-experiment: #133e7c !important;
--brand-experiment-30a: transparent !important;
--brand-experiment-200: #00ff00 !important;
--brand-experiment-360: #0abdc6 !important;
--brand-experiment-500: #321959 !important;
--brand-experiment-560: #321959 !important;
--brand-experiment-600: #321959 !important;
--brand-360: var(--accent) !important;
--brand-500: var(--select-alt) !important;
--channel-icon: var(--text) !important;
--channels-default: rgba(10, 189, 198, .7) !important;
--channeltextarea-background: #133e7c !important;
--chat-background-default: var(--button-alt) !important;
--chat-text-muted: var(--text-alt) !important;
--checkbox-background-checked: var(--select) !important;
--checkbox-border-default: var(--border) !important;
--control-brand-foreground-new: #ea00d9 !important;
--custom-channel-members-bg: var(--background) !important;
--deprecated-card-bg: rgba(0, 11, 30, .6) !important;
--deprecated-card-editable-bg: rgba(19, 62, 124, .2) !important;
--deprecated-panel-background: #091833 !important;
--deprecated-quickswitcher-input-background: #133e7c !important;
--deprecated-quickswitcher-input-placeholder: rgba(10, 189, 198, .3) !important;
--deprecated-store-bg: #091833 !important;
--deprecated-text-input-bg: #0b2956 !important;
--deprecated-text-input-border-disabled: #202225 !important;
--deprecated-text-input-border-hover: #ea00d9 !important;
--deprecated-text-input-border: #0abdc6 !important;
--deprecated-text-input-prefix: #dcddde !important;
--divider-color: var(--accent) !important;
--divider-subtle: var(--border) !important;
--elevation-high: 0 8px 16px rgba(0,0,0,0.24) !important;
--elevation-low: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05) !important;
--guild-header-text-shadow: 0 1px 1px rgba(0,0,0,0.4) !important;
--green-360: var(--button-alt) !important;
--header-primary: var(--accent) !important;
--header-secondary: #0abdc6 !important;
--icon-primary: var(--text) !important;
--icon-secondary: var(--accent) !important;
--icon-tertiary: var(--text-alt) !important;
--info-warning-foreground: #ea00d9 !important;
--input-border: var(--border) !important;
--interactive-active: #ea00d9 !important;
--interactive-hover: #ea00d9 !important;
--interactive-muted: rgba(10, 189, 198, .6) !important;
--interactive-normal: #0abdc6 !important;
--logo-primary: #ea00d9 !important;
--plum-23: var(--background) !important;
--scrollbar-auto-scrollbar-color-thumb: #0abdc6 !important;
--scrollbar-auto-scrollbar-color-track: #000b1e !important;
--scrollbar-auto-thumb: #0abdc6 !important;
--scrollbar-auto-track: #000b1e !important;
--scrollbar-thin-thumb: #0abdc6 !important;
--scrollbar-thin-track: transparent !important;
--spoiler-revealed-background: #00ff00 !important;
--spoiler-hidden-background: #00ff00 !important;
--status-danger: green !important;
--status-positive: #00ff00;
--text-default: var(--accent) !important;
--text-positive: #00ff00 !important;
--text-warning: #f57800 !important;
--text-link: #ea00d9 !important;
--text-brand: var(--accent) !important;
--text-muted: rgba(10, 189, 198, .6) !important;
--text-normal: #0abdc6 !important;
--text-primary: var(--text) !important;
--text-secondary: var(--text-alt) !important;
--text-tertiary: var(--text-alt) !important;
--textbox-markdown-syntax: #ea00d9 !important;
--user-profile-overlay-background: var(--background) !important;
--white: var(--text) !important;
--white-500: var(--text) !important;
--text-feedback-critical: red !important;
--text-danger: red !important;
}
/* 1. Miscelaneus */
/* 1.1. Windows bar */
.winButton-iRh8-Z:hover {
background-color: #133e7c;
}
.appMount-3lHmkl {
background-color: #000b1e;
}
/* 1.2. Mac OS bar */
.typeMacOS-3EmCyP {
background-color: #000b1e;
}
.macButtonClose-MwZ2nf {
background-color: #ff0000;
}
.macButtonMinimize-3EJ6wo {
background-color: #f57800;
}
.macButtonMaximize-2FMHAO {
background-color: #00ff00;
}
/* 1.3. Selection */
::selection,
.clipboard-input-inner input::selection,
.CodeMirror .CodeMirror-selected,
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection,
.note textarea::selection {
color: #0abdc6;
background: #711c91;
}
/* 1.4. Scroll bar */
.da-scrollerWrap .da-scroller::-webkit-scrollbar-thumb {
background-color: #0abdc6 !important;
border-color: #091833 !important;
}
.theme-dark .da-scrollerWrap .da-scroller::-webkit-scrollbar-track-piece {
background-color: #000b1e !important;
border-color: #091833 !important;
}
/* 1.5. Placeholder text */
::-webkit-input-placeholder {
color: rgba(10, 189, 198, .6) !important;
}
textarea::placeholder {
color: var(--text-alt) !important;
}
/* Other */
.divider__908e2 {
--divider-color: var(--accent) !important;
}
}