Add dark theme to website #3981
Open
+2,139
−312
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Signed-off-by: Mathew Wicks <[email protected]>
Signed-off-by: Mathew Wicks <[email protected]>
Signed-off-by: Mathew Wicks <[email protected]>
|
[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.
Needs approval from an approver in each of these files:
Approvers can indicate their approval by writing |
This was referenced Jan 31, 2025
|
@varodrig @ederign @milinddethe15 could you take a first look at this PR, that adds a dark mode? Once we are happy, we can share it around the community for wider feedback. See: preview site |
Signed-off-by: Mathew Wicks <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds a new dark-theme to the Kubeflow website.
resolves #3692
resolves #3954
How does this work?
Because we use docsy, which has its own themes in addition to bootstrap, we now render two themes into our CSS based on the
[data-theme]attribute on the root<html>element, seeassets/scss/main.scssfor more context.This approach allows us to retain our custom docsy changes while adding a nice dark theme.
What changed?
NOTE: this PR does NOT change any of the docs content. However, some images/diagrams have been updated to look better when viewed on a dark background.
Theme-specific styling
To make theme-specific styling possible, we have added the following:
show_light-only(only show element in light mode)show_dark-only(only show element in dark mode)assets/scss/dark/_variables.scssassets/scss/light/_variables.scssassets/scss/dark/_styles.scssassets/scss/light/_styles.scssNOTE: the existing
assets/scss/_styles_project.scssis still used for global styles. It is used by both themes, usually with theme-specific variables to set colors.Theme Switcher
We have added a theme switcher to the top right of the website, which allows users to switch between the light and dark themes. By default, we match the theme set on the user's OS.
Images
We have not created new images for the dark theme, as most looked OK on the dark background. In the future, we can use the
show_light-onlyandshow_dark-onlyclasses to show different images based on the theme.We have updated the following images to look better on the dark theme:
Iframes / Swagger
There were two cases where I used a color inversion filter to create a fake "dark mode":
They seem to work well enough, but we can revisit this in the future if those components get official dark mode support.
Screenshots
Home Page (preview)
Getting Started (preview)
Code Blocks (preview)