若依VUE前后分离版本自定义主题风格

1.效果展示

2.操作步骤

2.1修改Navbar头部背景颜色

文件路径：src\layout\components\Navbar.vue
修改内容：设置头部背影颜色及右侧图标颜色

2.2 修改左侧图标颜色

文件路径：src\components\Hamburger\index.vue

<template>
  <div style="padding: 1px 15px;" @click="toggleClick">
    <i class="el-icon-s-fold hamburger" :class="{'is-active':isActive}" ></i>
  </div>
</template>

.hamburger {
   
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  color: #FFFFFF;
  font-size: 20px;
}

2.3添加自定义主题风格

文件路径：src\layout\components\Settings\index.vue
新增一个主题风格选项，主要注意的是handleTheme里面的传参（后面会用到）和img的src图片，例如实例中的blue.svg

            <!--自定义主题风格-->
            <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-blue')">
              <img src="@/assets/images/blue.svg" alt="dark">
              <div v-if="sideTheme === 'theme-blue'" class="setting-drawer-block-checbox-selectIcon"
                   style="display: block;">
                <i aria-label="图标: check" class="anticon anticon-check">
                  <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme"
                       aria-hidden="true" focusable="false" class="">
                    <path
                      d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
                  </svg>
                </i>
              </div>
            </div>

静态资源svg图片代码 放在src\assets\images 目录下

<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink