acstll
commented
3 years ago Hello @christopherGdynia, nice to hear from you.
I would say the easiest way to accomplish this would be using a CSS class in the body (or the "root" element of your app).
Your dark mode theme would live in a CSS file that you load in your app entry file (like main.js), or in the "global" API of any CSS-in-JS solution, like createGlobalStyle from styled-components.
It's important that you load your theme after you load the Scale library's CSS file.
The structure of the theme would be something like:
- design token overwrites (where you change values that will affect all components)
- component-scoped CSS variables overwrites (where you change design values on a per-component basis)
- if needed, custom CSS using
::part(where you change a component's CSS directly)
Here's a very brief example taken from the Customization and Themes section in Storybook, just to give you an idea of how it would look:
/* your theme.css file */
/* maybe some global styles? */
body {
background-color: #333;
}
/* (1) overwrite design tokens */
.theme-dark {
--scl-color-primary: limegreen;
--scl-color-primary-hover: seagreen;
--scl-color-primary-active: green;
}
/* (2) overwrite component (scoped) tokens */
.theme-dark scale-button {
--background-secondary: gold;
--color-secondary: white;
}
/* (3) add some custom CSS */
.theme-dark scale-button[variant="secondary"]::part(base) {
background: transparent;
border: 2px solid currentColor;
}You can activate the theme by using the .theme-dark class:
<body class="theme-dark">These are the color design tokens I would overwrite and hopefully should get you pretty far. I wouldn't do --scl-color-black: white!
:root {
--scl-color-text-standard: hsl(0, 0%, 9.8%);
--scl-color-text-additional: hsl(0, 0%, 40%);
--scl-color-text-link: hsl(227.39999999999998, 89%, 46.3%);
--scl-color-text-link-hover: hsl(236.5, 100%, 37.5%);
--scl-color-text-link-active: hsl(220, 100%, 56.5%);
--scl-color-text-link-visited: hsl(227.39999999999998, 89%, 46.3%);
--scl-color-text-info: hsl(227.39999999999998, 89%, 46.3%);
--scl-color-text-disabled: hsl(0, 0%, 49.8%);
--scl-color-text-success: hsl(136.3, 65.7%, 27.5%);
--scl-color-text-error: hsl(349.70000000000005, 69%, 50.6%);
--scl-color-background-standard: hsl(0, 0%, 100%);
--scl-color-background-light: hsl(0, 0%, 94.9%);
--scl-color-background-darker: hsl(0, 0%, 80%);
--scl-color-background-overlay: hsla(0, 0%, 42.4%, 0.7);
--scl-color-background-disabled: hsl(0, 0%, 80%);
--scl-color-background-success: hsl(136.3, 65.7%, 27.5%);
--scl-color-background-error: hsl(351.20000000000005, 82.6%, 59.4%);
}You can find the full list in the scale-components.css file (or here in the docs).
I'm guessing you will find some inconsistencies (where some component is not reacting to a design token change), please let us know.
I hope this helps. I'm looking forward to more feedback.
christopherGdynia
mato-a
gaurishkamat
Hello there,
I want to implement a dark mode later to my application, but I am not sure how to implement it. BTW, I am using React, if it helps you to answer me.
I am thinking about setting some css Variables and overriding them on dark mode.
Can you give me some advice or examples?