“This is the 12th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

How to switch Topics

The current theme is identified by the my-theme attribute on the body tag

Note: by settingmy-theme 为 darkFor the overall style of your page, use some CSS variables to adjust the color to dark.

/ / set to diablo theme document. Body. SetAttribute (' my - the theme ', 'dark') / / restore bright color theme document. The body. The removeAttribute (' my - the theme ');Copy the code

Adjust the overall background and font

body {
  background-color: var(--color-bg-1);
  color: var(--color-text-1);
}
Copy the code

The principle of

A dark themed component library built using CSS variables. The component has two built-in color panels, one for the default light colors and one for the dark color panels based on the light color panels.

If you are interested in swatches, you can see here: ArcoDesign swatches.

Less variables and CSS variables coexist within the project, and built-in color algorithms for bright and dark colors, which can be more flexible to change the color palette.

For example, if you want to change the main color, you just need to change the value of the @themeblue-6 variable. The algorithm will automatically generate colors from 1 to 10 for you, and colors from 1 to 10 inverted under dark colors. Whatever you want, you’re in control.

variable

Using the variables provided below, adjust the background and text on the page to the appropriate color, in conjunction with the dark theme of the component library itself, to achieve a perfect dark look.

background

The text

One line of code to implement dark mode

filter: invert(1) hue-rotate(180deg);
Copy the code

It will be found that the picture above also has some problems. Let’s restore the picture and a tag and add the animation to switch to dark

@media (prefers-color-scheme: dark) {
  html {
    filter: invert(1) hue-rotate(180deg);
  }
  html img {
      filter: invert(1) hue-rotate(180deg);
  }
  a {
      filter: invert(1) hue-rotate(180deg); }}html {
  transition: color 300ms, background-color 300ms;
}

Copy the code

Reference article:

• # MDN css filter
• # Dark Mode – Unmistified!
• # Arco Desigon Dark mode