chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: theme on device

Browse source
This commit is contained in:
puriphatt 2024-07-01 07:50:30 +00:00
parent 8c5596f5e8
commit d1e6239a1f
1 changed files with 23 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/components/ProfileMenu.vue
View file

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue';
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { useQuasar } from 'quasar';
// import useOption from 'src/stores/option';
@ -10,6 +10,7 @@ const $q = useQuasar();
const userImage = ref<string>('');
const filterRole = ref<string[]>();
const inputFile = document.createElement('input');
inputFile.type = 'file';
inputFile.accept = 'image/*';
@ -99,20 +100,33 @@ function changeMode(mode: string) {
}
}
window
.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', () => {
if (themeMode.value[2].isActive) changeMode('baseOnDevice');
});
function themeChange() {
if (themeMode.value[2].isActive) changeMode('baseOnDevice');
}
onUnmounted(() => {
window
.matchMedia('(prefers-color-scheme: dark)')
.removeEventListener('change', themeChange);
});
onMounted(async () => {
window
.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', themeChange);
// if (isLoggedIn()) {
// userImage.value = (await storageStore.getProfile()) ?? '';
// }
currentTheme.value = localStorage.getItem('currentTheme');
if (currentTheme.value === 'light') changeMode('light');
if (currentTheme.value === 'dark') changeMode('dark');
if (currentTheme.value === 'baseOnDevice') changeMode('baseOnDevice');
if (
currentTheme.value === 'light' ||
currentTheme.value === 'dark' ||
currentTheme.value === 'baseOnDevice'
) {
changeMode(currentTheme.value);
} else {
changeMode('light');
}
const userRoles = getRole();
if (userRoles) {