Dark Mode for the User Interface

Features Requests
1

This is more of a quality of life request, but I would love to see a dark mode version of the User Interface.

Virtually all the Development tools we use support dark mode, and our eyes would sure appreciate the break from all that searing white.

2

I just tried this DarkReader extension in Firefox it looks like it does a very good job for that.

1 Like
3

I think this becomes higher priority after github release dark schema. It is like a flash right to my face, every time I click a build link.

Please, add it. Shouldn’t be super hard to do.

3 Likes
4

I feel the same as Alex. Very Jarring to go from Github Darkmode to Buildkite’s blinding white background, even with night mode enabled.

I love buildkite and everything about it. Rarely have to go to the UI (which is a great thing btw), but when I do it hurts the eyes.

Seems like it’s one of the few dev tools I use that’s the last holdout on darkmode. I’m sure there are good reasons for it, but I look forward to when this gets released. :-)

5

Not to add pressure, but AWS Console also has a dark mode now. This would be a great addition for UX.

6

Hey!

We definitely agree with you and feel your pain here and it’s something we hear about quite a bit and the Design team is planning on a solution. While there isn’t anything official as of right now, there are community-created themes like: GitHub - one-dark/buildkite-dark-theme: Relieve the stress on your eyes when using Buildkite with this custom dark theme!
I’ll add you +1 on this feature.

Best!

1 Like
7

Same. I’m getting a tan over here on late work-nights. It’s the only tool I use that doesn’t have dark mode.

8

Hey @ivari

Thank you for your feedback. We still have this in our feature backlog. In the meantime, please take a look at Paula’s suggestion, one of our community-created themes: GitHub - one-dark/buildkite-dark-theme: Relieve the stress on your eyes when using Buildkite with this custom dark theme!.
I also added your +1 to this feature.

1 Like
9

+1 for me for dark mode support, please :pray:

(I’d say “how could you not have implemented this yet”, but dark mode support is still sitting in the backlog for my own static site generator, so … glass houses and all :wink:)

11

Hey Duncan :wave:

Welcome to Buildkite community!

Thanks for adding your vote to this feature. We will add you as +1 for this feature, meanwhile, please take a look at comminity created theme GitHub - one-dark/buildkite-dark-theme: Relieve the stress on your eyes when using Buildkite with this custom dark theme! if it’s helpful.

Cheers,
Priya

12

It’s been a long time coming, but we’re happy to share dark mode is now available:

Dark mode in product
Dark mode in product2864Ă—1968 483 KB

In your user menu you can set Buildkite to display in light or dark mode, or adapt to your system theme:

User theme menu
User theme menu1776Ă—572 60.5 KB

Note that dark mode is experimental and you may encounter issues. If you have any feedback or find any issues, please reach out—thanks!

1 Like
13

Happy to have dark mode, but I’ve been running into issues.

  • Text edges are “soft”, making it harder to read. It seems to get worse over time.
  • Thin lines (e.g. around step headings) flicker when scrolling. Like with the text, it degrades over time with lines no longer being consistent (visually as if 1 side is 2 pixels thick and the other just 1).

Light mode is unaffected.

I took the liberty of peaking at the CSS and saw that filter does some of the heavy lifting. I suspect a browser bug may be responsible (only explanation I can think of for the thin line issues) and possibly a bad interaction with a font smoothing implementation (set by the browser/OS, can be influenced in CSS via the non-standard font-smooth property).

Relevant info;

  • Firefox 131.0.3 (Edge 130 in unaffected)
  • macOS 14.7 (M1 MBP)
  • Using an external display (builtin display is affected as well, though to a much lesser degree)
14

Hi @mele-canva ,

Welcome to the Buildkite Support Community! :wave:

Thanks for the feedback on our Dark Mode theme. I’ll pass this on to our product team.

Cheers.

15

Thanks for the detailed write-up @mele-canva! We’ll do some testing in Firefox 131.0.3 and see if we can identify a fix for you.

A screenshot highlighting the step headings/thin lines you’re referring to would be very helpful too, even if the screenshot itself can’t convey the actual visual issue you see :pray:

I don’t think this will help, but just to rule it out: does running this snippet in your browser console to apply subpixel antialiasing help?

// Render elements with subpixel antialiasing
function applySubpixelAntialiasing() {
  const styleTag = document.createElement('style');
  styleTag.innerHTML = `
    html.ui-inverted * {
      -moz-osx-font-smoothing: subpixel-antialiased !important;
      -webkit-font-smoothing: subpixel-antialiased !important;
    }
  `
  document.head.appendChild(styleTag);
}

applySubpixelAntialiasing()

Cheers!

16

No observable difference after running the script.

As for a screenshot…

image
image902Ă—764 119 KB

Left: Chromium
Right: Firefox

Looking closer now at the side-by-side, everything has a blur. Text is just the most obvious.