Dark and light theme for GitLab and self-hosted GitLab instances.
Dark-GitLab by vednoc
Imported and mirrored from https://gitlab.com/vednoc/dark-gitlab/raw/master/gitlab.user.styl
Details
Authorvednoc
LicenseMIT
Categorygitlab.com
Created
Updated
Size188 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.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-GitLab
@namespace gitlab.com/vednoc/dark-gitlab
@description Dark and light theme for GitLab and self-hosted GitLab instances.
@author vednoc <vednoc@pm.me> (https://gitlab.com/vednoc)
@homepageURL https://gitlab.com/vednoc/dark-gitlab
@supportURL https://gitlab.com/vednoc/dark-gitlab/issues
@preprocessor stylus
@version 2.0.0-rc.14
@license MIT
@var select cg_theme 'Base color-scheme toggle' {
'Custom colors *': 'custom',
'Dark blue (old) ': 'old-colors',
'Dark gray (new) ': 'new-colors',
'Breeze Dark ': 'breeze-dark',
'GitHub Dark ': 'github-dark',
'GitHub Dark Mode ': 'github-dark-mode',
'Gruvbox Dark Soft ': 'gruvbox-dark-soft',
'Gruvbox Dark Medium ': 'gruvbox-dark-medium',
'Gruvbox Dark Hard ': 'gruvbox-dark-hard',
'Solarized Dark ': 'solarized-dark',
'Dracula ': 'dracula',
'Nord Dark ': 'nord-dark',
'Arc Dark ': 'arc-dark',
'Moonlight ': 'moonlight',
'Monokai ': 'monokai',
'Horizon ': 'horizon',
'Doom One ': 'doom-one',
'Deep Dark ': 'deep-dark',
'Brave Dark ': 'brave-dark',
'Twilight ': 'twilight',
'Ubuntu ': 'ubuntu',
}
@var color cg_bg 'Base background color' #292929
@var color cg_fg 'Base foreground color' #e6e6e6
@var color cg_ac 'Base accent color ' #d47d3f
@var range cg_sat 'Adjust saturation of syntax colors' [0, -50, 40, 0.01]
@var range cg_lig 'Adjust lightness of syntax colors' [0, -30, 30, 0.01]
@var color _inverse 'Button inverse color ' #ffffff
@var color _shadow 'Shadow color ' #00000040
@var checkbox pcs_enable 'Apply when `(prefers-color-scheme: dark)` is enabled' 0
@var text ui_font 'Custom UI font' '"font_name"'
@var text mono_font 'Custom mono font' '"font_name"'
@var text emoji_font 'Custom emoji font' '"font_name"'
@var text a_radius 'Avatars: Custom border radius' 25%
@var range md_img_o 'Markdown: Default image opacity' [1, 0.0, 1, 0.01]
@var checkbox ic_invert 'Chromium: Invert icons in Shadow DOM' 1
@var checkbox img_invert 'Invert illustrations to dark colors' 1
@var checkbox nb_height 'Navbar: Increase height' 1
@var checkbox nb_canary 'Navbar: Show canary badge' 1
@var checkbox c_hl_none 'Code: Use theme colors for "none" syntax hl theme' 1
@var checkbox c_ide 'Code: Enable IDE styles' 1
@var checkbox c_monaco 'Code: Enable Monaco Editor styles' 1
@var checkbox pipelines 'CI/CD: Compact pipelines' 0
@var checkbox dgl_alert 'Profile: Enable Dark-GitLab announcements' 0
@var checkbox sb_enable 'Global: Enable theme scrollbars' 1
==/UserStyle== */
/*!
* NOTE: Modifying the code will put auto-update feature of Stylus on pause in
* order to preserve your local changes. That means you need to manually update
* Dark-GitLab and re-do your modifications in order to stay up-to-date.
*
* A way to add domains without modifying the code doesn't exist yet.
* Relevant issue: https://github.com/openstyles/stylus/issues/307
*
* Make sure you have the latest version before submitting bug reports.
*/
// {{{ Helpers.
t = transparent
i = !important
vendors = official
// Convert colors to HSLA format.
/// NOTE: This is done just for consistency of generated colors.
to_hsla(input) {
$h = {}
$h.hue = unquote(split('deg', '%s' % ceil(hue(input), 2))[0])
$h.saturation = ceil(saturation(input), 2)
$h.lightness = ceil(lightness(input), 2)
s('hsla(%s,%s,%s,1)', $h.hue, $h.saturation, $h.lightness)
}
// SVG-friendly colors mixin.
/// NOTE: Compiler does not like HSLA format, so we convert back to HEX.
to_svg(input) {
s('\%23%s', unquote(substr(s('%s', convert(input)), 1, 6)))
}
// Color mixin.
/// All colors: `c: fg bg bg`
/// Only border-color: `c: 0 bg`
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 mixin.
/// Same usage as `c` mixin.
g(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 }
}
// Border radius mixin.
rad() { border-radius: arguments }
// Box-shadow mixin.
b() { box-shadow: arguments }
// }}}
/{ // {{{ Color generator.
// Color-scheme picker.
ColorSchemes = {
'custom': { BG: cg_bg, FG: cg_fg, AC: cg_ac }
'old-colors': { BG: #1f232a, FG: #eeeeee, AC: #7289da }
'new-colors': { BG: #292929, FG: #e6e6e6, AC: #d47d3f }
'breeze-dark': { BG: #232629, FG: #eff0f1, AC: #3daee9 }
'github-dark': { BG: #181818, FG: #e6e6e6, AC: #4f8cc9 }
'github-dark-mode': { BG: #0d1117, FG: #c9d1d9, AC: #58a6ff }
'gruvbox-dark-soft': { BG: #32302f, FG: #fbf1c7, AC: #d65d0e }
'gruvbox-dark-medium': { BG: #282828, FG: #fbf1c7, AC: #d65d0e }
'gruvbox-dark-hard': { BG: #1c2021, FG: #fbf1c7, AC: #d65d0e }
'solarized-dark': { BG: #03303c, FG: #bcc5c5, AC: #859900 }
'dracula': { BG: #282a36, FG: #f8f8f2, AC: #bd93f9 }
'nord-dark': { BG: #2e3440, FG: #eceff4, AC: #5e81ac }
'arc-dark': { BG: #343944, FG: #c1c8d1, AC: #5294e2 }
'moonlight': { BG: #1e2030, FG: #c8d3f5, AC: #82aaff }
'monokai': { BG: #272822, FG: #e8e8e3, AC: #fd9720 }
'horizon': { BG: #1c1e26, FG: #d5c1ac, AC: #E95378 }
'doom-one': { BG: #21242b, FG: #bbc2cf, AC: #51afef }
'deep-dark': { BG: #111111, FG: #eff0f1, AC: #00adee }
'brave-dark': { BG: #222222, FG: #d6d6d6, AC: #f96234 }
'twilight': { BG: #171717, FG: #f7f7f7, AC: #8f9d6a }
'ubuntu': { BG: #2c071a, FG: #f2f1ef, AC: #ef7847 }
}
// Select active color-scheme.
for color-scheme in ColorSchemes {
if (color-scheme == cg_theme) {
// main { dbg: s('%s %s', color-scheme, cg_theme) }
define('BG', ColorSchemes[color-scheme].BG, global)
define('FG', ColorSchemes[color-scheme].FG, global)
define('AC', ColorSchemes[color-scheme].AC, global)
define('ac', var(--ac), global)
}
}
// Color values and hues.
// NOTE: List with anonymous hashes.
colors = (
{ key: bg, color: BG } \
{ key: fg, color: FG } \
{ key: v0, color: AC } \
{ key: v1, hue: 0deg } \
{ key: v2, hue: 30deg } \
{ key: v3, hue: 60deg } \
{ key: v4, hue: 90deg } \
{ key: v5, hue: 180deg } \
{ key: v6, hue: 210deg } \
{ key: v7, hue: 270deg } \
{ key: v8, hue: 300deg } \
{ key: v9, hue: 0deg } \
)
// Alias colors.
$bg = colors[0]
$fg = colors[1]
// $dbg += '%s; %s; :::' % (($bg) ($fg))
// Generate background colors.
for num in 0..5 {
$color = $bg.color
if num == 1 {} // Skip base BG color.
else if num == 0 { $color = darken($color, 10%) }
else { $color = lighten($color, (num+2) * num/2%) }
$color = to_hsla($color)
$key = s('%s%s', $bg.key, num)
$val = 'var(--%s-%s)' % (($bg.key) (num))
define('$' + $key, $color, global)
define('' + $key, $val, global)
}
// Generate foreground colors.
for num in 0..5 {
$color = $fg.color
if num == 1 {} // Skip base FG color.
else if num == 0 { $color = lighten($color, 10%) }
else { $color = darken($color, (num + num/1.25) * 5%) }
$color = desaturate($color, 90%)
$color = to_hsla($color)
// $dbg += '--- FG: ' + $color
$key = s('%s%s', $fg.key, num)
$val = 'var(--%s-%s)' % (($fg.key) (num))
define('$' + $key, $color, global)
define('' + $key, $val, global)
}
// Generate all other colors.
for c, i in colors[2..length(colors)] {
// $dbg += s('::: c: %s, i: %s; ', c, i )
// if c.key == v9 { $dbg += s('::: c: %s, i: %s; ', c, i ) }
$sel = colors[i+2]
$dbg += ' ' + $sel
for num in 0..9 {
/// Case for accent colors.
if ($sel.key == v0) {
$color = darken($sel.color, (80% - ((num + num/3) * 7.5)))
$color = darken($sel.color, (100% - (num+3) * 7.5))
$color = lightness($color, lightness($color) + num)
}
/// Case for gray colors.
else if ($sel.key == v9) {
$color = hsl($sel.hue, 0%, 50% + cg_lig)
$color = darken($color, (100% - (num+2) * 17))
}
/// Case for RGB colors.
else {
$hue = $sel.hue
$color = hsl($hue, 60% + cg_sat, 60% + cg_lig)
$color = darken($color, (100% - (num+2) * 7.5))
$color = lightness($color, lightness($color) + num)
}
/// Convert to HSLA format.
$color = to_hsla($color)
$key = s('%s%s', $sel.key, num)
$val = 'var(--%s-%s)' % (($sel.key) (num))
define('$' + $key, $color, global)
define('' + $key, $val, global)
}
}
} /// }}}
@-moz-document domain('custom.domain'),
domain('invent.kde.org'),
domain('git.pleroma.social'),
domain('gitgud.io'),
domain('salsa.debian.org'),
domain('framagit.org'),
domain('repo.getmonero.org'),
domain('0xacab.org'),
domain('dev.gajim.org'),
domain('devel.trisquel.info'),
domain('git.cit.bcit.ca'),
domain('git.coop'),
domain('git.dev.ctu.univ-fcomte.fr'),
domain('git.drk.sc'),
domain('git.empiresmod.com'),
domain('git.fosscommunity.in'),
domain('git.immc.ucl.ac.be'),
domain('git.jami.net'),
domain('git.linux-kernel.at'),
domain('git.nzoss.org.nz'),
domain('git.silence.dev'),
domain('lab.libreho.st'),
domain('opencode.net'),
domain('...