Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-31 14:34:42 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix darkmode bug

Browse Source
This commit is contained in:
Hayden 2021-01-07 21:41:14 -09:00
parent 12f7ed46ea
commit 899efc2e2b
2 changed files with 29 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,5 @@
{
"cSpell.enableFiletypes": [
"!javascript"
]
}

48
frontend/src/store/modules/userSettings.js
View File

@ -1,11 +1,22 @@
import api from "../../api"; import api from "../../api";
import Vuetify from "../../plugins/vuetify"; import Vuetify from "../../plugins/vuetify";
function inDarkMode(payload) {
let isDark;
if (payload === "system") {
//Get System Preference from browser
const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
isDark = darkMediaQuery.matches;
} else if (payload === "dark") isDark = true;
else if (payload === "light") isDark = false;
return isDark;
}
const state = { const state = {
activeTheme: {}, activeTheme: {},
darkMode: 'system' darkMode: "system",
}; };
const mutations = { const mutations = {
@ -15,17 +26,7 @@ const mutations = {
state.activeTheme = payload; state.activeTheme = payload;
}, },
setDarkMode(state, payload) { setDarkMode(state, payload) {
let isDark; let isDark = inDarkMode(payload);
if (payload === 'system') {
//Get System Preference from browser
const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
isDark = darkMediaQuery.matches;
}
else if (payload === 'dark')
isDark = true;
else if (payload === 'light')
isDark = false;
if (isDark !== null) { if (isDark !== null) {
Vuetify.framework.theme.dark = isDark; Vuetify.framework.theme.dark = isDark;
@ -40,31 +41,30 @@ const actions = {
if (defaultTheme.colors) { if (defaultTheme.colors) {
Vuetify.framework.theme.themes.dark = defaultTheme.colors; Vuetify.framework.theme.themes.dark = defaultTheme.colors;
Vuetify.framework.theme.themes.light = defaultTheme.colors; Vuetify.framework.theme.themes.light = defaultTheme.colors;
commit('setTheme', defaultTheme) commit("setTheme", defaultTheme);
} }
}, },
async initTheme({ dispatch, getters }) { async initTheme({ dispatch, getters }) {
//If theme is empty resetTheme //If theme is empty resetTheme
if (Object.keys(getters.getActiveTheme).length === 0) { if (Object.keys(getters.getActiveTheme).length === 0) {
await dispatch('resetTheme') await dispatch("resetTheme");
} } else {
else { Vuetify.framework.theme.dark = inDarkMode(getters.getDarkMode);
Vuetify.framework.theme.themes.dark = getters.getActiveTheme.colors; Vuetify.framework.theme.themes.dark = getters.getActiveTheme.colors;
Vuetify.framework.theme.themes.light = getters.getActiveTheme.colors; Vuetify.framework.theme.themes.light = getters.getActiveTheme.colors;
} }
}, },
};
}
const getters = { const getters = {
getActiveTheme: (state) => state.activeTheme, getActiveTheme: (state) => state.activeTheme,
getDarkMode: (state) => state.darkMode getDarkMode: (state) => state.darkMode,
} };
export default { export default {
state, state,
mutations, mutations,
actions, actions,
getters getters,
} };