文章目录

• • 若依框架新增自定义主题风格
  • • 实现结果
    • 实现步骤
    • • 默认主题的设置
      • 布局设置
      • • 图标文件
        • 布局组件
        • 准备CSS变量
        • 对状态管理库中的主题名称进行匹配
        • • logo图标组件
          • 左侧导航栏菜单组件
          • 顶部导航栏组件
          • 炫彩主题
          • • 实现结果
            • 实现步骤
            • • 布局设置
              • • 布局组件
                • 其他
                • • 展示内容的路由出口
                  • 布局设置-开启topNav后，顶部展示的组件
                  • 打开页面切换的TagesViews

                    若依框架新增自定义主题风格

                    实现结果

                    实现步骤

                    默认主题的设置

                    文件位置：src/settings.js

                    export default {  // ...  /**   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light，蓝色主题theme-blue，炫彩主题theme-shine   */  sideTheme: 'theme-blue',  // ...}

                    布局设置

                    图标文件

                    文件位置：src/assets/images/blue.svg

                    复制同级的 light.svg 修改名称即可，将两个颜色替换为：#409eff

                    布局组件

                    文件位置：src/layout/components/Settings/index.vue

                    template模板中添加控件如下

                    新增一个主题风格选项，主要注意的是handleTheme里面的传参（后面会用到）和img的src图片，例如实例中的blue.svg

                    准备CSS变量

                    文件位置：src/assets/styles/variables.module.scss

                    // 默认菜单主题风格$base-menu-blue-color: rgba(0, 0, 0, 0.7);$base-menu-blue-background: #ffffff;$base-logo-blue-title-color: #ffffff;$base-menu-shine-color: #ffffff;$base-menu-shine-background: rgba(0, 0, 0, 0);$base-logo-shine-title-color: #ffffff;// ...// 顶部菜单主题风格$base-navbar-color: #999093;$base-navbar-icon-color: #5a5e66;$base-navbar-background: #ffffff;$base-navbar-blue-color: #ffffff;$base-navbar-blue-background: #409eff;$base-navbar-shine-color: #ffffff;$base-navbar-shine-background: rgba(0, 0, 0, 0);// ...:export {menuBlueColor: $base-menu-blue-color;menuBlueBackground: $base-menu-blue-background;logoBlueTitleColor: $base-logo-blue-title-color;menuShineColor: $base-menu-shine-color;menuShineBackground: $base-menu-shine-background;logoShineTitleColor: $base-logo-shine-title-color;navbarColor: $base-navbar-color;navbarIconColor: $base-navbar-icon-color;navbarBlueColor: $base-navbar-blue-color;navbarShineColor: $base-navbar-shine-color;navbarBackground: $base-navbar-background;navbarBlueBackground: $base-navbar-blue-background;navbarShineBackground: $base-navbar-shine-background;    // ...}

                    同级文件：sidebar.scss

                    左侧menu菜单的背景色和悬停样式

                    //新增样式，大概在112行& .theme-blue .nest-menu .el-sub-menu > .el-sub-menu__title,& .theme-blue .el-sub-menu .el-menu-item {  background-color: $base-menu-blue-background !important;  &:hover {    color: $base-navbar-blue-color;    background-color: $base-navbar-blue-background !important;  }}

                    对状态管理库中的主题名称进行匹配

                    JS核心内容如下，若没有需手动添加。

                    import variables from '@/assets/styles/variables.module.scss'import useSettingsStore from '@/store/modules/settings'const settingsStore = useSettingsStore();const sideTheme = computed(() => settingsStore.sideTheme);

                    logo图标组件

                    文件位置：src/layout/components/Sidebar/Logo.vue

                    主要修改几个动态的style

                                        
                              {{ title }}
                                        
                              {{ title }}
                                

                    左侧导航栏菜单组件

                    文件位置：src/layout/components/Sidebar/index.vue

                    样式文件专门对该组件进行了修改：src/assets/styles/sidebar.scss，若对侧边栏进行修改实现不了时，可查看是否是这里的问题，里面用了好多!important定义样式。

                    顶部导航栏组件

                    文件位置：src/layout/components/Navbar.vue

                    添加了一个动态style，

                    头像右边的el-icon组件，添加了color属性

                    该文件下没有使用过主题名称匹配，需手动引入

                    该组件还引用了一些子组件，都需要对主题名称进行匹配

                    ---

                    针对组件中使用到的svg-icon图标组件，修改如下：

                    组件都在src/components目录下，以文档地址图标为例，其他类似。

                            import variables from '@/assets/styles/variables.module.scss'import useSettingsStore from '@/store/modules/settings'const settingsStore = useSettingsStore();const sideTheme = computed(() => settingsStore.sideTheme);// ...

                    ---

                    控制左侧菜单栏收起展开的icon图标

                    文件位置：src/components/Hamburger/index.vue

                    给 svg 图标添加 fill 属性。