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

[sftim]

This is a Feature Request

What would you like to be added A cut down form of https://github.com/kubernetes/website/issues/25061 Allow (auto)switching front page between light mode and dark mode

Why is this needed Change https://kubernetes.io/ (and only that page) to support detecting the viewer's preference for either light mode or dark mode, and then honoring it.

This should use a similar technique to https://opensource.com/article/21/10/dark-themes-websites and must also play well with our custom Docsy theme.

For images, we might need a custom shortcode that renders to something like:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="/images/blocks-dark.svg">
  <source media="(prefers-color-scheme: light)" srcset="/images/blocks-light.svg">
 <img src="/images/blocks.svg" alt="">
</picture>

Implementing that shortcode or layout would be part of the work for this issue.

Comments This is a minimum-viable-product approach. It's much easier to make the change work for just one page, and then iterate.

Future work might also allow a mechanism to let the user specify a preference for dark or light mode that is different from what their user agent (web browser) is asserting.

After covering https://kubernetes.io/ we could look at whether there are other pages on the site where we're happy to widen the automatic switching to. For example, https://kubernetes.io/community/

Alternatively, we might work on https://kubernetes.dev/ (full site) and then come back to https://kubernetes.io/ once we've learned how to get a site working with 2 color schemes.

/area web-development /kind feature

[sachinparihar]

/assign I'd like to work on this.

[Ritikaa96]

Hi @sftim is anyone working on this feature? if not then I'd like to try adding this feature.

[sachinparihar]

Hi @sftim is anyone working on this feature? if not then I'd like to try adding this feature.

I'm not working on it right now! if you want to work on it you can.

[tamilselvan1102]

/assign

[tamilselvan1102]

@sftim suggest me where to place the toggle button.

[sftim]

~How about putting the button above "Edit this page"?~

This issue is about changing https://kubernetes.io/ (and only that page) so for now let's skip adding an override button, and rely on detecting the user's preference.

[sftim]

/triage accepted /priority backlog

[Ritikaa96]

For now i'd like to /assign it to myself and wait for a go ahead to work on it.

[Ritikaa96]

/assign

[sftim]

For now i'd like to /assign it to myself and wait for a go ahead to work on it.

You (and all other contributors) don't need anyone's permission to start work. Anyone's welcome to work on this issue, or indeed any k/website issue. If someone has already made a start, it's polite to try to sync up and collaborate with them.

[Ritikaa96]

Thanks @sftim ,

so for now let's skip adding an override button, and rely on detecting the user's preference.

i am slightly confused by the statement. So as much I understood we are to add this feature to the one page for now and no override button. Am i getting this right? where do you suggest we put the changing action for view modes?

[sftim]

This is a limited scope issue to get familiar with using CSS to restyle the page, and to work out what we'll do with the images / icons.

where do you suggest we put the changing action for view modes?

Someone who wants to try this out will have to set their browser to dark mode or light mode explicitly (or wait until dawn / sunset).

[sftim]

https://www.pcmag.com/how-to/how-to-enable-dark-mode-on-your-browser explains how to set dark mode

[Ritikaa96]

Someone who wants to try this out will have to set their browser to dark mode or light mode explicitly (or wait until dawn / sunset).

Thanks @sftim , My first thought was that we want to add a button to help users choose which mode they prefer on the page.

This is a limited scope issue to get familiar with using CSS to restyle the page, and to work out what we'll do with the images / icons.

I might have seen a reference to go through with this. will let you know if it work out right..

[Ritikaa96]

Hi @sftim I have written a shortcode for the it will look like this

{{< picture "light.svg" "dark.svg" "alt_text" >}}

where we mention the images to be used in the preferred mode.

are we looking for a similar solution?

[sftim]

I have written a shortcode for the it will look like this

{{< picture "light.svg" "dark.svg" "alt_text" >}}

where we mention the images to be used in the preferred mode.

I might call it {{< picture-light-and-dark "light.svg" "dark.svg" "alt_text" >}} so that people remember which order. We could also make our own custom extension to https://gohugo.io/content-management/shortcodes/#figure

[sftim]

It'd be great to see a preview of the effect, even if it's only a draft.

[Ritikaa96]

Sure let me confirm first , we are to add this change in : https://github.com/kubernetes/website/blob/main/content/en/_index.html Right?

[sftim]

https://github.com/kubernetes/website/blob/main/content/en/_index.html is one of the places we might need to change

I think the CSS (and its SCSS source code) is more important though.

[Ritikaa96]

https://github.com/kubernetes/website/blob/main/content/en/_index.html is one of the places we might need to change

I think the CSS (and its SCSS source code) is more important.

Right. I have made some shortcode-related , also CSS related changes. but I might need some confirmation on these changes. It's better if i confirm them here first.

[sftim]

Please open a pull request to show the changes you're proposing. That's definitely the best way to collaborate here.

[Ritikaa96]

Hi @sftim , I'll make a PR and update here then.

[coder12git]

/assign

I am taking this, as i know how to implement this. I'll create a PR soon 🫡

[sftim]

@coder12git how's this work going?

[coder12git]

Change https://kubernetes.io/ (and only that page) to support detecting the viewer's preference for either light mode or dark mode, and then honoring it. This should use a similar technique to https://opensource.com/article/21/10/dark-themes-websites and must also play well with our custom Docsy theme.

@sftim As mentioned here just to do this for only one page, but if i follow the other point, then when i am doing changes it's happening to all other pages, i.e not able to implement this only for one page.

[tamilselvan1102]

@coder12git The layout is same for all the pages. so if you add dark mode toggle button in header (Documentation,Kubernetes Blog,Training, ...) it will reflect all the pages. But if we add small logic in javascript, it is possible.

[tamilselvan1102]

let me do the try /assign

[sftim]

The layout is same for all the pages. so if you add dark mode toggle button in header (Documentation,Kubernetes Blog,Training, ...) it will reflect all the pages. But if we add small logic in javascript, it is possible.

I recommend using CSS. CSS is awesome :wink:

See https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ for details, including approaches that don't require any JavaScript.

[sftim]

not able to implement this only for one page.

In CSS, we can use selectors to scope down our code to only apply to body.td-home.cid-home …; that should allow style changes to just the front page.

[tamilselvan1102]

i will use awesome icons

[sftim]

We discussed #45535 in today's SIG meeting.

[dipesh-rawat]

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

xref https://github.com/kubernetes/website/issues/25061#issuecomment-2272352631

Just cross-posting here for reference. The current progress on this issue is positive and looks great.

[Ant0wan]

Hi fellows, Just for the curiosity - is there any ETA for this theme that will save my eyes ? :-) Thanks for having done it ! See ya around at some kube conf'

[sftim]

ETA

No ETA I'm afraid. Most of the work on this website is done by volunteers.

[franciscojavierarceo]

Did @coder12git take this on?

[sftim]

Did @coder12git take this on?

The PR we have (which is ready for review) is by @tamilselvan1102