fix: dark

This commit is contained in:
xingyu4j 2022-11-23 16:34:09 +08:00
parent 4209625b1b
commit aae0b8c328
2 changed files with 11 additions and 14 deletions

View File

@ -1,26 +1,22 @@
<template>
<ConfigGlobal :size="currentSize">
<RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
</ConfigGlobal>
</template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import { computed } from 'vue'
import Cookies from 'js-cookie'
import { isDark } from '@/utils/is' import { isDark } from '@/utils/is'
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign' import { useDesign } from '@/hooks/web/useDesign'
import { ConfigGlobal } from '@/components/ConfigGlobal' import { ConfigGlobal } from '@/components/ConfigGlobal'
import { useCache } from '@/hooks/web/useCache'
const { getPrefixCls } = useDesign() const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('app') const prefixCls = getPrefixCls('app')
const appStore = useAppStore() const appStore = useAppStore()
const currentSize = computed(() => appStore.getCurrentSize) const currentSize = computed(() => appStore.getCurrentSize)
const greyMode = computed(() => appStore.getGreyMode) const greyMode = computed(() => appStore.getGreyMode)
const { wsCache } = useCache()
// //
const setDefaultTheme = () => { const setDefaultTheme = () => {
if (Cookies.get('isDark')) { if (wsCache.get('isDark')) {
if (Cookies.get('isDark') === 'true') { if (wsCache.get('isDark') || wsCache.get('isDark') === 'true') {
appStore.setIsDark(true) appStore.setIsDark(true)
} else { } else {
appStore.setIsDark(false) appStore.setIsDark(false)
@ -32,15 +28,17 @@ const setDefaultTheme = () => {
} }
setDefaultTheme() setDefaultTheme()
</script> </script>
<template>
<ConfigGlobal :size="currentSize">
<RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
</ConfigGlobal>
</template>
<style lang="scss"> <style lang="scss">
$prefix-cls: #{$namespace}-app; $prefix-cls: #{$namespace}-app;
.size { .size {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
html, html,
body { body {
padding: 0 !important; padding: 0 !important;
@ -52,7 +50,6 @@ body {
@extend .size; @extend .size;
} }
} }
.#{$prefix-cls}-grey-mode { .#{$prefix-cls}-grey-mode {
filter: grayscale(100%); filter: grayscale(100%);
} }

View File

@ -1,7 +1,7 @@
<template> <template>
<div <div
:class="prefixCls" :class="prefixCls"
class="h-[100%] relative overflow-hidden <xl:bg-v-dark <sm:px-10px <xl:px-10px <md:px-10px" class="h-[100%] relative <xl:bg-v-dark <sm:px-10px <xl:px-10px <md:px-10px"
> >
<div class="relative h-full flex mx-auto"> <div class="relative h-full flex mx-auto">
<div <div
@ -74,7 +74,7 @@ const prefixCls = getPrefixCls('login')
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$prefix-cls: #{$namespace}-panel; $prefix-cls: #{$namespace}-login;
.#{$prefix-cls} { .#{$prefix-cls} {
&__left { &__left {