Implement "Toggle Design" button and global toggleDesign() function

Author: Turbo87

app/components/footer.module.css

@@ -2,6 +2,7 @@
     display: flex;
     justify-content: center;
     width: 100%;
+    background: var(--footer-bg-color);
 }
 
 .sep {

app/controllers/application.js

@@ -2,5 +2,6 @@ import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 
 export default Controller.extend({
+  design: service(),
   flashMessages: service(),
 });

app/helpers/add-html-class.js

@@ -0,0 +1,14 @@
+import Helper from '@ember/component/helper';
+
+export default class extends Helper {
+  cssClass = null;
+
+  compute(positional, options) {
+    this.cssClass = options.class;
+    document.documentElement.classList.add(this.cssClass);
+  }
+
+  willDestroy() {
+    document.documentElement.classList.remove(this.cssClass);
+  }
+}

app/services/design.js

@@ -0,0 +1,25 @@
+import { action } from '@ember/object';
+import Service, { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+import window from 'ember-window-mock';
+
+import config from '../config/environment';
+
+export default class DesignService extends Service {
+  @service fastboot;
+
+  @tracked useNewDesign = !this.fastboot.isFastBoot && window.localStorage.getItem('use-new-design') === 'true';
+  @tracked showToggleButton = config.environment === 'development';
+
+  constructor() {
+    super(...arguments);
+    window.toggleDesign = () => this.toggle();
+  }
+
+  @action
+  toggle() {
+    this.useNewDesign = !this.useNewDesign;
+    window.localStorage.setItem('use-new-design', String(this.useNewDesign));
+  }
+}

app/styles/application.module.css

@@ -1,4 +1,11 @@
 :root {
+    --violet: #2e2359;
+    --dark-grey: #2a3439;
+    --dark-green: #3b6837;
+
+    --header-bg-color: var(--dark-green);
+    --footer-bg-color: var(--dark-green);
+
     --main-color: #383838;
     --main-color-light: #858585;
     --main-bg: #f9f7ec;
@@ -9,12 +16,18 @@
     --separator-color: #284725;
 }
 
+:global(.new-design) {
+    --header-bg-color: var(--violet);
+    --main-bg: white;
+    --footer-bg-color: var(--dark-grey);
+}
+
 * {
     box-sizing: border-box;
 }
 
 html {
-    background-color: #3b6837;
+    background-color: var(--header-bg-color);
 }
 
 html, body {
@@ -94,3 +107,22 @@ noscript {
         display: none;
     }
 }
+
+.toggle-design-button {
+    position: fixed;
+    bottom: 30px;
+    left: 30px;
+    z-index: 100;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    background: white;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+    color: black;
+    cursor: pointer;
+
+    &:hover {
+        background: #f7f7f7;
+        box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
+    }
+}

app/templates/application.hbs

@@ -16,4 +16,14 @@
 
 <a href='https://github.com/rust-lang/crates.io' local-class='fork-me'>
   <img src='/assets/forkme.png' alt="Fork me on GitHub">
-</a>
+</a>
+
+{{#if this.design.showToggleButton}}
+  <button type="button" local-class="toggle-design-button" {{on "click" this.design.toggle}}>
+    Toggle Design
+  </button>
+{{/if}}
+{{#if this.design.useNewDesign}}
+  {{! template-lint-disable no-curly-component-invocation }}
+  {{add-html-class class="new-design"}}
+{{/if}}