Tie theme to dictionary instead of settings

index.html

@@ -161,8 +161,8 @@
               <small>Check this to enable keyboard combinations to perform different helpful actions.</small>
             </label>
     
-            <label>Theme
-              <select id="settingsTheme">
+            <label>Default Theme <small>(the theme new dictionaries will use)</small>
+              <select id="settingsDefaultTheme">
                 <option value="default">Default</option>
                 <option value="dark">Dark</option>
                 <option value="light">Light</option>
@@ -290,6 +290,20 @@
           <input type="checkbox" id="editSortByDefinition"><br>
           <small>Checking this box will sort the words in alphabetical order based on the Definition instead of the Word.</small>
         </label>
+        <label>Theme
+          <select id="editTheme">
+            <option value="default">Default</option>
+            <option value="dark">Dark</option>
+            <option value="light">Light</option>
+            <option value="blue">Blue</option>
+            <option value="green">Green</option>
+            <option value="yellow">Yellow</option>
+            <option value="red">Red</option>
+            <option value="royal">Royal</option>
+            <option value="mint">Mint</option>
+            <option value="grape">Grape</option>
+          </select>
+        </label>
       </section>
 
       <section id="editActionsTab" style="display:none;">

src/constants.js

@@ -57,7 +57,7 @@ export const DEFAULT_DICTIONARY = {
 export const DEFAULT_SETTINGS = {
   useIPAPronunciationField: true,
   useHotkeys: true,
-  theme: 'default',
+  defaultTheme: 'default',
 };
 
 export const DEFAULT_PAGE_SIZE = 50;

src/js/dictionaryManagement.js

@@ -1,4 +1,4 @@
-import { renderDictionaryDetails, renderPartsOfSpeech, renderAll, renderWords } from "./render";
+import { renderDictionaryDetails, renderPartsOfSpeech, renderAll, renderTheme } from "./render";
 import { removeTags, cloneObject, getTimestampInSeconds, download, slugify } from "../helpers";
 import { LOCAL_STORAGE_KEY, DEFAULT_DICTIONARY, MIGRATE_VERSION } from "../constants";
 import { addMessage, getNextId, hasToken } from "./utilities";
@@ -13,7 +13,7 @@ export function openEditModal() {
   const { name, specification, description, partsOfSpeech } = window.currentDictionary;
   const { consonants, vowels, blends, phonotactics } = window.currentDictionary.details.phonology;
   const { orthography, grammar } = window.currentDictionary.details;
-  const { allowDuplicates, caseSensitive, sortByDefinition, isPublic } = window.currentDictionary.settings;
+  const { allowDuplicates, caseSensitive, sortByDefinition, theme, isPublic } = window.currentDictionary.settings;
   
   document.getElementById('editName').value = name;
   document.getElementById('editSpecification').value = specification;
@@ -35,6 +35,7 @@ export function openEditModal() {
   document.getElementById('editCaseSensitive').checked = caseSensitive;
   if (allowDuplicates) document.getElementById('editCaseSensitive').disabled = true;
   document.getElementById('editSortByDefinition').checked = sortByDefinition;
+  document.getElementById('editTheme').value = theme;
   if (hasToken()) {
     document.getElementById('editIsPublic').checked = isPublic;
   }
@@ -63,6 +64,7 @@ export function saveEditModal() {
   window.currentDictionary.settings.caseSensitive = document.getElementById('editCaseSensitive').checked;
   const needsReSort = window.currentDictionary.settings.sortByDefinition !== document.getElementById('editSortByDefinition').checked;
   window.currentDictionary.settings.sortByDefinition = document.getElementById('editSortByDefinition').checked;
+  window.currentDictionary.settings.theme = document.getElementById('editTheme').value;
 
   let needsWordRender = false;
   if (hasToken()) {
@@ -74,6 +76,7 @@ export function saveEditModal() {
 
   addMessage('Saved ' + window.currentDictionary.specification + ' Successfully');
   saveDictionary();
+  renderTheme();
   renderDictionaryDetails();
   renderPartsOfSpeech();
   
@@ -113,6 +116,7 @@ export function loadDictionary() {
 
 export function clearDictionary() {
   window.currentDictionary = cloneObject(DEFAULT_DICTIONARY);
+  window.currentDictionary.settings.theme = window.settings.defaultTheme;
 }
 
 export function deleteDictionary() {

src/js/render.js

@@ -18,11 +18,17 @@ import { getPaginationData } from './pagination';
 import { getOpenEditForms, parseReferences } from './wordManagement';
 
 export function renderAll() {
+  renderTheme();
   renderDictionaryDetails();
   renderPartsOfSpeech();
   renderWords();
 }
 
+export function renderTheme() {
+  const { theme } = window.currentDictionary.settings;
+  document.body.id = theme + 'Theme';
+}
+
 export function renderDictionaryDetails() {
   renderName();
 

src/js/settings.js

@@ -8,7 +8,6 @@ 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();
 }
 
@@ -17,17 +16,12 @@ export function saveSettings() {
   addMessage('Settings Saved!');
 }
 
-export function updateTheme() {
-  const { theme } = window.settings;
-  document.body.id = theme + 'Theme';
-}
-
 export function openSettingsModal() {
-  const { useIPAPronunciationField, useHotkeys, theme } = window.settings;
+  const { useIPAPronunciationField, useHotkeys, defaultTheme } = window.settings;
 
   document.getElementById('settingsUseIPA').checked = useIPAPronunciationField;
   document.getElementById('settingsUseHotkeys').checked = useHotkeys;
-  document.getElementById('settingsTheme').value = theme;
+  document.getElementById('settingsDefaultTheme').value = defaultTheme;
 
   document.getElementById('settingsModal').style.display = '';
 }
@@ -35,7 +29,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;
+  window.settings.defaultTheme = document.getElementById('settingsDefaultTheme').value;
 
   if (hasToken()) {
     import('./account/index.js').then(account => {
@@ -57,7 +51,6 @@ export function saveSettingsModal() {
   }
 
   saveSettings();
-  updateTheme();
   toggleHotkeysEnabled();
   toggleIPAPronunciationFields();
 }