Improved DarkModeToggle component showing currently active preference

app/components/dark-mode-toggle.hbs

@@ -1,6 +1,9 @@
-<TertiaryButton @size="small" {{on "click" (fn this.setPreference "system")}}>System</TertiaryButton>
-<TertiaryButton @size="small" {{on "click" (fn this.setPreference "dark")}}>Dark</TertiaryButton>
-<TertiaryButton @size="small" {{on "click" (fn this.setPreference "light")}}>Light</TertiaryButton>
-<TertiaryButton @size="small" {{on "click" (fn this.setPreference null)}}>Unset</TertiaryButton>
+{{#each this.possiblePreferences as |preference|}}
+  {{#if (eq this.darkMode.localStoragePreference preference)}}
+    <PrimaryButton @size="small" class="capitalize" {{on "click" (fn this.setPreference preference)}}>{{or preference "unset"}}</PrimaryButton>
+  {{else}}
+    <TertiaryButton @size="small" class="capitalize" {{on "click" (fn this.setPreference preference)}}>{{or preference "unset"}}</TertiaryButton>
+  {{/if}}
+{{/each}}
 
 {{yield}}

app/components/dark-mode-toggle.ts

@@ -6,23 +6,16 @@ import type { LocalStoragePreference } from 'codecrafters-frontend/services/dark
 
 export interface Signature {
   Element: Element;
-  Args: {
-    Named: {
-      onDarkModeToggled?: (newValue?: LocalStoragePreference) => void;
-    };
-  };
   Blocks: { default?: [] };
 }
 
 export default class DarkModeToggleComponent extends Component<Signature> {
   @service declare darkMode: DarkModeService;
 
-  @action setPreference(newValue: LocalStoragePreference | null) {
-    this.darkMode.updateLocalStoragePreference(newValue || undefined);
+  possiblePreferences: LocalStoragePreference[] = ['system', 'dark', 'light', null];
 
-    if (this.args.onDarkModeToggled) {
-      this.args.onDarkModeToggled(newValue || undefined);
-    }
+  @action setPreference(newValue: LocalStoragePreference) {
+    this.darkMode.updateLocalStoragePreference(newValue);
   }
 }
 

app/controllers/demo/dark-mode-toggle.ts

@@ -1,16 +1,7 @@
 import Controller from '@ember/controller';
 import { service } from '@ember/service';
-import type LocalStorageService from 'codecrafters-frontend/services/local-storage';
-import { LOCAL_STORAGE_KEY, type LocalStoragePreference } from 'codecrafters-frontend/services/dark-mode';
-import { tracked } from 'tracked-built-ins';
-import { action } from '@ember/object';
+import DarkModeService from 'codecrafters-frontend/services/dark-mode';
 
 export default class DemoDarkModeToggleController extends Controller {
-  @service declare localStorage: LocalStorageService;
-
-  @tracked currentLocalStoragePreference?: LocalStoragePreference;
-
-  @action loadDarkModePreference() {
-    this.currentLocalStoragePreference = this.localStorage.getItem(LOCAL_STORAGE_KEY) as LocalStoragePreference;
-  }
+  @service declare darkMode: DarkModeService;
 }

app/services/dark-mode.ts

@@ -7,12 +7,12 @@ import type LocalStorageService from 'codecrafters-frontend/services/local-stora
 import RouteInfoMetadata, { RouteColorSchemes } from 'codecrafters-frontend/utils/route-info-metadata';
 import type RouteInfo from '@ember/routing/route-info';
 
-export const LOCAL_STORAGE_KEY = 'dark-mode-preference';
+const LOCAL_STORAGE_KEY = 'dark-mode-preference';
 
 export type UpdateListener = (isEnabled: boolean) => void;
 
-export type LocalStoragePreference = 'system' | 'dark' | 'light';
-type SystemPreference = 'dark' | 'light';
+export type LocalStoragePreference = 'system' | 'dark' | 'light' | null;
+export type SystemPreference = 'dark' | 'light';
 
 export default class DarkModeService extends Service {
   @service declare router: RouterService;
@@ -38,7 +38,7 @@ export default class DarkModeService extends Service {
     super(properties);
 
     // Load the localStorage preference from localStorage service
-    this.localStoragePreference = (this.localStorage.getItem(LOCAL_STORAGE_KEY) as LocalStoragePreference | null) || undefined;
+    this.localStoragePreference = this.localStorage.getItem(LOCAL_STORAGE_KEY) as LocalStoragePreference;
 
     // Create a media query to load current system Dark Mode preference
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

app/templates/demo/dark-mode-toggle.hbs

@@ -2,14 +2,22 @@
 
 <h3 class="mb-2 dark:text-gray-300">Set localStorage dark mode preference to:</h3>
 
-<DarkModeToggle @onDarkModeToggled={{this.loadDarkModePreference}} />
+<DarkModeToggle />
 
 <hr class="my-4 dark:border-gray-700" />
 
 <h3 class="mb-2 dark:text-gray-300">Current localStorage preference:</h3>
 
-<code class="code dark:text-gray-400" {{did-insert this.loadDarkModePreference}}>
-  {{or this.currentLocalStoragePreference "null"}}
+<code class="code dark:text-gray-400">
+  {{or this.darkMode.localStoragePreference "null"}}
+</code>
+
+<hr class="my-4 dark:border-gray-700" />
+
+<h3 class="mb-2 dark:text-gray-300">Current system preference:</h3>
+
+<code class="code dark:text-gray-400">
+  {{this.darkMode.systemPreference}}
 </code>
 
 {{outlet}}