feat: add Aura theme attributes to switch between light and dark theme (#10486)

Author: sissbruecker

dev/aura.html

@@ -416,7 +416,7 @@
           >
             <h3>Edit Theme</h3>
             <vaadin-checkbox label="Use Navbar" id="useNavbar"></vaadin-checkbox>
-            <aura-scheme-control property="--aura-color-scheme" label="--aura-color-scheme"></aura-scheme-control>
+            <aura-scheme-control property="color-scheme" label="color-scheme"></aura-scheme-control>
             <aura-scheme-control
               property="--aura-content-color-scheme"
               label="--aura-content-color-scheme"

packages/aura/src/color-scheme.css

@@ -1,10 +1,17 @@
 :where(:root),
 :where(:host) {
-  --aura-color-scheme: light;
-  --aura-content-color-scheme: var(--aura-color-scheme);
-  --aura-notification-color-scheme: var(--aura-color-scheme);
+  --aura-content-color-scheme: inherit;
+  --aura-notification-color-scheme: inherit;
 }
 
-html {
-  color-scheme: var(--aura-color-scheme);
+[theme~='light'] {
+  color-scheme: light;
+}
+
+[theme~='dark'] {
+  color-scheme: dark;
+}
+
+[theme~='light-dark'] {
+  color-scheme: light dark;
 }