Dark-GitHub by vednoc

Imported from https://raw.githubusercontent.com/vednoc/dark-github/main/github.user.styl
Authorvednoc
LicenseMIT
Created at2021-02-04 17:20:59
Updated at2021-02-04 17:25:03
Applies togithub.com
Description

Dark and light, very customizable theme for GitHub.
Notes

Userstyle doesn't have notes.
Source code

/* ==UserStyle==
@name         Dark-GitHub
@namespace    github.com/vednoc/dark-github
@description  Dark and light, very customizable theme for GitHub.
@author       vednoc <vednoc@pm.me> (https://github.com/vednoc)
@homepageURL  https://github.com/vednoc/dark-github
@supportURL   https://github.com/vednoc/dark-github/issues
@updateURL    https://github.com/vednoc/dark-github/raw/main/github.user.styl
@version      1.0.0-rc.9
@license      MIT
@preprocessor stylus

@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_fg_sat    'Adjust saturation of foreground colors' [0, 0, 100, 0.1, '%']
@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 text     f_base       'Base font' ''font_name''
@var text     f_mono       'Monospace font' ''font_name''
@var text     b_hgwd       'Checkbox width/height' '1rem'

@var checkbox custom_font   'Use custom font overrides' 1
@var checkbox c_scrollbars  'Use custom scrollbar overrides' 1
@var checkbox navbar_sticky 'Use sticky position for the navbar' 0
@var checkbox latest_commit 'Use neutral colors in latest commit' 1
@var checkbox readme_header 'Use old readme header design' 1
@var checkbox short_headers 'Use shorter headers' 1
@var checkbox table_corners 'Use rounded corners for Markdown tables' 1
@var checkbox dimmed_labels 'Use dimmed issue labels in light mode' 1
@var checkbox short_navbars 'Use same width for navigation bars and content area' 1
@var checkbox chbx_a_header 'Fix notifications checkbox on header alignment' 0
@var checkbox code_borders  'Add borders around code blocks and similar elements' 1
==/UserStyle== */

// {{{ Helpers.
t       = transparent
i       = !important
vendors = official
ac      = var(--ac)
sh      = var(--sh)

// 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)
    }
}

// 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, cg_fg_sat)
    $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 regexp('https?://((gist|docs|support)\\.)?github?.com(/.*)?') {
    // Userstyle variables.
    :root:not(#z) {
        /// Userstyle info.
        --note: 'Dark-GitHub v1.0.0-rc.9'

        /// Feat -> Custom monospace font.
        $mono1 = 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo'
        $mono2 = 'DejaVu Sans Mono', 'Liberation Mono', 'Ubuntu Mono'
        --f-mono: f_mono, $mono1, $mono2, monospace

        /// Feat -> Custom base font.
        $base1 = -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica'
        $base2 = 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'
        --f-base: f_base, $base1, $base2

        /// Accent/shadow colors.
        --ac: AC
        --sh: _shadow

        /// Generate CSS color variables.
        colors = (bg fg v0 v1 v2 v3 v4 v5 v6 v7 v8 v9)
        for color in colors[0..1] {
            for tone in 0..5 {
                { '--%s-%s' % ((color) (tone)) }: $ + color + tone
            }
        }
        for color in colors[2..length(colors)] {
            for tone in 0..9 {
                { '--%s-%s' % ((color) (tone)) }: $ + color + tone
            }
        }

        /// Native CSS variables.
        --color-scale-black: v99 //#1b1f23;
        --color-scale-white: v90 //#ffffff;
        --color-scale-gray-0: v91 //#fafbfc;
        --color-scale-gray-1: v92 //#f6f8fa;
        --color-scale-gray-2: v93 //#e1e4e8;
        --color-scale-gray-3: v94 //#d1d5da;
        --color-scale-gray-4: v95 //#959da5;
        --color-scale-gray-5: v96 //#6a737d;
        --color-scale-gray-6: v97 //#586069;
        --color-scale-gray-7: v98 //#444d56;
        --color-scale-gray-8: v99 //#2f363d;
        --color-scale-gray-9: v90 //#24292e;
        --color-scale-blue-0: v61 //#f1f8ff;
        --color-scale-blue-1: v62 //#dbedff;
        --color-scale-blue-2: v63 //#c8e1ff;
        --color-scale-blue-3: v64 //#79b8ff;
        --color-scale-blue-4: v65 //#2188ff;
        --color-scale-blue-5: v66 //#0366d6;
        --color-scale-blue-6: v67 //#005cc5;
        --color-scale-blue-7: v68 //#044289;
        --color-scale-blue-8: v69 //#032f62;
        --color-scale-blue-9: v60 //#05264c;
        --color-scale-green-0: v41 //#f0fff4;
        --color-scale-green-1: v42 //#dcffe4;
        --color-scale-green-2: v43 //#bef5cb;
        --color-scale-green-3: v44 //#85e89d;
        --color-scale-green-4: v45 //#34d058;
        --color-scale-green-5: v46 //#28a745;
        --color-scale-green-6: v47 //#22863a;
        --color-scale-green-7: v48 //#176f2c;
        --color-scale-green-8: v49 //#165c26;
        --color-scale-green-9: v40 //#144620;
        --color-scale-yellow-0: v31 //#fffdef;
        --color-scale-yellow-1: v32 //#fffbdd;
        --color-scale-yellow-2: v33 //#fff5b1;
        --color-scale-yellow-3: v34 //#ffea7f;
        --color-scale-yellow-4: v35 //#ffdf5d;
        --color-scale-yellow-5: v36 //#ffd33d;
        --color-scale-yellow-6: v37 //#f9c513;
        --color-scale-yellow-7: v38 //#dbab09;
        --color-scale-yellow-8: v39 //#b08800;
        --color-scale-yellow-9: v30 //#735c0f;
        --color-scale-orange-0: v21 //#fff8f2;
        --color-scale-orange-1: v22 //#ffebda;
        --color-scale-orange-2: v23 //#ffd1ac;
        --color-scale-orange-3: v24 //#ffab70;
        --color-scale-orange-4: v25 //#fb8532;
        --color-scale-orange-5: v26 //#f66a0a;
        --color-scale-orange-6: v27 //#e36209;
        --color-scale-orange-7: v28 //#d15704;
        --color-scale-orange-8: v29 //#c24e00;
        --color-scale-orange-9: v20 //#a04100;
        --color-scale-red-0: v11 //#ffeef0;
        --color-scale-red-1: v12 //#ffdce0;
        --color-scale-red-2: v13 //#fdaeb7;
        --color-scale-red-3: v14 //#f97583;
        --color-scale-red-4: v15 //#ea4a5a;
        --color-scale-red-5: v16 //#d73a49;
        --color-scale-red-6: v17 //#cb2431;
        --color-scale-red-7: v18 //#b31d28;
        --color-scale-red-8: v19 //#9e1c23;
        --color-scale-red-9: v10 //#86181d;
        --color-scale-purple-0: v71 //#f5f0ff;
        --color-scale-purple-1: v72 //#e6dcfd;
        --color-scale-purple-2: v73 //#d1bcf9;
        --color-scale-purple-3: v74 //#b392f0;
        --color-scale-purple-4: v75 //#8a63d2;
        --color-scale-purple-5: v76 //#6f42c1;
        --color-scale-purple-6: v77 //#5a32a3;
        --color-scale-purple-7: v78 //#4c2889;
        --color-scale-purple-8: v79 //#3a1d6e;
        --color-scale-purple-9: v70 //#29134e;
        --color-scale-pink-0: v81 //#ffeef8;
        --color-scale-pink-1: v82 //#fedbf0;
        --color-scale-pink-2: v83 //#f9b3dd;
        --color-scale-pink-3: v84 //#f692ce;
        --color-scale-pink-4: v85 //#ec6cb9;
        --color-scale-pink-5: v86 //#ea4aaa;
        --color-scale-pink-6: v87 //#d03592;
        --color-scale-pink-7: v88 //#b93a86;
        --color-scale-pink-8: v89 //#99306f;
        --color-scale-pink-9: v80 //#6d224f;
        --color-auto-black: v99 //#1b1f23;
        --color-auto-white: v90 //#ffffff;
        --color-auto-gray-0: v90 //#fafbfc;
        --color-auto-gray-1: v91 //#f6f8fa;
        --color-auto-gray-2: v92 //#e1e4e8;
        --color-auto-gray-3: v93 //#d1d5da;
        --color-auto-gray-4: v94 //#959da5;
        --color-auto-gray-5: v95 //#6a737d;
        --color-auto-gray-6: v96 //#586069;
        --color-auto-gray-7: v97 //#444d56;
        --color-auto-gray-8: v98 //#2f363d;
        --color-auto-gray-9: v99 //#24292e;
        --color-auto-blue-0: v60 //#f1f8ff;
        --color-auto-blue-1: v61 //#dbedff;
        --color-auto-blue-2: v62 //#c8e1ff;
        --color-auto-blue-3: v63 //#79b8ff;
        --color-auto-blue-4: v64 //#2188ff;
        --color-auto-blue-5: v65 //#0366d6;
        --color-auto-blue-6: v66 //#005cc5;
        --color-auto-blue-7: v67 //#044289;
        --color-auto-blue-8: v68 //#032f62;
        --color-auto-blue-9: v69 //#05264c;
        --color-auto-green-0: v41 //#f0fff4;
        --color-auto-green-1: v42 //#dcffe4;
        --color-auto-green-2: v43 //#bef5cb;
        --color-auto-green-3: v44 //#85e89d;
        --color-auto-green-4: v45 //#34d058;
        --color-auto-green-5: v46 //#28a745;
        --color-auto-green-6: v47 //#22863a;
        --color-auto-green-7: v48 //#176f2c;
        --color-auto-green-8: v49 //#165c26;
        --color-auto-green-9: v40 //#144620;
        --color-auto-yellow-0: v31 //#fffdef;
        --color-auto-yellow-1: v32 //#fffbdd;
        --color-auto-yellow-2: v33 //#fff5b1;
        --color-auto-yellow-3: v34 //#ffea7f;
        --color-auto-yellow-4: v35 //#ffdf5d;
        --color-auto-yellow-5: v36 //#ffd33d;
        --color-auto-yellow-6: v37 //#f9c513;
        --color-auto-yellow-7: v38 //#dbab09;
        --color-auto-yellow-8: v39 //#b08800;
        --color-auto-yellow-9: v30 //#735c0f;
        --color-auto-orange-0: v21 //#fff8f2;
        --color-auto-orange-1: v22 //#ffebda;
        --color-auto-orange-2: v23 //#ffd1ac;
        --color-auto-orange-3: v24 //#ffab70;
        --color-auto-orange-4: v25 //#fb8532;
        --color-auto-orange-5: v26 //#f66a0a;
        --color-auto-orange-6: v27 //#e36209;
        --color-auto-orange-7: v28 //#d15704;
        --color-auto-orange-8: v29 //#c24e00;
        --color-auto-orange-9: v20 //#a04100;
        --color-auto-red-0: v11 //#ffeef0;
        --color-auto-red-1: v12 //#ffdce0;
        --color-auto-red-2: v13 //#fdaeb7;
        --color-auto-red-3: v14 //#f97583;
        --color-auto-red-4: v15 //#ea4a5a;
        --color-auto-red-5: v16 //#d73a49;
        --color-auto-red-6: v17 //#cb2431;
        --color-auto-red-7: v18 //#b31d28;
        --color-auto-red-8: v19 //#9e1c23;
        --color-auto-red-9: v10 //#86181d;
        --color-auto-purple-0: v71 //#f5f0ff;
        --color-auto-purple-1: v72 //#e6dcfd;
        --color-auto-purple-2: v73 //#d1bcf9;
        --color-auto-purple-3: v74 //#b392f0;
        --color-auto-purple-4: v75 //#8a63d2;
        --color-auto-purple-5: v76 //#6f42c1;
        --color-auto-purple-6: v77 //#5a32a3;
        --color-auto-purple-7: v78 //#4c2889;
        --color-auto-purple-8: v79 //#3a1d6e;
        --color-auto-purple-9: v70 //#29134e;
        --color-auto-pink-0: v81 //#ffeef8;
        --color-auto-pink-1: v82 //#fedbf0;
        --color-auto-pink-2: v83 //#f9b3dd;
        --color-auto-pink-3: v84 //#f692ce;
        --color-auto-pink-4: v85 //#ec6cb9;
        --color-auto-pink-5: v86 //#ea4aaa;
        --color-auto-pink-6: v87 //#d03592;
        --color-auto-pink-7: v88 //#b93a86;
        --color-auto-pink-8: v89 //#99306f;
        --color-auto-pink-9: v80 //#6d224f;

        --color-text-primary: fg1 //#24292e;
        --color-text-secondary: fg2 //#586069;
        --color-text-tertiary: fg3 //#6a737d;
        --color-text-placeholder: fg5 //#6a737d;
        --color-text-disabled: fg5 //#6a737d;
        --color-text-inverse: #fff;
        --color-text-link: ac //#0366d6;
        --color-text-danger: v17 //#cb2431;
        --color-text-success: v46 //#22863a;
        --color-text-warning: v27 //#b08800;
        --color-text-white: #fff;

        --color-icon-primary: fg1 //#24292e;
        --color-icon-secondary: fg4 //#586069;
        --color-icon-tertiary: fg3 //#959da5;
        --color-icon-info: v65 //#0366d6;
        --color-icon-danger: v15 //#d73a49;
        --color-icon-success: v45 //#22863a;
        --color-icon-warning: v35 //#b08800;

        --color-state-hover-primary-bg: v03 //#0366d6;
        --color-state-hover-primary-border: v05 //#0366d6;
        --color-state-hover-primary-text: #ffffff;
        --color-state-hover-primary-icon: #ffffff;
        --color-state-hover-secondary-bg: bg2 //#f6f8fa;
        --color-state-hover-secondary-border: bg5 //#f6f8fa;
        --color-state-selected-primary-bg: v04 //#0366d6;
        --color-state-selected-primary-border: v06 //#0366d6;
        --color-state-selected-primary-text: #ffffff;
        --color-state-selected-primary-icon: #ffffff;
        --color-state-focus-border: v66 //#0366d6;
        --color-state-focus-shadow: 0 0 0 3px v63 //rgba(3,102,214,0.3);

        --color-border-primary: bg5 //#e1e4e8;
        --color-border-secondary: bg3 //#eaecef;
        --color-border-tertiary: bg4 //#d1d5da;
        --color-border-overlay: bg5 //#e1e4e8
        --color-border-inverse: bg1 //#fff;
        --color-border-info: v63 //#0366d6;
        --color-border-danger: v13 //#d73a49;
        --color-border-success: v43 //#34d058;
        --color-border-warning: v33 //#f9c513;

        --color-bg-canvas: bg1 //#fff;            Main elements
        --color-bg-canvas-mobile: #fff;
        --color-bg-canvas-inverse: bg2 //#24292e; Navbar
        --color-bg-canvas-inset: bg0 //#f6f8fa;   Dashboard inset
        --color-bg-primary: bg1 //#fff;           Sidebar
        --color-bg-secondary: bg2 //#fafbfc;      Navigation/notices
        --color-bg-tertiary: bg3 //#f6f8fa;       Background
        --color-bg-overlay: bg1 //#fff;
        --color-bg-backdrop: rgba(27,31,35,0.5)
        --color-bg-info: v61 //#f1f8ff;
        --color-bg-info-inverse: v63 //#0366d6;
        --color-bg-danger: v11 //#ffeef0;
        --color-bg-danger-inverse: v15 //#d73a49;
        --color-bg-success: v41 //#dcffe4;
        --color-bg-success-inverse: v45 //#28a745;
        --color-bg-warning: v31 //#fff5b1;
        --color-bg-warning-inverse: v35 //#ffd33d;

        --color-shadow-small: 0 1px 0 #0002 //rgba(27,31,35,0.04);
        --color-shadow-medium: 0 3px 6px #0003 //rgba(149,157,165,0.15);
        --color-shadow-large: 0 8px 15px #0004 //rgba(149,157,165,0.2);
        --color-shadow-extra-large: 0 10px 20px #0003;
        --color-shadow-highlight: inset 0 1px 0 #0002 //hsla(0,0%,100%,0.25);
        --color-shadow-inset: inset 0 1px 0 #0002 //rgba(225,228,232,0.2);
        --color-shadow-focus: 0 0 0 3px v03

        --color-fade-black-10: #ffffff10 //#1b1f231a;
        --color-fade-black-15: #ffffff20 //#1b1f2326;
        --color-fade-black-30: #ffffff30 //#1b1f234d;
        --color-fade-black-50: #ffffff50 //#1b1f2380;
        --color-fade-black-70: #ffffff90 //#1b1f23b3;
        --color-fade-black-85: #ffffff85 //#1b1f23d9;
        --color-fade-white-10: #ffffff1a;
        --color-fade-white-15: #ffffff26;
        --color-fade-white-30: #ffffff4d;
        --color-fade-white-50: #ffffff80;
        --color-fade-white-70: #ffffffb3;
        --color-fade-white-85: #ffffffd9;

        --color-alert-info-text: fg1 //#24292e;
        --color-alert-info-icon: v67 //rgba(4,66,137,0.6);
        --color-alert-info-bg: v61 //#dbedff;
        --color-alert-info-border: v63 //rgba(4,66,137,0.2);
        --color-alert-warn-text: fg1 //#24292e;
        --color-alert-warn-icon: v37 //#b08800;
        --color-alert-warn-bg: v31 //#fffbdd;
        --color-alert-warn-border: v33 //rgba(176,136,0,0.2);
        --color-alert-error-text: fg1 //#24292e;
        --color-alert-error-icon: v17 //rgba(158,28,35,0.6);
        --color-alert-error-bg: v11 //#ffe3e6;
        --color-alert-error-border: v13 //rgba(158,28,35,0.2);
        --color-alert-success-text: fg1 //#24292e;
        --color-alert-success-icon: v47 //rgba(23,111,44,0.8);
        --color-alert-success-bg: v41 //#dcffe4;
        --color-alert-success-border: v43 //rgba(23,111,44,0.2);

        --color-autocomplete-bg: bg3 //#fff;
        --color-autocomplete-border: bg5 //#e1e4e8;
        --color-autocomplete-row-border: bg4 //#eaecef;
        --color-autocomplete-shadow: 0 3px 6px #0002 //rgba(149,157,165,0.15);
        --color-blankslate-icon: fg5 //#a3aab1;

        --color-btn-text: fg1 //#24292e;
        --color-btn-bg: bg2 //#fafbfc;
        --color-btn-border: bg5 //rgba(27,31,35,0.15);
        --color-btn-shadow: 0 1px 0 #00000010 //rgba(27,31,35,0.04);
        --color-btn-inset-shadow: inset 0 1px 0 #00000010 //hsla(0,0%,100%,0.25);
        --color-btn-hover-bg: bg3 //#f3f4f6;
        --color-btn-hover-border: bg5 //rgba(27,31,35,0.15);
        --color-btn-selected-bg: bg4 //#edeff2;
        --color-btn-focus-bg: bg4 //#fafbfc;
        --color-btn-focus-border: bg5 //rgba(27,31,35,0.15);
        --color-btn-focus-shadow: 0 0 0 3px v62 //rgba(3,102,214,0.3);
        --color-btn-shadow-active: inset 0 0.15em 0.3em #00000010 //rgba(27,31,35,0.15);
        --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(3,102,214,0.3);

        --color-btn-primary-text: v99 //#fff;
        --color-btn-primary-bg: v42 //#2ea44f;
        --color-btn-primary-border: v44 //rgba(27,31,35,0.15);
        --color-btn-primary-shadow: 0 1px 0 rgba(27,31,35,0.1);
        --color-btn-primary-inset-shadow: inset 0 1px 0 hsla(0,0%,100%,0.03);
        --color-btn-primary-hover-bg: v43 //#2c974b;
        --color-btn-primary-hover-border: v45 //rgba(27,31,35,0.15);
        --color-btn-primary-selected-bg: v44 //#2a8f47;
        --color-btn-primary-selected-shadow: inset 0 1px 0 rgba(20,70,32,0.2);
        --color-btn-primary-disabled-text: v95 //hsla(0,0%,100%,0.8);
        --color-btn-primary-disabled-bg: v40 //#94d3a2;
        --color-btn-primary-disabled-border: v41 //rgba(27,31,35,0.1);
        --color-btn-primary-focus-bg: v43 //#2ea44f;
        --color-btn-primary-focus-border: v45 //rgba(27,31,35,0.15);
        --color-btn-primary-focus-shadow: 0 0 0 3px v41 //rgba(46,164,79,0.4);
        --color-btn-primary-icon: hsla(0,0%,100%,0.8);
        --color-btn-primary-counter-bg: hsla(0,0%,100%,0.2);

        --color-btn-outline-text: v67 //#0366d6;
        --color-btn-outline-hover-text: v99 //#fff;
        --color-btn-outline-hover-bg: v63 //#0366d6;
        --color-btn-outline-hover-border: v64 //rgba(27,31,35,0.15);
        --color-btn-outline-hover-shadow: 0 1px 0 rgba(27,31,35,0.1);
        --color-btn-outline-hover-inset-shadow: inset 0 1px 0 hsla(0,0%,100%,0.03)
        --color-btn-outline-hover-counter-bg: hsla(0,0%,100%,0.2);
        --color-btn-outline-selected-text: v99 //#f0f6fc;
        --color-btn-outline-selected-bg: v64 //#035fc7;
        --color-btn-outline-selected-border: v65 //rgba(27,31,35,0.15);
        --color-btn-outline-selected-shadow: inset 0 1px 0 rgba(5,38,76,0.2);
        --color-btn-outline-disabled-text: v63 //rgba(3,102,214,0.5);
        --color-btn-outline-disabled-bg: bg2 //#fafbfc;
        --color-btn-outline-disabled-counter-bg: rgba(3,102,214,0.05);
        --color-btn-outline-focus-border: v66 //rgba(27,31,35,0.15);
        --color-btn-outline-focus-shadow: 0 0 0 3px v62 //rgba(0,92,197,0.4);
        --color-btn-outline-counter-bg: rgba(3,102,214,0.1);

        --color-btn-danger-text: v16 //#d73a49;
        --color-btn-danger-hover-text: v99 //#fff;
        --color-btn-danger-hover-bg: v11 //#cb2431;
        --color-btn-danger-hover-border: v13 //rgba(27,31,35,0.15);
        --color-btn-danger-hover-shadow: 0 1px 0 rgba(27,31,35,0.1);
        --color-btn-danger-hover-inset-shadow: inset 0 1px 0 hsla(0,0%,100%,0.03);
        --color-btn-danger-hover-counter-bg: hsla(0,0%,100%,0.2);
        --color-btn-danger-selected-text: v99 //#fff;
        --color-btn-danger-selected-bg: v12 //#d42d3d;
        --color-btn-danger-selected-border: v14 //rgba(27,31,35,0.15);
        --color-btn-danger-selected-shadow: inset 0 1px 0 rgba(134,24,29,0.2);
        --color-btn-danger-disabled-text: v13 //rgba(215,58,73,0.5);
        --color-btn-danger-disabled-bg: bg2 //#fafbfc;
        --color-btn-danger-disabled-counter-bg: rgba(215,58,73,0.05);
        --color-btn-danger-focus-border: v15 //rgba(27,31,35,0.15);
        --color-btn-danger-focus-shadow: 0 0 0 3px v11 //rgba(203,36,49,0.4);
        --color-btn-danger-counter-bg: rgba(215,58,73,0.1);

        --color-btn-counter-bg: #1b1f2314;
        --color-counter-text: fg1 //#24292e;
        --color-counter-bg: bg3 //#d1d5da80;
        --color-counter-border: #d1d5da80;
        --color-topic-tag-text: fg2 //#0366d6;
        --color-topic-tag-bg: bg2 //#f1f8ff;
        --color-topic-tag-hover-bg: bg3 //#def;
        --color-topic-tag-active-bg: bg4 //#e7f3ff;

        --color-merge-box-success-icon-bg: #28a745;
        --color-merge-box-success-icon-text: #fff;
        --color-merge-box-success-icon-border: t;
        --color-merge-box-success-indicator-bg: #28a745;
        --color-merge-box-success-indicator-border: t;
        --color-merge-box-merged-icon-bg: #6f42c1;
        --color-merge-box-merged-icon-text: #fff;
        --color-merge-box-merged-icon-border: t;
        --color-merge-box-merged-box-border: #6f42c1;
        --color-merge-box-neutral-icon-bg: #6a737d;
        --color-merge-box-neutral-icon-text: #fff;
        --color-merge-box-neutral-icon-border: t;
        --color-merge-box-neutral-indicator-bg: #6a737d;
        --color-merge-box-neutral-indicator-border: t;
        --color-merge-box-warning-icon-bg: #dbab09;
        --color-merge-box-warning-icon-text: #fff;
        --color-merge-box-warning-icon-border: t;
        --color-merge-box-warning-box-border: #ffd33d;
        --color-merge-box-warning-merge-highlight: t;
        --color-merge-box-error-icon-bg: #d73a49;
        --color-merge-box-error-icon-text: #fff;
        --color-merge-box-error-icon-border: t;
        --color-merge-box-error-indicator-bg: #d73a49;
        --color-merge-box-error-indicator-border: t;

        --color-project-card-bg: bg2 //#fff;
        --color-project-header-bg: bg3 //#24292e;
        --color-project-sidebar-bg: bg2 //#fff;
        --color-project-gradient-in: #fff;
        --color-project-gradient-out: hsla(0,0%,100%,0);

        --color-input-bg: bg1 //#fff;
        --color-input-contrast-bg: bg1 //#fafbfc;
        --color-input-border: bg5 //#e1e4e8;
        --color-input-shadow: inset 0 1px 2px rgba(27,31,35,0.075);
        --color-input-disabled-bg: bg1 //#fff;
        --color-input-disabled-border: bg3 //#e1e4e8;
        --color-input-warning-border: v30 //#f9c513;
        --color-input-error-border: v10 //#cb2431;

        --color-input-tooltip-success-text: #144620;
        --color-input-tooltip-success-bg: #dcffe4;
        --color-input-tooltip-success-border: #34d058;
        --color-input-tooltip-warning-text: #735c0f;
        --color-input-tooltip-warning-bg: #fff5b1;
        --color-input-tooltip-warning-border: #f9c513;
        --color-input-tooltip-error-text: #86181d;
        --color-input-tooltip-error-bg: #ffeef0;
        --color-input-tooltip-error-border: #f97583;

        --color-avatar-bg: bg1 //#ffffff;
        --color-avatar-border: #1b1f231a;
        --color-avatar-stack-fade: #d1d5da;
        --color-avatar-stack-fade-more: #e1e4e8;
        --color-avatar-child-shadow: -2px -2px 0 hsla(0,0%,100%,0.8);

        --color-toast-text: #24292e;
        --color-toast-bg: #fff;
        --color-toast-border: #e1e4e8;
        --color-toast-shadow: 0 8px 24px rgba(149,157,165,0.2);
        --color-toast-icon: #fff;
        --color-toast-icon-bg: #0366d6;
        --color-toast-icon-border: t;
        --color-toast-success-text: #24292e;
        --color-toast-success-border: #e1e4e8;
        --color-toast-success-icon: #fff;
        --color-toast-success-icon-bg: #28a745;
        --color-toast-success-icon-border: t;
        --color-toast-warning-text: #24292e;
        --color-toast-warning-border: #e1e4e8;
        --color-toast-warning-icon: #24292e;
        --color-toast-warning-icon-bg: #ffd33d;
        --color-toast-warning-icon-border: t;
        --color-toast-danger-text: #24292e;
        --color-toast-danger-border: #e1e4e8;
        --color-toast-danger-icon: #fff;
        --color-toast-danger-icon-bg: #d73a49;
        --color-toast-danger-icon-border: t;
        --color-toast-loading-text: #24292e;
        --color-toast-loading-border: #e1e4e8;
        --color-toast-loading-icon: #fff;
        --color-toast-loading-icon-bg: #586069;
        --color-toast-loading-icon-border: t;


        --color-timeline-text: fg3 //#444d56;
        --color-timeline-badge-bg: bg3 //#e1e4e8;
        --color-timeline-target-badge-border: v04 //#2188ff;
        --color-timeline-target-badge-shadow: v05 //#c8e1ff;

        --color-select-menu-bg: bg2 //#fff;
        --color-select-menu-border: bg5 //#e1e4e8;
        --color-select-menu-border-secondary: bg4 //#eaecef;
        --color-select-menu-shadow: 0 0 18px rgba(27,31,35,0.4);
        --color-select-menu-backdrop-bg: rgba(27,31,35,0.5);
        --color-select-menu-backdrop-border: t;
        --color-select-menu-tap-highlight: rgba(209,213,218,0.5);
        --color-select-menu-tap-focus-bg: #dbedff;

        --color-box-blue-border: v64 //#c8e1ff;
        --color-box-row-yellow-bg: v31 //#fffbdd;
        --color-box-row-blue-bg: v61 //#f1f8ff;
        --color-box-header-blue-bg: v61 //#f1f8ff;
        --color-box-header-blue-border: v64 //#c8e1ff;
        --color-box-border-info: v64 //rgba(3,102,214,0.2);
        --color-box-bg-info: v61 //#f1f8ff;
        --color-box-border-warning: v34 //rgba(255,211,61,0.4);
        --color-box-bg-warning: v31 //#fffdef;

        --color-dropdown-bg: bg1 //#fff;
        --color-dropdown-border: bg5 //#e1e4e8;
        --color-dropdown-shadow: 0 8px 24px #0002 //rgba(149,157,165,0.2);

        --color-label-border: bg5 //#e1e4e8;
        --color-label-primary-text: fg1 //#24292e;
        --color-label-primary-border: fg3 //#6a737d;
        --color-label-secondary-text: fg3 //#586069;
        --color-label-secondary-border: fg5 //#e1e4e8;
        --color-label-info-text: v67 //#0366d6;
        --color-label-info-border: v65 //#0366d6;
        --color-label-success-text: v47 //#22863a;
        --color-label-success-border: v45 //#28a745;
        --color-label-warning-text: v37 //#735c0f;
        --color-label-warning-border: v35 //#b08800;
        --color-label-danger-text: v17 //#d73a49;
        --color-label-danger-border: v15 //#cb2431;

        --color-counter-primary-text: fg1 //#fff;
        --color-counter-primary-bg: bg5 //#6a737d;
        --color-counter-secondary-text: fg2 //#6a737d;

        --color-popover-border: bg5 //#1b1f2326;

        --color-branch-name-text: fg3 //#1b1f2399;
        --color-branch-name-icon: fg3 //#a8bbd0;
        --color-branch-name-bg: bg3 //#eaf5ff;
        --color-branch-name-link-text: ac //#0366d6;
        --color-branch-name-link-icon: fg3 //#a8bbd0;
        --color-branch-name-link-bg: bg3 //#eaf5ff;

        --color-markdown-code-bg: bg2 //#1b1f230d;
        --color-markdown-frame-border: #dfe2e5;
        --color-markdown-blockquote-border: bg4 //#dfe2e5;
        --color-markdown-table-border: bg5 //#dfe2e5;
        --color-markdown-table-tr-border: #c6cbd1;

        --color-menu-heading-text: fg1 //#24292e;
        --color-menu-border-active: ac //#f9826c;
        --color-menu-bg-active: bg2 //t;
        --color-sidenav-selected-bg: bg1 //#fff;
        --color-sidenav-border-active: ac //#f9826c;
        --color-tabnav-selected-bg: bg1 //#fff;
        --color-header-text: fg3 //#ffffffb3;
        --color-header-bg: bg2 //#24292e;
        --color-header-logo: fg1 //#fff;
        --color-filter-item-bar-bg: #eff3f6;
        --color-hidden-text-expander-bg: bg4 //#dfe2e5;
        --color-hidden-text-expander-bg-hover: bg4 //#c6cbd1;
        --color-drag-and-drop-border: #c3c8cf;
        --color-upload-enabled-border: bg5 //#dfe2e5;
        --color-upload-enabled-border-focused: v66 //#4a9eff;
        --color-previewable-comment-form-border: #c3c8cf;
        --color-previewable-comment-form-bg: t //#fff; /// @upstream

        --color-underlinenav-border: rgba(209,213,218,0);
        --color-underlinenav-border-hover: bg5 //#d1d5da;
        --color-underlinenav-border-active: ac //#f9826c;
        --color-underlinenav-text: fg3 //#24292e;
        --color-underlinenav-text-hover: fg3 //#24292e;
        --color-underlinenav-text-active: fg1 //#24292e;
        --color-underlinenav-icon: fg3 //#959da5;
        --color-underlinenav-icon-hover: fg2 //#959da5;
        --color-underlinenav-icon-active: fg1 //#24292e;
        --color-underlinenav-counter-text: fg1 //#24292e;

        --color-verified-badge-text: v47 //#22863a;
        --color-verified-badge-bg: bg2 //#fff;
        --color-verified-badge-border: bg5 //#e1e4e8;

        --color-social-count-bg: bg3 //#fff;
        --color-header-search-bg: fg3 //#24292e;
        --color-header-search-border: bg5 //#444d56;
        --color-search-keyword-hl: v31 //#fffbdd;

        --color-diffstat-neutral-bg: bg5 //#d1d5da;
        --color-diffstat-neutral-border: bg5 //#d1d5da;
        --color-diffstat-deletion-bg: v15 //#d73a49;
        --color-diffstat-deletion-border: v15 //#d73a49;
        --color-diffstat-addition-bg: v45 //#28a745;
        --color-diffstat-addition-border: v45 //#28a745;

        --color-bg-discussions-row-emoji-box: v93 //rgba(209, 213, 218, 0.5);
        --color-repo-language-color-border: #fff1 //rgba(27,31,35,0.1);
        --color-files-explorer-icon: fg5 //#79b8ff;
        --color-hl-author-bg: #f1f8ff;
        --color-hl-author-border: #c8e1ff;
        --color-logo-subdued: #d1d5da;
        --color-discussion-border: #a2cbac;
        --color-discussion-bg-success: #28a745;

        --color-global-nav-logo: #fff;
        --color-global-nav-bg: #24292e;
        --color-global-nav-text: #fff;
        --color-global-nav-icon: #fff;
        --color-global-nav-input-bg: #fafbfc;
        --color-global-nav-input-border: #fafbfc;
        --color-global-nav-input-icon: #d1d5da;
        --color-global-nav-input-placeholder: #959da5;

        --color-calendar-graph-day-bg: bg2 //#ebedf0;
        --color-calendar-graph-day-border: #88888825 //#1b1f230f;
        --color-calendar-graph-day-L1-bg: v01 //#9be9a8;
        --color-calendar-graph-day-L2-bg: v03 //#40c463;
        --color-calendar-graph-day-L3-bg: v06 //#30a14e;
        --color-calendar-graph-day-L4-bg: v08 //#216e39;
        --color-calendar-graph-day-L4-border: #88888825 //#1b1f230f;
        --color-calendar-graph-day-L3-border: #88888825 //#1b1f230f;
        --color-calendar-graph-day-L2-border: #88888825 //#1b1f230f;
        --color-calendar-graph-day-L1-border: #88888825 //#1b1f230f;
        --color-calendar-halloween-graph-day-L1-bg: v29 //#ffee4a;
        --color-calendar-halloween-graph-day-L2-bg: v26 //#ffc501;
        --color-calendar-halloween-graph-day-L3-bg: v23 //#fe9600;
        --color-calendar-halloween-graph-day-L4-bg: v20 //#03001c;

        --color-footer-invertocat-octicon: fg3 //#d1d5da;
        --color-footer-invertocat-octicon-hover: fg5 //#6a737d;
        --color-pr-state-draft-text: fg1 //#fff;
        --color-pr-state-draft-bg: bg5 //#6a737d;
        --color-pr-state-draft-border: t;
        --color-pr-state-open-text: #fff;
        --color-pr-state-open-bg: v45 //#28a745;
        --color-pr-state-open-border: t;
        --color-pr-state-merged-text: #fff;
        --color-pr-state-merged-bg: v75 //#6f42c1;
        --color-pr-state-merged-border: t;
        --color-pr-state-closed-text: #fff;
        --color-pr-state-closed-bg: v15 //#d73a49;
        --color-pr-state-closed-border: t;

        /// Diffs
        --color-diffstat-neutral-bg: bg5 //#d1d5da;
        --color-diffstat-neutral-border: bg5 //#d1d5da;
        --color-diffstat-deletion-bg: v16 //#d73a49;
        --color-diffstat-deletion-border: v16 //#d73a49;
        --color-diffstat-addition-bg: v46 //#28a745;
        --color-diffstat-addition-border: v46 //#28a745;

        --color-code-selection-bg: bg2 //#c8e1ff;
        --color-blob-line-highlight-bg: v30 //#fffbdd;
        --color-blob-line-highlight-border: t // rgba(0,0,0,0);

        --color-diff-addition-text: v49 //#22863a;
        --color-diff-addition-bg: v41 //#e6ffed;
        --color-diff-addition-border: v47 //#34d058;
        --color-diff-deletion-text: v19 //#cb2431;
        --color-diff-deletion-bg: v11 //#ffeef0;
        --color-diff-deletion-border: v17 //#d73a49;
        --color-diff-change-text: v29 //#b08800;
        --color-diff-change-bg: v21 //#fff5b1;
        --color-diff-change-border: v27 //#f9c513;

        --color-diff-blob-num-text: fg5 //rgba(27,31,35,0.3);
        --color-diff-blob-num-hover-text: fg1 //rgba(27,31,35,0.6);

        --color-diff-blob-addition-num-bg: v41 //#cdffd8;
        --color-diff-blob-addition-num-text: fg3 //rgba(27,31,35,0.3);
        --color-diff-blob-addition-num-hover-text: fg1 //rgba(27,31,35,0.6);
        --color-diff-blob-addition-line-bg: v40 //#e6ffed;
        --color-diff-blob-addition-word-bg: v42 //#acf2bd;

        --color-diff-blob-deletion-num-bg: v11 //#ffdce0;
        --color-diff-blob-deletion-num-text: fg3 //rgba(27,31,35,0.3);
        --color-diff-blob-deletion-num-hover-text: fg1 //rgba(27,31,35,0.6);
        --color-diff-blob-deletion-line-bg: v10 //#ffeef0;
        --color-diff-blob-deletion-word-bg: v12 //#fdb8c0;

        --color-diff-blob-hunk-text: fg4 //rgba(27,31,35,0.7);
        --color-diff-blob-hunk-num-bg: bg4 //#dbedff;
        --color-diff-blob-hunk-line-bg: bg3 //#f1f8ff;

        --color-diff-blob-empty-block-bg: bg2 //#fafbfc;
        --color-diff-blob-selected-line-highlight-bg: v31 //rgba(255,223,93,0.2);
        --color-diff-blob-selected-line-highlight-border: v34 //#ffd33d;
        --color-diff-blob-selected-line-highlight-mix-blend-mode: screen //multiply;

        --color-diff-blob-expander-icon: fg3 //#586069;
        --color-diff-blob-expander-hover-icon: fg1 //#fff;
        --color-diff-blob-expander-hover-bg: bg5 //#0366d6;
        --color-diff-blob-comment-button-icon: #fff;
        --color-diff-blob-comment-button-bg: v06 //#0366d6;
        --color-diff-blob-comment-button-gradient-bg: v08 //#0372ef;

        // Syntax themes
        // Prettylights
        --color-prettylights-syntax-comment: fg3 //#6a737d;
        --color-prettylights-syntax-constant: v67 //#005cc5;
        --color-prettylights-syntax-entity: v79 //#6f42c1;
        --color-prettylights-syntax-storage-modifier-import: fg1 //#24292e;
        --color-prettylights-syntax-entity-tag: v57 //#22863a;
        --color-prettylights-syntax-keyword: v18 //#d73a49;
        --color-prettylights-syntax-string: v46 //#032f62;
        --color-prettylights-syntax-variable: v28 //#e36209;
        --color-prettylights-syntax-brackethighlighter-unmatched: v12 //#b31d28;
        --color-prettylights-syntax-invalid-illegal-text: v99 //#fafbfc;
        --color-prettylights-syntax-invalid-illegal-bg: v12 //#b31d28;
        --color-prettylights-syntax-carriage-return-text: v99 //#fafbfc;
        --color-prettylights-syntax-carriage-return-bg: v13 //#d73a49;
        --color-prettylights-syntax-string-regexp: v49 //#22863a;
        --color-prettylights-syntax-markup-list: #735c0f;
        --color-prettylights-syntax-markup-heading: v67 //#005cc5;
        --color-prettylights-syntax-markup-italic: v99 //#24292e;
        --color-prettylights-syntax-markup-bold: v99 //#24292e;
        --color-prettylights-syntax-markup-deleted-text: v19 //#b31d28;
        --color-prettylights-syntax-markup-deleted-bg: v11 //#ffeef0;
        --color-prettylights-syntax-markup-inserted-text: v49 //#22863a;
        --color-prettylights-syntax-markup-inserted-bg: v40 //#f0fff4;
        --color-prettylights-syntax-markup-changed-text: v25 //#e36209;
        --color-prettylights-syntax-markup-changed-bg: v20 //#ffebda;
        --color-prettylights-syntax-markup-ignored-text: fg2 //#f6f8fa;
        --color-prettylights-syntax-markup-ignored-bg: v63 //#005cc5;
        --color-prettylights-syntax-meta-diff-range: v87 //#6f42c1;
        --color-prettylights-syntax-brackethighlighter-angle: #586069;
        --color-prettylights-syntax-sublimelinter-gutter-mark: #959da5;
        --color-prettylights-syntax-constant-other-reference-link: v46 //#032f62;

        // CodeMirror
        --color-codemirror-text: fg2 //#24292e;
        --color-codemirror-bg: bg0 //#fff;
        --color-codemirror-gutters-bg: bg2 //#fff;
        --color-codemirror-guttermarker-text: fg2 //#fff;
        --color-codemirror-guttermarker-subtle-text: fg3 //#d1d5da;
        --color-codemirror-linenumber-text: fg2 //#959da5;
        --color-codemirror-cursor: fg2 //#24292e;
        --color-codemirror-selection-bg: lighten(rgba(AC, 0.5), 30%) //#d7d4f0;
        --color-codemirror-activeline-bg: bg3 //#fafbfc;
        --color-codemirror-matchingbracket-text: fg3 //#24292e;
        --color-codemirror-lines-bg: bg1 //#fff;
        --color-codemirror-syntax-comment: fg5 //#6a737d;
        --color-codemirror-syntax-constant: v67 //#005cc5;
        --color-codemirror-syntax-entity: v87 //#6f42c1;
        --color-codemirror-syntax-keyword: v17 //#d73a49;
        --color-codemirror-syntax-storage: v17 //#d73a49;
        --color-codemirror-syntax-string: v46 //#032f62;
        --color-codemirror-syntax-support: v67 //#005cc5;
        --color-codemirror-syntax-variable: v25 //#e36209;

        // Ansi
        --color-ansi-black: #24292e;
        --color-ansi-black-bright: #2f363d;
        --color-ansi-white: #e1e4e8;
        --color-ansi-white-bright: #e1e4e8;
        --color-ansi-gray: #959da5;
        --color-ansi-red: #f97583;
        --color-ansi-red-bright: #fdaeb7;
        --color-ansi-green: #85e89d;
        --color-ansi-green-bright: #bef5cb;
        --color-ansi-yellow: #ffea7f;
        --color-ansi-yellow-bright: #fff5b1;
        --color-ansi-blue: #79b8ff;
        --color-ansi-blue-bright: #c8e1ff;
        --color-ansi-magenta: #b392f0;
        --color-ansi-magenta-bright: #d1bcf9;
        --color-ansi-cyan: #76e3ea;
        --color-ansi-cyan-bright: #b3f0ff;
    }

    // Base styles.
    html {
        c: 0 0 bg0

        ::selection { c: 0 0 bg4 }
        ::placeholder { c: fg4 }
        hr { border-color: bg5 }

        body {
            /// Application background.
            &, .application-main > .bg-gray, &.bg-gray-light { c: 0 0 bg0 }
            &.page-profile .application-main { b: 0 -24px bg1 }

            if custom_font {
                /// Feat -> Base font.
                &, /.markdown-body {
                    font-family: var(--f-base) i
                }

                /// Feat -> Code font.
                /// Diff linum/code, CodeMirror, commit reference, utility class.
                /.blob-num,
                /.blob-code-inner,
                /.CodeMirror-lines,
                /.commit-ref,
                /.text-mono {
                    font-family: var(--f-mono) i
                }
            }
        }

        /// Feat -> Theme scrollbars.
        if c_scrollbars {
            scrollbar-color: bg5 bg2
            /::-webkit-scrollbar {
                width: 12px
                &-track { background: bg2 }
                &-thumb { background: bg5 }
            }
        }

        /// Feat -> Rounded borders for tables.
        if table_corners {
            .markdown-body > table {
                rad: 6px
                position: relative
                &::before {
                    o = 0px
                    content: ''
                    position: absolute
                    top: o; right: o; bottom: o; left: o
                    border: 1px solid bg5
                    pointer-events: none
                    rad: 6px
                }
            }
        }

        /// Skeleton.
        /.Skeleton {
            background-image: linear-gradient(270deg, bg4, bg2, bg2, bg4)
            /path.js-diff-placeholder { g: bg2 }
        }

        /// Diff -> 'Display the rich diff' loader. @upstream
        .render-container { c: 0 0 bg1 }
        img.octospinner[src] { filter: opacity(0.6) }
    }

    // Better checkbox/radio inputs.
    input {
        r       = unquote
        prefix  = 'data:image/svg+xml;utf8,'
        prefix += '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">'

        &[type='radio'],
        &[type='checkbox'] {
            &, &:focus, &:hover:active {
                -webkit-appearance: none
                -moz-appearance: none
                appearance: none
                cursor: pointer
                height: b_hgwd
                width: b_hgwd
                border: 1px solid bg5
                background-size: cover
                c: fg1 0 bg1
            }
            &:disabled, &:hover:active:disabled, &:disabled:hover {
                c: fg1 bg5 bg4
                cursor: auto
            }
        }

        &[type='radio'] {
            /// fix border radius at https://github.com/settings/profile Emoji color
            border-radius: 50%
            &:checked {
                z = '<circle cx="256" cy="256" r="128" fill="white"/>'
                background-image: s("url('%s%s</svg>') %s", r(prefix), r(z), i)
                c: 0 v05 v03
            }
            &:hover:not(:checked) { c: 0 0 bg3 }
        }

        &[type='checkbox'] {
            border-radius: 2px
            &:checked {
                z ='<path fill="white" d="M99 213l-1 89 104 102 205-201v-91L203 315 99 213z"/>'
                background-image: s("url('%s%s</svg>') %s", r(prefix), r(z), i)
                c: 0 v05 v03
            }
            &:hover:not(:checked):not(:indeterminate) { c: 0 0 bg3 }
            &:indeterminate {
                z = '<rect x="128" y="128" width="256" height="256" fill="white"/>'
                background-image: s("url('%s%s</svg>') %s", r(prefix), r(z), i)
                c: 0 v16 v14
            }
        }
    }

    // Better select element styles.
    select {
        /// Custom icon.
        r       = unquote
        prefix  = 'data:image/svg+xml;utf8,'
        prefix += '<svg width="16" height="16" fill="' + to_svg($fg4) + '" '
        prefix += 'xmlns="http://www.w3.org/2000/svg">'
        path    = '<path d="M4.427 9.427l3.396 3.396a.251.251 0 00.354 '
        path   += '0l3.396-3.396A.25.25 0 0011.396 9H4.604a.25.25 0 '
        path   += '00-.177.427zM4.423 6.47L7.82 3.072a.25.25 0 01.354 0L11.57 '
        path   += '6.47a.25.25 0 01-.177.427H4.6a.25.25 0 01-.177-.427z"/>'

        &.form-select {
            background-image: s("url('%s%s</svg>') %s", r(prefix), r(path), i)

            /// Override default colors.
            &:not([disabled]) {
                c: 0 0 bg2
                &:hover { c: 0 0 bg3 }
                &:active { c: 0 0 bg4 }
            }
        }
    }

    // Fix checkbox on notifications alignment
    if (chbx_a_header) {
        .Box-header {
            label {
                span {
                    &.js {
                        &-select-all-text, &-count-selected-text {
                            vertical-align: super
                        }
                    }
                }
                input[type='checkbox']{
                    margin-top: .25rem
                }
            }
        }
    }

    // Actions
    .CheckStep {
        & a {
            &:hover {
                color: var(--color-text-white) i;
            }
        }
        &[open] {
            & .CheckStep-header {
                color: var(--color-text-white)
                background-color: var(--color-hidden-text-expander-bg-hover)
                box-shadow: none
                &-label { color: var(--color-text-white) }
            }
        }
        &-line {
            color: var(--color-diff-blob-num-text)
            & .CheckStep {
                &-line-number {
                    color: var(--color-diff-blob-num-text)
                }
            }
            &:hover {
                color: var(--color-text-white)
                background-color: var(--color-hidden-text-expander-bg-hover);
            }
            & .CheckStep {
                &-line {
                    &-content {
                        & a {
                            color: ac
                        }
                    }
                }
            }
            &.selected {
                color: var(--color-diff-blob-num-text)
                & .CheckStep {
                    &-line-number {
                        color: var(--color-diff-blob-num-text)
                    }
                }
            }
        }
        & .log-line-command {
            color: var(--color-auto-blue-7)
            & .CheckStep-line-number {
                color: var(--color-auto-blue-7)
            }
        }
        &-header {
            background-color: var(--color-hidden-text-expander-bg-hover)
            box-shadow: none
            &:hover {
                background-color: var(--color-hidden-text-expander-bg-hover)
                box-shadow: none
            }
            &-label {
                color: fg2
            }
            &-dropdown {
                &:hover {
                    color: var(--color-text-tertiary)
                    background-color: var(--color-hidden-text-expander-bg-hover) i
                    & .octicon {
                        color: var(--color-text-tertiary) i
                    }
                }
            }
        }
    }
    .CheckRun {
        background-color: var(--color-bg-primary)
        &-header {
            border-bottom: 1px solid bg5
            .CheckRun {
                &-search-input {
                    color: var(--color-text-secondary);
                    background-color: var(--color-input-bg);
                    &:focus {
                        color: var(--color-text-primary);
                    }
                }
            }
            &-counter {
                color: var(--color-text-secondary);
                background-color: var(--color-counter-bg);
            }
        }
        &-log-title {
            color: fg3;
        }
        &-header {
            background-color: var(--color-bg-primary) i
            border-top: 1px solid var(--color-border-primary)
            & .btn-link {
                &:not([disabled]) {
                    color: var(--color-text-tertiary)
                    & .octicon {
                        color: var(--color-text-tertiary)
                    }
                }
            }
            & .btn {
                & .btn-link {
                    &:not([disabled]) {
                        color: var(--color-text-tertiary)
                        & .octicon {
                            color: var(--color-text-tertiary)
                        }
                    }
                }
            }
        }
    }
    .checks-list-item {
        &.bg-white {
            background-color: var(--color-bg-secondary) i
        }
    }

    // Global -> Color overrides.
    /{
        /// NOTE: Remaps bg1 to bg0.
        .js-profile-timeline-year-list,
        .tabnav {
            &.color-bg-primary {
                c: 0 0 bg0
            }
        }
        .diffbar,
        .TimelineItem-break,
        h3 > span.color-bg-canvas,
        .contribution-activity-listing .color-bg-primary,
        .page-profile .Progress.color-bg-primary {
            c: 0 0 bg0
        }

        /// NOTE: Remaps bgX to bg1.
        .commit-form,
        .form-actions .bg-gray-light {
            c: 0 0 bg1
        }

        /// NOTE: Remap bg3 to bg1.
        .color-bg-tertiary {
            .notification-archived,
            .notification-starred,
            .notification-read {
                c: 0 0 bg1
                &:hover { c: 0 0 bg2 }
            }
        }

        /// Notifications -> Item colors.
        .notification {
            &-navigation { c: 0 0 bg0 }
            &s-list-item {
                c: 0 bg4
                &:hover, &.navigation-focus { b: inset 2px 0 0 ac i }
                &.notification-unread:not(#z) {
                    c: 0 0 bg2
                    &:hover { c: 0 0 bg3 }
                    .notification-list-item-unread-indicator { c: 0 0 ac }
                }
                &:hover .notification-list-item-actions .btn { c: 0 0 t }
            }
        }

        /// Profile/Project/Org -> Navigation.
        /// TODO: Figure out a better way to override colors.
        .application-main {
            > .bg-white,
            > div > main > .color-bg-secondary,
            .orghead {
                &:first-child { c: 0 0 bg1 }
            }

            /// Repository -> Archived styles.
            > div > main > .flash-warn {
                margin-top: 0 i
                c: 0 0 red
                + .bg-gray-light {
                    c: 0 0 bg1
                    b: inset 0 -1px bg3
                    .UnderlineNav { b: inset 0 -1px bg3 }
                }
            }

            /// Repository -> Sub-navigation.
            nav.js-repo-nav { c: 0 0 bg1 }

            /// Repository -> Projects.
            .js-project-container {
                > .project-header,
                > .project-columns {
                    c: 0 0 bg0
                }
                .project-column { c: 0 0 bg1 }
                .js-project-column {
                    &-card:hover { b: 0 2px 4px sh i }
                    &-automation-footer { c: 0 bg3 bg1 }
                }
            }
        }

        /// Topics -> Background.
        [style*='background-color: #fcfdfd'] {
            c: 0 0 bg0
        }
        /// Topics -> Issues.
        [style*='(255\,255\,255\,1)\, rgba(255\,255\,255\,0))'] {
            background: linear-gradient(to top, bg1, t) i
        }

        button.close-button { color: fg1 }
        .vcard-username { c: fg1 }

        // Progress loader
        .progress-pjax-loader > .progress-pjax-loader-bar[style*="background-color"] {
            c: 0 0 ac
            b: none i
        }

        /// Code blocks.
        .markdown-body pre { c: 0 0 bg2 }

        /// Releases.
        .release-timeline-tags {
            .tag-timeline-date::after { c: 0 bg0 }
        }

        .subnav-item {
            &.selected,
            &[aria-current]:not([aria-current="false"]),
            &[aria-selected="true"] {
                c: 0 ac 0
            }
        }

        /// Dashboard -> Promotions.
        form[style*='background-color: #212528'] {
            border: 1px solid bg5
            c: 0 0 bg2
            [style*='color: #fff'] { c: fg1 }
        }

        /// Projects -> Issue labels.
        if dimmed_labels {
            html:not([data-color-mode=dark]) .IssueLabel {
                transition: 0.2s ease-in-out
                filter: brightness(0.7) i
                &:hover { filter: unset i }
            }
        }

        /// Image fixes
        //  Actions e.g. https://github.com/vednoc/dark-github/actions/new
        .repo {
            &-actions-hero {
                filter: invert(0.95) hue-rotate(180deg) brightness(1.2)
                mix-blend-mode: lighten
            }
        }
        //  Marketplace e.g. https://github.com/marketplace
        .MarketplaceBackground-recommendations {
            /img[src*="marketplace-illustration"] {
                filter: invert(0.95) hue-rotate(180deg) brightness(1.2)
                mix-blend-mode: lighten
            }
        }

        /// Remove SVG for dark/light mode toggle.
        .profile-color-modes {
            svg { display: none i }
            span[role] {
                top: -40px
                &::before {
                    content: 'Change mode'
                    position: absolute
                    margin-left: -12ch
                    margin-top: 2px
                }
            }
        }

        /// Project -> Find file page.
        .tree {
            &-finder-input { c: 0 0 t }
            &-browser {
                rad: 6px
                > li:first-of-type { rad: 5px 5px 0 0 }
                > li:last-of-type { rad: 0 0 5px 5px }
                &-result {
                    &:hover { c: 0 0 bg3 }
                    &[aria-selected="true"] { c: 0 0 bg4 }
                }
            }
        }
    }

    // Navbar.
    .js-header-wrapper {
        /// Exclude login/auth pages.
        /:not(.session-authentication) > & {
            border-bottom: 1px solid bg5
            c: 0 0 bg2
        }

        /// Feat -> Width for navbars.
        if short_navbars {
            ex = 'not(.full-width):not(.notifications-v2):not(.page-new-repo)'
            /main > .color-bg-secondary.hide-full-screen,
            /body:{ ex } > .js-header-wrapper:not(.Progress) {
                > * {
                    max-width: 1280px
                    margin: 0 auto
                }
            }

            /// Repository navigation bar border.
            /.application-main > div > main > div:first-child {
                b: inset 0 -1px bg3 i

                /// Fix context menu.
                nav {
                    position: relative
                    b: inset 0 -1px bg3 i
                }
            }
        }

        /// Feat -> Sticky navbar.
        if (navbar_sticky) {
            position: sticky i
            z-index: 99
            top: 0 i

            /// Fix progress bar position.
            .Progress { top: 0 }

            /// Dashboard -> Tweak top offset for sidebar items.
            /.dashboard-sidebar.is-stuck { margin-top: 60px i }
        }

        /// Fix aligntment and colors of sticky navbars.
        /.gh-header {
            /// Issues.
            &-sticky.is-stuck {
                margin-top: 3px i
                + .gh-header-shadow {
                    height: 63px i
                    c: 0 0 bg2
                }
            }

            /// Pull Requests.
            ~ .pr-toolbar.is-stuck {
                height: 62px i
                c: 0 0 t
                &::before {
                    content: ''
                    z-index: -1
                    position: fixed
                    left: 0; top: 0; right: 0
                    height: 62px i
                    c: 0 0 bg2
                }
                > .diffbar { c: 0 0 bg2 }
                + .toolbar-shadow {
                    margin-top: 2px i
                    border-top: 1px solid bg5 i
                }
            }
        }

        /// Search. @upstream
        .header-search-wrapper {
            c: 0 0 bg3
            input { c: fg1 }

            /// Fix styles for focused state.
            &.focus {
                border-bottom-left-radius: 0 i
                border-bottom-right-radius: 0 i

                /// Reset results.
                .Box {
                    margin-left: -1px
                    width: calc(100% + 2px) i
                }
            }
        }

        /// Notifications. @upstream
        .mail-status {
            background-image: none i
            c: 0 0 ac
        }

        /// Logged out style.
        .Header-old {
            padding-top: 3px i
            padding-bottom: 3px i

            /// Default one uses white color.
            --color-text-white: fg1

            /// Wrapper max width.
            > .container-xl { max-width: 1250px i }

            /// Search.
            .header-search label {
                border: 1px solid bg5
                ::placeholder { c: fg4 }
                &, input { max-height: 30px i }
                > input {
                    border-top: 1px solid bg5 i
                    &.jump-to-field-active { c: 0 0 bg1 }
                }
            }
        }
    }

    // Navigation on "/new/project" page.
    .pagehead-tabs-item {
        &.selected {
            border-top-color: ac
            c: 0 0 bg0
        }
    }

    // Navigation. @upstream
    .UnderlineNav-item {
        &.selected,
        &[role="tab"][aria-selected="true"],
        &[aria-current]:not([aria-current="false"]) {
            c: 0 ac
        }
        &:focus, &:hover { c: 0 bg5 }
        /.UnderlineNav { b: inset 0 -1px 0 bg4 }
    }

    // Sub-navigation. @upstream
    .site-subnav {
        b: 0 1px 0 bg3

        /.subnav-link {
            c: fg4
            &:hover { c: fg2 bg5 }
            &.selected { c: fg1 ac }
        }
    }

    // Reset colors for tabs.
    .tabnav-tab {
        &.selected,
        &[aria-selected="true"],
        &[aria-current]:not([aria-current="false"]) {
            c: 0 0 bg0
        }
        &[aria-current="true"], /// Explore: topics/tag
        &[aria-current="true"].code,
        &[aria-current="true"].preview,
        &[aria-selected="true"].write-tab:not(#z),
        &[aria-selected="true"].preview-tab:not(#z) {
            c: 0 0 bg1
        }
    }

    // Modals -> Overlay.
    .details-overlay-dark[open] > summary::before {
        z-index: 121 // Hides Gitako.
        opacity: 0.85
        c: 0 0 bg0
    }

    // Project -> File tree.
    .Box {
        /// Use lighter background color for focused items.
        &-row--focus-gray.navigation-focus { c: 0 0 bg2 }

        /// Border color for modals.
        &--overlay { c: 0 bg5 }

        /// Tree items.
        &-row.js-navigation-item {
            c: 0 bg4

            /// Fix double border in issues.
            &:first-of-type { c: 0 t }
        }

        /// Remove background from avatar groups.
        /.AvatarStack-body { c: 0 0 t }

        /// Feat -> Old readme header design.
        if (readme_header) {
            &-header.border-bottom-0 {
                border-bottom: 1px solid bg5 i
                c: 0 0 bg2

                /// Fix padding in the body.
                + .Box-body { padding-top: 32px i }
            }
        }

        /// Feat -> Neutral colors in latest commit.
        if (latest_commit) {
            &-header--blue { c: 0 bg5 bg2 }

            /// Commit details.
            /.full-commit {
                c: 0 0 bg2
                p.commit-title { c: fg1 }
            }
        }
        else {
            /.full-commit {
                p.commit-title {
                    color: fg3
                }
            }
        }


        /// Feat -> Shorter headers.
        if (short_headers) {
            condition = (readme_header == 1) ? '' : '--blue'
            /.repository-content &-header{ condition } {
                padding-top: 8px
                padding-bottom: 7px

                /// Smaller avatars.
                .avatar[style*='width:24px'] {
                    margin-top: 2px
                    margin-left: 2px
                    &, img {
                        width: 20px i
                        height: @width
                    }
                }
            }
        }
    }

    // Project -> Insights.
    .menu-item {
        /// Disabled sidebar options. @upstream
        &.color-text-secondary { c: fg5 }

        /// Graphs -> Contributors.
        /.graphs {
            .tint-box, .capped-card-content {
                c: 0 0 bg2
            }
            line[stroke*='#000'] { g: 0 bg4 }
            text[fill='#6a737d'] { g: fg4 }

            /// Traffic -> Remove white circles.
            /.dots > circle[cx][cy] { g: 0 bg1 }
        }

        /// Graphs -> Traffic.
        /.traffic-graph {
            text[fill='#000'] { g: fg1 }
            line[stroke='#000'] { g: 0 bg4 }

            /// Add whitespace. @upstream
            &-stats {
                c: 0 bg5
                ul > li {
                    padding: 1rem
                    text-align: center
                    c: fg1 0 bg2
                    &:first-of-type {
                        border-radius: 0 0 0 6px
                        border-right: 1px solid bg5
                    }
                    &:last-of-type { border-radius: 0 0 6px 0 }
                }
            }
        }

        /// Graphs -> Pulse.
        /.graph-canvas {
            text[fill='#000'] { g: fg1 }
            line[stroke*='#000'] { g: 0 bg4 }
        }

        /// Graphs -> Code frequency.
        /.code-frequency {
            .addition { g: v46 }
            .deletion { g: v16 }
        }

        /// Tables.
        /.gutter table.capped-list th { c: 0 bg4 }
    }

    // Diff -> Changes. @upstream
    .blob {
        /// File background.
        /.file {
            c: 0 0 bg1

            /// Diff -> Fix rounded corners of collapsed files.
            &:not(.open) > .file-header--expandable { rad: 6px i }

            /// Diff -> Fix rounded corners of image diffs.
            .render-viewer { rad: 6px i }

            /// Diff -> Tag expander.
            /.branches-tag-list .ellipsis-expander { c: 0 0 bg5 }
        }

        /// Code navigation.
        &-code .pl-token {
            &:not(.active):not(:hover) {
                text-decoration: underline
            }
            &:hover, &.active { c: v99 0 v32 }
        }

        /// View -> Line highlight.
        /table.highlight > tbody > tr {
            > td.highlighted {
                &, &::before {
                    c: 0 0 var(--color-blob-line-highlight-bg)
                    mix-blend-mode: screen
                }
                &::before {
                    content: ''
                    position: absolute
                    top: 0; left: -50px; width: 50px
                }
            }
            &:hover > td {
                c: 0 0 bg2
                &.highlighted { &, &::before { c: 0 0 v31 }}
            }
            &.divider:hover > td { c: 0 0 bg3 }
        }

        /// Diff -> Line highlights.
        /table.diff-table > tbody > tr {
            > td.selected-line {
                z-index: 1
                &::after { z-index: -1 }
            }
            &[data-hunk]:hover > td { c: 0 0 bg2 }
            &:hover > td.selected-line { c: 0 0 v30 }
            &:hover > td[class*='addition'] { c: 0 0 v41 }
            &:hover > td[class*='deletion'] { c: 0 0 v11 }

            /// Add colors to +/- characters.
            /.blob-code {
                &-addition &-marker::before { c: v47 }
                &-deletion &-marker::before { c: v17 }
                &.selected-line &-marker::before { c: v97 }
            }
        }

        /// Code snippet dividers. @upstream
        /.divider &-num { c: 0 0 bg3 }
        /.divider &-code { c: 0 0 bg2 }

        /// Code search dividers. @upstream
        /.code-list { & &-item { c: 0 bg3 }}
    }

    // Notes -> Resets.
    .timeline-comment {
        &[class*='--caret'] {
            &::before { border-right-color: bg5 }
            &::after { border-right-color: bg3 i }
            &.current-user {
                &::before { border-right-color: v65 i }
                &::after { border-right-color: v61 i }
            }
        }

        /// PR -> CLI instructions.
        /.merge-branch-manually { c: 0 bg5 }
        /.copyable-terminal {
            border: 1px solid bg5
            c: 0 0 bg1
        }

        /// Remove borders from input box.
        &-wrapper { c: 0 t }

        /// Remove header/input backgrounds.
        /.gh-header, /.discussion-timeline-actions { c: 0 0 t }

        /// Badges.
        /.TimelineItem-badge { --color-bg-canvas: var(--bg-0) }

        /// Subscribe to updates.
        /.thread-subscription-status {
            c: 0 bg5
            /.sidebar-notifications & { c: 0 0 bg0 }
        }
    }

    // Discussions -> Resets.
    .discussion-comment {
        /// Header/question.
        .timeline-comment, .bg-white { c: 0 0 bg2 }
        .bg-white { rad: 0 i }

        /// Answers.
        .color-bg-canvas-inset {
            rad: 0 0 6px 6px i
            c: 0 0 bg1
        }

        /// Load more hidden items.
        /form.pagination-loader-container { c: 0 0 t }
    }

    // Profile.
    /{
        /// Calendar legends / Progress bars in activity.
        .Progress-item {
            &[style*="#ebedf0"] { c: 0 0 var(--color-calendar-graph-day-bg) }
            &[style*="#9be9a8"] { c: 0 0 var(--color-calendar-graph-day-L1-bg) }
            &[style*="#40c463"] { c: 0 0 var(--color-calendar-graph-day-L2-bg) }
            &[style*="#30a14e"] { c: 0 0 var(--color-calendar-graph-day-L3-bg) }
            &[style*="#216e39"] { c: 0 0 var(--color-calendar-graph-day-L4-bg) }
        }

        /// Add border to calendar legends.
        .legend li { b: inset 0 0 0 1px var(--color-calendar-graph-day-border) i }

        /// Halloween activity overview.
        .halloween-activity-overview .activity-overview {
            &-box [fill='#40c463'] { g: v22 v22 }
            &-axis, &-point { g: 0 v24 }
        }

        /// Regular activity overview.
        .activity-overview {
            &-box [fill='#40c463'] { g: ac ac }
            &-axis, &-point { g: 0 v04 }
        }

        /// Invert illustrations.
        if dark(BG) {
            img[src*='githubassets.com/images/modules/profile'][src$='.svg'] {
                filter: invert() hue-rotate(180deg) brightness(120%)
            }
        }
    }

    // Code.
    /{
        /// Feat -> Add borders around code blocks and similar elements.
        if (code_borders) {
            /// Add border around code and commit references.
            .markdown-body { code, tt, pre { border: 1px solid bg5 }}
            .commit { &-ref, &-sha { border: 1px solid bg5 }}
            .branch-name { border: 1px solid bg5 }
        }

        /// CodeMirror editor.
        .CodeMirror {
            &[class*='github-light'] {
                c: fg1 0 bg1
                r: 0 0 6px 6px
            }
            &-lines, &-gutters { c: 0 0 bg1 }
            &-linenumber { c: fg5 }

            /// Gist -> Editor backaground.
            /.file.js-code-editor { c: 0 0 bg1 }
        }
    }

    // Hide "notifications" button while logged out. @upstream
    .logged-out .pagehead-actions a[aria-label*='notification'] {
        display: none
    }

    // Extension -> Gitako.
    /// Link: https://github.com/EnixCoda/Gitako
    /// TODO: Maybe switch to different background colors.
    .gitako-ready {
        /// Logo.
        .gitako-toggle-show-button { height: 60px i }

        /// Colors.
        /.gitako-side-bar {
            a { c: ac }

            /// Reset body.
            &-body {
                border-left: none i
                c: 0 bg5 bg1
            }

            /// Project header.
            .header .meta-bar {
                min-height: 62px i
                c: 0 0 bg2
                [class*='BranchName-'] { c: fg3 0 bg3 }
                [class*='Breadcrumb']::after { c: fg4 }
            }

            /// Fix 'Loading' and 'Access Denied' borders.
            .loading-indicator-container,
            .header + .description {
                c: 0 bg5
            }

            /// Fix path prefix, 'No results found', and 'Loading' text colors.
            .prefix, [color='text.gray'], .loading-indicator { c: fg3 }

            /// 'Lazy mode is ON' alert.
            [color='gray.4'] { c: fg5 }

            /// Files.
            .file-explorer {
                .search-input {
                    c: fg1 bg5 bg1
                    border-left: none
                    border-right: none
                    padding: 6px 0
                    &:hover, &:focus-within { c: 0 0 bg2 }
                    .TextInput-icon { c: fg3 }
                }
                .node-item {
                    c: fg1 bg4 bg1
                    &:hover { c: 0 0 bg2 }
                    &:active, &.focused { c: 0 0 bg3 }
                }
                mark { c: fg1 0 v02 }
            }

            /// Footer.
            .gitako-settings-bar {
                c: 0 0 bg2
                .header-row { c: 0 bg5 }

                /// Lazy mode.
                span[color='gray.6'] { c: v98 0 v23 }
            }

            /// Settings -> Header.
            .gitako-settings-bar-title {
                c: 0 bg5 bg3
                b: inset 0 -1px bg5 i

                /// Remove background.
                + div > .shadow-shelter { c: 0 0 t }
            }


            /// Settings -> Buttons and inputs.
            select,
            .TextInput-wrapper,
            button.toggle-mode,
            [class*='ButtonBase-'] {
                c: fg1 bg5 bg3
                b: none i
                &:hover { c: 0 0 bg4 }
                &:focus-within {
                    c: 0 ac bg4
                    b: 0 0 0 2px v03 i
                }
            }

            /// Buttons.
            .close-side-bar-button { c: 0 0 bg2 }
            .settings-button { c: 0 0 bg2 }
            .octicon { c: fg3 }
            .find-in-folder, .go-to {
                &-button:hover { c: 0 0 bg4 }
            }

            /// Resize.
            .gitako-resize-handler { c: 0 bg5 bg2 }
        }

        /// Clippy in code blocks.
        /.clippy-wrapper .clippy {
            c: 0 bg5 bg4
            i { filter: invert(0.8) }
            &:hover { c: 0 0 bg5 }
        }
    }

    // Extension -> GitHub Original Streak.
    /// Link: https://github.com/Naramsim/GithubOriginalStreak
    .original-streak {
        .contrib-number { c: fg1 }
        .text-muted { c: fg3 }
    }
}

@-moz-document regexp('https?://((docs)\\.)github?.com(/.*)?') {
    body {
        &, p { c: fg1 }
        a { color: ac }
    }
    header {
        & #search-results-container {
            background: var(--color-bg-tertiary)
            box-shadow: 0 1px 15px bg2
        }
    }
    /// Image fixes
    //  All procedural images
    .procedural-image-wrapper {
        /img {
            filter: invert(.93) hue-rotate(180deg) brightness(1.3)
            mix-blend-mode: lighten
        }
    }
    // Landing svg
    #landing {
        \[data-name="octocat header"] {
            filter: invert(.93) hue-rotate(180deg) brightness(1.3)
            mix-blend-mode: lighten
        }
    }

    /// More guides.
    .Box {
        border: 1px solid bg4
        background-color: bg2
    }

    .dropdown-withArrow svg.arrow[stroke*="#1277eb"] {
        stroke: var(--color-icon-primary)
    }

    /// Sidebar.
    .sidebar {
        background-color: var(--color-bg-secondary)
        &-maptopic {
            .sidebar-article {
                &::before {
                    border-left: 1px solid v03
                }
                &.active {
                    &::before {
                        border-left: 3px solid v05
                    }
                }
            }
        }
        &-background-color {
            background-color: var(--color-bg-secondary)
        }
        &-category {
            &.active {
                background-color:  var(--color-bg-tertiary)
            }
            > a { color: ac }
            summary a { color: fg1 }
        }
        &-product {
            > a { color: ac }
            summary a { color: ac }
            &s {
                a:hover { color: ac }
                arrow:hover { color: ac }
            }
        }
    }

    .sidebar-product.is-current-page > a, .sidebar-category.is-current-page > a,
    .sidebar-maptopic.is-current-page > a, .sidebar-article.is-current-page > a {
        color: ac
    }

    /// Backgrounds.
    .bg {
        &-blue-light { c: 0 0 var(--v6-0) }
        &-blue { c: 0 0 var(--v6-3) }
        &-purple-light { c: 0 0 var(--color-auto-purple-9) }
    }

    /// Borders.
    .border {
        &-blue { c: 0 var(--v6-3) }
        &-purple { c: 0 var(--color-auto-purple-6) }
        &-top { border-top-color: var(--color-border-primary) i }
        &-bottom { border-bottom-color: 0 var(--color-border-primary) }
        &-gray-light { border-color: var(--color-border-primary) i }
    }

    .markdown-body {
        & table {
            & tr {
                background-color: var(--bg-0)
                border-top-color: var(--color-border-secondary)
                &:nth-child(2n) {
                    background-color: var(--bg-0)
                }
            }
            & th {
                background-color: var(--bg-0)
                box-shadow: 0 3px 0 0 var(--color-border-secondary);
            }
        }
        & h2 { border-bottom-color: var(--color-border-primary) }
        & .highlight pre,
        & pre {
            background-color: var(--color-bg-secondary)
            & .hljs {
                color: var(--color-alert-info-text)
            }
        }
    }

    /// Text colors
    .text {
        &-gray-dark { c: fg1 }
        &-gray { c: fg3 }
        &-gray-light { c: fg3 }
        &-white { c: fg1 }
    }

    .color {
        &-gray-5 { c: fg5 }
    }

    .link {
        &-gray-dark {
            c: var(--color-text-secondary)
            &:hover { c: ac }
        }
        &-gray {
            &:hover {
                color: ac i
            }
        }
    }

    .bg-white {
        c: 0 0 bg2
    }

    .box-shadow-large {
        box-shadow: 0 8px 20px bg2 i;
    }

    [open] > .btn {
        border-color: var(--color-btn-border)
        background-color: var(--color-btn-bg)
    }
    .btn {
        color: var(--color-btn-primary-text)
        border-color: var(--color-btn-border)
        background-color: var(--color-btn-bg)
        transition: color, background 0.2s
        &:active,
        &.selected,
        &[aria-selected="true"] {
            background-color: var(--color-btn-hover-bg) i
            box-shadow: var(--color-shadow-inset)
        }
        &.disabled,
        &:disabled,
        &[aria-disabled="true"] {
            color: var(--color-text-disabled)
            background-color: var(--color-btn-bg)
            border-color: var(--color-btn-border)
        }
        &.hover,
        &:hover {
            background-color: var(--color-btn-hover-bg)
            border-color: var(--color-btn-hover-border)
        }
        &-outline {
            color: v06
            border-color: bg5
            background-color: var(--color-btn-bg)
            &:hover { background-color: bg3 }
            &:focus { box-shadow: 0 0 0 3px v01 }
            &.disabled,
            &:disabled,
            &[aria-disabled="true"] {
                color: var(--color-btn-outline-disabled-text)
                background-color: var(--color-btn-bg)
                border-color: var(--color-btn-border)
            }

            &-mktg {
                color: var(--ac-1)
                border-color: var(--ac-1)
                background-color: var(--bg-0)
                &:hover { color: ac; border-color: ac }
                &:focus { box-shadow: 0 0 0 3px v01 }
            }
        }
    }

    :checked + .x-radio-label {
        background: v03
    }

    #landing[style*="background-color: #fafbfc"],
    .js-support-banner[style*="background-color: #fafbfc"] {
        c: fg1 0 var(--color-bg-canvas)
    }

    .underline-dashed {
        background-image: linear-gradient(to right, bg5 50%, bg0 0%) i
    }
    .UnderlineNav-item {
        color: var(--color-menu-heading-text)
    }

    .ais-SearchBox-input {
        color: var(--color-text-secondary)
        c: 0 var(--color-border-secondary) bg2
        b: var(--color-shadow-small)
        &:focus { b: 0 0 0 3px v01 }
    }
    .ais-Hits-item:hover {
        background: var(--color-alert-success-bg);
    }
    .search-result-title mark, .search-result-title .ais-Highlight-highlighted {
        color: ac
    }
    .nav-desktop {
        &-productDropdown,
        &-langDropdown {
            background: var(--color-dropdown-bg)
        }
    }
}

@-moz-document regexp('https?://((support)\\.)github?.com(/.*)?') {
    body {
        color: fg2
        a { color: ac }
    }
    .Header {
        background-color: bg3
        &-item {
            & img {
                filter: invert(1)
            }
        }
        & .Header-link {
            color: ac
        }
    }

    hr, .rule { border-color: var(--color-border-primary) }

    .bg-blue { background-color: v02 i }

    .text {
        &-blue { c: ac 0 0 }
        &-gray { color: fg1 i }
        &-gray-dark { color: fg2 i }
        &-gray-light { color: fg1 i }
    }

    .link-gray {
        color: fg5 i
        &:hover {
            color: ac i
        }
    }
    .btn {
        color: var(--color-btn-primary-text)
        border-color: var(--color-btn-border)
        background-color: var(--color-btn-bg)
        &:focus,
        &.focus {
            box-shadow: 0 0 0 0.2px fg5
        }
        &:active,
        &.selected,
        &[aria-selected="true"] {
            background-color: var(--color-btn-focus-bg)
            box-shadow: var(--color-shadow-inset)
        }
        &:hover {
            background-color: var(--color-btn-hover-bg)
        }
        &-mktg {
            color: var(--color-btn-primary-icon)
            border: 1px solid v05
            &:focus {
                box-shadow: 0 0 0 0.2em v01
            }
            &:hover {
                border: 1px solid v05
            }
    }
    &-primary {
        color: var(--color-btn-primary-text)
        background-color: var(--color-btn-primary-bg)
        box-shadow: 0 1px 0 rgba(27,31,35,0.1),inset 0 1px 0 rgba(255,255,255,0.03);
        &:hover {
            background-color: var(--color-btn-primary-hover-bg) }
        }
        &:focus,
        &.focus {
            box-shadow: 0 0 0 2px v01
        }
        &:active,
        &.selected,
        &[aria-selected="true"] {
            background-color: var(--color-btn-primary-focus-bg)
            box-shadow: var(--color-shadow-inset)
        }
    }

    .Box {
        background-color: var(--color-bg-primary)
        border: 1px solid var(--color-border-primary)
        &-header {
            background-color: var(--color-bg-secondary);
            border-color: var(--color-border-primary);
        }
    }

    .border-bottom {
        border-bottom: 1px solid var(--color-border-primary) i;
    }

    .form-select, .form-control {
        color: var(--color-text-secondary)
        background-color: var(--color-input-bg)
        border-color: var(--color-input-border)
        box-shadow: none;
        &.focus,
        &:focus {
            border-color: v05
            box-shadow: 0 0 0 3px v01;
        }
    }
    .form-group {
        & .form-control {
            background-color: var(--color-input-bg)
            &:focus {
                background-color: var(--color-input-contrast-bg)
                border-color: v05
                box-shadow: 0 0 0 3px v01;
            }
        }
        & #q {
            background-color: var(--color-input-bg);
        }
    }
    // recolor search icon svg
    @css {
        #q {
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%23bebebe" fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0013 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 000-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"/></svg>') no-repeat 6px
        }
    }

    .previewable-comment-form .comment-form-head.tabnav {
        background: bg3
    }

    .add-markdown-comment {
    color: fg3
    border: 1px solid var(--color-border-primary)
    }

    .tabnav {
        border-bottom: 1px solid var(--color-border-primary)
        &-tab {
            color: fg3
            &:hover {  color: fg2 }
        }
    }
    .tabnav-tab.selected, .tabnav-tab[aria-selected="true"],
    .tabnav-tab[aria-current]:not([aria-current="false"]) {
        border-color: var(--color-border-primary)
    }

    .bg-gray-light {
        background-color: var(--color-bg-primary) i;
    }

    .drag-and-drop {
        color: var(--color-text-tertiary)
        background-color: var(--color-bg-primary)
        border: 1px solid var(--color-border-primary)
    }
}

@-moz-document regexp('https?://render\.githubusercontent?.com(/.*)?') {
    :root {
        /// Accent color.
        --ac: AC

        /// Generate CSS color variables.
        colors = (bg fg v0 v1 v2 v3 v4 v5 v6 v7 v8 v9)
        for color in colors[0..1] {
            for tone in 0..5 {
                { '--%s-%s' % ((color) (tone)) }: $ + color + tone
            }
        }
        for color in colors[2..length(colors)] {
            for tone in 0..9 {
                { '--%s-%s' % ((color) (tone)) }: $ + color + tone
            }
        }

        /// Native vars.
        --color-text-primary: fg1 //#24292e;
        --color-text-secondary: fg3 //#586069;
        --color-text-danger: v17 //#cb2431;
        --color-text-success: v46 //#22863a;
        --color-icon-secondary: v96 //#586069;
        --color-border-primary: bg5 //#e1e4e8;
        --color-border-secondary: bg5 //#eaecef;
        --color-border-danger: v16 //#d73a49;
        --color-border-success: v45 //#34d058;
        --color-bg-canvas: bg1 //#ffffff;
        --color-bg-primary: bg1 //#ffffff;

        /// Stole this from GHD.
        --dark: url("data:image/gif;base64,R0lGODlhCgAKAIAAABoaGgAAACwAAAAACgAKAAACEYQdmYcaDNxjEspKndVZbc8UADs=") i
        --light: url("data:image/gif;base64,R0lGODlhCgAKAIAAAOXl5f///yH5BAAAAAAALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==") i

        /// Feat -> Theme scrollbars.
        if c_scrollbars {
            scrollbar-color: bg5 bg2
            /::-webkit-scrollbar {
                width: 12px
                &-track { background: bg2 }
                &-thumb { background: bg5 }
            }
        }
    }

    /// Diff -> Image background.
    .render-shell {
        &, /body { c: 0 0 bg1 }
        img { &, &.asset { c: 0 bg1 }}

        /// Stole this from GHD.
        &:not([data-document-path]) img, canvas {
            border: none i
            background-image: var(--dark)
            &:hover { background-image: var(--light) }
        }

        if (dark(BG)) {
            /// Rich diff -> Invert controls.
            .swipe-shell { c: 0 v96 }
            .transparent, .opaque { filter: invert(0.95) brightness(150%) i }

            /// OpenStreetMap.
            .leaflet {
                &-bar, &-control-layers { c: 0 fg1 }
                &-bar > a:last-child { border-bottom: none }
                &-container { filter: invert(0.95) hue-rotate(180deg) brightness(120%) }
                &-popup-content { overflow-y: auto }
                &-marker-icon { filter: invert(1) grayscale(1) brightness(130%) }
                &-control.mapbox-logo { filter: invert(0.8) }
            }
        }
    }

    // Diff -> Images diff bar.
    .render-bar {
        c: 0 bg5 bg2
        li {
            c: fg3 bg5
            &.active {
                c: fg1
                &::before { c: bg5 }
            }
        }
    }

    /// https://github.com/jupyter/notebook/blob/master/docs/source/examples/Notebook/Notebook%20Basics.ipynb
    #notebook {
        c: 0 0 bg1

        /// Base elements.
        table {
            c: fg1 0 bg2
            th, td { c: 0 bg5 }
        }
        a {
            c: ac
            &:hover { text-decoration: none }
        }
        pre, code { c: fg1 0 t 0 0 0 }

        /// Highlight code blocks.
        :not(pre) > code {
            padding: 0 2px
            border: 1px solid bg5
            background-color: bg3
        }

        /// Notebook elements.
        .rendered_html { c: fg1 }
        .text_cell_render { c: fg1 }
        .input_prompt { c: v68 }
        .output_prompt { c: v17 }
        .input_area { c: fg1 bg5 bg2 }

        /// Invert images. Stole this from GHD.
        .output_area .output_png img {
            filter: invert(90%) hue-rotate(180deg) saturate(200%) brightness(85%) i
            &:hover { filter: unset i }
        }
        img.math {
            filter: invert(90%) hue-rotate(180deg)
            c: 0 0 t
        }

        /// Alerts.
        .alert {
            text-shadow: none
            c: v29 v22 v21
            &-danger, &-error { c: v19 v12 v11 }
            &-success { c: v49 v42 v41 }
            &-info { c: v69 v62 v61 }
        }

        /// Syntax.
        .o, .mi, .mf { c: fg3 }
        .nb, .kn, .k, .bp { c: v47 }
        .nn, .nf, .nc { c: v67 }
        .c1 { c: v57 }
        .s1, .s2 { c: v17 }
        .ow { c: v87 }
    }
}
Dark-GitHub by vednoc

Details

Description

Notes

Source code
