Add dark theme to website #3981
Conversation
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 |
|
@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]>
There was a problem hiding this comment.
A trick I used for Kubernetes: one logo, change the color using CSS. You have to embed the SVG into the HTML for this to work, but it does work nicely.
I used it to change the text of the kubernetes text in the logo depending on the background. Change is not merged but I can show an example if you're not sure what I'm on about.
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)