项目地址

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. 我不想再传递 nameof 了

    有的时候抛出一个异常,我们需要知道是哪个方法抛出的异常.那么,我们可以通过传递 nameof 来获取调用者的方法名.但是,感觉很烦,每次都要传递 nameof.那么,有没有更好的方法呢? Caller ...

  2. P34_数据请求 - GET和POST请求

    网络数据请求 小程序中网络数据请求的限制 出于安全性方面的考虑,小程序官方对数据接口的请求做出了如下两个限制: 只能请求 HTTPS 类型的接口 必须将接口的域名添加到信任列表中 配置 request ...

  3. Docker部署Nacos自动停止运行

    1.现象 使用docker部署的Nacos在运行一段时间后,就自动停止运行了. 查看docker运行容器,nacos停止了 2.解决 因为是学生购买的轻量级服务器,所以配置很低,出现这种问题我默认是内 ...

  4. UBUNTU切换内核

    查询可更换内核的序号    gedit /boot/grub/grub.cfg查询已安装的内核和内核的序号.找到文件中的menuentry (图中在一大堆fi-else底下)menuentry底下还有 ...

  5. LG P4213【模板】杜教筛（Sum）

    \(\text{Problem}\) 求 \[\sum_{i=1}^n \varphi(i) \] 和 \[\sum_{i=1}^n \mu(i) \] \(1 \le n < 2^{31}\) ...

  6. Android中drawable和mipmap到底有什么区别

    欢迎通过我的个人博客来查看此文章 老项目代码中发现有的图片放到了drawable中, 有的图片放到了mipmap中, 开发时秉承哪个目录下文件多放哪里的原则, 偶尔有疑惑搜一搜文章, 看到了结论也就这 ...

  7. 钓鱼攻击之：Lnk 文件钓鱼

    钓鱼攻击之:Lnk 文件钓鱼 目录 钓鱼攻击之:Lnk 文件钓鱼 1 Lnk 钓鱼小试牛刀 2 Lnk 图标处理 3 进阶利用方式 3.1 PDF利用 3.2 txt利用,突破Lnk文件目标字符长度限 ...

  8. 轻量级CI/CD发布部署环境搭建及使用_01_基本介绍

    轻量级CI/CD发布部署环境搭建及使用_01_基本介绍 授人以鱼不如授人以渔,如果说的别人都没明白,说明自己实际也不是太明白 最终实现效果如图 1,选择相应环境下的项目,执行构建 注: web:vue ...

  9. LeetCode-2049 统计最高分的结点数

    来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/count-nodes-with-the-highest-score 题目描述 给你一棵根节点为 ...

  10. Spring cloud Sleuth 分布式链路跟踪

    在微服务框架种. 一个由客户端发起的请求在后端系统种会经过不同的服务节点来调用协同产生的最后的请求结果. 每一个前端请求都会形成一条复杂的分布式服务调用的链路.链路种出现任何一环出现高延时或者错误都会 ...