diff --git a/index.html b/index.html index b501021..e65b148 100644 --- a/index.html +++ b/index.html @@ -162,8 +162,8 @@ Theme - - Default + + Default Dark Light Blue 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(); }