├── screenshot.png ├── .github ├── auto_assign-issues.yml ├── auto_assign.yml └── workflows │ └── prettier.yml ├── .vscode ├── extensions.json └── settings.json ├── .editorconfig ├── INSTALL.md ├── .prettierrc.json ├── sample ├── dracula.clj ├── dracula.md ├── dracula.scala ├── dracula.kt ├── dracula.dart ├── dracula.py ├── dracula.js ├── dracula.rb ├── dracula.c ├── dracula.css ├── SAMPLE.md ├── dracula.go ├── dracula.sml ├── dracula.swift ├── dracula.ex ├── dracula.java ├── dracula.php ├── dracula.rs ├── dracula.ts ├── dracula.cs ├── dracula.c++ └── dracula.html ├── LICENSE ├── README.md └── style.user.css /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dracula/github/HEAD/screenshot.png -------------------------------------------------------------------------------- /.github/auto_assign-issues.yml: -------------------------------------------------------------------------------- 1 | addAssignees: true 2 | 3 | reviewers: 4 | - asportnoy 5 | -------------------------------------------------------------------------------- /.github/auto_assign.yml: -------------------------------------------------------------------------------- 1 | addReviewers: true 2 | addAssignees: true 3 | 4 | reviewers: 5 | - asportnoy 6 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["sysoev.language-stylus", "esbenp.prettier-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | indent_style = space 6 | indent_size = 2 7 | insert_final_newline = true 8 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "prettier.configPath": "./.prettierrc.json", 4 | "files.associations": { 5 | "style.user.css": "stylus" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /INSTALL.md: -------------------------------------------------------------------------------- 1 | ### [Github](https://github.com) 2 | 3 | #### Install using Stylus 4 | 5 | If you have the stylus extension installed you can install the theme by clicking the link below. 6 | 7 | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://github.com/dracula/github/raw/master/style.user.css) 8 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": false, 7 | "quoteProps": "as-needed", 8 | "jsxSingleQuote": false, 9 | "trailingComma": "all", 10 | "bracketSpacing": true, 11 | "bracketSameLine": true, 12 | "arrowParens": "always", 13 | "proseWrap": "always" 14 | } 15 | -------------------------------------------------------------------------------- /sample/dracula.clj: -------------------------------------------------------------------------------- 1 | (comment 2 | "Once upon a time...") 3 | 4 | (ns clj-dracula) 5 | 6 | (defstruct dracula :location :birth-date :death-date :weaknesses) 7 | 8 | (defn age 9 | [vamp] (- (vamp :death-date) (vamp :birth-date))) 10 | 11 | ;;...there was a guy named Vlad 12 | (let [d (struct dracula "Transylvania" 1428 1476 '("Sunlight", "Garlic"))] 13 | (println (age d))) -------------------------------------------------------------------------------- /.github/workflows/prettier.yml: -------------------------------------------------------------------------------- 1 | name: Prettier 2 | 3 | on: 4 | pull_request: 5 | push: 6 | 7 | jobs: 8 | prettier: 9 | runs-on: ubuntu-latest 10 | 11 | steps: 12 | - name: Checkout 13 | uses: actions/checkout@v3 14 | 15 | - name: Check code style 16 | uses: creyD/prettier_action@master 17 | with: 18 | dry: true 19 | prettier_options: --check style.user.css 20 | -------------------------------------------------------------------------------- /sample/dracula.md: -------------------------------------------------------------------------------- 1 | 4 | 5 | # Vampires 6 | 7 | | Name | Value | 8 | |------------|------------------| 9 | | location | Transylvania | 10 | | birth date | 1428 | 11 | | death date | 1476 | 12 | | weaknesses | Sunlight, Garlic | 13 | 14 | 15 | 16 | > The **age** is the `deathDate` minus the `birthDate` 17 | 18 | -------------------------------------------------------------------------------- /sample/dracula.scala: -------------------------------------------------------------------------------- 1 | /* 2 | * Once upon a time... 3 | */ 4 | class Vampire(location: String, birthDate: Int, deathDate: Int, weaknesses: Array[String]) { 5 | def age(): Int = { 6 | calcAge() 7 | } 8 | 9 | def calcAge(): Int = { 10 | this.deathDate - this.birthDate 11 | } 12 | } 13 | 14 | // ...there was a guy named Vlad 15 | val dracula = new Vampire(location = "Transylvania", birthDate = 1428, deathDate = 1476, weaknesses = Array("Sunlight", "Garlic")) 16 | -------------------------------------------------------------------------------- /sample/dracula.kt: -------------------------------------------------------------------------------- 1 | /* 2 | * Once upon a time ... 3 | */ 4 | 5 | class Vampire( 6 | val location: String, 7 | val birthDate: Int, 8 | val deathDate: Int, 9 | val weaknesses: Array 10 | ) { 11 | val age: Int 12 | get() = this.calcAge() 13 | 14 | fun calcAge() = 15 | this.deathDate - this.birthDate 16 | } 17 | 18 | // ... there was a guy named Vlad 19 | 20 | fun main() { 21 | Vampire( 22 | "Transylvania", 23 | 1428, 24 | 1476, 25 | arrayOf("Sunlight", "Garlic") 26 | ) 27 | } -------------------------------------------------------------------------------- /sample/dracula.dart: -------------------------------------------------------------------------------- 1 | /* 2 | * Once upon a time... 3 | */ 4 | 5 | class Vampire { 6 | String location; 7 | int birthDate, deathDate; 8 | List weaknesses; 9 | 10 | Vampire({this.location, this.birthDate, this.deathDate, this.weaknesses}); 11 | 12 | int get age => this.calcAge(); 13 | 14 | int calcAge() => this.deathDate - this.birthDate; 15 | } 16 | 17 | void main() { 18 | // ...there was a guy named Vlad 19 | final Dracula = Vampire( 20 | location: 'Transylvania', 21 | birthDate: 1428, 22 | deathDate: 1476, 23 | weaknesses: ['Sunlight', 'Garlic']); 24 | } -------------------------------------------------------------------------------- /sample/dracula.py: -------------------------------------------------------------------------------- 1 | # Once upon a time... 2 | 3 | class Vampire: 4 | def __init__(self, props): 5 | self.location = props['location'] 6 | self.birthDate = props['birthDate'] 7 | self.deathDate = props['deathDate'] 8 | self.weaknesses = props['weaknesses'] 9 | 10 | def get_age(self): 11 | return self.calc_age() 12 | 13 | def calc_age(self): 14 | return self.deathDate - self.birthDate 15 | 16 | # ...there was a guy named Vlad 17 | 18 | Dracula = Vampire({ 19 | 'location': 'Transylvania', 20 | 'birthDate': 1428, 21 | 'deathDate': 1476, 22 | 'weaknesses': ['Sunlight', 'Garlic'] 23 | }) -------------------------------------------------------------------------------- /sample/dracula.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Once upon a time... 3 | */ 4 | class Vampire { 5 | constructor(props) { 6 | this.location = props.location; 7 | this.birthDate = props.birthDate; 8 | this.deathDate = props.deathDate; 9 | this.weaknesses = props.weaknesses; 10 | } 11 | 12 | get age() { 13 | return this.calcAge(); 14 | } 15 | 16 | calcAge() { 17 | return this.deathDate - this.birthDate; 18 | } 19 | } 20 | 21 | // ...there was a guy named Vlad 22 | const Dracula = new Vampire({ 23 | location: 'Transylvania', 24 | birthDate: 1428, 25 | deathDate: 1476, 26 | weaknesses: ['Sunlight', 'Garlic'] 27 | }); -------------------------------------------------------------------------------- /sample/dracula.rb: -------------------------------------------------------------------------------- 1 | # 2 | # Once upon a time... 3 | # 4 | 5 | class Vampire 6 | def initialize(opts) 7 | @location = opts[:location] 8 | @birthDate = opts[:birthDate] 9 | @deathDate = opts[:deathDate] 10 | @weaknesses = opts[:weaknesses] 11 | end 12 | 13 | def age 14 | calcAge 15 | end 16 | 17 | private 18 | 19 | def calcAge 20 | @deathDate - @birthDate 21 | end 22 | end 23 | 24 | # ...there was a guy named Vlad 25 | 26 | dracula = Vampire.new( 27 | location: 'Transylvania', 28 | birthDate: 1428, 29 | deathDate: 1476, 30 | weaknesses: %w[Sunlight Garlic] 31 | ) 32 | 33 | puts dracula.age 34 | -------------------------------------------------------------------------------- /sample/dracula.c: -------------------------------------------------------------------------------- 1 | #include 2 | 3 | struct Vampire { 4 | char *location; 5 | int birthday; 6 | int deathdate; 7 | char *weaknesses[2]; 8 | }; 9 | 10 | int _calcAge(struct Vampire *v) { return v->deathdate - v->birthday; } 11 | 12 | int get_age(struct Vampire *v) { return _calcAge(v); } 13 | 14 | int main() { 15 | struct Vampire v; 16 | 17 | /* There was a guy named Vlad */ 18 | v.location = malloc(12 * sizeof(char)); 19 | v.location = "Transylvania"; 20 | v.birthday = 1428; 21 | v.deathdate = 1476; 22 | v.weaknesses[0] = "Sunlight"; 23 | v.weaknesses[1] = "Garlic"; 24 | 25 | get_age(&v); 26 | 27 | return 0; 28 | } -------------------------------------------------------------------------------- /sample/dracula.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Once upon a time... 3 | */ 4 | 5 | :root { 6 | --birthDate: 1428px; 7 | --deathDate: 1476px; 8 | } 9 | 10 | body { 11 | background: #000; 12 | } 13 | 14 | /* ...there was a guy named Vlad */ 15 | 16 | #dracula { 17 | opacity: 0; 18 | display: none; 19 | visibility: hidden; 20 | font-family: "Transylvania"; 21 | height: calc(var(--deathDate) - var(--birthDate)); 22 | } 23 | 24 | .cape { 25 | background: #ff0000 !important; 26 | } 27 | 28 | @font-face { 29 | font-family: "Transylvania"; 30 | src: url("/location/Transylvania.woff2") format("woff2"); 31 | font-weight: 700; 32 | font-style: normal; 33 | } 34 | -------------------------------------------------------------------------------- /sample/SAMPLE.md: -------------------------------------------------------------------------------- 1 | # Sample 2 | 3 | In order to improve the quality of our screenshots, we created this folder with standardized code snippets. 4 | 5 | ## Instructions 6 | 7 | After you're done taking a screenshot, feel free to delete this `sample` folder. 8 | 9 | ## Why this is cool? 10 | 11 | * It contains examples of string, number, and array 12 | * It contains examples of single line and multi-line comments 13 | * It contains examples of inheritance and functions 14 | * It's simple, funny, and silly :) 15 | 16 | ## Is there a programming language missing? 17 | 18 | Feel free to send a pull request. This will help new theme authors to create awesome screenshots. -------------------------------------------------------------------------------- /sample/dracula.go: -------------------------------------------------------------------------------- 1 | package main 2 | 3 | import "fmt" 4 | 5 | /* 6 | Once upon a time... 7 | */ 8 | type Vampire struct { 9 | Location string 10 | BirthDate int 11 | DeathDate int 12 | Weaknesses []string 13 | } 14 | 15 | func (v *Vampire) Age() int { 16 | return v.calcAge() 17 | } 18 | 19 | func (v *Vampire) calcAge() int { 20 | return v.DeathDate - v.BirthDate 21 | } 22 | 23 | // ...there was a guy named Vlad 24 | 25 | func main() { 26 | dracula := &Vampire{ 27 | Location: "Transylvania", 28 | BirthDate: 1428, 29 | DeathDate: 1476, 30 | Weaknesses: []string{"Sunlight", "Garlic"}, 31 | } 32 | 33 | fmt.Println(dracula.Age()) 34 | } 35 | -------------------------------------------------------------------------------- /sample/dracula.sml: -------------------------------------------------------------------------------- 1 | (* 2 | * Once upon a time... 3 | *) 4 | 5 | structure Vampire = struct 6 | type params = {location: string, 7 | birthDate: int, 8 | deathDate: int, 9 | weaknesses: string list} 10 | type vampire = params 11 | fun new (v : params) : vampire = v 12 | fun age (v : vampire) : int = (#deathDate v) - (#birthDate v) 13 | end 14 | 15 | (* ...there was a guy named Vlad *) 16 | 17 | structure Romainia = struct 18 | val dracula = Vampire.new {location="Transylvania", 19 | birthDate=1428, 20 | deathDate=1476, 21 | weaknesses=["Sunlight", "Garlic"]} 22 | end 23 | -------------------------------------------------------------------------------- /sample/dracula.swift: -------------------------------------------------------------------------------- 1 | /* 2 | * Once upon a time... 3 | */ 4 | 5 | class Vampire { 6 | var location: String 7 | var birthDate: Int 8 | var deathDate: Int 9 | var weaknesses: [String] 10 | 11 | init(location: String, birthDate: Int, deathDate: Int, weaknesses: [String]) { 12 | self.location = location 13 | self.birthDate = birthDate 14 | self.deathDate = deathDate 15 | self.weaknesses = weaknesses 16 | } 17 | 18 | var age: Int { 19 | self.calcAge() 20 | } 21 | 22 | func calcAge() -> Int { 23 | self.deathDate - self.birthDate 24 | } 25 | } 26 | 27 | // ...there was a guy named Vlad 28 | 29 | let dracula = Vampire(location: "Transylvania", birthDate: 1428, deathDate: 1476, weaknesses: ["Sunlight", "Garlic"]) -------------------------------------------------------------------------------- /sample/dracula.ex: -------------------------------------------------------------------------------- 1 | defmodule Vampire do 2 | @moduledoc """ 3 | Once upon a time... 4 | """ 5 | 6 | defstruct [:location, :birth_date, :death_date, :weaknesses] 7 | 8 | def new(props) do 9 | %__MODULE__{ 10 | location: props[:location], 11 | birth_date: props[:birth_date], 12 | death_date: props[:death_date], 13 | weaknesses: props[:weaknesses] 14 | } 15 | end 16 | 17 | def age(vampire) do 18 | calc_age(vampire) 19 | end 20 | 21 | defp calc_age(vampire) do 22 | vampire.death_date - vampire.birth_date 23 | end 24 | end 25 | 26 | # ...there was a guy named Vlad 27 | 28 | dracula = Vampire.new( 29 | location: "Transylvania", 30 | birthDate: 1428, 31 | deathDate: 1476, 32 | weaknesses: ["Sunlight", "Garlic"] 33 | ) 34 | -------------------------------------------------------------------------------- /sample/dracula.java: -------------------------------------------------------------------------------- 1 | class Vampire { 2 | private String location; 3 | private int birthDate; 4 | private int deathDate; 5 | private String[] weaknesses; 6 | 7 | public Vampire(String location, int birthDate, int deathDate, String[] weaknesses) { 8 | this.location = location; 9 | this.birthDate = birthDate; 10 | this.deathDate = deathDate; 11 | this.weaknesses = weaknesses; 12 | } 13 | 14 | public int getAge() { 15 | return this.calcAge(); 16 | } 17 | 18 | public int calcAge() { 19 | return this.deathDate - this.birthDate; 20 | } 21 | } 22 | 23 | // ...there was a guy named Vlad 24 | public class dracula { 25 | Vampire vampire = new Vampire( 26 | "Transylvania", 27 | 1428, 28 | 1476, 29 | new String[] { "Sunlight", "Garlic" }); 30 | } -------------------------------------------------------------------------------- /sample/dracula.php: -------------------------------------------------------------------------------- 1 | location = $props['location']; 13 | $this->birthDate = $props['birthDate']; 14 | $this->deathDate = $props['deathDate']; 15 | $this->weaknesses = $props['weaknesses']; 16 | } 17 | 18 | public function age(): int { 19 | return $this->calcAge(); 20 | } 21 | 22 | private function calcAge(): int { 23 | return $this->deathDate - $this->birthDate; 24 | } 25 | } 26 | 27 | // ...there was a guy named Vlad 28 | $Dracula = new Vampire([ 29 | 'location' => 'Transylvania', 30 | 'birthDate' => 1428, 31 | 'deathDate' => 1476, 32 | 'weaknesses' => ['Sunlight', 'Garlic'] 33 | ]); 34 | ?> 35 | -------------------------------------------------------------------------------- /sample/dracula.rs: -------------------------------------------------------------------------------- 1 | // Once upon a time... 2 | 3 | #[derive(Debug)] 4 | pub struct Vampire { 5 | location: String, 6 | birth_date: u16, 7 | death_date: u16, 8 | weaknesses: Vec, 9 | } 10 | 11 | impl Vampire { 12 | pub fn new( 13 | location: String, 14 | birth_date: u16, 15 | death_date: u16, 16 | weaknesses: Vec, 17 | ) -> Self { 18 | Vampire { 19 | location, 20 | birth_date, 21 | death_date, 22 | weaknesses, 23 | } 24 | } 25 | 26 | pub fn age(&self) -> u16 { 27 | self.calc_age() 28 | } 29 | 30 | fn calc_age(&self) -> u16 { 31 | self.death_date - self.birth_date 32 | } 33 | } 34 | 35 | // ...there was a guy named Vlad 36 | 37 | fn main() { 38 | let dracula = Vampire::new( 39 | "Transylvania".to_string(), 40 | 1428, 41 | 1476, 42 | vec!["Sunlight".to_string(), "Garlic".to_string()], 43 | ); 44 | 45 | println!("{:?}", dracula); 46 | } 47 | -------------------------------------------------------------------------------- /sample/dracula.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Once upon a time... 3 | */ 4 | 5 | interface VampireProps { 6 | location: string; 7 | birthDate: number; 8 | deathDate: number; 9 | weaknesses: string[]; 10 | } 11 | 12 | class Vampire { 13 | location: string; 14 | birthDate: number; 15 | deathDate: number; 16 | weaknesses: string[]; 17 | 18 | constructor(props: VampireProps) { 19 | this.location = props.location; 20 | this.birthDate = props.birthDate; 21 | this.deathDate = props.deathDate; 22 | this.weaknesses = props.weaknesses; 23 | } 24 | 25 | get age(): number { 26 | return this.calcAge(); 27 | } 28 | 29 | calcAge(): number { 30 | return this.deathDate - this.birthDate; 31 | } 32 | } 33 | 34 | // ...there was a guy named Vlad 35 | 36 | const Dracula: VampireProps = new Vampire({ 37 | location: 'Transylvania', 38 | birthDate: 1428, 39 | deathDate: 1476, 40 | weaknesses: ['Sunlight', 'Garlic'], 41 | }); 42 | -------------------------------------------------------------------------------- /sample/dracula.cs: -------------------------------------------------------------------------------- 1 | /* 2 | * Once upon a time... 3 | */ 4 | 5 | public class Vampire 6 | { 7 | public string Location { get; private set; } 8 | public int BirthDate { get; private set; } 9 | public int DeathDate { get; private set; } 10 | public string[] Weaknesses { get; private set; } 11 | 12 | public Vampire(string location, int birthDate, int deathDate, string[] weaknesses) 13 | { 14 | Location = location; 15 | BirthDate = birthDate; 16 | DeathDate = deathDate; 17 | Weaknesses = weaknesses; 18 | } 19 | 20 | public int Age() 21 | { 22 | return calcAge(); 23 | } 24 | 25 | private int calcAge() 26 | { 27 | return DeathDate - BirthDate; 28 | } 29 | } 30 | class Program 31 | { 32 | static void Main(string[] args) 33 | { 34 | // ...there was a guy named Vlad 35 | 36 | var vampire = new Vampire( 37 | "Transylvania", 38 | 1428, 39 | 1476, 40 | new string[] { "Sunlight", "Garlic" } 41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /sample/dracula.c++: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | /* 5 | * Once upon a time... 6 | */ 7 | 8 | class Vampire { 9 | public: 10 | Vampire(std::string location, int birth_date, int death_date, 11 | std::vector weaknesses) 12 | : _location{location}, 13 | _birth_date{birth_date}, 14 | _death_date{death_date}, 15 | _weaknesses{weaknesses} {} 16 | 17 | int age() { return calc_age(); } 18 | 19 | private: 20 | std::string _location; 21 | int _birth_date; 22 | int _death_date; 23 | std::vector _weaknesses; 24 | 25 | int calc_age() { return _death_date - _birth_date; } 26 | }; 27 | 28 | // ...there was a guy named Vlad 29 | 30 | int main() { 31 | std::string location = "Transylvania"; 32 | int birth_date = 1428, death_date = 1476; 33 | std::vector weaknesses { "Sunlight", "Garlic" }; 34 | 35 | Vampire dracula{location, birth_date, death_date, weaknesses}; 36 | 37 | return 0; 38 | } 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Dracula Theme 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /sample/dracula.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dracula 6 | 7 | 8 | 9 |

Vampires

10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dracula for [Github](https://github.com) 2 | 3 | > A dark theme for [Github](https://github.com). 4 | 5 | ![Screenshot](./screenshot.png) 6 | 7 | ## Install 8 | 9 | All instructions can be found at [draculatheme.com/github](https://draculatheme.com/github). 10 | 11 | ## Team 12 | 13 | This theme is maintained by the following person(s) and a bunch of 14 | [awesome contributors](https://github.com/dracula/github/graphs/contributors). 15 | 16 | | [![asportnoy](https://github.com/asportnoy.png?size=100)](https://github.com/asportnoy) | [![GlowingUmbreon](https://github.com/GlowingUmbreon.png?size=100)](https://GlowingUmbreon.com/asportnoy) | 17 | | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | 18 | | [asportnoy](https://github.com/asportnoy) | [GlowingUmbreon](https://github.com/GlowingUmbreon) | 19 | 20 | ## Community 21 | 22 | - [Twitter](https://twitter.com/draculatheme) - Best for getting updates about themes and new stuff. 23 | - [GitHub](https://github.com/dracula/dracula-theme/discussions) - Best for asking questions and 24 | discussing issues. 25 | - [Discord](https://draculatheme.com/discord-invite) - Best for hanging out with the community. 26 | 27 | ## License 28 | 29 | [MIT License](./LICENSE) 30 | -------------------------------------------------------------------------------- /style.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name Github Dracula 3 | @namespace https://github.com/Dracula 4 | @homepageURL https://github.com/Dracula/github 5 | @supportURL https://github.com/Dracula/github/issues 6 | @version 1.1.9 7 | @updateURL https://github.com/Dracula/github/raw/master/style.user.css 8 | @description 🧛🏻‍♂️ Dark theme for Github 9 | @author Umbreon 10 | @license MIT 11 | 12 | @preprocessor stylus 13 | @var checkbox purple-logo "Use purple logo" 0 14 | @var checkbox purple-topbar "Use purple topbar" 0 15 | @var checkbox colored-status "Use dracula colors on status badges" 0 16 | @var checkbox black-btn-text "Use black text on colored buttons" 0 17 | @var checkbox contributor-graph-colors "Use dracula colors for profile contributor graphs" 1 18 | 19 | @var checkbox custom-font-enabled "Use custom code font" 0 20 | @var text custom-font "Custom Font" "FiraCode" 21 | ==/UserStyle== */ 22 | /* Styles 23 | Rounded input 24 | background-color: draculaW-blackSecondary 25 | 26 | */ 27 | @-moz-document domain("github.com") { 28 | /* Replace default github colors. Need the attributes here to match the specificity of the default values. */ 29 | [data-color-mode][data-dark-theme], 30 | html[data-color-mode][data-dark-theme], 31 | html[data-color-mode][data-dark-theme] body { 32 | --color-canvas-default-transparent: rgba(13, 17, 23, 0); 33 | --color-page-header-bg: #282a36; 34 | --color-marketing-icon-primary: #79c0ff; 35 | --color-marketing-icon-secondary: #1f6feb; 36 | --color-diff-blob-addition-num-text: #c9d1d9; 37 | --color-diff-blob-addition-fg: #c9d1d9; 38 | --color-diff-blob-addition-num-bg: rgba(80, 250, 123, 0.3); 39 | --color-diff-blob-addition-line-bg: rgba(80, 250, 123, 0.15); 40 | --color-diff-blob-addition-word-bg: rgba(80, 250, 123, 0.4); 41 | --color-diff-blob-deletion-num-text: #c9d1d9; 42 | --color-diff-blob-deletion-fg: #c9d1d9; 43 | --color-diff-blob-deletion-num-bg: rgba(255, 85, 85, 0.3); 44 | --color-diff-blob-deletion-line-bg: rgba(255, 85, 85, 0.15); 45 | --color-diff-blob-deletion-word-bg: rgba(255, 85, 85, 0.4); 46 | --color-diff-blob-hunk-num-bg: rgba(56, 139, 253, 0.4); 47 | --color-diff-blob-expander-icon: #8b949e; 48 | --color-diff-blob-selected-line-highlight-mix-blend-mode: screen; 49 | --color-diffstat-deletion-border: rgba(240, 246, 252, 0.1); 50 | --color-diffstat-addition-border: rgba(240, 246, 252, 0.1); 51 | --color-diffstat-addition-bg: #3fb950; 52 | --color-search-keyword-hl: rgba(210, 153, 34, 0.4); 53 | --color-prettylights-syntax-comment: #6272a4; 54 | --color-prettylights-syntax-constant: #bd93f9; 55 | --color-prettylights-syntax-entity: #50fa7b; 56 | --color-prettylights-syntax-storage-modifier-import: #ff79c6; 57 | --color-prettylights-syntax-entity-tag: #ff79c6; 58 | --color-prettylights-syntax-keyword: #ff79c6; 59 | --color-prettylights-syntax-string: #f1fa8c; 60 | --color-prettylights-syntax-variable: #f8f8f2; 61 | --color-prettylights-syntax-brackethighlighter-unmatched: #ff5555; 62 | --color-prettylights-syntax-invalid-illegal-text: #f8f8f2; 63 | --color-prettylights-syntax-invalid-illegal-bg: #ff5555; 64 | --color-prettylights-syntax-carriage-return-text: #f0f6fc; 65 | --color-prettylights-syntax-carriage-return-bg: #b62324; 66 | --color-prettylights-syntax-string-regexp: #ff5555; 67 | --color-prettylights-syntax-markup-list: #f2cc60; 68 | --color-prettylights-syntax-markup-heading: #1f6feb; 69 | --color-prettylights-syntax-markup-italic: #c9d1d9; 70 | --color-prettylights-syntax-markup-bold: #c9d1d9; 71 | --color-prettylights-syntax-markup-deleted-text: #ffdcd7; 72 | --color-prettylights-syntax-markup-deleted-bg: #67060c; 73 | --color-prettylights-syntax-markup-inserted-text: #aff5b4; 74 | --color-prettylights-syntax-markup-inserted-bg: #033a16; 75 | --color-prettylights-syntax-markup-changed-text: #ffdfb6; 76 | --color-prettylights-syntax-markup-changed-bg: #5a1e02; 77 | --color-prettylights-syntax-markup-ignored-text: #c9d1d9; 78 | --color-prettylights-syntax-markup-ignored-bg: #1158c7; 79 | --color-prettylights-syntax-meta-diff-range: #d2a8ff; 80 | --color-prettylights-syntax-brackethighlighter-angle: #8b949e; 81 | --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58; 82 | --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; 83 | --color-codemirror-text: #f8f8f2; 84 | --color-codemirror-bg: #282a36; 85 | --color-codemirror-gutters-bg: #282a36; 86 | --color-codemirror-guttermarker-text: #282a36; 87 | --color-codemirror-guttermarker-subtle-text: #484f58; 88 | --color-codemirror-linenumber-text: #8b949e; 89 | --color-codemirror-cursor: #c9d1d9; 90 | --color-codemirror-selection-bg: rgba(56, 139, 253, 0.4); 91 | --color-codemirror-activeline-bg: rgba(110, 118, 129, 0.1); 92 | --color-codemirror-matchingbracket-text: #c9d1d9; 93 | --color-codemirror-lines-bg: #282a36; 94 | --color-codemirror-syntax-comment: #6272a4; 95 | --color-codemirror-syntax-constant: #bd93f9; 96 | --color-codemirror-syntax-entity: #ff79c6; 97 | --color-codemirror-syntax-keyword: #ff79c6; 98 | --color-codemirror-syntax-storage: #ff79c6; 99 | --color-codemirror-syntax-string: #f1fa8c; 100 | --color-codemirror-syntax-support: #8be9fd; 101 | --color-codemirror-syntax-variable: #f8f8f2; 102 | --color-checks-bg: #282a36; 103 | --color-checks-run-border-width: 1px; 104 | --color-checks-container-border-width: 1px; 105 | --color-checks-text-primary: #c9d1d9; 106 | --color-checks-text-secondary: #8b949e; 107 | --color-checks-text-link: #58a6ff; 108 | --color-checks-btn-icon: #8b949e; 109 | --color-checks-btn-hover-icon: #c9d1d9; 110 | --color-checks-btn-hover-bg: rgba(110, 118, 129, 0.1); 111 | --color-checks-input-text: #f8f8f2; 112 | --color-checks-input-placeholder-text: #8b949e; 113 | --color-checks-input-focus-text: #c9d1d9; 114 | --color-checks-input-bg: #44475a; 115 | --color-checks-input-shadow: 0 0 0 1px; 116 | --color-checks-donut-error: #f85149; 117 | --color-checks-donut-pending: #d29922; 118 | --color-checks-donut-success: #2ea043; 119 | --color-checks-donut-neutral: #8b949e; 120 | --color-checks-dropdown-text: #c9d1d9; 121 | --color-checks-dropdown-bg: #44475a; 122 | --color-checks-dropdown-border: #30363d; 123 | --color-checks-dropdown-shadow: rgba(1, 4, 9, 0.3); 124 | --color-checks-dropdown-hover-text: #c9d1d9; 125 | --color-checks-dropdown-hover-bg: rgba(110, 118, 129, 0.1); 126 | --color-checks-dropdown-btn-hover-text: #c9d1d9; 127 | --color-checks-dropdown-btn-hover-bg: rgba(110, 118, 129, 0.1); 128 | --color-checks-scrollbar-thumb-bg: rgba(110, 118, 129, 0.4); 129 | --color-checks-header-label-text: #8b949e; 130 | --color-checks-header-label-open-text: #c9d1d9; 131 | --color-checks-header-border: #21262d; 132 | --color-checks-header-icon: #8b949e; 133 | --color-checks-line-text: #8b949e; 134 | --color-checks-line-num-text: #484f58; 135 | --color-checks-line-timestamp-text: #484f58; 136 | --color-checks-line-hover-bg: rgba(110, 118, 129, 0.1); 137 | --color-checks-line-selected-bg: rgba(56, 139, 253, 0.15); 138 | --color-checks-line-selected-num-text: #58a6ff; 139 | --color-checks-line-dt-fm-text: #f0f6fc; 140 | --color-checks-line-dt-fm-bg: #9e6a03; 141 | --color-checks-gate-bg: rgba(187, 128, 9, 0.15); 142 | --color-checks-gate-text: #8b949e; 143 | --color-checks-gate-waiting-text: #d29922; 144 | --color-checks-step-header-open-bg: #44475a; 145 | --color-checks-step-error-text: #f85149; 146 | --color-checks-step-warning-text: #d29922; 147 | --color-checks-logline-text: #8b949e; 148 | --color-checks-logline-num-text: #484f58; 149 | --color-checks-logline-debug-text: #a371f7; 150 | --color-checks-logline-error-text: #8b949e; 151 | --color-checks-logline-error-num-text: #484f58; 152 | --color-checks-logline-error-bg: rgba(248, 81, 73, 0.15); 153 | --color-checks-logline-warning-text: #8b949e; 154 | --color-checks-logline-warning-num-text: #d29922; 155 | --color-checks-logline-warning-bg: rgba(187, 128, 9, 0.15); 156 | --color-checks-logline-command-text: #58a6ff; 157 | --color-checks-logline-section-text: #3fb950; 158 | --color-checks-ansi-black: #282a36; 159 | --color-checks-ansi-black-bright: #6272a4; 160 | --color-checks-ansi-white: #f8f8f2; 161 | --color-checks-ansi-white-bright: #ffffff; 162 | --color-checks-ansi-gray: #6e7681; 163 | --color-checks-ansi-red: #ff5555; 164 | --color-checks-ansi-red-bright: #ff6e6e; 165 | --color-checks-ansi-green: #50fa7b; 166 | --color-checks-ansi-green-bright: #69ff94; 167 | --color-checks-ansi-yellow: #f1fa8c; 168 | --color-checks-ansi-yellow-bright: #ffffa5; 169 | --color-checks-ansi-blue: #bd93f9; 170 | --color-checks-ansi-blue-bright: #d6acff; 171 | --color-checks-ansi-magenta: #ff79c6; 172 | --color-checks-ansi-magenta-bright: #ff92df; 173 | --color-checks-ansi-cyan: #8be9fd; 174 | --color-checks-ansi-cyan-bright: #a4ffff; 175 | --color-project-header-bg: #282a36; 176 | --color-project-sidebar-bg: #282a36; 177 | --color-project-gradient-in: #282a36; 178 | --color-project-gradient-out: rgba(22, 27, 34, 0); 179 | --color-mktg-btn-bg: #f6f8fa; 180 | --color-mktg-btn-shadow-outline: rgb(255 255 255 / 25%) 0 0 0 1px inset; 181 | --color-mktg-btn-shadow-focus: rgb(255 255 255 / 25%) 0 0 0 4px; 182 | --color-mktg-btn-shadow-hover: 183 | 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 184 | 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 185 | 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 186 | 0 3px 2px rgba(255, 255, 255, 0.07); 187 | --color-mktg-btn-shadow-hover-muted: rgb(255 255 255) 0 0 0 2px inset; 188 | --color-avatar-bg: rgba(240, 246, 252, 0.1); 189 | --color-avatar-border: rgba(240, 246, 252, 0.1); 190 | --color-avatar-stack-fade: #30363d; 191 | --color-avatar-stack-fade-more: #21262d; 192 | --color-avatar-child-shadow: -2px -2px 0 #0d1117; 193 | --color-topic-tag-border: rgba(0, 0, 0, 0); 194 | --color-counter-border: rgba(0, 0, 0, 0); 195 | --color-select-menu-backdrop-border: #484f58; 196 | --color-select-menu-tap-highlight: rgba(48, 54, 61, 0.5); 197 | --color-select-menu-tap-focus-bg: #0c2d6b; 198 | --color-overlay-shadow: 0 0 0 1px #30363d, 0 16px 32px rgba(1, 4, 9, 0.85); 199 | --color-header-text: rgba(240, 246, 252, 0.7); 200 | if (purple-topbar) { 201 | --color-header-bg: #383a59; 202 | } 203 | else { 204 | --color-header-bg: #282a36; 205 | } 206 | --color-header-divider: #8b949e; 207 | --color-header-logo: #f0f6fc; 208 | --color-header-search-bg: #323543; 209 | --color-header-search-border: #30363d; 210 | --color-sidenav-selected-bg: #323543; 211 | --color-menu-bg-active: #323543; 212 | --color-input-disabled-bg: rgba(110, 118, 129, 0); 213 | --color-timeline-badge-bg: #323543; 214 | --color-ansi-black: #484f58; 215 | --color-ansi-black-bright: #6e7681; 216 | --color-ansi-white: #b1bac4; 217 | --color-ansi-white-bright: #f0f6fc; 218 | --color-ansi-gray: #6e7681; 219 | --color-ansi-red: #ff7b72; 220 | --color-ansi-red-bright: #ffa198; 221 | --color-ansi-green: #3fb950; 222 | --color-ansi-green-bright: #56d364; 223 | --color-ansi-yellow: #d29922; 224 | --color-ansi-yellow-bright: #e3b341; 225 | --color-ansi-blue: #58a6ff; 226 | --color-ansi-blue-bright: #79c0ff; 227 | --color-ansi-magenta: #bc8cff; 228 | --color-ansi-magenta-bright: #d2a8ff; 229 | --color-ansi-cyan: #39c5cf; 230 | --color-ansi-cyan-bright: #56d4dd; 231 | --color-btn-text: #c9d1d9; 232 | --color-btn-bg: #323543; 233 | --color-btn-border: rgba(240, 246, 252, 0.1); 234 | --color-btn-shadow: 0 0 transparent; 235 | --color-btn-inset-shadow: 0 0 transparent; 236 | --color-btn-hover-bg: #30363d; 237 | --color-btn-hover-border: #8b949e; 238 | --color-btn-active-bg: hsla(212, 12%, 18%, 1); 239 | --color-btn-active-border: #6e7681; 240 | --color-btn-selected-bg: #44475a; 241 | --color-btn-focus-bg: #21262d; 242 | --color-btn-focus-border: #8b949e; 243 | --color-btn-focus-shadow: 0 0 0 3px rgba(139, 148, 158, 0.3); 244 | --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(1, 4, 9, 0.15); 245 | --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(31, 111, 235, 0.3); 246 | --color-btn-counter-bg: #30363d; 247 | --color-btn-primary-bg: transparent; 248 | --color-btn-primary-border: #bd93f9; 249 | --color-btn-primary-shadow: 0 0 transparent; 250 | --color-btn-primary-inset-shadow: 0 0 transparent; 251 | --color-btn-primary-hover-bg: #bd93f91a; 252 | --color-btn-primary-hover-border: #bd93f9; 253 | --color-btn-primary-selected-bg: #bd93f91a; 254 | --color-btn-primary-selected-shadow: 0 0 transparent; 255 | --color-btn-primary-disabled-text: #6d7392; 256 | --color-btn-primary-disabled-bg: transparent; 257 | --color-btn-primary-disabled-border: #6d7392; 258 | --color-btn-primary-focus-bg: #bd93f91a; 259 | --color-btn-primary-focus-border: #bd93f9; 260 | --color-btn-primary-focus-shadow: 0 0 0 3px rgba(149, 128, 255, 0.4); 261 | --color-btn-primary-icon: #bd93f9; 262 | --color-btn-primary-counter-bg: rgba(240, 246, 252, 0.2); 263 | --color-btn-outline-text: #58a6ff; 264 | --color-btn-outline-hover-text: #58a6ff; 265 | --color-btn-outline-hover-bg: #30363d; 266 | --color-btn-outline-hover-border: rgba(240, 246, 252, 0.1); 267 | --color-btn-outline-hover-shadow: 0 1px 0 rgba(1, 4, 9, 0.1); 268 | --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(240, 246, 252, 0.03); 269 | --color-btn-outline-hover-counter-bg: rgba(240, 246, 252, 0.2); 270 | --color-btn-outline-selected-text: #f0f6fc; 271 | --color-btn-outline-selected-bg: #0d419d; 272 | --color-btn-outline-selected-border: rgba(240, 246, 252, 0.1); 273 | --color-btn-outline-selected-shadow: 0 0 transparent; 274 | --color-btn-outline-disabled-text: rgba(88, 166, 255, 0.5); 275 | --color-btn-outline-disabled-bg: #282a36; 276 | --color-btn-outline-disabled-counter-bg: rgba(31, 111, 235, 0.05); 277 | --color-btn-outline-focus-border: rgba(240, 246, 252, 0.1); 278 | --color-btn-outline-focus-shadow: 0 0 0 3px rgba(17, 88, 199, 0.4); 279 | --color-btn-outline-counter-bg: rgba(31, 111, 235, 0.1); 280 | --color-btn-danger-text: #f85149; 281 | --color-btn-danger-hover-text: #f0f6fc; 282 | --color-btn-danger-hover-bg: #da3633; 283 | --color-btn-danger-hover-border: #f85149; 284 | --color-btn-danger-hover-shadow: 0 0 transparent; 285 | --color-btn-danger-hover-inset-shadow: 0 0 transparent; 286 | --color-btn-danger-hover-icon: #f0f6fc; 287 | --color-btn-danger-hover-counter-bg: rgba(255, 255, 255, 0.2); 288 | --color-btn-danger-selected-text: #ffffff; 289 | --color-btn-danger-selected-bg: #b62324; 290 | --color-btn-danger-selected-border: #ff7b72; 291 | --color-btn-danger-selected-shadow: 0 0 transparent; 292 | --color-btn-danger-disabled-text: rgba(248, 81, 73, 0.5); 293 | --color-btn-danger-disabled-bg: #0d1117; 294 | --color-btn-danger-disabled-counter-bg: rgba(218, 54, 51, 0.05); 295 | --color-btn-danger-focus-border: #f85149; 296 | --color-btn-danger-focus-shadow: 0 0 0 3px rgba(248, 81, 73, 0.4); 297 | --color-btn-danger-counter-bg: rgba(218, 54, 51, 0.1); 298 | --color-btn-danger-icon: #f85149; 299 | --color-underlinenav-icon: #484f58; 300 | --color-underlinenav-border-hover: rgba(110, 118, 129, 0.4); 301 | --color-action-list-item-inline-divider: rgba(48, 54, 61, 0.48); 302 | --color-action-list-item-default-hover-bg: rgba(177, 186, 196, 0.12); 303 | --color-action-list-item-default-active-bg: rgba(177, 186, 196, 0.2); 304 | --color-action-list-item-default-selected-bg: rgba(177, 186, 196, 0.08); 305 | --color-action-list-item-danger-hover-bg: rgba(248, 81, 73, 0.16); 306 | --color-action-list-item-danger-active-bg: rgba(248, 81, 73, 0.24); 307 | --color-action-list-item-danger-hover-text: #ff7b72; 308 | --color-fg-default: #f8f8f2; 309 | --color-fg-muted: #8b949e; 310 | --color-fg-subtle: #484f58; 311 | --color-canvas-default: #282a36; 312 | --color-canvas-overlay: #282a36; 313 | --color-canvas-inset: #282a36; 314 | --color-canvas-subtle: #323543; 315 | --color-border-default: #44475a; 316 | --color-border-muted: #44475a; 317 | --color-border-subtle: rgba(240, 246, 252, 0.1); 318 | --color-shadow-small: 0 0 transparent; 319 | --color-shadow-medium: 0 3px 6px #010409; 320 | --color-shadow-large: 0 8px 24px #010409; 321 | --color-shadow-extra-large: 0 12px 48px #010409; 322 | --color-neutral-emphasis-plus: #6e7681; 323 | --color-neutral-emphasis: #6e7681; 324 | --color-neutral-muted: rgba(110, 118, 129, 0.4); 325 | --color-neutral-subtle: rgba(110, 118, 129, 0.1); 326 | --color-accent-fg: #8be9fd; 327 | --color-accent-emphasis: #bd93f9; 328 | --color-accent-muted: rgba(56, 139, 253, 0.4); 329 | --color-accent-subtle: rgba(56, 139, 253, 0.15); 330 | if black-btn-text { 331 | --color-fg-on-emphasis: #000000; 332 | --color-btn-primary-text: #000000; 333 | } 334 | else { 335 | --color-fg-on-emphasis: #f0f6fc; 336 | --color-btn-primary-text: #bd93f9; 337 | } 338 | if colored-status { 339 | --color-success-fg: #50fa7b; 340 | --color-attention-fg: #f1fa8c; 341 | --color-severe-fg: #ffb86c; 342 | --color-danger-fg: #ff5555; 343 | --color-done-fg: #bd93f9; 344 | --color-sponsors-fg: #ff79c6; 345 | 346 | --color-success-emphasis: #50fa7b1a; 347 | --color-attention-emphasis: #f1fa8c1a; 348 | --color-severe-emphasis: #ffb86c1a; 349 | --color-danger-emphasis: #ff55551a; 350 | --color-done-emphasis: #bd93f91a; 351 | --color-sponsors-emphasis: #ff79c61a; 352 | } 353 | else { 354 | --color-success-fg: #3fb950; 355 | --color-attention-fg: #d29922; 356 | --color-severe-fg: #db6d28; 357 | --color-danger-fg: #f85149; 358 | --color-done-fg: #a371f7; 359 | --color-sponsors-fg: #db61a2; 360 | 361 | --color-success-emphasis: #238636; 362 | --color-attention-emphasis: #9e6a03; 363 | --color-severe-emphasis: #bd561d; 364 | --color-danger-emphasis: #da3633; 365 | --color-done-emphasis: #8957e5; 366 | --color-sponsors-emphasis: #bf4b8a; 367 | } 368 | --color-success-muted: rgba(46, 160, 67, 0.4); 369 | --color-success-subtle: rgba(46, 160, 67, 0.15); 370 | --color-attention-muted: rgba(187, 128, 9, 0.4); 371 | --color-attention-subtle: rgba(187, 128, 9, 0.15); 372 | --color-severe-muted: rgba(219, 109, 40, 0.4); 373 | --color-severe-subtle: rgba(219, 109, 40, 0.15); 374 | --color-danger-muted: rgba(248, 81, 73, 0.4); 375 | --color-danger-subtle: rgba(248, 81, 73, 0.15); 376 | --color-done-muted: rgba(163, 113, 247, 0.4); 377 | --color-done-subtle: rgba(163, 113, 247, 0.15); 378 | --color-sponsors-muted: rgba(219, 97, 162, 0.4); 379 | --color-sponsors-subtle: rgba(219, 97, 162, 0.15); 380 | --color-primer-fg-disabled: #484f58; 381 | --color-primer-canvas-backdrop: rgba(1, 4, 9, 0.8); 382 | --color-primer-canvas-sticky: rgba(13, 17, 23, 0.95); 383 | --color-primer-border-active: #bd93f9; 384 | --color-primer-border-contrast: rgba(240, 246, 252, 0.2); 385 | --color-primer-shadow-highlight: 0 0 transparent; 386 | --color-primer-shadow-inset: 0 0 transparent; 387 | --color-primer-shadow-focus: 0 0 0 3px transparent; 388 | --color-scale-black: #010409; 389 | --color-scale-white: #f0f6fc; 390 | --color-scale-gray-0: #f0f6fc; 391 | --color-scale-gray-1: #c9d1d9; 392 | --color-scale-gray-2: #b1bac4; 393 | --color-scale-gray-3: #8b949e; 394 | --color-scale-gray-4: #6e7681; 395 | --color-scale-gray-5: #484f58; 396 | --color-scale-gray-6: #30363d; 397 | --color-scale-gray-7: #21262d; 398 | --color-scale-gray-8: #161b22; 399 | --color-scale-gray-9: #0d1117; 400 | --color-scale-blue-0: #cae8ff; 401 | --color-scale-blue-1: #a5d6ff; 402 | --color-scale-blue-2: #79c0ff; 403 | --color-scale-blue-3: #58a6ff; 404 | --color-scale-blue-4: #388bfd; 405 | --color-scale-blue-5: #1f6feb; 406 | --color-scale-blue-6: #1158c7; 407 | --color-scale-blue-7: #0d419d; 408 | --color-scale-blue-8: #0c2d6b; 409 | --color-scale-blue-9: #051d4d; 410 | --color-scale-green-0: #aff5b4; 411 | --color-scale-green-1: #7ee787; 412 | --color-scale-green-2: #56d364; 413 | --color-scale-green-3: #3fb950; 414 | --color-scale-green-4: #2ea043; 415 | --color-scale-green-5: #238636; 416 | --color-scale-green-6: #196c2e; 417 | --color-scale-green-7: #0f5323; 418 | --color-scale-green-8: #033a16; 419 | --color-scale-green-9: #04260f; 420 | --color-scale-yellow-0: #f8e3a1; 421 | --color-scale-yellow-1: #f2cc60; 422 | --color-scale-yellow-2: #e3b341; 423 | --color-scale-yellow-3: #d29922; 424 | --color-scale-yellow-4: #bb8009; 425 | --color-scale-yellow-5: #9e6a03; 426 | --color-scale-yellow-6: #845306; 427 | --color-scale-yellow-7: #693e00; 428 | --color-scale-yellow-8: #4b2900; 429 | --color-scale-yellow-9: #341a00; 430 | --color-scale-orange-0: #ffdfb6; 431 | --color-scale-orange-1: #ffc680; 432 | --color-scale-orange-2: #ffa657; 433 | --color-scale-orange-3: #f0883e; 434 | --color-scale-orange-4: #db6d28; 435 | --color-scale-orange-5: #bd561d; 436 | --color-scale-orange-6: #9b4215; 437 | --color-scale-orange-7: #762d0a; 438 | --color-scale-orange-8: #5a1e02; 439 | --color-scale-orange-9: #3d1300; 440 | --color-scale-red-0: #ffdcd7; 441 | --color-scale-red-1: #ffc1ba; 442 | --color-scale-red-2: #ffa198; 443 | --color-scale-red-3: #ff7b72; 444 | --color-scale-red-4: #f85149; 445 | --color-scale-red-5: #da3633; 446 | --color-scale-red-6: #b62324; 447 | --color-scale-red-7: #8e1519; 448 | --color-scale-red-8: #67060c; 449 | --color-scale-red-9: #490202; 450 | --color-scale-purple-0: #eddeff; 451 | --color-scale-purple-1: #e2c5ff; 452 | --color-scale-purple-2: #d2a8ff; 453 | --color-scale-purple-3: #bc8cff; 454 | --color-scale-purple-4: #a371f7; 455 | --color-scale-purple-5: #8957e5; 456 | --color-scale-purple-6: #6e40c9; 457 | --color-scale-purple-7: #553098; 458 | --color-scale-purple-8: #3c1e70; 459 | --color-scale-purple-9: #271052; 460 | --color-scale-pink-0: #ffdaec; 461 | --color-scale-pink-1: #ffbedd; 462 | --color-scale-pink-2: #ff9bce; 463 | --color-scale-pink-3: #f778ba; 464 | --color-scale-pink-4: #db61a2; 465 | --color-scale-pink-5: #bf4b8a; 466 | --color-scale-pink-6: #9e3670; 467 | --color-scale-pink-7: #7d2457; 468 | --color-scale-pink-8: #5e103e; 469 | --color-scale-pink-9: #42062a; 470 | --color-scale-coral-0: #ffddd2; 471 | --color-scale-coral-1: #ffc2b2; 472 | --color-scale-coral-2: #ffa28b; 473 | --color-scale-coral-3: #f78166; 474 | --color-scale-coral-4: #ea6045; 475 | --color-scale-coral-5: #cf462d; 476 | --color-scale-coral-6: #ac3220; 477 | --color-scale-coral-7: #872012; 478 | --color-scale-coral-8: #640d04; 479 | --color-scale-coral-9: #460701; 480 | if contributor-graph-colors { 481 | --contribution-default-bgColor-0: #44475a; 482 | --contribution-default-bgColor-1: #6272a4; 483 | --contribution-default-bgColor-2: #8be9fd; 484 | --contribution-default-bgColor-3: #bd93f9; 485 | --contribution-default-bgColor-4: #ff79c6; 486 | } 487 | 488 | /* 489 | Update 2024-03-19: GitHub has seemingly changed a bunch of the variable names. 490 | The styles use fallbacks to the old variable names, which I have used to generate the mappings 491 | below to ensure everything will be styled like before. In the future, 492 | we may want to fully swap out the variables above instead. 493 | */ 494 | --codeMirror-fgColor: var(--color-codemirror-text); 495 | --codeMirror-bgColor: var(--color-codemirror-bg); 496 | --codeMirror-gutters-bgColor: var(--color-codemirror-gutters-bg); 497 | --codeMirror-gutterMarker-fgColor-default: var(--color-codemirror-guttermarker-text); 498 | --codeMirror-gutterMarker-fgColor-muted: var(--color-codemirror-guttermarker-subtle-text); 499 | --codeMirror-lineNumber-fgColor: var(--color-codemirror-linenumber-text); 500 | --codeMirror-cursor-fgColor: var(--color-codemirror-cursor); 501 | --codeMirror-activeline-bgColor: var(--color-codemirror-activeline-bg); 502 | --codeMirror-matchingBracket-fgColor: var(--color-codemirror-matchingbracket-text); 503 | --codeMirror-lines-bgColor: var(--color-codemirror-lines-bg); 504 | --codeMirror-syntax-fgColor-comment: var(--color-codemirror-syntax-comment); 505 | --codeMirror-syntax-fgColor-constant: var(--color-codemirror-syntax-constant); 506 | --codeMirror-syntax-fgColor-entity: var(--color-codemirror-syntax-entity); 507 | --codeMirror-syntax-fgColor-keyword: var(--color-codemirror-syntax-keyword); 508 | --codeMirror-syntax-fgColor-storage: var(--color-codemirror-syntax-storage); 509 | --codeMirror-syntax-fgColor-string: var(--color-codemirror-syntax-string); 510 | --codeMirror-syntax-fgColor-support: var(--color-codemirror-syntax-support); 511 | --codeMirror-syntax-fgColor-variable: var(--color-codemirror-syntax-variable); 512 | --fgColor-onEmphasis: var(--color-fg-on-emphasis); 513 | --bgColor-neutral-muted: var(--color-neutral-muted); 514 | --fgColor-muted: var(--color-fg-muted); 515 | --fgColor-default: var(--color-fg-default); 516 | --fgColor-severe: var(--color-severe-fg); 517 | --borderColor-severe-emphasis: var(--color-severe-emphasis); 518 | --fgColor-done: var(--color-done-fg); 519 | --borderColor-done-emphasis: var(--color-done-emphasis); 520 | --fgColor-sponsors: var(--color-sponsors-fg); 521 | --borderColor-sponsors-emphasis: var(--color-sponsors-emphasis); 522 | --fgColor-success: var(--color-success-fg); 523 | --fgColor-danger: var(--color-danger-fg); 524 | --fgColor-attention: var(--color-attention-fg); 525 | --bgColor-muted: var(--color-canvas-subtle); 526 | --borderColor-default: var(--color-border-default); 527 | --bgColor-default: var(--color-canvas-default); 528 | --bgColor-danger-emphasis: var(--color-danger-emphasis); 529 | --borderColor-muted: var(--color-border-muted); 530 | --shadow-resting-medium: var(--color-shadow-medium); 531 | --bgColor-accent-emphasis: var(--color-accent-emphasis); 532 | --borderColor-danger-emphasis: var(--color-danger-emphasis); 533 | --borderColor-attention-emphasis: var(--color-attention-emphasis); 534 | --borderColor-accent-emphasis: var(--color-accent-emphasis); 535 | --bgColor-attention-emphasis: var(--color-attention-emphasis); 536 | --bgColor-neutral-emphasis: var(--color-neutral-emphasis); 537 | --bgColor-success-emphasis: var(--color-success-emphasis); 538 | --fgColor-accent: var(--color-accent-fg); 539 | --borderColor-attention-muted: var(--color-attention-muted); 540 | --bgColor-attention-muted: var(--color-attention-subtle); 541 | --overlay-bgColor: var(--color-canvas-overlay); 542 | --button-default-bgColor-hover: var(--color-btn-hover-bg); 543 | --fgColor-neutral: var(--color-neutral-emphasis); 544 | --focus-outlineColor: var(--color-accent-emphasis); 545 | --bgColor-emphasis: var(--color-neutral-emphasis-plus); 546 | --borderColor-neutral-muted: var(--color-neutral-muted); 547 | --borderColor-success-emphasis: var(--color-success-emphasis); 548 | --page-header-bgColor: var(--color-page-header-bg); 549 | --control-transparent-bgColor-hover: var(--color-action-list-item-default-hover-bg); 550 | --bgColor-inset: var(--color-canvas-inset); 551 | --bgColor-severe-muted: var(--color-severe-subtle); 552 | --bgColor-severe-emphasis: var(--color-severe-emphasis); 553 | --bgColor-done-muted: var(--color-done-subtle); 554 | --header-bgColor: var(--color-header-bg); 555 | --headerSearch-borderColor: var(--color-header-search-border); 556 | --headerSearch-bgColor: var(--color-header-search-bg); 557 | --header-fgColor-logo: var(--color-header-logo); 558 | --header-fgColor-default: var(--color-header-text); 559 | --control-transparent-bgColor-active: var(--color-action-list-item-default-active-bg); 560 | --control-transparent-bgColor-selected: var(--color-action-list-item-default-selected-bg); 561 | --fgColor-disabled: var(--color-primer-fg-disabled); 562 | --control-danger-bgColor-hover: var(--color-action-list-item-danger-hover-bg); 563 | --control-danger-fgColor-hover: var(--color-action-list-item-danger-hover-text); 564 | --control-danger-bgColor-active: var(--color-action-list-item-danger-active-bg); 565 | --bgColor-done-emphasis: var(--color-done-emphasis); 566 | --bgColor-accent-muted: var(--color-accent-muted); 567 | --selection-bgColor: var(--color-accent-muted); 568 | --diffBlob-hunk-bgColor-num: var(--color-diff-blob-hunk-num-bg); 569 | --diffBlob-expander-iconColor: var(--color-diff-blob-expander-icon); 570 | --diffBlob-addition-bgColor-line: var(--color-diff-blob-addition-line-bg); 571 | --diffBlob-addition-fgColor-text: var(--color-diff-blob-addition-fg); 572 | --diffBlob-addition-bgColor-word: var(--color-diff-blob-addition-word-bg); 573 | --diffBlob-addition-fgColor-num: var(--color-diff-blob-addition-num-text); 574 | --diffBlob-addition-bgColor-num: var(--color-diff-blob-addition-num-bg); 575 | --diffBlob-deletion-bgColor-line: var(--color-diff-blob-deletion-line-bg); 576 | --diffBlob-deletion-fgColor-text: var(--color-diff-blob-deletion-fg); 577 | --diffBlob-deletion-bgColor-word: var(--color-diff-blob-deletion-word-bg); 578 | --diffBlob-deletion-fgColor-num: var(--color-diff-blob-deletion-num-text); 579 | --diffBlob-deletion-bgColor-num: var(--color-diff-blob-deletion-num-bg); 580 | --borderColor-accent-muted: var(--color-accent-muted); 581 | --timelineBadge-bgColor: var(--color-timeline-badge-bg); 582 | --borderColor-success-muted: var(--color-success-muted); 583 | --borderColor-danger-muted: var(--color-danger-muted); 584 | --button-default-borderColor-hover: var(--color-btn-hover-border); 585 | --borderColor-neutral-emphasis: var(--color-fg-subtle); 586 | --shadow-floating-small: var(--color-overlay-shadow); 587 | --shadow-resting-small: var(--color-shadow-small); 588 | --control-borderColor-rest: var(--color-border-default); 589 | --highlight-neutral-bgColor: var(--color-search-keyword-hl); 590 | --bgColor-success-muted: var(--color-success-muted); 591 | --bgColor-danger-muted: var(--color-danger-muted); 592 | --header-borderColor-divider: var(--color-header-divider); 593 | --button-primary-bgColor-rest: var(--color-btn-primary-bg); 594 | --control-bgColor-hover: var(--color-btn-hover-bg); 595 | --overlay-backdrop-bgColor: var(--color-neutral-muted); 596 | --buttonCounter-default-bgColor-rest: var(--color-btn-counter-bg); 597 | --button-default-fgColor-rest: var(--color-btn-text); 598 | --button-default-bgColor-rest: var(--color-btn-bg); 599 | --button-default-borderColor-rest: var(--color-btn-border); 600 | --button-default-shadow-resting: var(--color-btn-shadow); 601 | --button-default-shadow-inset: var(--color-btn-inset-shadow); 602 | --button-default-bgColor-active: var(--color-btn-active-bg); 603 | --button-default-borderColor-active: var(--color-btn-active-border); 604 | --button-default-bgColor-selected: var(--color-btn-selected-bg); 605 | --shadow-inset: var(--color-primer-shadow-inset); 606 | --button-primary-fgColor-rest: var(--color-btn-primary-text); 607 | --button-primary-borderColor-rest: var(--color-btn-primary-border); 608 | --shadow-highlight: var(--color-btn-primary-inset-shadow); 609 | --button-primary-bgColor-hover: var(--color-btn-primary-hover-bg); 610 | --button-primary-borderColor-hover: var(--color-btn-primary-hover-border); 611 | --button-primary-bgColor-active: var(--color-btn-primary-selected-bg); 612 | --button-primary-shadow-selected: var(--color-btn-primary-selected-shadow); 613 | --button-primary-fgColor-disabled: var(--color-btn-primary-disabled-text); 614 | --button-primary-bgColor-disabled: var(--color-btn-primary-disabled-bg); 615 | --button-primary-borderColor-disabled: var(--color-btn-primary-disabled-border); 616 | --buttonCounter-primary-bgColor-rest: var(--color-btn-primary-counter-bg); 617 | --button-primary-iconColor-rest: var(--color-btn-primary-icon); 618 | --button-outline-fgColor-rest: var(--color-btn-outline-text); 619 | --button-outline-fgColor-hover: var(--color-btn-outline-hover-text); 620 | --button-outline-bgColor-hover: var(--color-btn-outline-hover-bg); 621 | --button-outline-borderColor-hover: var(--color-btn-outline-hover-border); 622 | --buttonCounter-outline-bgColor-hover: var(--color-btn-outline-hover-counter-bg); 623 | --button-outline-fgColor-active: var(--color-btn-outline-selected-text); 624 | --button-outline-bgColor-active: var(--color-btn-outline-selected-bg); 625 | --button-outline-borderColor-active: var(--color-btn-outline-selected-border); 626 | --button-outline-shadow-selected: var(--color-btn-outline-selected-shadow); 627 | --button-outline-fgColor-disabled: var(--color-btn-outline-disabled-text); 628 | --button-outline-bgColor-disabled: var(--color-btn-outline-disabled-bg); 629 | --buttonCounter-outline-bgColor-disabled: var(--color-btn-outline-disabled-counter-bg); 630 | --buttonCounter-outline-bgColor-rest: var(--color-btn-outline-counter-bg); 631 | --button-danger-fgColor-rest: var(--color-btn-danger-text); 632 | --button-danger-iconColor-rest: var(--color-btn-danger-icon); 633 | --button-danger-fgColor-hover: var(--color-btn-danger-hover-text); 634 | --button-danger-bgColor-hover: var(--color-btn-danger-hover-bg); 635 | --button-danger-borderColor-hover: var(--color-btn-danger-hover-border); 636 | --buttonCounter-danger-bgColor-hover: var(--color-btn-danger-hover-counter-bg); 637 | --button-danger-iconColor-hover: var(--color-btn-danger-hover-icon); 638 | --button-danger-fgColor-active: var(--color-btn-danger-selected-text); 639 | --button-danger-bgColor-active: var(--color-btn-danger-selected-bg); 640 | --button-danger-borderColor-active: var(--color-btn-danger-selected-border); 641 | --button-danger-shadow-selected: var(--color-btn-danger-selected-shadow); 642 | --button-danger-fgColor-disabled: var(--color-btn-danger-disabled-text); 643 | --button-danger-bgColor-disabled: var(--color-btn-danger-disabled-bg); 644 | --buttonCounter-danger-bgColor-disabled: var(--color-btn-danger-disabled-counter-bg); 645 | --buttonCounter-danger-bgColor-rest: var(--color-btn-danger-counter-bg); 646 | --control-fgColor-disabled: var(--color-primer-fg-disabled); 647 | --control-bgColor-disabled: var(--color-input-disabled-bg); 648 | --control-borderColor-disabled: var(--color-border-default); 649 | --sideNav-bgColor-selected: var(--color-sidenav-selected-bg); 650 | --underlineNav-borderColor-active: var(--color-primer-border-active); 651 | --shadow-floating-large: var(--color-shadow-large); 652 | --shadow-floating-xlarge: var(--color-shadow-extra-large); 653 | --bgColor-sponsors-muted: var(--color-sponsors-subtle); 654 | --bgColor-sponsors-emphasis: var(--color-sponsors-emphasis); 655 | --borderColor-severe-muted: var(--color-severe-muted); 656 | --borderColor-done-muted: var(--color-done-muted); 657 | --borderColor-sponsors-muted: var(--color-sponsors-muted); 658 | --avatar-shadow: var(--color-avatar-child-shadow); 659 | --selectMenu-borderColor: var(--color-select-menu-backdrop-border); 660 | --shadow-floating-legacy: var(--color-overlay-shadow); 661 | --selectMenu-bgColor-active: var(--color-select-menu-tap-focus-bg); 662 | --control-bgColor-active: var(--color-select-menu-tap-highlight); 663 | --control-danger-fgColor-rest: var(--color-danger-fg); 664 | --control-borderColor-danger: var(--color-danger-emphasis); 665 | --control-borderColor-success: var(--color-success-emphasis); 666 | --control-fgColor-placeholder: var(--color-fg-subtle); 667 | --control-borderColor-warning: var(--color-attention-emphasis); 668 | --control-checked-borderColor-rest: var(--color-accent-fg); 669 | --menu-bgColor-active: var(--color-menu-bg-active); 670 | --avatar-bgColor: var(--color-avatar-bg); 671 | --avatar-borderColor: var(--color-avatar-border); 672 | --avatarStack-fade-bgColor-muted: var(--color-avatar-stack-fade-more); 673 | --avatarStack-fade-bgColor-default: var(--color-avatar-stack-fade); 674 | --button-default-bgColor-disabled: var(--color-btn-bg); 675 | --button-default-borderColor-disabled: var(--color-btn-border); 676 | --button-invisible-iconColor-rest: var(--color-fg-muted); 677 | --button-invisible-bgColor-active: var(--color-action-list-item-default-active-bg); 678 | --button-invisible-bgColor-disabled: var(--color-action-list-item-default-selected-bg); 679 | --button-invisible-borderColor-disabled: var(--color-action-list-item-default-selected-bg); 680 | --button-invisible-fgColor-disabled: var(--color-primer-fg-disabled); 681 | --button-invisible-fgColor-rest: var(--color-btn-outline-text); 682 | --fgColor-link: var(--color-accent-fg); 683 | --button-danger-bgColor-rest: var(--color-btn-bg); 684 | --button-danger-borderColor-rest: var(--color-btn-border); 685 | --counter-borderColor: var(--color-counter-border); 686 | } 687 | 688 | .TimelineItem-badge { 689 | border: transparent; 690 | } 691 | 692 | .dropdown-item:focus, 693 | .dropdown-item:hover, 694 | .jump-to-suggestions-results-container [aria-selected="true"] .jump-to-suggestions-path, 695 | .jump-to-suggestions-results-container .navigation-focus .jump-to-suggestions-path, 696 | .subnav-item.selected, 697 | .subnav-item[aria-selected="true"], 698 | .subnav-item[aria-current]:not([aria-current="false"]), 699 | .filter-item.selected, 700 | .filter-item[aria-selected="true"], 701 | .filter-item[aria-current]:not([aria-current="false"]) { 702 | background-color: #bd93f91a; 703 | color: #bd93f9; 704 | } 705 | 706 | .jump-to-suggestions-results-container [aria-selected="true"] mark, 707 | .jump-to-suggestions-results-container .navigation-focus mark { 708 | color: #bd93f9; 709 | } 710 | 711 | /* Fix the border of the color when active */ 712 | .btn-primary:active { 713 | border-color: var(--color-btn-primary-border); 714 | } 715 | 716 | /* Custom Code Font */ 717 | .blob-code-inner { 718 | if custom-font-enabled { 719 | font-family: custom-font; 720 | } 721 | } 722 | 723 | /* Color the topbar */ 724 | .AppHeader { 725 | background-color: var(--color-header-bg) !important; 726 | } 727 | 728 | /* Color the logo */ 729 | .octicon-mark-github { 730 | if purple-logo { 731 | color: #bd93f9 !important; 732 | } 733 | } 734 | 735 | /* Fix Color on SideNav's for consistency */ 736 | .SideNav { 737 | background-color: rgba(0, 0, 0, 0); 738 | } 739 | 740 | /* Fix the background behind some buttons */ 741 | .color-bg-subtle.ml-1 { 742 | background-color: transparent !important; 743 | } 744 | 745 | /* GitHub Actions log colors */ 746 | .CheckStep .ansifg-b { 747 | color: var(--color-ansi-black); 748 | } 749 | 750 | .CheckStep .ansifg-r { 751 | color: var(--color-ansi-red); 752 | } 753 | 754 | .CheckStep .ansifg-g { 755 | color: var(--color-ansi-green); 756 | } 757 | 758 | .CheckStep .ansifg-y { 759 | color: var(--color-ansi-yellow); 760 | } 761 | 762 | .CheckStep .ansifg-bl { 763 | color: var(--color-ansi-blue); 764 | } 765 | 766 | .CheckStep .ansifg-m { 767 | color: var(--color-ansi-magenta); 768 | } 769 | 770 | .CheckStep .ansifg-c { 771 | color: var(--color-ansi-cyan); 772 | } 773 | 774 | .CheckStep .ansifg-w { 775 | color: var(--color-ansi-white); 776 | } 777 | 778 | .CheckStep .ansifg-gr { 779 | color: var(--color-ansi-gray); 780 | } 781 | 782 | .CheckStep .ansifg-b-br { 783 | color: var(--color-ansi-black-bright); 784 | } 785 | 786 | .CheckStep .ansifg-r-br { 787 | color: var(--color-ansi-red-bright); 788 | } 789 | 790 | .CheckStep .ansifg-g-br { 791 | color: var(--color-ansi-green-bright); 792 | } 793 | 794 | .CheckStep .ansifg-y-br { 795 | color: var(--color-ansi-yellow-bright); 796 | } 797 | 798 | .CheckStep .ansifg-bl-br { 799 | color: var(--color-ansi-blue-bright); 800 | } 801 | 802 | .CheckStep .ansifg-m-br { 803 | color: var(--color-ansi-magenta-bright); 804 | } 805 | 806 | .CheckStep .ansifg-c-br { 807 | color: var(--color-ansi-cyan-bright); 808 | } 809 | 810 | .CheckStep .ansifg-w-br { 811 | color: var(--color-ansi-white-bright); 812 | } 813 | 814 | .CheckStep .ansibg-b { 815 | background-color: var(--color-ansi-black); 816 | } 817 | 818 | .CheckStep .ansibg-r { 819 | background-color: var(--color-ansi-red); 820 | } 821 | 822 | .CheckStep .ansibg-g { 823 | background-color: var(--color-ansi-green); 824 | } 825 | 826 | .CheckStep .ansibg-y { 827 | background-color: var(--color-ansi-yellow); 828 | } 829 | 830 | .CheckStep .ansibg-bl { 831 | background-color: var(--color-ansi-blue); 832 | } 833 | 834 | .CheckStep .ansibg-m { 835 | background-color: var(--color-ansi-magenta); 836 | } 837 | 838 | .CheckStep .ansibg-c { 839 | background-color: var(--color-ansi-cyan); 840 | } 841 | 842 | .CheckStep .ansibg-w { 843 | background-color: var(--color-ansi-white); 844 | } 845 | 846 | .CheckStep .ansibg-gr { 847 | background-color: var(--color-ansi-gray); 848 | } 849 | 850 | .CheckStep .ansibg-b-br { 851 | background-color: var(--color-ansi-black-bright); 852 | } 853 | 854 | .CheckStep .ansibg-r-br { 855 | background-color: var(--color-ansi-red-bright); 856 | } 857 | 858 | .CheckStep .ansibg-g-br { 859 | background-color: var(--color-ansi-green-bright); 860 | } 861 | 862 | .CheckStep .ansibg-y-br { 863 | background-color: var(--color-ansi-yellow-bright); 864 | } 865 | 866 | .CheckStep .ansibg-bl-br { 867 | background-color: var(--color-ansi-blue-bright); 868 | } 869 | 870 | .CheckStep .ansibg-m-br { 871 | background-color: var(--color-ansi-magenta-bright); 872 | } 873 | 874 | .CheckStep .ansibg-c-br { 875 | background-color: var(--color-ansi-cyan-bright); 876 | } 877 | 878 | .CheckStep .ansibg-w-br { 879 | background-color: var(--color-ansi-white); 880 | } 881 | 882 | /* Improve labels when colored status is enabled */ 883 | if colored-status { 884 | .State--open { 885 | color: #50fa7b; 886 | } 887 | .State--merged { 888 | color: #bd93f9; 889 | } 890 | .State--closed { 891 | color: #ff5555; 892 | } 893 | 894 | .Label--info, 895 | .Label--accent { 896 | background-color: #58a6ff09; 897 | } 898 | .Label--success { 899 | background-color: #50fa7b09; 900 | } 901 | 902 | .Label--warning, 903 | .Label--attention { 904 | background-color: #f1fa8c09; 905 | } 906 | .Label--severe { 907 | background-color: #db6d2809; 908 | } 909 | .Label--danger { 910 | background-color: #f8514909; 911 | } 912 | .Label--done { 913 | background-color: #a371f709; 914 | } 915 | .Label--sponsors { 916 | background-color: #db61a209; 917 | } 918 | } 919 | } 920 | --------------------------------------------------------------------------------