Spaces:
Running
Running
File size: 1,560 Bytes
d669ddb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<script setup lang="ts">
import { ref, onMounted, provide } from 'vue';
import { NMessageProvider, NConfigProvider, lightTheme, darkTheme, useOsTheme, type GlobalThemeOverrides, NDialogProvider } from 'naive-ui';
import { RouterView } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/stores/modules/user';
const userStore = useUserStore();
const { themeMode } = storeToRefs(userStore);
const theme = ref(lightTheme);
provide('theme', theme);
onMounted(() => {
const body = document.querySelector('body');
if (themeMode.value == 'light') {
theme.value = lightTheme;
body?.setAttribute('style', 'background-color: #f0f0f0');
} else if (themeMode.value == 'dark') {
theme.value = darkTheme;
body?.setAttribute('style', 'background-color: #111111');
} else if (themeMode.value == 'auto') {
if (useOsTheme().value == 'dark') {
theme.value = darkTheme;
body?.setAttribute('style', 'background-color: #111111');
} else {
theme.value = lightTheme;
body?.setAttribute('style', 'background-color: #f0f0f0');
}
}
})
const themeOverrides: GlobalThemeOverrides = {
common: {
primaryColor: '#2080F0FF',
primaryColorHover: '#4098FCFF',
primaryColorPressed: '#1060C9FF',
primaryColorSuppl: '#4098FCFF',
},
};
</script>
<template>
<NConfigProvider :theme="theme" :theme-overrides="themeOverrides">
<NDialogProvider>
<NMessageProvider>
<RouterView/>
</NMessageProvider>
</NDialogProvider>
</NConfigProvider>
</template>
|