Dark and light, very customizable theme for Discord.
Dark-Discord by vednoc
Imported and mirrored from https://gitlab.com/vednoc/dark-discord/raw/master/discord.user.styl
Details
Authorvednoc
LicenseMIT
Categorydiscord.com
Created
Updated
Size62 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
After you install this userstyle, you can configure it from configuration menu in Stylus’ popout menu by clicking on the icon on your toolbar.
There are over 30 customizable options, including colors, so you can customize Discord in a way that it's unique to you.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Dark-Discord
@namespace gitlab.com/vednoc/dark-discord
@description Dark and light, very customizable theme for Discord.
@author vednoc <vednoc@pm.me> (https://github.com/vednoc)
@homepageURL https://gitlab.com/vednoc/dark-discord
@supportURL https://gitlab.com/vednoc/dark-discord/issues
@version 0.63.0
@license MIT
@preprocessor stylus
@var checkbox cg_debug 'Color generator debug' 0
@var select cg_theme 'Base color-scheme toggle' {
'Custom colors *': 'custom',
'Dark blue (old) ': 'old',
'Dark gray (new) ': 'new',
}
@var color cg_bg 'Base background color' #1f232a
@var color cg_fg 'Base foreground color' #eeeeee
@var color cg_ac 'Base accent color ' #7289da
@var range _bg_a 'Adjust background color tones' [0, -25, 25, 0.1, '%']
@var range _fg_a 'Adjust foreground color tones' [0, -25, 25, 0.1, '%']
@var range _ac_a 'Adjust accent color tones ' [0, 0, 25, 1, '%']
@var range _sc_a 'Adjust syntax color tones ' [0, 0, 25, 1, '%']
@var range e_size 'Emotes: Reduce emote size' [32, 24, 64, 8, 'px']
@var checkbox e_reaction 'Emotes: Larger reaction emotes' 1
@var checkbox chat_short 'Shorter chat mode' 0
@var text chat_short_w 'Shorter chat width' 800px
@var checkbox guild_avatar 'Move user menu to guilds bar' 0
@var checkbox sb_short 'Smaller sidebar mode' 1
@var text sb_short_s 'Smaller sidebar mode size' 64px
@var text sb_short_w 'Smaller sidebar mode breakpoint' 940px
@var text sb_short_d 'Smaller sidebar mode hover delay' 1000ms
@var checkbox g_minimize 'Minimize guild area width' 1
@var text g_minimize_w 'Minimize guild area breakpoint' 700px
@var checkbox g_icons 'Small guild icons' 0
@var text g_icons_s 'Small guild icon size' 32px
@var select compact 'Compact mode' {
'Hide guilds ': 'guilds',
'Hide sidebar ': 'sidebar',
'Hide both *': 'both',
}
@var text compact_w 'Compact mode breakpoint' 540px
@var range avatar_size 'Avatar size in info menus' [80, 80, 128, 16, 'px']
@var checkbox avatar_c_m 'Enable avatar context menu in profiles' 1
@var checkbox code_lines 'Enable code line numbers' 1
@var checkbox hide_dl_btn 'Hide "Download Apps" button' 1
@var text f_ui 'UI font' ''font_name''
@var text f_code 'Monospace font' ''font_name''
@var text b_radius 'Border radius for menus' 4px
@var color _red 'Base red color ' #f07178
@var color _orange 'Base orange color ' #f78c6c
@var color _yellow 'Base yellow color ' #ffcb6b
@var color _green 'Base green color ' #aede62
@var color _cyan 'Base cyan color ' #89ddff
@var color _blue 'Base blue color ' #82aaff
@var color _magenta 'Base magenta color ' #9a91ea
@var color _violet 'Base violet color ' #c792ea
@var color _gray 'Gray color ' #bbbbbb
@var color _white 'White color ' #ffffff
@var color _sh 'Shadow color ' #00000025
==/UserStyle== */
// Class mixin.
// TODO: Add examples.
a(args, prefix = '', attr = 'class', i = '') {
lst ?= ''
dbg ?= args
len ?= length(args)
u = unquote
// Check arguments.
if args[0] == 0 {
error('Must provide valid arguments. Length of arguments is: ' + len)
}
// Process.
for v, k in args {
content: s('%s --- %s', k, v)
// Iterate over arguments.
if k {
// { '--%s' % k }: 'argument: ' + args[k]
if k == length(args) - 1 {
lst += s('[%s*=%s]', u(attr), v)
} else {
lst += s('[%s*=%s], ', u(attr), v)
}
} else {
// { '--%s' % k }: 'argument: ' + args[k]
if k == length(args) - 1 {
lst += s('[%s*=%s]', u(attr), v)
} else {
lst += s('[%s*=%s], ', u(attr), v)
}
}
}
// Combine.
list = (i != '') ? s('%s%s', u(i), u(lst)) : lst
dbg = list
// Generate.
{ list } {
{ block }
}
}
// Old class mixin.
/// Use it instead of: [class*='foo_bar']
w(prefix, args, attr = class, sel = '*=', i = ' ') {
r = unquote
list = ''
selectors = (prefix == '>' || prefix == '~' || prefix == '+')
prefix = (selectors) ? s('%s ', r(prefix)) : (prefix == '') ? '' : prefix
inline_cases = (prefix == '/' || prefix == '../' || prefix == '~/' || prefix == '')
inline = ((selectors || inline_cases) && length(args) == 1) ? '' : i
attr = (attr == 0) ? 'class' : (attr == '_') ? '' : attr
sel = (sel == 0) ? '*=' : (sel == '_') ? '' : sel
// dbg_{ attr }: s('%s ::: %s ::: %s ::: %s', prefix, attr, inline, args)
for item, index in args {
// dbg: '' + item + ' :::::: ' + index
if index {
if (inline == '0') {
list += s(' [%s%s%s]', r(attr), r(sel), item)
} else if (inline == ' ') {
list += s('%s%s[%s%s%s],', r(inline), r(prefix), r(attr), r(sel), item)
} else {
list += s('[%s%s%s]', r(attr), r(sel), item)
}
} else {
if (inline == '0') {
list += s('%s[%s%s%s]', r(prefix), r(attr), r(sel), item)
} else if (inline != '') {
list += s('%s%s[%s%s%s],', r(inline), r(prefix), r(attr), r(sel), item)
} else {
list += s('%s[%s%s%s]', r(prefix), r(attr), r(sel), item)
}
}
}
list = replace(',$', '', list)
// dbg_list: '' + list
{ list } {
{ block }
}
}
// Colors mixin.
/// All colors: `c: fg bd bg`
/// Only border-color: `c: 0 bd`
c(x, y = 0, z = 0, xi = 1, yi = 1, zi = 1) {
if x != 0 && x != '_' { color: xi is 0 ? x : x i }
if y != 0 && y != '_' { border-color: yi is 0 ? y : y i }
if z != 0 && z != '_' { background-color: zi is 0 ? z : z i }
}
// SVG colors.
v(x, y = 0, xi = 1, yi = 1) {
if x != 0 && x != '_' { fill: xi is 0 ? x : x i }
if y != 0 && y != '_' { stroke: yi is 0 ? y : y i }
}
// Pseudo-element builder.
P(a, _z = 0, _c = '', _p = absolute) {
z-index: _z
content: _c
position: _p
if a[0] is a 'call' or a[0] is a 'unit' { top: a[0] }
if a[1] is a 'call' or a[1] is a 'unit' { right: a[1] }
if a[2] is a 'call' or a[2] is a 'unit' { bottom: a[2] }
if a[3] is a 'call' or a[3] is a 'unit' { left: a[3] }
}
// Raw RGB mixin.
/// Convert RGBA (if t = 1) or HEX to raw rrr-ggg-bbb format.
to_rgb(input, t = 0) {
if (t) {
unquote(substr(join(',', slice(split(',', s('%s', input)), 0, -1)), 5))
} else {
unquote(slice(s('%s', rgba(input, 0)), 5, -3))
}
}
// Raw RGBA mixin.
/// Combine `*-rgb` vars and alpha value.
to_rgba(input, alpha) {
unquote(s('rgba(var(--%s-rgb), %s)', unquote(input), alpha))
}
// Border radius mixin.
r() { border-radius: arguments }
// Box-shadow mixin.
b() { box-shadow: arguments }
/// Remove old browser prefixes.
vendors = official
/// Feat -> Base color-scheme toggle. #32
if (cg_theme == 'custom') {
BG = cg_bg
FG = cg_fg
AC = cg_ac
} else if (cg_theme == 'old') {
BG = #1f232a
FG = #eeeeee
AC = #7289da
} else if (cg_theme == 'new') {
BG = #292929
FG = #e6e6e6
AC = #d47d3f
}
/// Helpers.
t = transparent
i = !important
BA = _bg_a
FA = _fg_a
AA = _ac_a
SA = _sc_a
//w = W // TODO: Developer only.
// Color generator.
/// NOTE: Fix the scope to avoid conflicts.
/{
g = global
/// Generator rules.
if (dark(BG)) {
a1 = (AA + 15); a2 = (AA + 30); a3 = (AA + 45); a4 = (AA + 65); a5 = (AA + 75)
s1 = (SA + 15); s2 = (SA + 30); s3 = (SA + 45); s4 = (SA + 65); s5 = (SA + 75)
b1 = (BA + 10); b2 = (BA - 05); b3 = (BA - 10); b4 = (BA - 15); b5 = (BA - 20)
f1 = (FA - 10); f2 = (FA + 10); f3 = (FA + 20); f4 = (FA + 30); f5 = (FA + 40)
} else {
a1 = (AA + 15); a2 = (AA + 30); a3 = (AA + 45); a4 = (AA + 65); a5 = (AA + 75)
s1 = (SA + 15); s2 = (SA + 30); s3 = (SA + 45); s4 = (SA + 65); s5 = (SA + 75)
b1 = (BA - 10); b2 = (BA + 08); b3 = (BA + 16); b4 = (BA + 24); b5 = (BA + 32)
f1 = (FA - 05); f2 = (FA - 10); f3 = (FA - 15); f4 = (FA - 20); f5 = (FA - 30)
}
/// Generate tones for base colors.
C = {
bg: {
'0': darken(BG, b1)
'1': darken(BG, 0%)
'2': darken(BG, b2)
'3': darken(BG, b3)
'4': darken(BG, b4)
'5': darken(BG, b5)
},
fg: {
'0': darken(FG, f1)
'1': darken(FG, 0%)
'2': darken(FG, f2)
'3': darken(FG, f3)
'4': darken(FG, f4)
'5': darken(FG, f5)
},
ac: {
'0': mix(darken(BG, 0%), AC, 0%)
'1': mix(darken(BG, 40%), AC, a1)
'2': mix(darken(BG, 40%), AC, a2)
'3': mix(darken(BG, 40%), AC, a3)
'4': mix(darken(BG, 65%), AC, a4)
'5': mix(darken(BG, 50%), AC, a5)
},
b1: {
'0': spin(_red, 0deg - 0%)
'1': spin(_red, 15deg - s1)
'2': spin(_red, 30deg - s2)
'3': mix(darken(BG, 20%), _red, s3)
'4': mix(darken(BG, 40%), _red, s4)
'5': mix(darken(BG, 40%), _red, s5)
},
b2: {
'0': spin(_orange, 0deg - 0%)
...