implemented basic HDS switcher for testing

packages/components/package.json

@@ -286,6 +286,7 @@
       "./components/hds/text/code.js": "./dist/_app_/components/hds/text/code.js",
       "./components/hds/text/display.js": "./dist/_app_/components/hds/text/display.js",
       "./components/hds/text/index.js": "./dist/_app_/components/hds/text/index.js",
+      "./components/hds/theme-switcher/index.js": "./dist/_app_/components/hds/theme-switcher/index.js",
       "./components/hds/toast/index.js": "./dist/_app_/components/hds/toast/index.js",
       "./components/hds/tooltip-button/index.js": "./dist/_app_/components/hds/tooltip-button/index.js",
       "./components/hds/yield/index.js": "./dist/_app_/components/hds/yield/index.js",

packages/components/src/components/hds/theme-switcher/index.hbs

@@ -0,0 +1,16 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Form::Select::Base
+  {{on "change" this._onChangePageTheme}}
+  class="hds-theme-switcher-control"
+  as |C|
+>
+  <C.Options>
+    <option value="none" selected={{eq this._selectedTheme "none"}}>None</option>
+    <option value="auto" selected={{eq this._selectedTheme "auto"}}>System</option>
+    <option value="light" selected={{eq this._selectedTheme "light"}}>Light</option>
+    <option value="dark" selected={{eq this._selectedTheme "dark"}}>Dark</option>
+  </C.Options>
+</Hds::Form::Select::Base>

packages/components/src/components/hds/theme-switcher/index.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+import type { HdsFormSelectBaseSignature } from '../form/select/base.ts';
+import type HdsThemingService from '../../../services/hds-theming.ts';
+import { type HdsThemes } from '../../../services/hds-theming.ts';
+
+export interface HdsThemeSwitcherSignature {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  Args: {};
+  Element: HdsFormSelectBaseSignature['Element'];
+}
+
+export default class HdsThemeSwitcher extends Component<HdsThemeSwitcherSignature> {
+  @service declare readonly hdsTheming: HdsThemingService;
+
+  _selectedTheme: HdsThemes;
+
+  constructor(owner: unknown, args: HdsThemeSwitcherSignature['Args']) {
+    super(owner, args);
+    this._selectedTheme = this.hdsTheming.getTheme() || undefined;
+  }
+
+  @action
+  _onChangePageTheme(event: Event): void {
+    const select = event.target as HTMLSelectElement;
+
+    // this._selectedTheme = select.value === 'none' ? undefined : select.value;
+    if (select.value === 'none') {
+      this._selectedTheme = undefined;
+    } else if (
+      select.value === 'auto' ||
+      select.value === 'light' ||
+      select.value === 'dark'
+    ) {
+      this._selectedTheme = select.value;
+    }
+
+    // we set the theme in the global service
+    this.hdsTheming.setTheme(this._selectedTheme);
+  }
+}

packages/components/src/template-registry.ts

@@ -187,6 +187,7 @@ import type HdsTagComponent from './components/hds/tag';
 import type HdsTooltipButtonComponent from './components/hds/tooltip-button';
 import type HdsToastComponent from './components/hds/toast';
 import type HdsTextCodeComponent from './components/hds/text/code';
+import type HdsThemeSwitcherComponent from './components/hds/theme-switcher';
 import type HdsYieldComponent from './components/hds/yield';
 
 // helpers
@@ -846,6 +847,10 @@ export default interface HdsComponentsRegistry {
   'Hds::Toast': typeof HdsToastComponent;
   'hds/toast': typeof HdsToastComponent;
 
+  // ThemeSwitcher
+  'Hds::ThemeSwitcher': typeof HdsThemeSwitcherComponent;
+  'hds/theme-switcher': typeof HdsThemeSwitcherComponent;
+
   // Yield
   'Hds::Yield': typeof HdsYieldComponent;
   'hds/yield': typeof HdsYieldComponent;