Skip to content

Dark-GitLab by vednoc

Imported and mirrored from https://gitlab.com/vednoc/dark-gitlab/raw/master/gitlab.user.styl

Screenshot of Dark-GitLab

Details

Authorvednoc

LicenseMIT

Categorygitlab.com

Created

Updated

Size188 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Dark and light theme for GitLab and self-hosted GitLab instances.

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('...

Reviews

No reviews yet.