feat(theme): a11y and dark and light theme changes

[rajramo61]

This pr covers the issue #25061

Description

This pull request introduces a comprehensive theme toggle system for the website, allowing users to switch between light and dark modes with persistence, accessibility, and internationalization support. The implementation includes a new JavaScript theme toggle handler, a toggle button in the navigation bar, updated SCSS for theme variables and consistent styling, and translation strings for multiple languages.

The most important changes are:

Theme Toggle Functionality:

• Added a new theme-toggle.js script that manages theme switching, system preference detection, localStorage persistence, updates to UI (including Mermaid diagrams), and exposes a public API for theme control.
• Injected an early theme initialization script in head.html to prevent flashes of the wrong theme before the page renders.
• Added a reusable, accessible theme toggle button as a partial (theme-toggle.html) and included it in the navigation bar. The button updates its icon and ARIA labels based on the current theme and is internationalized. [1] [2]

Styling and Theme Variables:

• Refactored SCSS to use CSS custom properties for theme colors and UI elements, ensuring consistent theming across the site. This includes updates for the homepage, feature sections, search bars, and input fields. [1] [2]
• Updated the main SCSS import order to include the new theme variables and toggle styles early in the build process.

Internationalization:

• Added new translation strings for the theme toggle button ("Switch to dark mode"/"Switch to light mode") in English, German, Spanish, French, Japanese, Korean, and Chinese. [1] [2] [3] [4] [5] [6] [7]

Build Integration:

• Ensured the theme-toggle.js script is included in the main JavaScript bundle by updating the scripts partial.

Issue

Closes: #25061

[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 assign divya-mohan0209 for approval. For more information see the Code Review Process.

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

Details

Needs approval from an approver in each of these files:

• OWNERS

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

[k8s-ci-robot]

Welcome @rajramo61!

It looks like this is your first PR to kubernetes/website 🎉. Please refer to our pull request process documentation to help your PR have a smooth ride to approval.

You will be prompted by a bot to use commands during the review process. Do not be afraid to follow the prompts! It is okay to experiment. Here is the bot commands documentation.

You can also check if kubernetes/website has its own contribution guidelines.

You may want to refer to our testing guide if you run into trouble with your tests not passing.

If you are having difficulty getting your pull request seen, please follow the recommended escalation practices. Also, for tips and tricks in the contribution process you may want to read the Kubernetes contributor cheat sheet. We want to make sure your contribution gets all the attention it needs!

Thank you, and welcome to Kubernetes. 😃

[netlify]

✅ Pull request preview available for checking

Built without sensitive environment variables

Name	Link
🔨 Latest commit	b5ea622
🔍 Latest deploy log	https://app.netlify.com/projects/kubernetes-io-main-staging/deploys/697d86bdbf97c400084c44a0
😎 Deploy Preview	https://deploy-preview-54238--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 project configuration.

[netlify]

✅ Pull request preview available for checking

Built without sensitive environment variables

Name	Link
🔨 Latest commit	cf04084
🔍 Latest deploy log	https://app.netlify.com/projects/kubernetes-io-main-staging/deploys/697d87eabf97c400084c452d
😎 Deploy Preview	https://deploy-preview-54238--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 project configuration.