Skip to content

Discord Cyberpunk Neon Transparent by roboron

Screenshot of Discord Cyberpunk Neon Transparent
Homepage Write a review Install Get Stylus

Details

Authorroboron

LicenseCC-BY-SA 4.0

Categorydiscord

Created

Updated

Code size10 kB

Code checksumeec6f4f3

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Cyberpunk Neon color scheme is a cyberpunk/outrun color scheme based on the Cyberpunk Neon Color Palette.

To change the background, edit the URL inside.

Notes

Fixed for April 2025 discord update.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           Discord Cyberpunk Neon Transparent
@name:es        Discord Cyberpunk Neon Transparente
@description    Cyberpunk Neon theme for Discord, transparent version (custom background allowed)
@description:es Tema Cyberpunk Neon para Discord, versión con transparencia (fondo personalizado permitido)
@namespace      github.com/Roboron3042/Cyberpunk-Neon
@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 BACKGROUND
    To change the background replace the URL in background-image in .appMount-3lHmkl with your prefered one 
    
	IMPORTANT: Some hosting sites may not work, so we recommend imgur to upload your desired image.
*/

.base_c48ade {
    background-image: url(https://i.imgur.com/gmUYbu0.jpeg) !important;
    background-color: rgba(9, 24, 51, 0) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* 13. TRANSPARENCY
	You can modify the transparency changing the values of the following parameters */
.theme-dark {
	--background-base-lowest: rgba(0, 11, 30, .7)!important;
	--background-base-lower: rgba(0, 11, 30, .4) !important;
/* 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;
}
	--background-base-lower: rgba(0, 11, 30, .4) !important;
	--background-base-low: rgba(0, 11, 30, .4) !important;
    --background-primary: rgba(9, 24, 51, ....

Reviews

No reviews yet.