Home page enable dark mode

[sftim]

PR #45535, redone for 2025. All credit to @tamilselvan1102.

To see the effect, visit https://deploy-preview-49586--kubernetes-io-main-staging.netlify.app/ in a browser set to prefer dark mode.

Per #37444, this only sets the main page to support light/dark mode. Other pages are not in scope yet.

---

Fixes: #37444

This is to enabling dark mode only for https://kubernetes.io/ page.

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: sftim / name: Tim Bannister (5b7b810, cdcd19b, fa389e7, 13d3af3, a0d1375)

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please ask for approval from sftim. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS
• content/en/OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[netlify]

✅ Pull request preview available for checking

Built without sensitive environment variables

Name	Link
🔨 Latest commit	a0d1375
🔍 Latest deploy log	https://app.netlify.com/sites/kubernetes-io-main-staging/deploys/679c18b7bb680400086ef98c
😎 Deploy Preview	https://deploy-preview-49586--kubernetes-io-main-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[sftim]

/easycla

[sftim]

@milinddethe15 how's this looking?

[dipesh-rawat]

Overall, the PR looks great!

One thing I noticed in the deploy preview: on the Case Studies page, the grid view now seems to be missing a few logos, like AppDirect , Nordstrom , NetEase , Squarespace, ThredUp , VSCO and Woorank, and some logos aren’t rendering properly.

[sftim]

OK, we ought to fix those missing logos (or drop the Case Studies section).

[sftim]

Thanks for spotting that @dipesh-rawat

[shurup]

Overall, looks really cool! I've noticed a tiny bug at the bottom of the Community page.

To fix it, I suggest removing static/images/community/kubernetes-community-column.png completely and changing this line in assets/scss/_custom.scss (it occurs twice in the file):

  background: url('/images/community/kubernetes-community-final.jpg'), url('/images/community/kubernetes-community-column.png');

→

  background: url('/images/community/kubernetes-community-final.jpg');
  background-color: #0c1733;

[shurup]

I'm also puzzled by the dark mode behaviour in Firefox (134.0.1, 64-bit, Mozilla Firefox snap for Ubuntu). While the main page renders correctly, all other pages (docs, blog, etc.) do not make a switch and are rendered as usual (light mode). I don't normally use the dark mode and thought it was something about my setup. However, all other websites (e.g. GitHub and Google) render everything in the dark mode correctly as much as I browse their different pages. Does anyone else experience the same?

[milinddethe15]

@shurup This PR adds the support of dark theme for homepage. Later on, support will be extended to all other pages.

[shurup]

@milinddethe15 oh, thanks a lot for this clarification! I guess I was confused when I saw the Case studies bug being fixed above.

We can definitely omit my second comment then, but I think it would still be good to avoid the bug on the Community page.

But anyway, LGTM already!

[milinddethe15]

@sftim Overall, the page looks good. However, in the collapsed top navbar menu view, most of the screen turns white and worst in mobile view.
Could we implement a dark theme for the navbar as well?

[sftim]

@milinddethe15 what's you're appetite for moving this forward? I would be delighted to hand this over to another contributor.

[sftim]

(in my view, this is almost the last chance saloon for this feature - if we don't staff it enough to merge before April 2025, we should close the issues as not planned)

[sftim]

Overall, looks really cool! I've noticed a tiny bug at the bottom of the Community page.

To fix it, I suggest removing static/images/community/kubernetes-community-column.png completely and changing this line in assets/scss/_custom.scss (it occurs twice in the file):

  background: url('/images/community/kubernetes-community-final.jpg'), url('/images/community/kubernetes-community-column.png');

→

  background: url('/images/community/kubernetes-community-final.jpg');
  background-color: #0c1733;

I think that's unrelated, and also the double background is likely intended.

[milinddethe15]

@sftim What is the plan, if any, to extend dark mode to other pages? Upgrading docsy?

[sftim]

What is the plan, if any, to extend dark mode to other pages? Upgrading docsy?

#25061 is our written record of planning - it's quite sparse. There isn't a secret document with more details than this.