-
Notifications
You must be signed in to change notification settings - Fork 89
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dark Theme for Stackoverflow #297
Comments
A dark theme isn't out of the question, but we're not ready to consider it seriously. I think it can be solved in a way that allows us to swap all our color variables on the fly based on 1) user preference 2) OS-setting. But, organizationally, Stacks doesn't have the code coverage to enable this. Huge swathes of the product would be bright white even if dark mode is enabled. It also introduces another another axis to design against:
I can very easily see us painting certain layouts into a corner by forgetting to test dark mode, especially when considering that we have 200 some themes to style appropriately. |
A huge pre-requisite for this would probably be getting Stack Overflow completely onto Stacks for color, or at least to a point where the custom colors we do use are in a single less file. Right now, there are thousands of matches for I would love to see Stacks support a dark theme just largely as an exercise to see what it takes and I also |
@aaronshekey This has been brought up again on Meta Stack Overflow, and I have quoted your comment there. |
I've got some thoughts about how we'd design this. We could possibly flip the colors by default when a user requests dark mode, getting us 60% there, and then offer dark mode-specific overrides when the default gets it wrong. Every color should have a best guess dark mode equivalent that is enabled by Let's say you've got This would allow us to account for situations like what's illustrated in Steve Schoger's really great tweet. |
I'm not afraid fo the white, but when I'm coding in the dark, with all other sites in dark modes... I open SO and it hurts. If stack has a huge number of So how about it: get those colour codes search-replaced into a separate css file with css variables, rationalise some that are so similar to each other, and then release into the wild so we can all contibute new themes, best ones get added to a new user theme selection preference. Pink glitter unicorn theme will (no doubt) also be added too. Technically its easy once you have a css file full of variables, you change the stylesheet reference at the top of the page to a different one according to user preferences. It is that simple. |
Conceptually, yep! Simple. In practice, anything but. You have no context for our toolchain, legacy code, feature roadmaps, or the headcount and makeup of our organization. A tiny slice of context: In our For each hour we spend shipping a dark mode our users approve of, an hour is taken from shipping features that more directly affect our bottom line, enabling us to ship more features in a sustained, maintainable manner. I agree that native CSS variables are a great approach. There are a few problems with that.
... But, let's take a step back from the solution you're proposing and look at the context that hurts your eyes. You're in your code editor. You're blocked by something and have to go to our website. Your dark mode solution assumes that a visit to the website is necessary. In a small exercise of reframing the problem, we might realize in our product roadmap that we may better serve users of Stack Overflow by building extensions / plugins that understand the context of their editor and allows browsing Stack Overflow without leaving their properly-themed editing experience. |
You can still submit the colours used in your less filles for customisation in much the same way, only now you have to change themes by changign the entire post-compiled css, its technically exactly the same. Much like bootswatch can produce different bootstrap themes. But you say making themes is too much hard work... but building extensions for every common editor is not?! |
In the mean time, if you have the Stylus browser extension installed, you can use the Stack Overflow Dark userstyle which actually applies to almost all Stack Exchange sites. |
A loose list of tasks required to support dark mode from a conversation had today:
|
@aaronshekey totally worth it 🚀 Curious: Does Stylus does all that to achieve the Dark Theme? Because it's already working, it's just not built-in to the platform yet. 🤔 |
Stylus only injects a stylesheet into the StackExchange websites. The userstyle is set up to target almost all SE domains except for Area 51, which has a unique style. |
Re: #356 May I ask why is it necessary to apply !important to all these rules? As far as exploring goes, its not an issue of course. I mention this because Im a maintainer for the Stack Overflow Dark userstyle and trying to override default stylesheet rules with |
Stack Overflow has a lot of legacy CSS. A good portion of these rules are very specific. We do as much refactor as we can, but the idea of Stacks' atomic styles is that they are immutable. Adding something like We will be able to drop our dependency on |
At least its a possibility, even if it is a theoretical future =)
Its a mammoth task to get towards the theoretical future you mentioned in any case. Thanks for helping to keeping things ticking =) |
As always, whenever the idea of dropping Take for example, the following code: <button class="s-btn s-btn--badge">
Active <span class="s-btn--badge">198</span>
</button> Imagining I want to change the color of the badge, I can easily do That's because while Unless, of course, Stacks components become truly perfect and we never need to customize them. |
Ok, Stacks now supports dark mode. A ton of work has to be done in our production codebase, but this issue can be closed since this is the Stacks repo. ✌️ |
Congrats. |
Are you guys considering adding dark theme support for cs.stackexchange.com ? |
@KargathEx You'll need to ask that question on either Meta Stack Exchange or Meta CS. This repo is for the Stacks design system only - we generally don't have much public insight we can offer on the product teams' roadmaps. |
How do I enable dark mode, please? |
Just a humble request, could we have a dark theme, for stackoverflow, some of us are afraid of the white, thanks
The text was updated successfully, but these errors were encountered: