fix(theme): improve dark mode visibility for icons and logos#509
fix(theme): improve dark mode visibility for icons and logos#509hemantch01 wants to merge 1 commit into
Conversation
Signed-off-by: hemantch01 <hemantchaudhary905@gmail.com>
volcano-sh-bot
added
the
kind/design
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
volcano-sh-bot
added
the
size/S
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the custom CSS to customize background sizes for header links and introduces dark mode styling for the GitHub/X links and the navbar logo. The review comments suggest simplifying a redundant CSS filter and utilizing Docusaurus's native srcDark configuration for the dark mode logo instead of relying on sub-optimal CSS filters.
|
|
||
| [data-theme="dark"] .header-github-link, | ||
| [data-theme="dark"] .header-x-link { | ||
| filter: invert(1) brightness(100%); |
There was a problem hiding this comment.
The brightness(100%) filter is redundant because 100% is the default brightness value. You can simplify this filter to just invert(1).
| filter: invert(1) brightness(100%); | |
| filter: invert(1); |
| [data-theme="dark"] .navbar__logo { | ||
|
|
||
| filter: invert(1) hue-rotate(180deg) brightness(1.1); | ||
| } |
There was a problem hiding this comment.
Using CSS filters like invert() and hue-rotate() to style the dark mode logo is a sub-optimal practice that can lead to color distortion, rendering artifacts, and poor performance. Docusaurus provides native support for dark mode logos via the srcDark property in docusaurus.config.js. It is highly recommended to use a dedicated dark-themed logo asset instead of applying CSS filters. To implement this, add the srcDark property to the logo configuration in docusaurus.config.js (e.g., srcDark: "img/landing/volcano_logo_dark.png") and remove this CSS filter block entirely.
|
/lgtm from my side |
3 participants
What kind of change does this PR introduce?
/kind bug
/kind design
What this PR does / why we need it:
this PR fixes visibility issues for icons and logos when docs-website toggled into dark mode. previously, the dark icons blended into the dark background, making them difficult to see.
Which issue(s) this PR fixes:
[Bug]: Logos Not Visible in Dark Mode #506
old