VAVABUY/components/theme.vue

<template>
  <view :class="`theme_${theme}`">
    <slot></slot>
    <GlobalLoading />
  </view>
</template>
<script setup>
import { computed } from "vue";
import { useUserStore } from "@/store";
import GlobalLoading from "./GlobalLoading.vue";
const useUser = useUserStore();

const theme = computed(() => useUser.getTheme);
</script>
<style lang="less">
@import "@/static/css/theme.less";

:deep(.cu-custom) {
  .cu-bar {
    background-color: var(--nav-background) !important;
    color: var(--theme) !important;

    .action {
      .cuIcon-back {
        color: var(--black) !important;
      }
    }

    .right {
      color: var(--black) !important;
    }
  }
}

.uni-picker-custom {
  .uni-picker-header {
    background-color: var(--dark);
  }
}

:deep(.uni-popup) {
  .uni-popup-dialog {
    background-color: var(--bg) !important;

    .uni-dialog-title {
      .uni-popup__info {
        color: var(--black);
      }
    }

    .uni-dialog-content {
      color: var(--theme);

      .uni-dialog-input {
        border-color: var(--border);
        background-color: var(--dark);
        color: var(--theme);
      }
    }

    .uni-dialog-button {
      .uni-dialog-button-text {
        color: var(--gray);
      }
    }

    .uni-dialog-button:last-child {
      .uni-dialog-button-text {
        color: var(--theme);
      }
    }
  }
}
</style>