Refactored theme toggler

app/components/theme-toggler.hbs

@@ -1,10 +1,16 @@
-<div class='grid grid-cols-3 gap-1 p-1 rounded bg-base-6' ...attributes>
+<div
+  class='grid grid-cols-3 gap-1 p-1 rounded bg-base-6'
+  {{did-insert this.didChangeTheme this.session.data.theme}}
+  {{did-update this.didChangeTheme this.session.data.theme}}
+  ...attributes
+>
   {{#each this.themes as |item|}}
-    {{#let (eq item.id this.theme) as |selected|}}
+    {{#let (eq item.id this.session.data.theme) as |selected|}}
       <Button
         @text={{item.name}}
         @icon={{item.icon}}
-        @onClick={{fn this.changeTheme item.id}}
+        @value={{item.id}}
+        @onClick={{this.changeTheme}}
         @size='sm'
         class='border-none {{if selected "bg-base-7 shadow-sm"}}'
       />

app/components/theme-toggler.js

@@ -2,31 +2,29 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { WhiteBalanceSunny, ThemeLightDark, WeatherNight } from 'ember-mdi';
-import { tracked } from '@glimmer/tracking';
 
 export default class ThemeTogglerComponent extends Component {
   @service session;
 
-  @tracked theme;
-
-  constructor() {
-    super(...arguments);
-
-    this.theme = document.documentElement.dataset.theme;
-  }
-
   get themes() {
     return [
       { id: 'light', name: 'Light', icon: WhiteBalanceSunny },
-      { id: 'system', name: 'System', icon: ThemeLightDark },
+      { id: undefined, name: 'System', icon: ThemeLightDark },
       { id: 'dark', name: 'Dark', icon: WeatherNight },
     ];
   }
 
   @action
   changeTheme(theme) {
-    localStorage.setItem('theme', theme);
-    this.theme = theme;
-    document.documentElement.dataset.theme = theme;
+    this.session.set('data.theme', theme);
+  }
+
+  @action
+  didChangeTheme(el, [theme]) {
+    if (theme) {
+      document.documentElement.dataset.theme = theme;
+    } else {
+      delete document.documentElement.dataset.theme;
+    }
   }
 }

app/index.html

@@ -13,7 +13,7 @@
 
     {{content-for "head-footer"}}
   </head>
-  <body onload="document.documentElement.dataset.theme=localStorage.theme||'system'">
+  <body>
     <div class="loading-indicator">
       <svg width="80" height="80" viewBox="0 0 24 24" role="img">
         <path d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"/>