1

李凌

2025-10-11 4931fb42270d5fd00a0a22270d684476ffa53917

1

 src/assets/theme/_handle.scss

New file
@@ -0,0 +1,21 @@
@import './_themes.scss';

// 定义混合指令, 切换主题,并将主题中的所有规则添加到theme-map中
@mixin themify() {

    // 将themes中规则放入theme-map
    @each $theme-name,
    $theme-map in $themes {
        $theme-map: $theme-map  !global;

        [data-theme="#{$theme-name}"] & {
            // 表示包含下面函数 themed(), 类似于插槽
            @content;
            $theme-map : null !global;
        }
    }
}

@function themed($key) {
    @return map-get($theme-map, $key);
}

 src/assets/theme/_themes.scss

New file
@@ -0,0 +1,88 @@
$themes: (
    light:(
        main_background: #ffffff, //主题色
        text_color: #333, //文字颜色
        text_color1: #868C9A, //文字浅色
        text_color2: #B7BDD1, // 资金页面所用对应
        text_color3: #000000, //
        tab_background: #F5F5F5, //tab切换背景颜色
        tab_background1: #ffffff, //tab切换背景颜色
        tab_background2: #ffffff, //tab切换背景颜色
        active_line: #f7b328, //tab选中样式颜色
        footer_background: #ffffff, // 底部颜色
        btn_main: #f7b328, //主题色按钮
        color_main: #f7b328, //主题色文字
        btn_background: #ffffff, //按钮颜色
        btn_background1: #ffffff, //按钮颜色
        btn_background2: #111, //按钮颜色
        btn_text: #fff, //按钮文字颜色
        input_background: #f5f5f5, //input背景颜色
        cont_background: #ffffff, //title背景色
        title_color: #B8BDC5,
        line_color: #ffffff,
        bg_dark: #ffffff,
        border_color: #e5e5e5, // 通用边框颜色
        border_color1: #ffffff,
        divi_line: #f5f5f5, //分割线
        bg_step: #868D9A,
        bg_Bottom: #ffffff,
        chat_bg: #e5e5e5,
        upload_bg: #ffffff,
        grey_bg: #f7f7f7,
        input_background1: #f5f5f5, //质押借币input
        c2c_color: #868C9A,
        c2c_background: #ffffff,
        c2c_background1: #ffffff,
        c2c_tab_background: #ffffff,
        c2c_tip_background: #ffffff,
        light-greybg:#ffffff,
        dark-greybg:#000,
        home_bg: #ffffff,
        cont_round: #ffffff,
        cont_nav: #ffffff,
        tab_color:#333, //tab文字颜色
        input_border:#e5e5e5, //输入框边框颜色
    ),
    dark:(main_background: #121212, //主题色
        text_color: #fff, //文字颜色
        text_color1: #868D9A, //文字浅色
        text_color2: #B7BDD1, // 资金页面所用对应
        text_color3: #CFD5EC, //
        tab_background: #27293B, //tab切换背景颜色
        tab_background1: #000, //tab切换背景颜色
        tab_background2: #242424, //tab切换背景颜色
        active_line: #f7b328, //tab选中样式颜色
        footer_background: #1a1a1a, // 底部颜色
        btn_main: #f7b328, //主题色按钮
        color_main: #f7b328, //主题色文字
        btn_background: #474B62, //按钮颜色
        btn_background1: #112542, //按钮颜色
        btn_background2: #b9f641, //按钮颜色
        btn_text: #333, //按钮文字颜色
        input_background: #242424, //input背景颜色
        cont_background: #242424, //title背景色
        title_color: #B8BDC5,
        line_color: #393E49,
        bg_dark: #474B62,
        border_color: #868D9A, //通用边框颜色
        border_color1: #212C4E,
        divi_line: #999, //分割线
        bg_step: #868D9A,
        bg_Bottom: #313346,
        chat_bg: #474B62,
        upload_bg: #474B62,
        grey_bg: #27293B,
        input_background1: #121212, //质押借币input
        c2c_color: #868C9A,
        c2c_background: #121212,
        c2c_background1: #242424,
        c2c_tab_background: #242424,
        c2c_tip_background: #121212,
        light-greybg:#242424,
        dark-greybg:#000,
        home_bg: #131313,
        cont_round: #000,
        cont_nav: #2b2d34,
        tab_color:#b9f641, //tab文字颜色
        input_border:#868C9A, //输入框边框颜色
    ))

 src/assets/theme/index.scss

New file
@@ -0,0 +1,244 @@
@import './_handle.scss';

:root{
    @include themify() {
        --van-button-primary-background: themed("btn_background2") !important;
        --van-button-primary-border-color: themed("btn_background2") !important;
        --van-button-primary-color: themed("btn_text") !important;
    }
}

.mainBackground {
    @include themify() {
        background: themed("main_background") !important;
    }
}

.textColor {
    @include themify() {
        color: themed("text_color") !important;
    }
}

.textColor1 {
    @include themify() {
        color: themed("text_color1") !important;
    }
}

.textColor2 {
    @include themify() {
        color: themed("text_color2") !important;
    }
}

.textColor3 {
    @include themify() {
        color: themed("text_color3") !important;
    }
}

.c2cColor {
    @include themify() {
        color: themed("c2c_color") !important;
    }
}

.tabBackground {
    @include themify() {
        background: themed("tab_background") !important;
    }
}

.tabBackground1 {
    @include themify() {
        background: themed("tab_background1") !important;
    }
}

.tabBackground2 {
    @include themify() {
        background: themed("tab_background2") !important;
    }
}

.activeLine {
    @include themify() {
        background: themed("active_line") !important;
    }
}

.bgFooter {
    @include themify() {
        background: themed("footer_background") !important;
    }
}

.btnMain {
    @include themify() {
        background: themed("btn_main") !important;
    }
}

.colorMain {
    @include themify() {
        color: themed("color_main") !important;
    }
}

.borderMain {
    @include themify() {
        border: 1px solid themed("color_main") !important;
    }
}

.borderColor {
    @include themify() {
        border: 1px solid themed("border_color") !important;
    }
}

.btnBackground {
    @include themify() {
        background: themed("btn_background") !important;
    }
}

.btnBackground2 {
    @include themify() {
        background: themed("btn_background2") !important;
        border: none !important;
    }
}

.btnText {
    @include themify() {
        color: themed("btn_text") !important;
    }
}

.inputBackground {
    @include themify() {
        background: themed("input_background") !important;
    }
}

.inputBackground1 {
    @include themify() {
        background: themed("input_background1") !important;
    }
}

.contBackground {
    @include themify() {
        background: themed("cont_background") !important;
    }
}

.titleColor {
    @include themify() {
        color: themed("title_color") !important;
    }
}

.border-b-color {
    @include themify() {
        border-bottom: 1px solid themed("line_color") !important;
    }
}

.border-t-color {
    @include themify() {
        border-top: 1px solid themed("line_color") !important;
    }
}

.bgDark {
    @include themify() {
        background: themed("bg_dark") !important;
    }
}

.diviLine {
    @include themify() {
        background: themed("divi_line") !important;
    }
}

.bgStep {
    @include themify() {
        background: themed("bg_step") !important;
    }
}

.bgBottom {
    @include themify() {
        background: themed("bg_Bottom") !important;
    }
}

.chatBg {
    @include themify() {
        background: themed("chat_bg") !important;
    }
}

.uploadBg {
    @include themify() {
        background: themed("upload_bg") !important;
    }
}

.greyBg {
    @include themify() {
        background: themed("grey_bg") !important;
    }
}

.c2cBackground {
    @include themify() {
        background: themed("c2c_background") !important;
    }
}

.c2cBackground1 {
    @include themify() {
        background: themed("c2c_background1") !important;
    }
}

.c2cTabBackground {
    @include themify() {
        background: themed("c2c_tab_background") !important;
    }
}

.c2cTipBackground {
    @include themify() {
        background: themed("c2c_tip_background") !important;
    }
}

.lightGreybg {
    @include themify() {
        background: themed("light-greybg") !important;
    }
}

.darkGreybg {
    @include themify() {
        background: themed("dark-greybg") !important;
    }
}

.contRound {
    @include themify() {
        background: themed("cont_round") !important;
    }
}

.contNav {
    @include themify() {
        background: themed("cont_nav") !important;
    }
}

 src/store/modules/vant.js

New file
@@ -0,0 +1,18 @@

import {
    getStorage,setStorage,changeTheme,
} from '@/utils/utis'
export default {
  namespaced: true,
  state: {
    theme: 'light' || getStorage('theme'), // 主题 light(白天)/dark(夜间)
  },
  mutations: {
    "SET_THEME"(state, val) { // 修改主题状态
      state.theme = val;
      window.document.documentElement.setAttribute('data-theme', val)
      changeTheme(val)
      setStorage('theme', val);
    },
  },
};

 src/store/store.js

@@ -8,6 +8,7 @@
import c2c from "@/store/modules/c2c";
// import exchangeRate from './modules/exchangeRate'
import createPersistedState from "vuex-persistedstate";
import vant from "@/store/modules/vant";

const store = {
  plugins: [createPersistedState()],
@@ -27,6 +28,7 @@
    c2cBuy,
    c2cSell,
    c2c,
    vant,
    // exchangeRate
  },
};

 src/views/cryptos/Recharge/rechargePage.vue

@@ -31,13 +31,13 @@
                            {{ $t('粘贴') }}</div>
                    </div>
                </div> -->
                <div class="mb-20">
                <!-- <div class="mb-20">
                    <div class="font-28 textColor">{{ $t('充币数量') }}</div>
                    <div>
                        <input v-model="amount" class="input-view w-full font-28 textColor inputBackground"
                            :placeholder="$t('请输入充币数量')" />
                    </div>
                </div>
                </div> -->
                <div>
                    <div class="font-28 textColor">{{ $t('链名称') }}</div>
                    <div class="flex ">
@@ -59,8 +59,8 @@
                <div class="pl-30 pr-30">
                    <!-- <div class="font-30 mb-27 textColor">{{ $t('重要提示') }}</div> -->
                    <!-- <div class="font-28 text-grey" v-html="tip"></div> -->
                    <button class="btnMain text-white next-btn font-30 rounded-lg" @click="nextBtn">{{ $t('下一步')
                        }}</button>
                    <!-- <button class="btnMain text-white next-btn font-30 rounded-lg" @click="nextBtn">{{ $t('下一步')
                        }}</button> -->
                </div>
            </div>
        </div>

 src/views/homePage/components/head.vue

@@ -7,7 +7,12 @@
            <van-field v-model="iValue" :placeholder="$t('请输入关键词搜寻')" style="background-color: #F7F7F7;padding: 0 1rem;"
                @input="emit('search', iValue)" />
        </div>
        <div class="scan"><img src="@/assets/image/assets-center/language.png" alt="" @click="onRoute('/language')"></div>
        <div class="scan"><img src="@/assets/image/assets-center/language.png" alt="" @click="onRoute('/language')">
        </div>
        
        <!-- <div class="" @click="store.commit('vant/SET_THEME', 'dark')">切换1</div>
        <div class="" @click="store.commit('vant/SET_THEME', 'light')">切换2</div> -->

        <!-- <div class="gift"><img src="@/assets/imgs/home/gift.png" alt=""></div>
        <div class="scan"><img src="@/assets/imgs/home/scan.png" alt=""></div>
        <div class="instruction"><img src="@/assets/imgs/home/instruction.png" alt=""></div> -->
@@ -18,6 +23,7 @@
import { useRouter } from 'vue-router';
import { useI18n } from "vue-i18n";
import { ref } from 'vue';
import store from '@/store/store'

const { t } = useI18n()
const router = useRouter()
@@ -28,8 +34,8 @@

const iValue = ref('')
const emit = defineEmits(['search'])
</script>

</script>

<style lang="scss" scoped>
.head {

 vite.config.js

@@ -7,6 +7,7 @@
import { visualizer } from 'rollup-plugin-visualizer'
import legacy from '@vitejs/plugin-legacy';

const scss_path = `@/assets/theme/index.scss`
const isVisualizer = process.env.VISUALIZER === 'show'
export default defineConfig({
  base: '',  //H5打包用
@@ -26,6 +27,7 @@
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/css/variable.scss";`
        // additionalData: `@import "@/assets/css/variable.scss";@import "${scss_path}";`
      },
    }
  },