https://github.com/elmsln/issues/issues/1939

Author: btopro

elements/clean-one/clean-one.js

@@ -60,7 +60,8 @@ class CleanOne extends PrintBranchMixin(
           -webkit-box-orient: vertical;
           -webkit-box-direction: normal;
           --ddd-theme-body-font-size: var(--ddd-font-size-xxs);
-          background: white;
+          background-color: light-dark(var(--ddd-accent-6), var(--ddd-primary-4));
+          color: light-dark(black, var(--ddd-accent-6));
           --simple-tooltip-background: var(--ddd-theme-default-info);
           --simple-tooltip-text-color: var(--ddd-theme-default-infoLight);
           --simple-tooltip-opacity: 1;

elements/clean-one/src/clean-one.js

@@ -60,7 +60,8 @@ class CleanOne extends PrintBranchMixin(
           -webkit-box-orient: vertical;
           -webkit-box-direction: normal;
           --ddd-theme-body-font-size: var(--ddd-font-size-xxs);
-          background: white;
+          background-color: light-dark(var(--ddd-accent-6), var(--ddd-primary-4));
+          color: light-dark(black, var(--ddd-accent-6));
           --simple-tooltip-background: var(--ddd-theme-default-info);
           --simple-tooltip-text-color: var(--ddd-theme-default-infoLight);
           --simple-tooltip-opacity: 1;

elements/d-d-d/lib/DDDStyles.js

@@ -563,6 +563,7 @@ export const DDDVariables = css`
   html,
   body,
   :host {
+    color-scheme: light dark;
     /* base colors */
     --ddd-theme-default-beaverBlue: #1e407c;
     --ddd-theme-default-beaver70: rgba(30, 64, 124, 0.7);
@@ -984,6 +985,14 @@ export const DDDVariables = css`
     font-weight: var(--ddd-font-weight-regular);
     letter-spacing: normal;
   }
+  /* basic dark mode support */
+  body:not(.dark-mode) {
+    color-scheme: only light;
+  }
+
+  body.dark-mode {
+    color-scheme: only dark;
+  }
 `;
 /* Data Attributes used by HAX */
 export const DDDDataAttributes = [

elements/haxcms-elements/demo/site.json

@@ -31,7 +31,7 @@
       }
     },
     "theme": {
-      "element": "polaris-invent-theme",
+      "element": "clean-one",
       "path": "@lrnwebcomponents/polaris-theme/lib/polaris-invent-theme.js",
       "name": "Polaris - Invent",
       "thumbnail": "build/es6/node_modules/@lrnwebcomponents/app-hax/lib/assets/images/PartyStyle.svg",

elements/haxcms-elements/lib/ui-components/navigation/site-menu.js

@@ -22,6 +22,8 @@ class SiteMenu extends HAXCMSThemeParts(LitElement) {
       css`
         :host {
           display: block;
+          background-color: light-dark(var(--ddd-accent-6), var(--ddd-primary-4));
+          color: light-dark(black, var(--ddd-accent-6));
         }
         map-menu {
           padding: var(--site-menu-padding);