From dbf79113082f2a4b3562405adffcadc246a35259 Mon Sep 17 00:00:00 2001
From: Stanislav Romanov <kaermorchen@gmail.com>
Date: Mon, 17 Oct 2022 15:16:07 +0300
Subject: [PATCH] Refactored theme toggler

---
 app/components/theme-toggler.hbs | 12 +++++++++---
 app/components/theme-toggler.js  | 24 +++++++++++-------------
 app/index.html                   |  2 +-
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/app/components/theme-toggler.hbs b/app/components/theme-toggler.hbs
index 923de83..6bc2e6d 100644
--- a/app/components/theme-toggler.hbs
+++ b/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"}}'
       />
diff --git a/app/components/theme-toggler.js b/app/components/theme-toggler.js
index 94365de..b289e80 100644
--- a/app/components/theme-toggler.js
+++ b/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;
+    }
   }
 }
diff --git a/app/index.html b/app/index.html
index 985a521..42fa237 100644
--- a/app/index.html
+++ b/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"/>