From 602a5a136f1b9f3243e1d0d34dbe9b9cdefe11df Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <rantenesse@inquisicorp.com>
Date: Thu, 30 May 2019 17:05:59 -0600
Subject: [PATCH] Enable changing themes

---
 index.html         |  4 ++--
 src/constants.js   |  1 +
 src/js/settings.js | 11 ++++++++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index b501021..e65b148 100644
--- a/index.html
+++ b/index.html
@@ -162,8 +162,8 @@
             </label>
     
             <label>Theme
-              <select disabled>
-                <option selected value="default">Default</option>
+              <select id="settingsTheme">
+                <option value="default">Default</option>
                 <option value="dark">Dark</option>
                 <option value="light">Light</option>
                 <option value="blue">Blue</option>
diff --git a/src/constants.js b/src/constants.js
index 0526d44..ff303f7 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -57,6 +57,7 @@ export const DEFAULT_DICTIONARY = {
 export const DEFAULT_SETTINGS = {
   useIPAPronunciationField: true,
   useHotkeys: true,
+  theme: 'default',
 };
 
 export const DEFAULT_PAGE_SIZE = 50;
diff --git a/src/js/settings.js b/src/js/settings.js
index 61f5ad4..628fe80 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -8,6 +8,7 @@ import { enableHotKeys, disableHotKeys } from "./hotkeys";
 export function loadSettings() {
   const storedSettings = window.localStorage.getItem(SETTINGS_KEY);
   window.settings = storedSettings ? JSON.parse(storedSettings) : cloneObject(DEFAULT_SETTINGS);
+  updateTheme();
   toggleIPAPronunciationFields();
 }
 
@@ -16,11 +17,17 @@ export function saveSettings() {
   addMessage('Settings Saved!');
 }
 
+export function updateTheme() {
+  const { theme } = window.settings;
+  document.body.id = theme + 'Theme';
+}
+
 export function openSettingsModal() {
-  const { useIPAPronunciationField, useHotkeys } = window.settings;
+  const { useIPAPronunciationField, useHotkeys, theme } = window.settings;
 
   document.getElementById('settingsUseIPA').checked = useIPAPronunciationField;
   document.getElementById('settingsUseHotkeys').checked = useHotkeys;
+  document.getElementById('settingsTheme').value = theme;
 
   document.getElementById('settingsModal').style.display = '';
 }
@@ -28,6 +35,7 @@ export function openSettingsModal() {
 export function saveSettingsModal() {
   window.settings.useIPAPronunciationField = document.getElementById('settingsUseIPA').checked;
   window.settings.useHotkeys = document.getElementById('settingsUseHotkeys').checked;
+  window.settings.theme = document.getElementById('settingsTheme').value;
 
   if (hasToken()) {
     import('./account/index.js').then(account => {
@@ -49,6 +57,7 @@ export function saveSettingsModal() {
   }
 
   saveSettings();
+  updateTheme();
   toggleHotkeysEnabled();
   toggleIPAPronunciationFields();
 }