Home > Web Front-end > Vue.js > How to implement dark mode based on vue3 and element-plus

How to implement dark mode based on vue3 and element-plus

WBOY
Release: 2023-05-13 18:37:06
forward
2575 people have browsed it

    1. Basic use

    Because by adding the dark class to the html tag, you can switch by yourself

    But in order to facilitate switching and further customization, it is officially recommended to use useDark | VueUse

    Example: Below, a dark mode switch component is created based on the element-plus switch component, and it is placed in the menu bar. You can switch modes easily

    <script setup>
    import { useDark, useToggle } from &#39;@vueuse/core&#39;
    
    const isDark = useDark()
    const toggleDark = useToggle(isDark)
    
    </script>
    
    <template>
      <span @click.stop="toggleDark()">暗黑模式</span>
      <el-switch size="small" v-model="isDark"/>
    </template>
    Copy after login

    2. Custom dark styles

    In dark mode, once non-dark styles are mixed in, it will be very ugly and dazzling. Some custom-style dark modes Adaptation is indispensable

    1. Dark style

    element-plus defines some variables in dark mode to meet the dark mode adaptation project of its own style

    Styles with colors set in cannot be automatically adapted. We need to manually write a set of dark styles to cover

    html.dark {
      .my-dialog {
        background-color: #304156;
        color: #bfcbd9;
      }
    }
    Copy after login

    2. Variable coverage

    Some repeatedly used styles can be defined as Variable reuse, so that you can adapt to the dark mode through simple variable coverage

    :root {
      --theme-color: #409EFF;
    }
    html.dark {
      --theme-color: #135fad;
    }
    .demo-class {background-color:var(--theme-color)}
    .demo-class-one button {color:var(--theme-color)}
    Copy after login

    3. element-plus variable coverage

    If you want to change the default dark style of element-plus, you can Define it again and overwrite it. For correct coverage, the following styles need to be introduced after introducing the element-plus style

    src/styles/demo.scss:

    html.dark {
      /* 覆盖element-plus默认深色背景色 */
      --el-bg-color: #626aef;
      .el-button--primary {
        --el-button-text-color: #ededed;
      }
    }
    Copy after login

    main.js:

    import &#39;element-plus/dist/index.css&#39;
    import &#39;./styles/demo.scss&#39;
    Copy after login

    4. scss variables

    scss defines variables and introduces them into other styles. Combined with css variables, dark mode adaptation can also be easily realized

    src/styles/variables.scss:

    $menuBg:var(--menuBg);
    $menuActiveText:var(--themeColor);
    $btnColor: var(--themeColor);
    Copy after login

    src/styles/index.scss:

    @import &#39;./variables.scss&#39;;
    
    :root {
      --themeColor: #409EFF;
      --menuBg: #304156;
    }
    html.dark {
      --themeColor: #46ACFF;
      --menuBg: #263445;
    }
    Copy after login

    main .js:

    import &#39;./styles/index.scss&#39;
    Copy after login

    Having said that, if you just use scss variables as css variables, then why not use css variables directly? Moreover, css variables can also be changed using js

    3. Pictures in dark mode

    One line of code solution found on CodePen Dark mode image filter

    In fact, the brightness and saturation of the image are set by using CSS3 filter:

    filter: brightness(0.8) saturate(1.25);

    In dark mode When displaying pictures, some parts will be brighter and dazzling. You can use CSS filters to set the brightness and saturation of images

    In addition to images, you can add the class dark-img-bg or other css selectors to containers that use images as background images

    html.dark {
      img,
      .dark-img-bg {filter:brightness(0.8) saturate(1.25)}
    }
    Copy after login

    The above is the detailed content of How to implement dark mode based on vue3 and element-plus. For more information, please follow other related articles on the PHP Chinese website!

    Related labels:
    source:yisu.com
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template