/assign
I'd like to work on this.

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

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.

/assign

@sftim
suggest me where to place the toggle button.

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.

/triage accepted
/priority backlog

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

/assign

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.

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?

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).

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

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..

Hi @sftim I have written a shortcode for the <picture.. > 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?

I have written a shortcode for the <picture.. > 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

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

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

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.

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

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

/assign

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

@coder12git how's this work going?

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.

@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.

let me do the try
/assign

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 😉

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

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.

i will use awesome icons

We discussed #45535 in today's SIG meeting.

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

xref #25061 (comment)

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

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'

ETA

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

Did @coder12git take this on?

Did @coder12git take this on?

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

See #49586 for the latest PR (reviewable)