services/design: Extract theme property

Author: Turbo87

app/controllers/settings/appearance.js

@@ -2,14 +2,14 @@ import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 
+import { alias } from 'macro-decorators';
+
 export default class AppearanceSettingsController extends Controller {
   @service design;
 
-  get theme() {
-    return this.design.useNewDesign ? 'new-design' : 'classic';
-  }
+  @alias('design.theme') theme;
 
   @action setTheme(theme) {
-    this.design.setNewDesign(theme === 'new-design');
+    this.theme = theme;
   }
 }

app/services/design.js

@@ -10,6 +10,14 @@ export default class DesignService extends Service {
   @tracked useNewDesign = !this.fastboot.isFastBoot && localStorage.getItem('use-new-design') === 'true';
   @tracked showToggleButton = config.environment === 'development' || config.environment === 'test';
 
+  get theme() {
+    return this.useNewDesign ? 'new-design' : 'classic';
+  }
+
+  set theme(theme) {
+    this.setNewDesign(theme === 'new-design');
+  }
+
   setNewDesign(value) {
     this.useNewDesign = value;
     localStorage.setItem('use-new-design', String(this.useNewDesign));

app/templates/application.hbs

@@ -1,7 +1,7 @@
 <HeadLayout />
 
 {{page-title "crates.io: Rust Package Registry" separator=' - ' prepend=true}}
-{{set-theme (if this.design.useNewDesign "new-design")}}
+{{set-theme this.design.theme}}
 
 <ProgressBar/>
 <NotificationContainer @position="top-right"/>