全网最详细的vue2实现暗黑模式(深色主题与浅色主题切换)入门级即可学会@非常简单

vue2实现暗黑模式【深色与浅色】

水香木鱼

3229人浏览 · 2023-12-25 19:20:42

水香木鱼 · 2023-12-25 19:20:42 发布

一、文章引导

二、博主简介

🌏博客首页： 水香木鱼
📑文章摘要：暗黑模式 深色主题与浅色主题
💌春波寄语：故木秀于林，风必摧之；堆出于岸，流必湍之；行高于人，众必非之。

三、文章内容

本教程用于vue脚手架【适用于scss 或者 less编译】

(1)、创建全局主题样式与`Element`组件库自定义样式修改

在这里插入图片描述
创建theme.css文件

html[data-theme='dark'] {
    --theme-color: #9999FF;
    --background-color: #232323;
    --body-color: #2b2b2b;
    --text-color: #909399;
    --text-color1: #fff;
    --text-color2: #c5bdbd;
    --border-line: #414243;
    --header-back-color: rgb(15, 15, 15);
    --article-color: rgb(153, 153, 153);
    --box-title_color: #BDBDBD;
    --text-color3: #303030;
    --comment-box: #303030;
    --im-user-box-backgroudColor: #FF80AB;
    --im-box-backgroudColor: #9CCC65;
    --im-backgroudColor: #323644;
    --hover-color: #414349;
    --tips-backgroud-color: #414349;
    --article-structure-backcolor: #606266;
    --friend-tip-color: #606266;
    --article-srect-background: repeating-linear-gradient(145deg, #000, #000 15px, #303133 0, #303133 25px);
    --say-background: #303133;
    --footer-background-color: #232323e0;
    --forum-background-color: #303133;
    --article-table-back-color: #000;
    --article-table-border-color: #303133;
}

:root {
    --theme-color: #f56c6c;
    --background-color: #fff;
    --body-color: linear-gradient(90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1));
    --text-color: #000;
    --text-color1: #272222;
    --text-color2: #c5bdbd;
    --border-line: #e4e7ed;
    --header-back-color: hsla(0, 0%, 100%, .65);
    --article-color: #303133;
    --box-title_color: #333333;
    --text-color3: #f2f6fc;
    --comment-box: #f5f5f5;
    --im-user-box-backgroudColor: #1DE9B6;
    --im-box-backgroudColor: #a6c6f7;
    --im-backgroudColor: #dcdfe6;
    --hover-color: #dcdfe6;
    --tips-backgroud-color: #ecf8ff;
    --article-structure-backcolor: #ecf5ff;
    --friend-tip-color: #f5f5f5;
    --article-srect-background: repeating-linear-gradient(145deg, #f2f6fc, #f2f6fc 15px, #fff 0, #fff 25px);
    --say-background: #f7f7f7;
    --footer-background-color: rgba(255, 255, 255, 0.8);
    --forum-background-color: #f2f3f5;
    --article-table-border-color: #fffdf9;
    --article-table-back-color: #fff3e0;
}

创建index.css文件（组件库自定义样式修改）

* {
    padding: 0;
    margin: 0;
    font-family: "font";
}

.el-tabs__nav-scroll {
    overflow-x: scroll !important;

    &::-webkit-scrollbar {
        display: none !important;
    }
}

@font-face {
    font-family: 'font';
    src: url('./assets/font/2.woff2');
}



.el-upload--picture-card {
    background-color: var(--background-color) !important;
}

.el-dropdown-menu {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    border: 0 !important;


    .popper__arrow::after {
        border-bottom-color: var(--background-color) !important;
    }

    .el-dropdown-menu__item {
        transition: transform .35s !important;


    }

    .el-dropdown-menu__item:hover {
        background-color: rgb(0, 0, 0, 0) !important;
        transform: translateX(6px);
    }
}

/* 修改滚动条宽度 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* 修改滚动条颜色 */
::-webkit-scrollbar-thumb {
    background-color: #1890ff;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 100%, transparent 100%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}

/* 修改滚动条轨道颜色 */
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 5px;
}

::selection {
    color: #fff;
    background-color: var(--theme-color);
}

.el-card__body {
    padding: 0 !important;
}

.el-card {
    border: 0 !important;
    border-radius: 5px;
}

.el-dialog {
    background-color: var(--background-color) !important;
    color: var(--article-color) !important;
    border-radius: 10px;

    .el-dialog__title {
        color: var(--article-color) !important;
    }
}

.el-input__inner {
    background-color: var(--background-color) !important;
    border-color: var(--border-line) !important;

    &:focus {
        border-color: var(--theme-color) !important;
    }
}

.box-shadow-top {
    transition: box-shadow .35s, transform .35s !important;

    &:hover {
        box-shadow: 1px 1px 5px 5px rgba(49, 211, 162, 0.322) !important;
        transform: translateY(-2px) !important;
    }
}

.box-shadow {
    transition: box-shadow .35s;

    &:hover {
        box-shadow: 1px 1px 5px 5px rgba(49, 211, 162, 0.322) !important;
    }
}

.container {
    display: flex;
    justify-content: center;
}

.xiahuaxian {
    background: linear-gradient(to right, #9459c5, #4cbec2) no-repeat right bottom;
    background-size: 0px 2px;
    transition: background-size .35s;

    &:hover {
        background-size: 100% 2px;
        background-position: left bottom;
    }
}

.tag-item {
    display: inline-block;
    border-radius: 5px;
    padding: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    color: #fff;
    transition: all .3s;

    &:hover {
        border-radius: 0;
        background-color: #000 !important;
    }
}

@media screen and (max-width: 1118px) {
    .el-dialog {
        width: 90% !important;
    }
}

.point {
    cursor: pointer;
}

(2)、安装vuex缓存工具

npm i vuex-persistedstate@4.1.0 --save

(3)、store中定义全局状态

index.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = {
  skin: "shallow", //shallow浅色模式  //deep深色模式
};
const mutations = {
  setSkin(state, newValue) {
    state.skin = newValue;
  },
};
export default new Vuex.Store({
  state,
  mutations,
});

(4)、App.vue中设置状态

<script>
  mounted() {
    /*主题切换*/ 
    let theme = sessionStorage.getItem("theme");
    if (theme == null) {
      theme = "light";
    }
    document.documentElement.dataset.theme = theme;
    /*END*/ 
  },
</script>