add DarkMode

LiuHao

2023-04-22 94f96181f3ccd439b4d4cad681d2c4d1739e6117

add DarkMode

 src/assets/styles/index.scss

@@ -26,6 +26,10 @@
  box-sizing: border-box;
}

html.dark .svg-icon, html.dark svg {
  fill: var(--el-text-color-regular);
}

#app {
  height: 100%;
}
@@ -200,4 +204,4 @@
    vertical-align: middle;
    margin-bottom: 10px;
  }
}
}

 src/assets/styles/ruoyi.scss

@@ -90,8 +90,8 @@
  .el-table__fixed-header-wrapper {
    th {
      word-break: break-word;
      background-color: #f8f8f9 !important;
      color: #515a6e;
      background-color: $table-header-bg !important;
      color: $table-header-text-color;
      height: 40px !important;
      font-size: 13px;
    }

 src/assets/styles/sidebar.scss

@@ -84,7 +84,7 @@
    .sub-menu-title-noDropdown,
    .el-sub-menu__title {
      &:hover {
        background-color: rgba(0, 0, 0, 0.06) !important;
        background-color: $base-sub-menu-title-hover !important;
      }
    }

@@ -211,7 +211,7 @@
  .el-menu-item {
    &:hover {
      // you can use $sub-menuHover
      background-color: rgba(0, 0, 0, 0.06) !important;
      background-color: $base-menu-hover !important;
    }
  }


 src/assets/styles/variables.module.scss

@@ -1,3 +1,38 @@
// 全局SCSS变量
:root {
  --menuBg: #304156;
  --menuColor: #bfcbd9;
  --menuActiveText: #f4f4f5;
  --menuHover: #263445;

  --subMenuBg: #1f2d3d;
  --subMenuActiveText: #f4f4f5;
  --subMenuHover: #001528;
  --subMenuTitleHover: #293444;

  --tableHeaderBg: #f8f8f9;
  --tableHeaderTextColor: #515a6e;
}
html.dark {
  --menuBg: #1d1e1f;
  --menuColor: #bfcbd9;
  --menuActiveText: #f4f4f5;
  --menuHover: #171819;

  --subMenuBg: #1d1e1f;
  --subMenuActiveText: #1d1e1f;
  --subMenuHover: #171819;
  --subMenuTitleHover: #171819;

  --tableHeaderBg: var(--el-bg-color);
  --tableHeaderTextColor: var(--el-text-color);

  // 覆盖ele 高亮当前行的标准暗色
  .el-tree-node__content {
    --el-color-primary-light-9: #262727;
  }
}

// base color
$blue: #324157;
$light-blue: #3a71a8;
@@ -9,32 +44,22 @@
$panGreen: #30b08f;

// 默认菜单主题风格
$base-menu-color: #bfcbd9;
$base-menu-color-active: #f4f4f5;
$base-menu-background: #304156;
$base-menu-color: var(--menuColor);
$base-menu-hover: var(--menuHover);
$base-menu-color-active: var(--menuActiveText);
$base-menu-background: var(--menuBg);
$base-logo-title-color: #ffffff;

$base-menu-light-color: rgba(0, 0, 0, 0.7);
$base-menu-light-background: #ffffff;
$base-logo-light-title-color: #001529;

$base-sub-menu-background: #1f2d3d;
$base-sub-menu-hover: #001528;

// 自定义暗色菜单风格
/**
$base-menu-color:hsla(0,0%,100%,.65);
$base-menu-color-active:#fff;
$base-menu-background:#001529;
$base-logo-title-color: #ffffff;

$base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff;
$base-logo-light-title-color: #001529;

$base-sub-menu-background:#000c17;
$base-sub-menu-hover:#001528;
*/
$base-sub-menu-background: var(--subMenuBg);
$base-sub-menu-hover: var(--subMenuHover);
$base-sub-menu-title-hover: var(--subMenuTitleHover);
// 表单头背景色和标题颜色
$table-header-bg: var(--tableHeaderBg);
$table-header-text-color: var(--tableHeaderTextColor);

$--color-primary: #409eff;
$--color-success: #67c23a;

 src/components/Pagination/index.vue

@@ -106,7 +106,6 @@

<style lang="scss" scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
  .el-pagination{
    float: v-bind(float);

 src/layout/components/Navbar.vue

@@ -181,7 +181,7 @@
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  //background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .hamburger-container {

 src/layout/components/Settings/index.vue

@@ -1,8 +1,7 @@
<template>
  <el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px" close-on-click-modal>
    <div class="setting-drawer-title">
      <h3 class="drawer-title">主题风格设置</h3>
    </div>
    <h3 class="drawer-title">主题风格设置</h3>

    <div class="setting-drawer-block-checbox">
      <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
        <img src="@/assets/images/dark.svg" alt="dark" />
@@ -35,6 +34,13 @@
        <el-color-picker v-model="theme" :predefine="predefineColors" @change="themeChange" />
      </span>
    </div>
    <div class="drawer-item">
      <span>深色模式</span>
      <span class="comp-style">
        <el-switch v-model="isDark" @change="toggleDark" class="drawer-switch" />
      </span>
    </div>

    <el-divider />

    <h3 class="drawer-title">系统布局配置</h3>
@@ -102,7 +108,15 @@
const storeSettings = computed(() => settingsStore);
const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);

/** 是否需要topnav */
// 是否暗黑模式
const isDark = useDark({
  storageKey: 'useDarkKey',
  valueDark: 'dark',
  valueLight: 'light',
});
const toggleDark = () => useToggle(isDark);

/** 是否需要topNav */
const topNav = computed({
    get: () => storeSettings.value.topNav,
    set: (val) => {
@@ -234,7 +248,6 @@
}

.drawer-item {
  color: rgba(0, 0, 0, 0.65);
  padding: 12px 0;
  font-size: 14px;


 src/layout/components/TagsView/index.vue

@@ -237,8 +237,8 @@
.tags-view-container {
  height: 34px;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #d8dce5;
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color-light);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
  .tags-view-wrapper {
    .tags-view-item {
@@ -247,13 +247,15 @@
      cursor: pointer;
      height: 26px;
      line-height: 26px;
      border: 1px solid #d8dce5;
      color: #495060;
      background: #fff;
      background-color: var(--el-bg-color);
      border: 1px solid var(--el-border-color-light);
      padding: 0 8px;
      font-size: 12px;
      margin-left: 5px;
      margin-top: 4px;
      &:hover {
        color: var(--el-color-primary);
      }
      &:first-of-type {
        margin-left: 15px;
      }
@@ -279,7 +281,7 @@
  }
  .contextmenu {
    margin: 0;
    background: #fff;
    background: var(--el-bg-color);
    z-index: 3000;
    position: absolute;
    list-style-type: none;