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