Allow switching website between “light mode” and “dark mode”

[mhrbmr]

Needs a dark mode for enhanced accessibility.

[also see #37444 for a subtask]

[sftim]

/retitle Allow switching website between “light mode” and “dark mode”

/kind feature
/area web-development
/priority awaiting-more-evidence

[sftim]

@HBDUDE interesting idea. If this gets a few 👍 reactions we'll be happy to accept it as a feature for the backlog.

[zaheeruddinfaiz]

It would be great to have such an option. Since reading the documentation, the dark mode helps in reading for longer period of time.

[wethinkagile]

It would save energy, too.

[mhrbmr]

Just in curiosity, because I’m new to open source software, but does that mean anyone can potentially contribute? Say if someone wanted to build a dark mode out and then submitted it for review, would that be something someone could do?

[wethinkagile]

Indeed, you can and it will be much appreciated. I already started working on it. If you want to coordinate and help, let me know. I also recommend checking out the project and reading the Readme, you will see links to Slack and Mailinglist there.

[mhrbmr]

Ok, that’s really cool to know. Im not extremely experienced as a dev yet, and so I don’t know if I’d be of much use, but I’d love to check out the code and see how it goes.

[sftim]

/priority backlog
/remove-priority awaiting-more-evidence
/triage accepted

[vickyvikas7988]

+1
Need dark mode for documentation

[wethinkagile]

Please someone provide location of central SASS (or similar) file. I asked in Slack, w/o result.

[sftim]

@stevek-pro this is a backlog priority issue. SIG Docs has a really chunky amount of work that we've triaged as more valuable, so it's likely that this will move forward specifically when someone who wants to see this specific improvement land picks it up.

If we don't see any movement within a few months, we have a bot that would close the feature request.

[sftim]

See https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode for a CSS approach towards implementing this.

[k8s-triage-robot]

The Kubernetes project currently lacks enough contributors to adequately respond to all issues and PRs.

This bot triages issues and PRs according to the following rules:

• After 90d of inactivity, lifecycle/stale is applied
• After 30d of inactivity since lifecycle/stale was applied, lifecycle/rotten is applied
• After 30d of inactivity since lifecycle/rotten was applied, the issue is closed

You can:

• Mark this issue or PR as fresh with /remove-lifecycle stale
• Mark this issue or PR as rotten with /lifecycle rotten
• Close this issue or PR with /close
• Offer to help out with Issue Triage

Please send feedback to sig-contributor-experience at kubernetes/community.

/lifecycle stale

[k8s-triage-robot]

The Kubernetes project currently lacks enough active contributors to adequately respond to all issues and PRs.

This bot triages issues and PRs according to the following rules:

• After 90d of inactivity, lifecycle/stale is applied
• After 30d of inactivity since lifecycle/stale was applied, lifecycle/rotten is applied
• After 30d of inactivity since lifecycle/rotten was applied, the issue is closed

You can:

• Mark this issue or PR as fresh with /remove-lifecycle rotten
• Close this issue or PR with /close
• Offer to help out with Issue Triage

Please send feedback to sig-contributor-experience at kubernetes/community.

/lifecycle rotten

[wethinkagile]

See https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode for a CSS approach towards implementing this.

Thanks. I will look into it.

[sftim]

/remove-lifecycle rotten
/lifecycle frozen

[sftim]

Any implementation of this needs to work for diagrams and other graphics, as well as text. We don't want to have people who prefer dark mode missing out on being able to see what a diagram says.

[wethinkagile]

Sorry I did not follow up earlier, but since I discovered dark reader plugin, I am in no need of this feature anymore.

[sftim]

As well as using CSS, if we find we need JavaScript for some aspect then that's also feasible, eg https://flaviocopes.com/javascript-detect-dark-mode/

[sftim]

Duplicated by #39263

[KhushPatibandha]

I don't see any dark mode button on the kubernetes website, so i suppose this issue is still not resolved? so can I work on this? I think I can help.
Do let me know.

[KhushPatibandha]

/assign

[KhushPatibandha]

can someone help me locate the main css file which is relevant to make a change in?

[sftim]

can someone help me locate the main css file which is relevant to make a change in?

assets/scss/_base.scss

This is SCSS, not CSS.

If you're planning to work on #37444, try selecting body.td-home (or children), and using the appropriate media query.

[Gauravpadam]

Hey @KhushPatibandha, I see that you're working on this feature. Would you like to collaborate on a PR?

[sftim]

Also see #43084

[sftim]

Duplicated by #44159

[sftim]

Help is welcome. Please consider working on #37444 first.

[dipesh-rawat]

Another duplicate request #44323

[sftim]

Help is welcome. Please consider working on #37444 first.

[dipesh-rawat]

In the long term, we might want to consider aligning with Docsy since it now supports Dark Mode (announcement here).

[sftim]

We have plans to upgrade to a newer Docsy; even if we do, we'll still need to adapt this website specifically to support both light and dark views.

[sftim]

Duplicated by #49433

[sftim]

I suggest we close this issue after April 2025 if #37444 has not yet been implemented. There doesn't seem to be a lot of interest in staffing the work.