Enable changing themes

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>

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;

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();
 }