Is it possible in scss to apply styles depending on the parent attribute?

Question

Sass

Hey! My site theme (dark/light) is set in the attribute of the body tag theme="light/dark".

scss has this construct for media queries:

.element {
   ...

   @ media screen and (min-width: 544px) {
      // стили для экрана от 544 пкс
   }
}

Tell me, is there a design that will also allow you to set styles for an element, depending on the body attribute? Something like

.element {
   color: var(--color);

   @ body[theme="dark"] {
      --color: white;
   }

   @ body[theme="light"] {
      --color: #333333;
   }
}

Answer 1

So write it down

.element {
   color: var(--color);

   body[theme="dark"] & {
      --color: white;
   }

   body[theme="light"] & {
      --color: #333333;
   }
}