项目地址

vite.config.ts 插件和vite配置

import { defineConfig } from "vite";

import vue from "@vitejs/plugin-vue";

import path from "path";

import vueJsx from "@vitejs/plugin-vue-jsx";

import AutoImport from "unplugin-auto-import/vite";

import Pages from "vite-plugin-pages";

import Components from "unplugin-vue-components/vite";

import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

import ElementPlus from "unplugin-element-plus/vite";

import Inspect from "vite-plugin-inspect";

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [

    vue(),

    vueJsx({

      // options are passed on to @vue/babel-plugin-jsx

    }),

    AutoImport({

      imports: ["vue", "vue-router"],

      dts: "./auto-imports.d.ts",

      eslintrc: {

        enabled: true, // Default `false`

        filepath: "./.eslintrc-auto-import.json", // Default `./.eslintrc-auto-import.json`

        globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')

      },

      resolvers: [ElementPlusResolver({ importStyle: "sass" })],

    }),

    Components({

      resolvers: [ElementPlusResolver({ importStyle: "sass" })],

      dts: true,

      include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/],

      //默认自动导入src/components下的组件

    }),

    Pages({

     ...

    }),

    ElementPlus({

      useSource: true,

    }),

    Inspect(),

  ],

  resolve: {

    alias: {

      "@": "/src",

      "~/": `${path.resolve(__dirname, "src")}/`,

    },

  },

  css: {

    preprocessorOptions: {

      scss: {

        additionalData: `@use "~/styles/element/index.scss" as *;`,

      },

    },

  },

});

styles/element/index.scss 修改变量的文件

/** @format */

@use "sass:map";

$--colors: (

  "primary": (

    "base": #93040b,

  ),

);

@forward "element-plus/theme-chalk/src/common/var.scss" with (

  $colors: $--colors,

  $carousel: (

    "indicator-width": 6px,

    "indicator-height": 6px,

    "indicator-padding-horizontal": 4px,

    "indicator-padding-vertical": 12px,

    "indicator-out-color": map.get($--colors, "primary", "base"),

  )

);

vite-env.d.ts

/// <reference types="vite/client" />

/// <reference types="vite-plugin-pages/client" />

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

配合媒体查询，检测用户是否设置了系统主题，重写:root下的css变量

:root {
　　color-scheme: light dark;
}
/* 监听操作系统主题模式 */
@media (prefers-color-scheme: dark) {
　　body {
　　　　background-color: var(--color-background);
　　}
}

@media (prefers-color-scheme: light) {
　　body {
　　　　background-color: var(--white-color-background);
　　}
}

使用媒体查询，可以查看当前是否是暗色主题：

window.matchMedia("(prefers-color-scheme: dark)");

以下是一个跟随系统色/改变系统色/自定义主题色的简单例子

<style>

        * {

            margin: 0;

            padding: 0;

            text-align: center;

        }

        :root {

            color-scheme: dark light;

        }

        @media (prefers-color-scheme: dark) {

            :root {

                color-scheme: dark;

                --bg-color: #414141;

                --border-color: #000000;

                --hightlight-color: green;

                /*

                修改:checked 的选中颜色

                默认是 `auto`，系统高亮色　　　　　

                注释掉此行，选中时的颜色就是你定义的系统高亮色

                */

                accent-color: var(--hightlight-color);

            }

　　　　　　　　

            :focus {

                outline: auto 2px green;

            }

        }

        @media (prefers-color-scheme: light) {

            :root {

                --bg-color: #ffffff;

            }

        }

        body.beauty {

            --bg-color: #cf23ff;

        }

    </style>

</head>

<body class="" style="height:100vh;background-color: var(--bg-color);">

    <input type="radio" name="" id="">

    <input type="checkbox" name="" id="">

    <input type="text" name="" id="">

</body>

在element-plus项目中，需要覆盖变量

@media (prefers-color-scheme: dark) {

  html:root {

    color-scheme: dark;

    --el-text-color-primary: #ffffff;

  }

}

@media (prefers-color-scheme: light) {

  html:root {

    color-scheme: light;

    --el-color-black: #333333;

  }

}

element-plus官网给的方案是在html上添加dark类名，在项目中创建个响应变量去修改css变量，可以添加很多种配色方案吧。

document.querySelector(':root').computedStyleMap().get("--el-text-color-primary")

补充element-plus网站的代码

 (() => {

        const e = localStorage.getItem("el-theme-appearance");

        (e === "auto"

          ? window.matchMedia("(prefers-color-scheme: dark)").matches

          : e === "dark") && document.documentElement.classList.add("dark");

      })();

zhangxinyu推荐的网站换肤的最佳实现

利用link标签 rel属性。特点就是，预加载了其他主题，实现无缝切换。

vite实现element-plus按需配置，自定义主题和读取/修改系统主题色的更多相关文章

  1. 1.5.4、CDH 搭建Hadoop在安装之前(定制安装解决方案---配置自定义Java主目录位置)

    配置自定义Java主目录位置 注意: Cloudera强烈建议安装JDK/ usr / java / jdk-version,允许Cloudera Manager自动检测并使用正确的JDK版本.如果在 ...

  2. .NET 跨平台RPC框架DotNettyRPC Web后台快速开发框架（.NET Core） EasyWcf------无需配置，无需引用，动态绑定，轻松使用 C# .NET 0配置使用Wcf(半成品) C# .NET Socket 简单实用框架 C# .NET 0命令行安装Windows服务程序

    .NET 跨平台RPC框架DotNettyRPC   DotNettyRPC 1.简介 DotNettyRPC是一个基于DotNetty的跨平台RPC框架,支持.NET45以及.NET Standar ...

  3. Web API配置自定义路由

    默认访问Web API时,是无需指定method名.它会按照默认的路由来访问.如果你的Web API中出现有方法重载时,也许得配置自定义路由: 标记1为自定义路由,标记2为默认路由,需要把自定义路由排 ...

  4. 阿里云容器服务--配置自定义路由服务应对DDOS攻击

    阿里云容器服务--配置自定义路由服务应对DDOS攻击 摘要: 容器服务中,除了slb之外,自定义路由服务(基于HAProxy)也可以作为DDOS攻击的一道防线,本文阐述了几种方法来应对普通规模的DDO ...

  5. ThinkPHP框架配置自定义的模板变量（十）

    原文:ThinkPHP框架配置自定义的模板变量(十) 模板替换(手册有详细介绍对应的目录) __PUBLIC__:会被替换成当前网站的公共目录 通常是 /Public/ __ROOT__: 会替换成当 ...

  6. IK-Analyzer(5.3.1)动态配置自定义词典

    参考文献:http://blog.csdn.net/fatpanda/article/details/37911079 jar包: IK-Analyzer-extra-5.3.1.jar IKAnal ...

  7. springboot2.0 JPA配置自定义repository，并作为基类BaseRepository使用

    springboot2.0 JPA配置自定义repository,并作为基类BaseRepository使用 原文链接:https://www.cnblogs.com/blog5277/p/10661 ...

  8. 使用PHPStorm 配置自定义的Apache与PHP环境

    使用PHPStorm 配置自定义的Apache与PHP环境之一   关于phpstorm配置php开发环境,大多数资料都是直接推荐安装wapmserver.而对于如何配置自定义的PHP环境和Apach ...

  9. SpringBoot2.x过滤器Filter和使用Servlet3.0配置自定义Filter实战

    补充:SpringBoot启动日志 1.深入SpringBoot2.x过滤器Filter和使用Servlet3.0配置自定义Filter实战(核心知识) 简介:讲解SpringBoot里面Filter ...

  10. 【转】SonarQube配置自定义的CheckStyle代码规则

    原文地址:https://www.jianshu.com/p/ff1d800885ce 惯例第一步肯定是SonarQube的安装与运行配置了,但这部分不在本文主题内,网上一搜一大把,这里就不讲了,大家 ...

随机推荐

  1. 线程基础知识06 synchronized---使用javap查看相关指令

    1 示例-简单同步代码块 public class SychTest9 { public static void main(String[] args) { Object o = new Object ...

  2. javascript的防抖与节流

    一.节流 一段时间内只能触发一次,如果这段时间内触发多次事件,只有第一次生效会触发回调函数,一段时间过后才能再次触发(一定时间内只执行第一次) 应用场景 1.鼠标连续不断地触发某事件(如点击),只在单 ...

  3. 三分钟实战手写Spring Boot Starter

    1 背景 在平时的开发中,开发的同学会把一些通用的方法,写成一个工具类,例如日期转换的,JSON转换的等等,方便业务后续调用,使代码更容易维护. 如果一些更常用的方法,例如鉴权的,加解密的等等,几乎每 ...

  4. KMP 算法(Knuth–Morris–Pratt algorithm)的基本思想

    KMP 算法(Knuth–Morris–Pratt algorithm)的基本思想 阅读本文之前,您最好能够了解 KMP 算法解决的是什么问题,最好能用暴力方式(Brute Force)解决一下该问题 ...

  5. BUUCTF-[SUCTF2019]EasySQL

    [SUCTF2019]EasySQL 这个连闭合都测试不出来,就有点无从下手了. 额,随手输了一个1;show tables;出来了表名.一通操作之后,点开了别人的wp,学习了一波. 然后知道了题目中 ...

  6. JZOJ 2020.02.25【NOIP提高组】模拟A 组

    闲话 难度似乎比之前的简单了一些 但是难的题还是很难(我太菜了) 总结 针对三个题,先罗列正解所涉及的算法:字符哈希,组合数学,点分治 最后一个不会 组合数学?还好吧 字符哈希? 放在 \(T1\) ...

  7. Canvas：绘制圆形

    函数 arc(x, y, radius, startAngle, endAngle, counterclockwise) 参数名 描述 x.y 圆心坐标轴 radius 圆的半径 startAngle ...

  8. Postgresql模板数据库之template1 和 template0

    一.简介 template1和template0是PostgreSQL的模板数据库.所谓模板数据库就是创建新database时,PostgreSQL会基于模板数据库制作一份副本,其中会包含所有的数据库 ...

  9. Python实战项目5-Git远程仓库/分支合并/冲突解决

    Git分支 为什么要有分支 可以保证主分支的版本都是可以查看的版本 我们都在开发分支开发,开发完成 合并代码 分支操作 分支查看 git branch 分支创建 git branch 分支名 分支切换 ...

  10. K8S 实用工具之一 - 如何合并多个 kubeconfig？

    开篇 引言: 磨刀不误砍柴工 工欲善其事必先利其器 K8S 集群规模,有的公司倾向于少量大规模 K8S 集群,也有的公司会倾向于大量小规模的 K8S 集群. 如果是第二种情况,是否有一个简单的 kub ...