文章目录

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

  
    <svg
      :class="{'is-active':isActive}"
      :fill="sideTheme === 'theme-dark' || sideTheme === 'theme-light' ? variables.navbarIconColor : variables.navbarBlueColor"
      class="hamburger"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
    >
      
    
  



import variables from '@/assets/styles/variables.module.scss'
import useSettingsStore from '@/store/modules/settings'

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
// ...

最后，是对面包屑导航的处理

对span标签 a标签，添加动态style

  
    
      
        
          {{ item.meta.title }}
        {{ item.meta.title }}
      
    
  


import variables from '@/assets/styles/variables.module.scss'
import useSettingsStore from '@/store/modules/settings'

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
// ...

炫彩主题

炫彩主题与自定义主题方法类似。只是将他们的背景色去掉。

这里提供一种添加炫彩主题的思路

实现结果

实现步骤

布局设置

找一张图片，放入位置：src/assets/images/theme-bg.jpg

布局组件

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

为了样式美观，给img标签添加了style属性，svg图标填充颜色设为白色：fill=’#ffffff’

炫彩主题需要背景色透明，不能实现固定header

  固定 Header
  
    
    
  

核心代码：

页面加载时向body元素中插入一个img元素，切换主题时控制img元素的显示/隐藏。

handleTheme()是主题切换时触发的函数。

import exampleImg from '/img/96/theme-bg.jpg'

// ...
// 在body下插入一个img元素，作为炫彩主题的背景
const body = document.querySelector('body');
const img = document.createElement('img');
img.setAttribute('src', exampleImg);
img.style.minWidth = '100%';
img.style.minHeight = '100%';
img.style.position = 'fixed';
img.style.left = '0';
img.style.top = '0';
img.style.zIndex = '-1';
// 获取当前主题名称，若当不是炫彩主题，将其隐藏
if (settingsStore.sideTheme !== 'theme-shine') {
  img.style.display = 'none';
}
body.appendChild(img);
function handleTheme(val) {
  // 选中炫彩主题，并且背景图为隐藏状态
  if (val == 'theme-shine' && img.style.display == 'none') {
    img.style.display = 'inline-block';
    // 炫彩主题需要背景色透明，不能实现固定header
    fixedHeader.value = false;
  } else {
    img.style.display = 'none';
  }
  settingsStore.changeSetting({ key: 'sideTheme', value: val })
  sideTheme.value = val;
}
// ...

其他

剩下的修改的地方与上面类似。

下面是炫彩主题特有的：

展示内容的路由出口

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

添加动态style属性

样式修改如下：主要是让.app-main控件看着更舒服

  

    
  



import useSettingsStore from '@/store/modules/settings'

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);



.app-main {
  border-radius: 5px;
  margin: 5px;
  background-color: rgba(255, 255, 255, 1);
  /* 50= navbar  50  */
  // min-height: calc(100vh - 50px);
  // width: 100%;
  position: relative;
  overflow: hidden;
}

.fixed-header+.app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    // min-height: calc(100vh - 84px);
  }

  .fixed-header+.app-main {
    padding-top: 84px;
  }
}

布局设置-开启topNav后，顶部展示的组件

组件位置：src/components/TopNav/index.vue

添加两个动态:background-color属性

（这里改的比较粗糙，用到的时候再详细修改）

  
    

    
     visibleNumber">
      更多菜单
      
    
  

打开页面切换的TagesViews

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

添加动态style属性。

补充非显示页面的标签样式

// ...
import variables from '@/assets/styles/variables.module.scss'

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);


// ...

function activeStyle(tag) {
  if (!isActive(tag)) return {
    'color': sideTheme.value === 'theme-shine' ? variables.navbarShineColor : '',
    'background-color': sideTheme.value === 'theme-shine' ? variables.navbarShineBackground : ''
  };
  return {
    "background-color": theme.value,
    "border-color": theme.value
  };
}

好了，圆满结束。