novel-front-app/components/theme/ThemeProvider.vue

<template>
  <view :class="{'dark-mode': isDarkMode}" class="theme-provider">
    <slot></slot>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  name: 'ThemeProvider',
  computed: {
    ...mapGetters(['isDarkMode', 'currentTheme'])
  },
  methods: {
    ...mapMutations(['toggleThemeMode', 'setThemeMode'])
  }
}
</script>

<style lang="scss">
.theme-provider {
  /* 确保占满容器，但不影响布局 */
  width: 100%;
  height: 100%;
  
  /* 适配应用到深色模式的样式 */
  &.dark-mode {
    /* 这里不添加具体样式，由子元素通过对应的类应用样式 */
  }
}
</style>