zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

fix: system theme

Browse Source
This commit is contained in:
alisa 2023-04-27 00:42:45 +08:00
parent 062d8b81b5
commit bb15783fdb
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/plugins/vuetify/@core/components/ThemeSwitcher.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { useThemeConfig } from '@core/composable/useThemeConfig'; import { useThemeConfig } from '@core/composable/useThemeConfig';
import type { ThemeSwitcherTheme } from '@layouts/types'; import type { ThemeSwitcherTheme } from '@layouts/types';
import { onMounted } from 'vue'; import { onMounted, watch } from 'vue';
const props = defineProps<{ const props = defineProps<{
themes: ThemeSwitcherTheme[]; themes: ThemeSwitcherTheme[];
@ -19,10 +19,16 @@ const {
const changeTheme = () => { const changeTheme = () => {
theme.value = getNextThemeName(); theme.value = getNextThemeName();
console.log(theme.value, 'theme.value', window.matchMedia('(prefers-color-scheme: dark)').matches)
}; };
const changeMode = (val: 'dark' | 'light') => { const changeMode = (val: 'dark' | 'light' | 'system') => {
if (val === 'dark') { let value = val;
if (theme.value === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
value = 'dark';
}
if (value === 'dark') {
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light'); document.documentElement.classList.remove('light');
} else { } else {
@ -31,7 +37,7 @@ const changeMode = (val: 'dark' | 'light') => {
} }
}; };
// Update icon if theme is changed from other sources // Update icon if theme is changed from other sources
watch(theme, (val: 'dark' | 'light') => { watch(theme, (val: 'dark' | 'light' | 'system') => {
currentThemeName.value = val; currentThemeName.value = val;
changeMode(val); changeMode(val);
}); });