Enable changing themes
This commit is contained in:
parent
ca43c05b60
commit
602a5a136f
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue