refactored theme switching logic to connect the HDS switcher with the Boundary switcher

Author: didoo

ui/admin/app/controllers/application.js

@@ -91,6 +91,20 @@ export default class ApplicationController extends Controller {
         rootEl.classList.remove('rose-theme-dark');
         rootEl.classList.remove('rose-theme-light');
     }
+
+    // set the HDS theme too
+    const hdsTheme = theme === 'light' || theme === 'dark' ? theme : 'system';
+    this.hdsTheming.setTheme({
+      theme: hdsTheme,
+      onSetTheme: ({ currentTheme, currentMode }) => {
+        // eslint-disable-next-line no-console
+        console.log(
+          `BOUNDARY SWITCHER - onSetTheme invoked`,
+          currentTheme,
+          currentMode,
+        );
+      },
+    });
   }
 
   /**
@@ -131,12 +145,11 @@ export default class ApplicationController extends Controller {
   @action
   onSetTheme({ currentTheme, currentMode }) {
     // eslint-disable-next-line no-console
-    console.log(`onSetTheme invoked`, currentTheme, currentMode);
-  }
-
-  @action
-  removeTheming() {
-    this.hdsTheming.setTheme({ theme: undefined });
+    console.log(`HDS SWITCHER - onSetTheme invoked`, currentTheme, currentMode);
+    const roseTheme =
+      // note: we pass `null` here, because of the JSDOC definition above, but the selector in the sidenav dropdown passes `system-default-theme`
+      currentTheme === 'light' || currentTheme === 'dark' ? currentTheme : null;
+    this.toggleTheme(roseTheme);
   }
 
   /**

ui/admin/app/templates/application.hbs

@@ -161,22 +161,10 @@
       <AF.Link @href={{(doc-url)}}>{{t 'titles.documentation'}}</AF.Link>
       <AF.LegalLinks />
       <AF.ExtraAfter>
-        {{! template-lint-disable no-inline-styles }}
-        <Hds::ButtonSet style='gap: 4px; align-items: center'>
-          <Hds::ThemeSwitcher
-            @toggleSize='small'
-            @hasDefaultOption={{true}}
-            @onSetTheme={{this.onSetTheme}}
-          />
-          <Hds::Button
-            @color='secondary'
-            @size='small'
-            @icon='trash'
-            @isIconOnly={{true}}
-            @text='Remove theme'
-            {{on 'click' this.removeTheming}}
-          />
-        </Hds::ButtonSet>
+        <Hds::ThemeSwitcher
+          @toggleSize='small'
+          @onSetTheme={{this.onSetTheme}}
+        />
       </AF.ExtraAfter>
     </Hds::AppFooter>
   </Frame.Footer>