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 primary.css, the legacy stylesheet responsible for questions and answers, we have 9,920 declarations and 179 unique colors. We're not talking a few hours of work. This is a sustained effort of months.

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.

Our entire CSS toolchain is based on Less, which has its own compiled variables.
We support IE11, which doesn't natively support CSS variables. At our scale, which, is millions of page views, a polyfill doesn't seem like a great solution.
Each of our hundreds of network themes will also need to consider dark mode.

...

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.

Dark Theme for Stackoverflow #297

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions