Home page enable dark mode #45535

tamilselvan1102 · 2024-03-13T12:25:19Z

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

ℹ️ Superseded - see #49586

netlify · 2024-03-13T12:28:15Z

✅ Pull request preview available for checking

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`a12c1cc`
🔍 Latest deploy log	https://app.netlify.com/sites/kubernetes-io-main-staging/deploys/66d6ead57ebe9d0008a79e13
😎 Deploy Preview	https://deploy-preview-45535--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.

tamilselvan1102 · 2024-03-13T12:30:45Z

page preview : https://deploy-preview-45535--kubernetes-io-main-staging.netlify.app/

tamilselvan1102 · 2024-03-13T12:33:58Z

I confirmed the view by enabling dark mode in Microsoft windows 10 Pro.

tamilselvan1102 · 2024-03-13T12:35:38Z

/assign @sftim
Please review the changes

sftim

Thanks. This is pretty close.

I don't think we should merge this as-is, because one of the case studies' logos almost disappears. There's a similar problem with the CNCF logo and the Babylon logo (which is missing some transparency. This PR should fix those issues as part of the required changes, without breaking other pages or breaking the light mode view.

If you'd like to also switch the colors for the top navigation bar (when no banner is showing), I think that would help - but I don't think we should insist on it.

Finally, please add a comment to the top of assets/scss/_base.scss and assets/scss/_custom.scss so that people know about the partial dark mode support.

sftim · 2024-03-13T13:04:51Z

/area web-development

sftim · 2024-03-13T13:11:07Z

@tamilselvan1102, which of these are you comfortable picking up?

making the white areas of the Babylon logo be transparent
finding a way to switch which CNCF logo gets used on the front page depending if it is dark or light mode
handling the poor contrast for the case study logo that uses black text

The work here is a prototype for a wider piece of work, so if there are problems we'll eventually want to fix, it's best to plan fixes rather than find a one-off work around.

tamilselvan1102 · 2024-03-14T07:14:40Z

@sftim
if we do invert the image color, it gives good visibility .

filter: invert(100%);
-webkit-filter: invert(100%);

tamilselvan1102 · 2024-03-14T09:10:47Z

Regarding CNCF logo. can in use attached image when switching in to dark mode.

Output

tamilselvan1102 · 2024-03-14T10:09:46Z

@sftim
Resolved all the above concerns. please confirm

dipesh-rawat · 2024-03-18T02:01:02Z

assets/scss/_base.scss

+  .cid-home main section:is(#talkToUs) img {
+    filter: invert(100%);
+    -webkit-filter: invert(100%);
+  }
+
+  .cid-home main section:is(#cncf) {
+    background-color: $dark-bg-color-2;
+    background-image: url(/images/cncf-white.png);


Inverting image colors or adjusting background image according to prefers-color-scheme: dark is nice addition for the homepage. However, extending this functionality to the entire docs and all its different images would be a challenge. It would be nice if this could be achieved through a Hugo shortcode, dynamically altering image source based on prefers-color-scheme: dark or light. I notice the issue description(here) also hints at employing shortcode for image switching, which aligns well with this suggestion.

For guidance on shortcode, refer to the tips provided at https://gohugo.io/templates/shortcode-templates/

tamilselvan1102 · 2024-03-18T04:35:00Z

Thank you @dipesh-rawat
I will try to implement through Hugo shortcode,

sftim · 2024-03-18T09:30:41Z

For some tips, check out https://cassidyjames.com/blog/prefers-color-scheme-svg-light-dark/

Because the main page is HTML, if we want to skip a shortcode and write HTML directly, I am also fine with that too.
One way folks do this in HTML is something like:

<picture id="icon-briefcase">
  <source srcset="briefcase-dark.svg" media="(prefers-color-scheme: dark)">
  <img src="briefcase-light.svg">
</picture>

You can / we can use a similar technique inside partials (see layouts/partials).

sftim · 2024-04-14T21:50:24Z

@tamilselvan1102, how are you doing on this? Remember that this is a prototype to show how we'll do the rest of the site; it's less important to find shortcuts that make one page look right, than it is to explore the kind of changes we'll need so we don't have to take shortcuts.

However, you don't have to consider the whole site. The ask is to do just that one page, but to do it without those shortcuts.

tamilselvan1102 · 2024-04-15T11:18:28Z

@sftim
sorry the delay. i will raise it soon

tamilselvan1102 · 2024-04-19T12:07:26Z

@dipesh-rawat
I was tried with Hugo shortcode, but some build error has came in my environment. so I tried the way as @sftim suggested.

@sftim
Done the suggested changes

sftim · 2024-04-19T12:39:26Z

(Please) don't switch colors for vendors' logos. We wouldn't be allowed to do that.

tamilselvan1102 · 2024-04-22T05:15:51Z

(Please) don't switch colors for vendors' logos. We wouldn't be allowed to do that.

if not invert the color of vender logos, it is not visible well in the dark mode.
Please suggest me about vender's logo

tamilselvan1102 · 2024-04-22T05:21:33Z

@sftim
If possible please share me the vender's logos for dark mode

sftim · 2024-04-22T08:10:29Z

If possible please share me the vender's logos for dark mode

This is work for a contributor working on this issue; you could look for those yourself @tamilselvan1102.

Andygol · 2024-08-28T07:15:33Z

For some reason, I use the Dark Mode extension in Safari and as you can see, creating a dark theme is not a trivial task, the desired effect is not always achieved automatically. In my opinion, using solid black for the background is not a good idea, there should be some dark shade of grey. It would be great to develop a custom dark theme for the documentation site. We need to engage experienced UI designers to develop a dark theme.

sftim · 2024-08-28T09:47:12Z

@tamilselvan1102 we've a very limited pool of volunteers willing to help with UI design, but I do think that feedback about the solid black is relevant.

Could you use a very dark gray instead for the page body?

sftim · 2024-08-28T09:47:14Z

If you'd like someone to take over this work and build on what you've done, that's an option too. You've put in a huge amount of work already; what's at tension here is:

we don't want to make the user experience worse for people visiting the site
in the long term, we want to make the UX better

tamilselvan1102 · 2024-09-03T11:04:21Z

@sftim, @Andygol
Updated background colors.
if you have any suggestion about colors please share me the color codes.
I am happy to update it.

sftim · 2024-09-03T14:28:55Z

In either light or dark mode, I can't see an AppDirect logo on https://deploy-preview-45535--kubernetes-io-main-staging.netlify.app/case-studies/

I see a similar problem with NetEase.

Otherwise, I think this is looking good.

111andre111 · 2024-09-04T10:03:59Z

My problem looking to the page is as well that the main page looks good regarding dark.
But already when scrolling down, at the top part it's bright.

And when going to Documentation link, the dark mode is completely gone...

tamilselvan1102 · 2024-09-04T10:46:12Z

In either light or dark mode, I can't see an AppDirect logo on https://deploy-preview-45535--kubernetes-io-main-staging.netlify.app/case-studies/

I see a similar problem with NetEase.

Otherwise, I think this is looking good.

@sftim
Dark mode is enabled only in Main page
not in other pages.

tamilselvan1102 · 2024-09-04T10:49:09Z

@111andre111
This PR is only for Main page not other pages

111andre111 · 2024-09-04T10:55:48Z

Oh, sorry. Missed that fact. However the scrolling down issue would not count into that as well that I described in the first part of my comment?

sftim · 2024-09-04T11:09:05Z

However the scrolling down issue would not count into that as well that I described in the first part of my comment?

Please clarify the problem @111andre111 (why should we consider that behavior defective)?

111andre111 · 2024-09-04T11:23:55Z

Sure, I can repeat it again.

I go to the Deploy Preview page https://deploy-preview-45535--kubernetes-io-main-staging.netlify.app/
All looks good so far.

3. I scroll a little down - the top page part shows up now in bright mode.

sftim · 2024-09-04T11:40:56Z

Thanks for the screenshots @111andre111. But, why is this behavior unwanted / something that means we can't merge this initial PR?

111andre111 · 2024-09-04T13:31:19Z

I just tried to understand if this is the intended behaviour that this PR should aim for. If so then looks good to me.

sftim · 2024-09-04T13:33:17Z

This PR wants to be an MVP, so the menu bar lightening on scroll is fine (by me).

Pending feedback though: #45535 (comment)

sftim · 2024-09-04T13:33:54Z

@tamilselvan1102 if you write a PR description, that will make it easier for people to review constructively.

k8s-ci-robot · 2024-10-13T02:26:30Z

PR needs rebase.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

111andre111 · 2024-10-13T20:51:27Z

#45535 (comment)
What I meant is that the top stripe shows nonetheless as bright. But it could be a misunderstanding from my side that this is as well not part of the PR.

divya-mohan0209 · 2024-10-31T11:11:34Z

@tamilselvan1102 : Please could you rebase since there appears to be a merge conflict?

sftim · 2024-11-02T18:35:24Z

I sense contributor fatigue, or at least the possibility of fatigue.

If we can pick up the work @tamilselvan1102 has done, move it forward, and get it merged, I think that will help a lot.

sftim · 2024-12-21T18:15:08Z

Sorry about the wait on this one @tamilselvan1102

varodrig · 2025-01-19T04:40:23Z

@milinddethe15 to follow up on this.

sftim · 2025-01-28T20:58:53Z

/close

(in favor of PR #49586)

k8s-ci-robot · 2025-01-28T20:58:59Z

@sftim: Closed this PR.

In response to this:

/close

(in favor of PR #45535)

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

Home page enable dark mode

285cb61

k8s-ci-robot added cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/M Denotes a PR that changes 30-99 lines, ignoring generated files. sig/docs Categorizes an issue or PR as relevant to SIG Docs. labels Mar 13, 2024

k8s-ci-robot requested review from dipesh-rawat and nate-double-u March 13, 2024 12:25

k8s-ci-robot assigned sftim Mar 13, 2024

sftim reviewed Mar 13, 2024

View reviewed changes

k8s-ci-robot added the area/web-development Issues or PRs related to the kubernetes.io's infrastructure, design, or build processes label Mar 13, 2024

dark mode added cncf-white image

ce6cadb

dipesh-rawat reviewed Mar 18, 2024

View reviewed changes

cncf section moved to partials

20ec78c

k8s-ci-robot removed the lgtm "Looks good to me", indicates that a PR is ready to be merged. label Aug 5, 2024

sftim mentioned this pull request Aug 6, 2024

Allow (auto)switching front page between light mode and dark mode #37444

Open

Background color updated

a12c1cc

k8s-ci-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Oct 13, 2024

sftim mentioned this pull request Nov 22, 2024

docs: add dark-mode capability kubernetes-sigs/gateway-api#2896

Open

sftim mentioned this pull request Jan 28, 2025

Home page enable dark mode #49586

Open

k8s-ci-robot closed this Jan 28, 2025

Home page enable dark mode #45535

Home page enable dark mode #45535

Conversation

tamilselvan1102 commented Mar 13, 2024 • edited by sftim Loading

netlify bot commented Mar 13, 2024 • edited Loading

✅ Pull request preview available for checking

tamilselvan1102 commented Mar 13, 2024

tamilselvan1102 commented Mar 13, 2024

tamilselvan1102 commented Mar 13, 2024

sftim left a comment

Choose a reason for hiding this comment

sftim commented Mar 13, 2024

sftim commented Mar 13, 2024

tamilselvan1102 commented Mar 14, 2024 • edited Loading

tamilselvan1102 commented Mar 14, 2024

Output

tamilselvan1102 commented Mar 14, 2024

dipesh-rawat Mar 18, 2024

Choose a reason for hiding this comment

tamilselvan1102 commented Mar 18, 2024

sftim commented Mar 18, 2024

sftim commented Apr 14, 2024

tamilselvan1102 commented Apr 15, 2024

tamilselvan1102 commented Apr 19, 2024

sftim commented Apr 19, 2024

tamilselvan1102 commented Apr 22, 2024

tamilselvan1102 commented Apr 22, 2024

sftim commented Apr 22, 2024

Andygol commented Aug 28, 2024

sftim commented Aug 28, 2024

sftim commented Aug 28, 2024

tamilselvan1102 commented Sep 3, 2024

sftim commented Sep 3, 2024 • edited Loading

111andre111 commented Sep 4, 2024

tamilselvan1102 commented Sep 4, 2024 • edited Loading

tamilselvan1102 commented Sep 4, 2024

111andre111 commented Sep 4, 2024

sftim commented Sep 4, 2024 • edited Loading

111andre111 commented Sep 4, 2024

sftim commented Sep 4, 2024

111andre111 commented Sep 4, 2024

sftim commented Sep 4, 2024

sftim commented Sep 4, 2024

k8s-ci-robot commented Oct 13, 2024

111andre111 commented Oct 13, 2024

divya-mohan0209 commented Oct 31, 2024

sftim commented Nov 2, 2024

sftim commented Dec 21, 2024

varodrig commented Jan 19, 2025

sftim commented Jan 28, 2025 • edited Loading

k8s-ci-robot commented Jan 28, 2025

tamilselvan1102 commented Mar 13, 2024 •

edited by sftim

Loading

netlify bot commented Mar 13, 2024 •

edited

Loading

tamilselvan1102 commented Mar 14, 2024 •

edited

Loading

sftim commented Sep 3, 2024 •

edited

Loading

tamilselvan1102 commented Sep 4, 2024 •

edited

Loading

sftim commented Sep 4, 2024 •

edited

Loading

sftim commented Jan 28, 2025 •

edited

Loading