diff --git a/index.html b/index.html index 9d04ff6..d3a282f 100644 --- a/index.html +++ b/index.html @@ -161,8 +161,8 @@ Check this to enable keyboard combinations to perform different helpful actions. - Theme - + Default Theme (the theme new dictionaries will use) + Default Dark Light @@ -290,6 +290,20 @@ Checking this box will sort the words in alphabetical order based on the Definition instead of the Word. + Theme + + Default + Dark + Light + Blue + Green + Yellow + Red + Royal + Mint + Grape + + diff --git a/src/constants.js b/src/constants.js index da1d815..617e2a6 100644 --- a/src/constants.js +++ b/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; diff --git a/src/js/dictionaryManagement.js b/src/js/dictionaryManagement.js index cce0358..0890537 100644 --- a/src/js/dictionaryManagement.js +++ b/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() { diff --git a/src/js/render.js b/src/js/render.js index d8710fd..d6ab919 100644 --- a/src/js/render.js +++ b/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(); diff --git a/src/js/settings.js b/src/js/settings.js index 628fe80..f40d19a 100644 --- a/src/js/settings.js +++ b/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(); }