Description including problem, use cases, benefits, and/or goals
I really enjoy Gitlab as a whole, but there is one thing that nearly outrages me, though it it is nothing crucial at all:
There is no completely dark application theme.
I am not talking about the syntax highlighting theme, which is fine. But I really crave for a theme, where the main whitespace is dark and not only the navigation bar.
If you are using Stylish, have a look at this theme which gets my point clear I think.
Proposal
Create one or more application themes that are mainly dark.
Additional information
I am mainly thinking about a self hosted Gitlab CE instance.
And I think the setting should be configurable on a per user basis.
This is out-of-scope and - having built a site with a dark mode built-in before - is incredibly difficult to maintain. It essentially doubles the work for frontend developers and designers, sorry.
@connorshea, how is it out of scope, it's a feature suggestion, so it is the scope. I recognize that it may be difficult, but taking a queue from material design's color management strategies might help here. If the palette were limited and managed it would in fact be very easy for front-end developers to design the site and keep it functional with limited growth in effort. I admit that if you're writing the CSS/SASS by hand without using a palette, it would be a terrible effort, but you shouldn't be doing that anyway as a small business, a later re-branding initiative in your growth would be insurmountable.
Please discuss this internally and reconsider the decision to close this, I feel that the initial reasoning gives indication of a bigger problem that could be solved at the same time. When you're done you might walk away with something that the users like and your developers like (not struggling with managing an ever growing palette).
Have to agree with @mmaguigan, this is a feature request and should not be considered out of scope. Working on a computer all day and suffering migraines due to bright white backgrounds, I've come to love the Windows 10 dark theme and would greatly appreciate the same functionality to be made available for GitLab users.
@mmaguigan out-of-scope is maybe not the right term for it, but I stand by the fact that this would be too difficult to implement. I agree that it may suggest a bigger problem, but that's not a priority to fix at the moment.
just to add a "+1" here in order to show the demand...
in fact this was the first thing i was looking for, after installing the community edition on my server.
make it a setting (like jira does, as an example) and everyone can set their own colors... its a bit of an initial effort but shouldn't affect the future workload by too much..
Thanks for the positive feedback to my feature proposal guys!
As I can read here there indeed IS a demand for the feature and I really hope @connorshea will at least put this on discussion internally as I assume a whole bunch of people out there, especially software engineers, literally HATE too much white space and on the contrary LOVE dark themes.
Thanks for keeping the issue alive and a thanks in advance to @connorshea for taking care of this. One way or another. ;)
Note: I updated the issue, so others get the idea more quickly.
would this be a personal setting and we could use gitlab.com with a different theme,
or would it be in your own hosted GitLab?
Regarding GitLab.com, although it would be a cool feature, I don't think it is a common practice and I am not sure about how much it would improve the user experience.
I personally do not feel the need for this feature.
I agree with @connorshea, this would be a big challenge regarding UI and the implementation.
Although I'm not for customisable interface, I like the idea of having a dark theme, its something that seems to be globally popular in terms of dev tools (and gaming). Right now it wouldn't be wise to start on this, currently our styles codebase isn't ready for this kind of refactor. The structure of our stylesheets are being worked on actively but we should respect that its a big task that could take a number of releases before we could put together an accurate strategy. We definitely don't want the burden of having to keep testing multiple interface styles and fighting regressions so our implementation needs to be perfect. :)
Hi guys, I really appreciate the discussion that develops here.
To clarify my point, and to answer some questions statet above I am mainly thinking about a self hosted Gitlab CE instance. I also think the setting should be configurable on a per user basis.
Maybe this won't be possible tomorrow, but I am really looking forward to the day this can be achieved! :)
It'll definitely be a lot of extra work but I'm not opposed to the idea. We'd need to make sure everything is still accessible (finding the right colors & contrasts etc). I'm not sure if the UX team has enough bandwidth to do all the necessary work for this at the moment but it's a possibility for the future.
I'd assume it would be on a per-user basis, similar to how our sidebar themes currently work.
Thanks all for the great discussion and feedback on this! Given where we are and the bandwidth we have, this isn't a focus for us. Once we have a more established personality and main color palette thoughtfully worked out, though, I'm happy to revisit this conversation.
This would be great, however creating a good dark theme is harder then it looks. Also if we were to support this feature, we would have to double design everything.. sort of.. or have a really good coloring system setup
Nice themes. I would like to just clone bitbucket and or github styles, and also that Blue/Purple theme by @dimitrieh. The only thin you can miss on that is a little more bright on the "editable" areas, like the comment.
In fact, my first impression with Gitlab UI is that offers no consistencie cuz everything is white&letters.
If you are using Stylish, have a look at this theme which gets my point clear I think.
Stylish may be a good patch, but will not cover so much your phone, in example :D, or other computers you can access from, so being an app theme is far way a better option.
I'll give a try to your themes while waiting :D thank you.
+1
heya, I just wanted to say thank you to the Gitlab development team for taking this feature request on. I too am in need of a native dark application theme.
I understand it's a lot of work, but I see more and more developer environments (Visual Studio, WebStorm, ...) having a dark theme. I would appreciate it a lot. I have tried Stylish, but the theme is not complete and it just doesn't look right, which proves how hard it is...
Putting some notes & links here so I don't lose them
Darkly theme for bootstrap for an example of base bootstrap vars to change. From what I've seen the simplest way to add themes is keep everything in _variables.scss and maintain multiple versions of those. A bit maintenance-wise, especially given large number of colors we currently use.
Thank you for the notes and links here @psimyn. In the past, I worked as UI developer on a product where we implemented themes based on individual client branding. I can attest to how difficult and time consuming it can be to implement and maintain more than one design system on the development side of things. It can be just as difficult on the design side as every single change now requires a consideration for how another color theme will need to look.
I personally would love a dark theme. I use a dark theme whenever it is available. Being in front of a computer 8 - 14 hrs a day on average (don't judge!), I find that it is easier on my eyes. We are currently working on updating and standardizing UX across the board. Once we work through these very important items, I would love to take another look at this.
Chiming in to +1. To me this should not be looked at through the angle of customisability and fanciness but accessibility. Those comments above are spot on:
Working on a computer all day and suffering migraines due to bright white backgrounds
Being in front of a computer 8 - 14 hrs a day on average (don't judge!), I find that it is easier on my eyes
We'd need to make sure everything is still accessible (finding the right colors & contrasts etc).
I have very good eyesight but I can be quite sensitive to medium-to-long exposure to big bright screen areas and heavy contrasts, else I grow increasingly dizzy and numb throughout the day. I try to use dark terminal and OS themes, but many a time you have to open some web stuff or software that pops up its black-on-white design, and going back and forth is a flashing eyesore. My current workaround is counterintuitively to set everything to light themes, using lower contrast themes if possible (one-light for Terminal.app, solarized-light, eink, nofrils-light) and lower the display backlight as much as possible. But this is a hack with severe limitations and a dark theme throughout is very much preferred (e.g I'd rather use one-dark than one-light, or zenburn).
This is what Owl currently produces as a dark theme for GitLab. I actually quite like it, so it may be a workaround for the ones of you who are using Mozilla Firefox until this issue gets resolved. Not sure if there is anything similar for other web browsers.
+1 for GitLab dark theme ... if GitLab is already using a SASS CSS setup, there is no reason NOT to create a dark theme; it could be maintained in much the same way as the code editor, or even be tied in with that with a dark light or dark darker variant (where the code editor is the base, and the light or darker themes make the site a bit lighter or darker based around the code editor colors.. this can all be done using SASS.
I love GitLab but I have to say that my eyes are dying. I tried some stylish themes and even by tweaking them it was still not as good as a built in feature. I really hope that a dark theme will arrive soon
This is good enough for me. In the meantime, those of you using Chrome: I find the "Dark Reader" Extension/Add-on is acceptable for making gitlab dark. I tried many different Stylish themes and none of them worked on all the different gitlab features/pages.
It really comes down to website accessibility. I am legally blind and part of my eye condition is something called photophobia (which is poorly named—it's not a "fear" of light, it's that direct bright lights, especially sudden direct bright lights, are like having an ice pick shoved into my eyeballs.)
I am GUI-hostile. Actively hostile to GUIs. The reason for that is simple: Some idiot got the idea in their head that paper is white, therefore everything on your screen has to be white or nearly white to be comfortable to read. I need dark backgrounds and either heavy fonts or high contrast. Easily done from the terminal, often not done at all by GUIs.
The problem with using a CSS theme is that I've been through all of them I could reasonably get my hands on, and none of them work properly for this page and this textbox. I end up turning them all off and invert the entire screen color. This means that images and colors don't work right of course. Greens and reds swap, blues and oranges swap.
So I'll just throw that out there—this is important for accessibility. For GitHub at least there are a couple of really good and well-designed userstyles out there. GitLab will probably get one eventually—but it's not going to work out of the box with self-hosted GitLab unless some effort to do it happens at the application level.
With the "me too" out of the way, I'll add that I came to this issue from your blog post on GitLab's new color system. Building upon the color scheme discussion begun there, I do have some thoughts about approaching this from my own work on visual presentation.
You have established a consistent color design language, that's good. And as part of the sidebar coloring options I found in Settings, I see that you have also got a separation between primary content and side content. I'd suggest anyone doing this kind of thing start by doing that: Choose your color hues, then pick darker and lighter saturations of each, etc.
Next I'd take grayscale colors and assign them to a grayscale palette, or rather two paired palettes. For every light color, I add a corresponding dark color to match, and I'd change all elements not using one of design language hues (or at least the semantic name for those colors) to be the closest dark or light color in the palette. Also, I try not to use pure white or pure black as anything but a very focused highlight color. Just a preference, but it takes the edge off of things and contrast rarely needs to be quite that great. You'd be surprised how nice gray13 looks on gray87, or vice versa. Unless you use my tigrana color scheme, which I've
I think you can see where I'm going with this, but I wouldn't simply invert dark and light yet. First I think I'd go through and mark all darks and lights that relate to the side content or the design language color elements (backgrounds or foregrounds that go with buttons, notifications, messages, etc.) to explicitly NOT invert them yet.
The rest, yeah, user preference for dark mode. For any element "darkmoded", use an equivalent dark color where you'd have used a light, and vice versa. This will be TERRIBLE for people like me. There'll be things like white boxes around your text entry textboxes like this one that is a problem in literally every GitLab userstyle I've tried—I really need to style that and send the patch to … all of them!
Ahem, anyway, the broken state at this point is fine because I could now go through the UI with dark mode enabled and identify any problems and fix them. Test especially form elements like text entries which have placeholder, typed, and selection modes to worry about. :)
Finally go back over your color design language and side content. Do these look okay with dark mode both off and on? Your notifications probably have nearly invisible text. Add them to the dark/light swap. Your buttons probably look like flashlights. Invert those dark/lights and see if you maybe want to swap darkness/lightness in the colors that aren't full brightness, full saturation hues. Those usually go with black or white just as well. Try it and see. :)
That'd leave side content. Search box, popup elements, that sort of thing. Invert as necessary and call it a beta, make that dark mode toggle visible to mere mortals, announce it, etc. If you deploy it, people like me will be happy to report any and every problem we have with it. :D
I've followed this pattern on a projects, and it involves a number of passes because I don't want to miss things while implementing it. Doing it this way is most useful for CI/CD models because it continues working as-is for people throughout the process until dark mode is implemented and ready for testing.
Suggestion: Leave consideration for later for a "purple" theme. Very dark gray or black backgrounds are not uncommon for dark mode, but the option for a third option that uses shades of GitLab purple in place of the shades of gray offers a nice alternative to the nearly black you see everywhere else. Discord uses the grays, but Twitter has its dark blue which is kind of a trademark of Twitter dark mode. There's a theme for Slack that puts Slack into a theme based around the more reddish Slack purple and it's my preference actually. That'd go nicely with the dark black/gray sidebar theme you already have. Still dark, but with a bit more color. :)
There will also be an interesting issue/possible hindrance, styling the new Web IDE. That may include having to create a whole new syntax theme and theme for Monaco.
For those of you who are using Stylus (a Stylish fork that's still free as in freedom and supports UserCSS), I've been working on a dark theme in the form of a userstyle: https://gitlab.com/maxigaz/gitlab-dark
Here's how it currently looks:
I might put it on userstyles.org later when it's near being complete so that Stylish users can also grab it easily. But for now, you either need to copy and paste the raw CSS file into Stylish or switch to Stylus.
@maxigaz Cleanest implementation I've seen yet for the things I've tried. The comment above yours using CSS filter tricks is the only thing I've seen that looks weird so far. More complete than any of the ones I've tried on userstyles.org (and I did search pretty deeply because that site absolutely sucks for finding anything TBH…)
I'd still love to see something official from GitLab for mobile… I suggested something that could get them on the road to a solution pretty quick, but you've already got something better.
Can you be more specific about how that comment looks weird? Feel free to open an issue on the project page. When you do so, a screenshot and mentioning what web browser you're using will be much appreciated. :)
I guess Windows 10 added a dark mode before that. Since it has a larger user base that should already have brought much relevance, but your argument still stands.
@d.weizhe : it looks good, but the headers are still a bit too bright for a dark theme; they could really do with a bit less white so they don't leave burns in my retina's when I work in low-light conditions.
Apart from all the great adjustments being submitted by users here, we need something that is built-in to GitLab itself; not just slapped on using external plugins.. I would like it to go as far as to even in-line changing the body's background-color property to prevent white flashes between pageloads.
Giving GitLab a pleasant dark mode (yes please!) and a bright daytime UI (for those who would want that (not me)) will make the application accessible for everyone.
This is absolutely necessary for a system wide theme that can be set to default. If the light theme advocates feel strongly about this, then let us have a upper right night/day toggle switch to flip between them. This is essential when you spend most of your time working in studios, work at night and other such scenarios.
@maxigaz's theme above is a fantastic candidate for integration.
Can confirm; @maxigaz's theme is great. Better than the other Gitlab dark themes that I've come across so far. If he could get some help from the Gitlab team that is working on this, I think that'd be great. We should at least have a unification of effort here to avoid fragmentation. Just my 2¢
@josephp90 Thank you for the link. I finally got my Gitlab to look dark and easy on the eyes. You can clone a style and change it to point to your local copy of Gitlab if you're hosting it internally. I had to install the Chrome Extension Stylus (Stylish is no longer available). Stylus works seamlessly with Stylish themes.
All this talk about CSS hacks is detracting from the fact that this application just needs decent colorization support built into it's template system.
These work-shy bullshit remarks such as "difficult to maintain" is nonsense, since the community will more than gladly take care of it for you. Also, if you have a decent system with a way of pallet handling and you're using 50% opacity on your custom-colored labels, you're pretty much 95% of the way there.
Also people, take a look at how Spotify or Adobe handles dark UI interfaces; they don't have big black globs of 'whitespace' but they tend to use tones of gray as not to turn their dark UI into a contrast heavy eye-piercer.
I'm sorry, but after 2 years and seeing major platform and/or application getting dark UI's, it pains me to see something I use this often (with great joy) still not having a decent dark interface that doesn't burn my eyes into oblivion when I'm working at night.
Yes, I really don't understand what's preventing progress on this issue.
Gitlab developers: please pick a solution already as we have done most of the work for you!
I once again vouch for @maxigaz's user style. It is fantastic and still superior to the other solutions thus far. If you would at least accept his theme to get him some more recognition and possibility to receive help, that would be great. I really can't understand why this is taking so long. The community is clearly very interested in this feature. This will become an even more intensified demand by the time macOS Mojave is released in a few days. You should do yourselves a favor, if not your community. This needs to have some forward motion from the Gitlab developers already.
@ylluminarious : I don't think the problem lies with them not having the stylesheet changes for this, but that their template system does not support these colorization changes. Us having done most of the work is a bit of an overstatement, since rewriting their template engine to support these colorization changes is way more work than just writing some style changes in a custom CSS.
I think that the main reason it's not implemented yet is that they don't want to slap on something that's shoddily built which would degrade the overall quality of the product (which I wholeheartedly agree with), however the template engine should have had support for this from the start, IMHO.
Right now, I have no idea of they're already working on something or what the actual state of this issue is.
We're not working on a dark theme. We do want to get to a place where it's easier to do this, which will be through moving our frontend to mostly use components. Only by then would we accept contributions or build a dark theme ourselves.
And to be clear: everyone at GitLab wants this as well, but right now it would be at the cost of our velocity (i.e. do everything twice), which is not acceptable.
If you're interested in helping us move to easily-maintainable components, you're more than welcome to, of course.
@frakman1 Felt like they have to hide that, since they need to keep the privacy of their customers. At least we know that many people want this, including their customers.
@RaitaroH and I are working on our own dark (and light) theme with a ton of customizable settings all thanks to Stylus. More info can be found at https://gitlab.com/vednoc/dark-gitlab and for those that are interested, we'd really appreciate feedback in order to make the theme even better.
@vednoc Yours is by far, the best Gitlab theme I've seen and I've tried them all. This is the only one that handles all formats perfectly. I can finally see everything clearly. I love how you use a regex to allow it to work on different sites too. Well done!
To add an option to switch between classic theme and dark theme for whole web interface of whole website (public and/or for logged users). Each individual user should be able to switch this too for own session.
Nextcloud uses css variables(a.k.a. custom properties) for their dark theme. With usage of supported browsers at 87%, not sure you'd want to rely on this, but considering this issue is pretty old, this could be quite different after another two years.
We're not working on a dark theme. We do want to get to a place where it's easier to do this, which will be through moving our frontend to mostly use components. Only by then would we accept contributions or build a dark theme ourselves.
And to be clear: everyone at GitLab wants this as well, but right now it would be at the cost of our velocity (i.e. do everything twice), which is not acceptable.
If you're interested in helping us move to easily-maintainable components, you're more than welcome to, of course.
On a sidenote, there should be a way to "Pin" a comment to the top of the thread so readers don't have to go across the list to understand the status. One's which communicate the certainty or uncertainty of implementation of a request, like the one by @JobV above.
@markglenfletcher Is there any issues-post related with easily-maintainable components? I wanted to see the statuses, just in case this people wanted to see the status too xD
Another upvote for me on this UX proposal. Either a setting in your User Prefs or toggleable dark mode in the User menu in the upper corner.
I also want to give a little heads up to those recommending Stylish the browser extension for CSS do-overs, please don't, it's no longer considered safe to use the well known extension called Stylish after it being discovered acting as a spyware extension, stealing all your Internet history, recording everything you do such as login details and the sites you visit.