-
Notifications
You must be signed in to change notification settings - Fork 54
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dark mode #2223
Merged
Merged
Dark mode #2223
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
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
julien-deramond
added
the
color mode
Temporary label to highlight color mode issues
label
Sep 11, 2023
Merged
This was referenced Sep 23, 2023
2 tasks
This was referenced Sep 26, 2023
Merged
julien-deramond
force-pushed
the
main-jd-dark-mode
branch
2 times, most recently
from
October 26, 2023 12:23
bbf1afd
to
fc169fa
Compare
julien-deramond
force-pushed
the
main-jd-dark-mode
branch
from
October 31, 2023 05:19
df0ac35
to
22bf6d9
Compare
julien-deramond
force-pushed
the
main-jd-dark-mode
branch
7 times, most recently
from
November 10, 2023 05:44
af61298
to
85428a8
Compare
julien-deramond
force-pushed
the
main-jd-dark-mode
branch
2 times, most recently
from
November 15, 2023 06:20
449b31f
to
8d5980c
Compare
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
…tilities usage before dark mode (#2414)
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
…m examples (#2427) Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>
Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>
julien-deramond
force-pushed
the
main-jd-dark-mode
branch
from
January 2, 2024 06:57
7281b26
to
8d31874
Compare
Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>
louismaximepiton
approved these changes
Jan 2, 2024
boosted-bot
added
ready for design review
ready for a11y review
and removed
upcoming design review
upcoming a11y review
labels
Jan 2, 2024
julien-deramond
added
passed design review
and removed
ready for a11y review
ready for design review
labels
Jan 2, 2024
This was referenced Jan 2, 2024
Closed
3 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Labels
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.
Description
Grab a cup of coffee or tea, and take your time.
This PR finally introduces the dark mode in Boosted. It's a huge PR that has been developed over the course of 3 months. It's the result of a lot of prototyping, discussions, and iterations with the ODS web core team, but also with the Bootstrap team.
The entire solution relies on the
data-bs-theme
attribute that has been introduced in Bootstrap 5.3.0. It allows to switch between light and dark mode, and to switch between different themes (light, dark, etc.) in the same page.Live previews
/dark-mode
page to the documentation.Usage
The exact usage of the dark mode for Orange websites and web apps is not defined precisely yet. It's a work in progress. The goal of this PR is to provide the technical solution to implement the dark mode in Boosted and to provide a first version of the documentation to help developers to use it. Here are the remaining tasks to do to define the usage of the dark mode at Orange:
Switching from light to dark mode
The switch from light to dark mode is not defined precisely yet. It's a work in progress. The goal of this PR is to provide the technical solution to implement the dark mode in Boosted and to provide a first version of the documentation to help developers to use it. Here are the remaining tasks to do to define the switch from light to dark mode at Orange:
In the meantime, this PR provides a new "With mode selector" Orange navbar variant that relies on:
color-modes.js
JavaScript file that has been added to the documentation to allow to switch between light and dark mode manuallyThe new Navbar mode selector example page we created allows users to find a real world example of this new variant to copy and paste in their code.
Mode selector rendering
The mode selector rendering was defined with the designers. It's a dropdown with 3 options:
User preferences are stored in the local storage of the browser.
In terms of rendering, all the dropdowns in a navbar are rendered differently compared to the dropdowns in the rest of the page. Right now, there's a specific CSS code for these dropdowns in
_navbar.scss
that changes the alignments, the sizes of the SVGs when there are icons, the space between the caret and the text, etc. It's not ideal because it's not generic, but it's a topic identified to be tackled later in #2242.Dark variant vs. dark mode
The color modes can be contextual or not. It means that the color mode can be applied to the whole page or to a specific component. It's the case for the dark mode. It can be applied to the whole page or to a specific component.
That's why we decided to drop all of our components' dark variants and replace them by contextual dark mode rendering.
It's a big change but is the easiest way to implement the dark mode in Boosted for now.
It implies the following modifications:
[class*="bg-black"], [class*="-dark"]:not(.border-dark):not(.text-dark):not(.btn-dark):not(.focus-ring-dark):not(.link-underline-dark):not(.link-dark), [class*="bg-secondary"]
.{component}-dark
classes..navbar-dark
,.btn-close-white
, and.dropdown-menu-dark
$*-inverted
and${component}-dark-*
Sass variablesThere's a specific use case: the Orange navbar and footer. They are always rendered on a black background in light and dark mode. It means that they must always be used with
data-bs-theme="dark"
.This use case also implies that
_variables-dark.scss
must always be embedded in the Sass compilation.Another consequence is that the dark mode background color by default is
#141414
and the Orange navbar and footer one is black. So the inputs (for instance) in the Orange navbar and footer stay with a#141414
background color instead of black previously.Dark mode at the highest level in Boosted
$enable-dark-mode
can be set tofalse
to disable it.Color palette
A new color palette page has been created to explain the new color palette and the new color names.
A new
scss/_color-palette.scss
file has been created to define the color palette based on the one defined for Orange Design System: https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/8ba87681fad206eb88cdab3c7d7b23cf9e5e70e5/scss/_color-palette.scss. This color palette adds various Sass variables named after the color names defined in the Orange Design System (e.g.$ods-orange-200
or$ods-forest-100
). Their values are set to hex values._color-palette.scss
is imported by_variables.scss
to avoid Sass compilation breaking changes._variables.scss
and_variables-dark.scss
now use these new variables instead of the hex values directly.The Bootstrap color palette for blues, indigos, purples, etc. has been mapped to the new Orange Design System color palette for the values from
${color}-100
to${color}-600
. From${color}-700
to${color}-900
,shade-color()
from20%
to60%
of the${color}-600
value is used.Introduced
$theme-colors-dark
and$theme-colors-rgb-dark
(RGB values from$theme-colors-dark
)--bs-{color}
and--bs{color}-rgb
CSS variables values for dark modeNote that
#141414
is a new color introduced in the gray palette as$gray-950
(and$ods-gray-900
) and used for$body-bg-dark
,var(--bs-body-bg*)
corresponding to.bg-body
.Also note that some light mode colors have been revamped by the designers to provide a better contrast for accessibility: info, danger, and success.
Colors and semantics
Some CSS variables have been added in
_root.scss
to allow to switch some colors from light to dark mode. You can find the entire list of reusable CSS variables and their associated colors in our new color theme page.Core, functional and grays have different values in light and dark mode. It's not the case for the supporting colors.
New CSS variables:
--bs-tertiary-active-bg
is new--bs-disabled-color
is new--bs-form-color-disabled-filter
is new--bs-form-check-input-disabled-color
is new--bs-form-switch-square-bg
is new--bs-form-check-filter
is new--breadcrumb-divider-filter
is new--bs-form-select-disabled-indicator
is new--bs-form-select-indicator
is newNew
--bs-border-color-subtle
and$border-color-subtle
to be used instead of--bs-border-color-translucent
because our colors are never translucent. The translucent variable is kept for backward compatibility.--bs-border-color-translucent
have been changed to--bs-border-color-subtle
except when it wasn't used as a border color. In this case, it has been replaced with--bs-tertiary-color
.Then,
--bs-highlight-bg
is replaced with--secondary
,--bs-border-color
or--bs-body-color
given the context--bs-link-hover-color
is replaced with--bs-primary
for the cases where it's not used as a linkSuccess, warning, info, danger
For these 4 concepts, there's only one color used in light mode, and another in dark mode:
Warning color is an exception since it remains the same in both modes
It's not to be used to write on it (except for the buttons), users should prefer the supporting colors for that such as
.bg-supporting-green
in BoostedOrange color
By default, our primary color in Boosted is used for texts, icons, borders, and backgrounds without text in it:
Even if we will configure the corresponding foreground color to be accessible, we have to explain in the documentation that it's not to be used to display text on it. In light mode, the foreground color is black.
Whenever someone wants to write text on an orange surface, the lighter orange color must be used, and the corresponding foreground color is black. This combination doesn't change in light and dark mode.
All components such as buttons, stickers, stepped processes, etc. use this rule because there is text in it.
It also has been decided that this concept matches the concept of supporting colors in Boosted where the surface color doesn't change, and its corresponding foreground color neither.
So
.bg-supporting-orange
will be created for that matter.$brand-orange
is replaced with$supporting-orange
$accessible-orange
is replaced with$primary
Functional colors
.text-bg-*
utilities apply automatically the right corresponding foreground color. So users should use.text-bg-{color}
instead of.bg-{color}
+ forcing.text-{color}
when available for automatic contrast.Syntax highlighting (code blocks)
Syntax highlighting has been updated to match the new color palette. It's based on the Prism.js library.
Technical zoom on
data-bs-theme
data-bs-theme
can be used on the whole page or contextually on an HTML element (a<div>
but also directly on a component).These themes can be nested.
color-scheme
light was forced on:root, [data-bs-theme="light"]
to have the right rendering for light basic browser form UI elements. It's not done on Bootstrap side (see [PROTO]: handle data-bs-theme differently twbs/bootstrap#39295).color
andbackground-color
are now linked to[data-bs-theme]
attribute and automatically set. So when you create a<div data-bs-theme="dark">
the content will be automatically rendered with a dark background and a white text in Boosted.Based on this modification, this PR also sets the Sass and/or CSS variables of components handling color and/or bg color to
null
by default, orinherit
, and also sometimes sets the background to transparent.More info
We decided to make big components (components with multiple layers) to inherit the color because it seemed more logical. Some components escape this logic such as spinners. It's because it's not really the color that is redefined but the use of
currentColor
.All this is due to a technical issue we have when the theme is set directly on the component.
If the component sets
color
at the top level, it overrides thecolor
coming from thedata-bs-theme
so if it's set tonull
orinherit
, it will inherit the color above and avoiddata-bs-theme
color
. On multiple-layer components it's easier to handle since we only need to avoid declaringcolor
at the top level of this component.There's a weird behavior for titles. For example
h1
redefines the color but.h1
inherits when the data theme is placed on them directly.For basic elements, form elements and input labels, we decided to keep the behavior as-is. Most likely the theme won't be applied to "basic" elements themselves. And the users could override this behavior if they are using this edge case.
text-body
classes in dark mode page for basic elements introduced by Dark mode: basic elements #2355 to really test the impact of this PR in this context.Basic concepts
#141414
in dark mode.:hover
state is the most important state over theactive
state..bg-*
and.text-*
utilities on tables. twbs/bootstrap#38826 is merged for v5.3.3, we can be impacted. This PR properly handles.bg-transparent
on it.$focus-visible-{inner|outer}-color*
Sass variables allowing to set the 2--bs-focus-visible-{inner|outer}
CSS variables that switch values between light and dark mode (see Dark mode: handle focus visible #2279).input["file"]
window and color modes:Forms
$form-helper-color
,$form-helper-icon
, and$form-helper-bg
.btn-toggle
specific Boosted class to add in the migration guideComponents
Note: detailed descriptions can be found directly in the corresponding PR and are not necessarily copied here when it's only about Sass/CSS variables changes. They will be mentioned directly into the migration guide anyway.
.btn-secondary
becomes transparent by default -> No need of.btn-outline-secondary
, keeping it for retro-compatibility. This could be easily changed if there's too much impacts..btn-outline-light
in light mode look like a disabled button; it will never be used..btn-outline-primary
active state with the same color in dark mode; it will never be used.$headings-color
being modified frominherit
to$black
. See popovers comment to double-check everything..btn-dropdown
to use instead of.btn-secondary
in this context. Provide the before/after use case in the note..bg-transparent
on inputs))#141414
within the Orange navbar and Footer..text-bg-{color}
usage and the enhancement of the explanations of the long labels rendering. We are sticking to the current Bootstrap rules for now and will update our documentation whenever the Bootstrap PR is merged.Helpers
.text-bg-*
Utilities
A first PR tackled the changes around the orange color used within the framework: #2362.
$primary
value has changed to should be mentioned in the migration guide (impact).bg-primary|success|etc.
and.bg-supporting-*
(how to use them)Examples
Documentation
/docsref
page/versions
page_color-modes.md
should explain in detail the impact and the usage ofdata-bs-theme
(color
,background-color
, contextual, container contextual vs component contextual, the difference with dark variant, etc.)Final steps
js/tests/visual/*.html
tests$enable-dark-mode
tofalse
and check that everything is fineAfter the PR
main-jd-dark-mode
from Netlify.var(--bs-secondary-bg)
) on hover, we could have something like (rgba(var(--bs-body-color-rgb), .15)
). It could help to make components blend with their environment.data-bs-theme="inverted"
is implemented in Bootstrapdata-bs-theme="inverted"
allowing to switch between themes while being in dark/light mode. Ifdata-bs-theme="inverted"
is introduced, let's put that example back..text-bg-secondary
instead of.text-bg-dark
for toasts (see https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/2380/files#r1393855986 suggestion)data-bs-theme="body"
somehow for modals, popovers, offcanvases, etc.$component-active-color|bg
instead of things likevar(--#{$prefix}highlight-color)
andvar(--#{$prefix}highlight-bg)
. We should have this intermediate layer of semantics with the notion of active component..bg-solid
utility useful? By default, most of our components are transparent, but on some background we might want them either solid or transparent..border-tertiary
utility. Its color should be the same as.text-tertiary
and use the current color defined in--bs-border-color-translucent
..text-bg-*
would need some new variables to work correctly something like--bs-on-*
.References
Related Boosted issues
Closes #1776
Closes #2140
Closes #511
Closes #117
Closes #2243
Related Bootstrap issues
btn-subtle
button class twbs/bootstrap#38748--bs-card-color
CSS variable in Bootstrap v5.3.0 twbs/bootstrap#38852navbar-dark
twbs/bootstrap#38973.bd-example-zindex-levels
usescolor: var(--bs-body-bg)
in the documentation because of how bg and border colors are handled (and its opacity). It shows that maybe something's missing somewhere.Related Bootstrap PRs
$btn-link-focus-shadow-rgb
to allow customisation twbs/bootstrap#39119<mark>
dark mode bg color twbs/bootstrap#39141data-bs-theme="body"
twbs/bootstrap#39188.text-bg-{color}
for all badges twbs/bootstrap#39214Storybook
A new dev dependency named
@storybook/addon-themes
has been added to have a theme switcher within the Storybook interface which allows to switch betweendata-bs-theme
values manually (see #2376).