Merge pull request #447 from hashicorp/feature-desktop-dark-mode

Feature desktop dark mode

ui/desktop/app/routes/application.js

@@ -98,4 +98,30 @@ export default class ApplicationRoute extends Route.extend(
     }
     return true;
   }
+
+  /**
+   * Applies the specified color theme to the root ember element.
+   * @param {string} theme - "light", "dark", or nullish (system default)
+   */
+  @action
+  toggleTheme(theme) {
+    const rootElementSelector = getOwner(this).rootElement;
+    const rootEl = getOwner(this)
+      .lookup('service:-document')
+      .querySelector(rootElementSelector);
+    this.session.set('data.theme', theme);
+    switch (theme) {
+      case 'light':
+        rootEl.classList.add('rose-theme-light');
+        rootEl.classList.remove('rose-theme-dark');
+        break;
+      case 'dark':
+        rootEl.classList.add('rose-theme-dark');
+        rootEl.classList.remove('rose-theme-light');
+        break;
+      default:
+        rootEl.classList.remove('rose-theme-dark');
+        rootEl.classList.remove('rose-theme-light');
+    }
+  }
 }

ui/desktop/app/templates/application.hbs

@@ -22,6 +22,29 @@
             >
               {{t 'actions.deauthenticate'}}
             </dropdown.button>
+
+            <dropdown.separator />
+
+            <dropdown.section @title={{t "titles.toggle-color-theme"}}>
+              <Rose::Form as |form|>
+                <form.radioGroup
+                  @name="theme"
+                  @selectedValue={{this.session.data.theme}}
+                  @changed={{route-action "toggleTheme"}}
+                as |radioGroup|>
+                  <dropdown.item>
+                    <radioGroup.radio @label={{t "themes.system"}} />
+                  </dropdown.item>
+                  <dropdown.item>
+                    <radioGroup.radio @label={{t "themes.light"}} @value="light" />
+                  </dropdown.item>
+                  <dropdown.item>
+                    <radioGroup.radio @label={{t "themes.dark"}} @value="dark" />
+                  </dropdown.item>
+                </form.radioGroup>
+              </Rose::Form>
+            </dropdown.section>
+            
           </utilities.dropdown>
         </header.utilities>
       {{/if}}

ui/desktop/tests/acceptance/authentication-test.js

@@ -3,19 +3,20 @@ import {
   visit,
   currentURL,
   //fillIn,
-  //click,
+  click,
   find,
   //findAll,
-  //getRootElement
+  getRootElement,
   //setupOnerror,
 } from '@ember/test-helpers';
+import { run, later } from '@ember/runloop';
 import { setupApplicationTest } from 'ember-qunit';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 //import { Response } from 'miragejs';
 //import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import {
   currentSession,
-  //authenticateSession,
+  authenticateSession,
   invalidateSession,
 } from 'ember-simple-auth/test-support';
 
@@ -159,4 +160,38 @@ module('Acceptance | authentication', function (hooks) {
     assert.equal(currentURL(), urls.authenticate.global);
     assert.ok(find('.rose-message'));
   });
+
+  test('color theme is applied from session data', async function (assert) {
+    assert.expect(12);
+    authenticateSession({
+      scope: {
+        id: instances.scopes.global.id,
+        type: instances.scopes.global.type
+      },
+    });
+    later(async () => {
+      run.cancelTimers();
+      // system default
+      assert.notOk(currentSession().get('data.theme'));
+      assert.notOk(getRootElement().classList.contains('rose-theme-light'));
+      assert.notOk(getRootElement().classList.contains('rose-theme-dark'));
+      // toggle light mode
+      await click('[name="theme"][value="light"]');
+      assert.equal(currentSession().get('data.theme'), 'light');
+      assert.ok(getRootElement().classList.contains('rose-theme-light'));
+      assert.notOk(getRootElement().classList.contains('rose-theme-dark'));
+      // toggle dark mode
+      await click('[name="theme"][value="dark"]');
+      assert.equal(currentSession().get('data.theme'), 'dark');
+      assert.notOk(getRootElement().classList.contains('rose-theme-light'));
+      assert.ok(getRootElement().classList.contains('rose-theme-dark'));
+      // toggle system default
+      await click('[name="theme"][value=""]');
+      assert.notOk(currentSession().get('data.theme'));
+      assert.notOk(getRootElement().classList.contains('rose-theme-light'));
+      assert.notOk(getRootElement().classList.contains('rose-theme-dark'));
+    }, 750);
+
+    await visit(urls.scopes.org);
+  });
 });