kubernetes
Home page enable dark mode
Pull request preview available for checking
Built without sensitive environment variables
| Name | Link |
|---|---|
| Latest commit | a12c1cc3c570cb4a8416afe1314e0bd37f05368b |
| 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.
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
page preview : https://deploy-preview-45535--kubernetes-io-main-staging.netlify.app/
I confirmed the view by enabling dark mode in Microsoft windows 10 Pro.
@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.
@sftim if we do invert the image color, it gives good visibility .
filter: invert(100%);
-webkit-filter: invert(100%);
Regarding CNCF logo. can in use attached image when switching in to dark mode.
Output
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).
@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.
@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
(Please) don't switch colors for vendors' logos. We wouldn't be allowed to do that.
(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
@sftim If possible please share me the vender's logos for dark mode
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.
@sftim I rollbacked the image invert code for [Case Studies] section. As the investigation, the [Case Studies] section displaying only first 4 items but it has many items too . so it is difficult get dark mode image for all.
Below short-code can be modified, if only got dark mode images for all case studies items which is there in [website\content\en\case-studies]
Here's the tasks that seem to be left:
- making the white areas of the existing Babylon logo be transparent (or, finding a replacement vector logo)
- finding dark-background logos for case study organizations, where neeeded
- using the updated case study logos
Here's the tasks that seem to be left:
- making the white areas of the existing Babylon logo be transparent (or, finding a replacement vector logo)
- finding dark-background logos for case study organizations, where neeeded
- using the updated case study logos
Babylon logo has been replaced.
Finding official, corporate logo images that work in dark mode for our main page is important too,
In the Kubernetes Slack workspace @tamilselvan1102, you could ask for help about what to do. There will be more than one option.
@tamilselvan1102, this PR wouldn't be ready to merge as-is.
The work needed is to:
- ensure the case studies all have icons that work OK in a light background or a dark background
- define and start using a mechanism to select the right icon based on the light/dark preference
- test that the site front page looks OK after those changes, across all localizations
@sftim Sorry for the delay. i am working on it. Soon will confirm the dark mode icons
@sftim Only the below case studies items has been enabled in code itself. In these only [Booz Allen Hamilton] icon have the issue. can i work only on that icon.
Only the below case studies items has been enabled in code itself. In these only [Booz Allen Hamilton] icon have the issue. can i work only on that icon.
In my opinion, we should cover all of the icons. This issue is scoped down already from “dark mode support for the whole site”.
If we were ever to drop a case study (or a set of them), the dark mode support should still work and look right.
By the investigation, found that following corp icons has an issue in the dark mode.
i will collect the icons and update the PR.
| 1 | adidas |
|---|---|
| 2 | blackrock |
| 3 | booz-allen |
| 4 | bose |
| 5 | city-of-montreal |
| 6 | haufegroup |
| 7 | netease |
| 8 | newyorktimes |
| 9 | nordstrom |
| 10 | openAI |
| 11 | slamtec |
| 12 | sos |
| 13 | squarespace |
| 14 | thredup |
| 15 | vsco |
| 16 | woorank |
| 17 | zalando |
@sftim I collected all the brand icons and some of the icons are not visible on light mode but are visible in dark mode and vice versa because of the brand icon color is either white or black. example : Adidas .
In that case we needs to rewrite the conditional logic for light and dark mode like this blog and more over we need to create dark and light image for all the [Case Studies] brands
Required your suggestion to continue.