css-theme-example-data-att.css

body[data-theme="light"] {
  --app-background-color-200: #272727;
  /* we can apply more css selectors colors here */
}

body[data-theme="dark"] {
  --app-background-color-200: #787878;
  /* we can apply more css selectors colors here  */
}


/* apply css vars to a specific body data attribute means that we don’t have to refer to the theme within our css code. Like example below: */
.app-wrapper {
  /* here we use app background color 200 once, but the color will change base on what we define on the body data attribute */
  background-color: var(--app-background-color-200);
}