文章目录

• • 若依框架新增自定义主题风格
  • • 实现结果
    • 实现步骤
    • • 默认主题的设置
      • 布局设置
      • • 图标文件
        • 布局组件
        • 准备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 属性。