Improve dark mode readability for Kubernetes Basics diagrams

[divyanshuprakas-h]

Description

This PR fixes the dark mode readability issue in the “Learn Kubernetes Basics” tutorial.

Some SVG diagrams used dark text on a transparent background. In dark mode, the page background becomes dark, so the diagram text becomes difficult to read.

This PR updates the affected SVG diagrams directly by adding a stable white background inside the SVGs. This keeps the diagram text readable in both light mode and dark mode without changing the site-wide dark mode CSS.

Pages checked

I verified the affected tutorial pages locally in dark mode:

• create-cluster
• deploy-app
• explore
• scale
• update

Testing

Tested locally with the Kubernetes website preview in dark mode.

Related issue

Fixes #56026

[netlify]

✅ Pull request preview available for checking

Built without sensitive environment variables

Name	Link
🔨 Latest commit	212b9ae
🔍 Latest deploy log	https://app.netlify.com/projects/kubernetes-io-main-staging/deploys/6a23b5bdd8958e0008b8eed2
😎 Deploy Preview	https://deploy-preview-56037--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.

[Caesarsage]

Hello @divyanshuprakas-h

Thank you for fixing this. Can you provide preview link to the page so it's easier for reviewers to checkout quickly

[Caesarsage]

/lgtm

Previewing the pages.

https://deploy-preview-56037--kubernetes-io-main-staging.netlify.app/docs/tutorials/kubernetes-basics/create-cluster/cluster-intro/

[k8s-ci-robot]

LGTM label has been added.

Details

Git tree hash: 0580db41a2e89c0a2ca16835d877328f87eef6c8

[divyanshuprakas-h]

Hi @Caesarsage, sure. Thanks for checking.

Here are the deploy preview links for the affected tutorial pages:

• Create cluster:
  https://deploy-preview-56037--kubernetes-io-main-staging.netlify.app/docs/tutorials/kubernetes-basics/create-cluster/cluster-intro/

• Deploy app:
  https://deploy-preview-56037--kubernetes-io-main-staging.netlify.app/docs/tutorials/kubernetes-basics/deploy-app/deploy-intro/

• Explore:
  https://deploy-preview-56037--kubernetes-io-main-staging.netlify.app/docs/tutorials/kubernetes-basics/explore/explore-intro/

• Scale:
  https://deploy-preview-56037--kubernetes-io-main-staging.netlify.app/docs/tutorials/kubernetes-basics/scale/scale-intro/

• Update:
  https://deploy-preview-56037--kubernetes-io-main-staging.netlify.app/docs/tutorials/kubernetes-basics/update/update-intro/

I verified these pages in dark mode locally, and the diagrams are now readable against the dark background.

Please let me know if anything needed to be improved..
Thanks...

[lmktfy]

Thanks

Making this change makes the site easier to access.

---

Perhaps one day we can get these diagrams redrawn; they are dated and it would be great to have them automatically adapt to light / dark mode. Right now, this simple change is an obvious improvement for people who set their browser to prefer a dark web page appearance.

/approve

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: lmktfy

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

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• content/en/docs/OWNERS [lmktfy]

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

[divyanshuprakas-h]

Thanks i will continue contributing..