Buildkite Dark Theme

buildkite-dark-theme.user.css

/* ==UserStyle==
@name           Buildkite Dark Theme
@namespace      github.com/mskelton
@version        2.3.2
@description    Relief the stress on your eyes when using Buildkite with this custom dark theme! This theme is inspired by the GitHub dark theme that was recently released.
@author         Mark Skelton
@license        ISC
@homepageURL    https://gist.github.com/mskelton/3f1a9059abda31d54e8780aeaabb7399
==/UserStyle== */
@-moz-document regexp("https://buildkite\\.com/(?!docs).*") {
  :root {
    --color-text-primary: #c9d1d9;
    --color-text-secondary: #8b949e;
    --color-text-placeholder: #484f58;
    --color-bg-primary: #06090f;
    --color-bg-secondary: #0d1117;
    --color-bg-tertiary: #161b22;
    --color-bg-overlay: #21262d;
    --color-border-primary: #30363d;
    --color-border-secondary: #21262d;
    --color-state-focus-border: #388bfd;
    --color-state-focus-shadow: 0 0 0 3px #0c2d6b;
    --color-select-menu-backdrop-border: #484f58;
    --color-shadow-large: 0 8px 24px #010409;
    --color-code-selection-bg: rgb(121 192 255 / 30%);
    /* Annotation colors */
    --color-alert-info: 56 139 253;
    --color-alert-success: 46 160 67;
    --color-alert-warn: 187 128 9;
    --color-alert-error: 248 81 73;
    /* Status colors */
    --color-status-passed-bg: rgba(63, 185, 80, 0.1);
    --color-status-passed-border: rgba(63, 185, 80, 0.4);
    --color-status-passed-border-light: rgb(63 185 80 / 12%);
    --color-status-passed-text: #3fb950;
    --color-status-failed-bg: rgba(185, 63, 63, .1);
    --color-status-failed-border: rgba(185, 63, 63, .4);
    --color-status-failed-border-light: rgb(185 63 63 / 12%);
    --color-status-failed-text: #ff6b61;
    --color-status-warn-bg: rgba(255, 197, 0, .1);
    --color-status-warn-border: rgb(242 211 91 / 40%);
    --color-status-warn-border-light: rgb(242 211 91 / 12%);
    --color-status-warn-text: #ffd33d;
  }

  body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }

  /** Colors */
  .dark-gray,
  .very-dark-gray,
  .panel-footer .dark-gray,
  .step-preview-type-script {
    color: var(--color-text-secondary);
  }

  .black {
    color: var(--color-text-primary);
  }

  .hover-black {
    color: var(--color-text-secondary);
  }

  .hover-black:hover {
    color: var(--color-text-primary);
  }
  
  /** Borders */
  .border-mid-gray,
  .border-white,
  .border-gray,
  .border-bottom-child-gray > * {
    border-color: var(--color-border-primary);
  }

  /** Backgrounds */
  .bg-gray,
  .bg-dark-gray {
    background-color: var(--color-border-primary);
    color: var(--color-text-secondary);
  }

  .bg-white {
    background-color: var(--color-bg-secondary);
  }

  .bg-silver {
    background-color: var(--color-bg-tertiary);
  }

  .hover-bg-silver:hover,
  .hover-bg-silver:focus {
    background-color: var(--color-bg-tertiary);
  }

  /** Buttons */
  .btn-default {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary) !important;
  }

  .btn-default.btn--hovered,
  .btn-default:hover,
  .btn-danger:hover {
    background-color: var(--color-bg-tertiary);
    box-shadow: none;
  }

  .btn-danger {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-primary);
  }

  /** Forms */
  .FormField__Label {
    color: var(--color-text-primary);
  }

  .input,
  .ais-SearchBox-input {
    background-color: var(--color-bg-primary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
  }

  .input:focus,
  .ais-SearchBox-input:focus {
    border: 1px solid var(--color-state-focus-border) !important;
    box-shadow: var(--color-state-focus-shadow) !important;
    outline: none !important;
  }

  .input::placeholder,
  .ais-SearchBox-input:focus {
    color: var(--color-text-placeholder);
  }

  .select,
  select.form-control {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary) !important;
  }

  /** Login */
  .LoginSignup__hints {
    border-top: none;
  }

  /** Code */
  .annotation-body code,
  .annotation-body pre {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
  }

  pre.code {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
  }

  code.code {
    border-color: var(--color-border-primary);
    color: var(--color-text-secondary);
  }

  /* Dashboard */
  [data-testid="pipeline"] {
    background-color: var(--color-bg-secondary);
  }

  /* Pipeline dashboard */
  .panel {
    background-color: var(--color-bg-primary);
  }

  .panel-default {
    border-color: var(--color-border-primary);
  }

  .kinda-new-panel .panel-heading,
  .better-branch-panel .panel-heading {
    background-color: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
  }

  .build-row {
    border-color: var(--color-border-primary);
  }

  .better-branch-panel .build-row:hover {
    background-color: var(--color-bg-tertiary);
  }

  /* Pipeline detail header */
  .panel-footer {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
  }

  .panel-footer .btn-danger,
  .panel-footer .btn-default {
    border-color: var(--color-border-primary);
  }

  .build-panel.panel-success {
    border-color: var(--color-status-passed-border);
  }
  
  .panel-default > .panel-heading {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border-color: var(--color-border-primary);
  }
  
  .build-panel.panel-success .panel-heading,
  .build-pipeline-job.build-pipeline-state-finished,
  .build-pipeline-job.build-pipeline-state-passed {
    background: var(--color-status-passed-bg);
    border-color: var(--color-status-passed-border-light);
    color: var(--color-status-passed-text);
  }

  .panel-warning {
    border-color: var(--color-status-warn-border);
  }
  
  .panel-warning .panel-heading,
  .build-pipeline-job.build-pipeline-state-running {
    background-color: var(--color-status-warn-bg);
    border-color: var(--color-status-warn-border-light);
    color: var(--color-status-warn-text);
  }
 
  .build-panel.panel-danger {
    border-color: var(--color-status-failed-border);
  }
  
  .panel-danger .panel-heading,
  .build-pipeline-job.build-pipeline-state-failed,
  .build-pipeline-job.build-pipeline-state-failed-soft,
  .build-pipeline-job.build-pipeline-state-waiting_failed {
    background: var(--color-status-failed-bg);
    border-color: var(--color-status-failed-border-light);
    color: var(--color-status-failed-text);
  }

  .build-pipeline-job,
  .build-pipeline-job.build-pipeline-state-assigned,
  .build-pipeline-job.build-pipeline-state-blocked,
  .build-pipeline-job.build-pipeline-state-broken {
    background-color: var(--color-bg-overlay);
    color: var(--color-text-secondary);
    border-color: var(--color-border-primary);
  }
  
  .build-pipeline-job.build-pipeline-job-waiter {
    background: none;
    border: none;
  }

  /* Pipeline detail steps */
  .job-list-pipeline .build-details-pipeline-job .build-details-pipeline-job-body__controls {
    box-shadow: 0 10px var(--color-bg-primary);
  }
  
  .job-list-pipeline .build-details-pipeline-job,
  .job-list-pipeline .build-details-pipeline-job-body {
    border-color: var(--color-border-primary);
  }
  
  .job-list-pipeline .build-details-pipeline-job-state-running,
  .job-list-pipeline .build-details-pipeline-job-state-running .build-details-pipeline-job-body {
    border-color: var(--color-status-warn-border);
  }

  .job-list-pipeline .build-details-pipeline-job-state-passed,
  .job-list-pipeline .build-details-pipeline-job-state-passed .build-details-pipeline-job-body {
    border-color: var(--color-status-passed-border);
  }

  .job-list-pipeline .build-details-pipeline-job-state-failed,
  .job-list-pipeline .build-details-pipeline-job-state-failed .build-details-pipeline-job-body {
    border-color: var(--color-status-failed-border);
  }

  .JobLogOutputComponent {
    border: 1px solid var(--color-border-primary);
    border-top-width: 0;
  }

  .JobLogOutputComponent__Controls {
    border-top: 1px solid var(--color-border-primary);
    box-shadow: none;
  }

  /* Because there isn't a non-generated class name for dropdowns, we use the generated one if it exists. */
  .jbDAzK,
  .Dropdown-showing > div,
  .popup {
    background-color: var(--color-bg-overlay);
    border: none;
    box-shadow: var(--color-shadow-large);
    color: var(--color-text-primary);
  }

  .jbDAzK > img,
  .Dropdown-showing > div > img,
  .popup::before {
    content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00NzUgMjY2IDMyIDIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IC00NzUgMjY2IDMyIDIwIj48ZGVmcz48ZmlsdGVyIGlkPSJhIj48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxIi8+PC9maWx0ZXI+PC9kZWZzPjxwYXRoIGZpbGw9IiM0ODRmNTgiIGQ9Ik0tNDY5IDI4NmwxMC0xMCAxMCAxMHoiLz48cGF0aCBmaWxsPSIjMjEyNjJkIiBkPSJNLTQ2OSAyODZsMTAtMTAgMTAgMTB6Ii8+PC9zdmc+")
  }

  /* Misc */
  .badge {
    background-color: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary);
    color: var(--color-text-tetiary);
  }

  .btn-tab--monochrome.btn-tab--active {
    border-color: white !important;
  }

  /** Step editor */
  .CodeMirror-gutters {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-secondary);
  }

  .CodeMirror-cursor {
    border-color: var(--color-text-primary);
  }

  .CodeMirror-selected {
    background-color: var(--color-code-selection-bg) !important;
  }

  /* Right arrow border in the header */
  @media (min-width: 1200px) {
    .cHfwmd {
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSI5NSI+PHBhdGggZD0iTTEgMWwyMiA0Ni41TDEgOTQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMwMzYzZCIvPjwvc3ZnPg==");
    }
  }

  /* Help dialog border */
  .dOxHiq {
    background-color: var(--color-border-primary);
  }
  
  /* Dialog */
  .Dialog__Backdrop {
    background-color: var(--color-bg-secondary);
  }
  
  .Dialog__Box {
    background-color: var(--color-bg-overlay);
  }
  
  .Dialog__CloseButton {
    background-color: var(--color-bg-overlay);
    color: var(--color-text-primary);
  }

  /* Help support images */
  .qpveC::after {
    background: linear-gradient(90deg, rgba(33, 39, 44, 0) 0%, rgba(33, 39, 44, 0.5) 42%, rgba(33, 39, 44, 0.8) 100%);
  }

  .table,
  .table th,
  .table td {
    border-color: var(--color-border-primary) !important;
  }

  /** Annotation table */
  .annotation-body table tr {
    background-color: var(--color-bg-primary);
  }

  .annotation-body table tr:nth-child(2n) {
    background-color: var(--color-bg-secondary);
  }

  .annotation-body table td,
  .annotation-body table th {
    border-color: var(--color-border-primary);
  }

  /** Retry groups */
  .job-retry-group-first .build-details-pipeline-job__header {
    box-shadow: none !important;
  }
  
  /* New pipeline */
  .ProjectPipelineFormComponent__col--options,
  .AgentQueryRulesResultComponent,
  .AgentQueryRulesResultComponent--matched {
    border-color: var(--color-border-primary);
  }
  
  .AgentQueryRulesComponent__AgentContainer,
  .AgentQueryRulesComponent__AgentContainer__Info {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
  }
  
  .scrollbar::-webkit-scrollbar-thumb {
    border-color: #333;
    background-color: #333;
  }
  
  /* Annotation panels */
  .border-build-skipped {
    border-color: rgb(var(--color-alert-info) / 60%);
  }
  
  .bg-build-skipped {
    background-color: rgb(var(--color-alert-info) / 60%);
  }
  
  .hover-bg-build-skipped-dark:hover {
    background-color: rgb(var(--color-alert-info) / 70%);
  }

  .border-build-passed {
    border-color: rgb(var(--color-alert-success) / 60%);
  }
  
  .bg-build-passed {
    background-color: rgb(var(--color-alert-success) / 60%);
  }
  
  .hover-bg-build-passed-dark:hover {
    background-color: rgb(var(--color-alert-success) / 70%);
  }
  
  .border-build-running {
    border-color: rgb(var(--color-alert-warn) / 60%);
  }
  
  .bg-build-running {
    background-color: rgb(var(--color-alert-warn) / 60%);
  }
  
  .hover-bg-build-running-dark:hover {
    background-color: rgb(var(--color-alert-warn) / 70%);
  }

  .border-build-failed {
    border-color: rgb(var(--color-alert-error) / 60%);
  }
  
  .bg-build-failed {
    background-color: rgb(var(--color-alert-error) / 60%);
  }
  
  .hover-bg-build-failed-dark:hover {
    background-color: rgb(var(--color-alert-error) / 70%);
  }
}

Merry Christmas everyone! I just pushed a full rewrite of theme inspired by the new GitHub dark theme. Hope you enjoy it and let me know if you have any ideas for improvements!

Awesome. Thanks, Mark!

FYI dialogs (at least the block/input step ones) seem to be broken, the body and translucent backdrop are both light.

@DuBistKomisch To make collaboration easier, I converted this gist into a GitHub repo and created an issue to help with your issue: one-dark/buildkite-dark-theme#1