Enable changing themes

This commit is contained in:
Robbie Antenesse 2019-05-30 17:05:59 -06:00
parent ca43c05b60
commit 602a5a136f
3 changed files with 13 additions and 3 deletions

View File

@ -162,8 +162,8 @@
</label> </label>
<label>Theme <label>Theme
<select disabled> <select id="settingsTheme">
<option selected value="default">Default</option> <option value="default">Default</option>
<option value="dark">Dark</option> <option value="dark">Dark</option>
<option value="light">Light</option> <option value="light">Light</option>
<option value="blue">Blue</option> <option value="blue">Blue</option>

View File

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

View File

@ -8,6 +8,7 @@ import { enableHotKeys, disableHotKeys } from "./hotkeys";
export function loadSettings() { export function loadSettings() {
const storedSettings = window.localStorage.getItem(SETTINGS_KEY); const storedSettings = window.localStorage.getItem(SETTINGS_KEY);
window.settings = storedSettings ? JSON.parse(storedSettings) : cloneObject(DEFAULT_SETTINGS); window.settings = storedSettings ? JSON.parse(storedSettings) : cloneObject(DEFAULT_SETTINGS);
updateTheme();
toggleIPAPronunciationFields(); toggleIPAPronunciationFields();
} }
@ -16,11 +17,17 @@ export function saveSettings() {
addMessage('Settings Saved!'); addMessage('Settings Saved!');
} }
export function updateTheme() {
const { theme } = window.settings;
document.body.id = theme + 'Theme';
}
export function openSettingsModal() { export function openSettingsModal() {
const { useIPAPronunciationField, useHotkeys } = window.settings; const { useIPAPronunciationField, useHotkeys, theme } = window.settings;
document.getElementById('settingsUseIPA').checked = useIPAPronunciationField; document.getElementById('settingsUseIPA').checked = useIPAPronunciationField;
document.getElementById('settingsUseHotkeys').checked = useHotkeys; document.getElementById('settingsUseHotkeys').checked = useHotkeys;
document.getElementById('settingsTheme').value = theme;
document.getElementById('settingsModal').style.display = ''; document.getElementById('settingsModal').style.display = '';
} }
@ -28,6 +35,7 @@ export function openSettingsModal() {
export function saveSettingsModal() { export function saveSettingsModal() {
window.settings.useIPAPronunciationField = document.getElementById('settingsUseIPA').checked; window.settings.useIPAPronunciationField = document.getElementById('settingsUseIPA').checked;
window.settings.useHotkeys = document.getElementById('settingsUseHotkeys').checked; window.settings.useHotkeys = document.getElementById('settingsUseHotkeys').checked;
window.settings.theme = document.getElementById('settingsTheme').value;
if (hasToken()) { if (hasToken()) {
import('./account/index.js').then(account => { import('./account/index.js').then(account => {
@ -49,6 +57,7 @@ export function saveSettingsModal() {
} }
saveSettings(); saveSettings();
updateTheme();
toggleHotkeysEnabled(); toggleHotkeysEnabled();
toggleIPAPronunciationFields(); toggleIPAPronunciationFields();
} }