项目地址

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. 2.4.rpx单位有内置的视图容器组件

    所有的视图组件,包括view.swiper等,本身不显示任何可视化元素.它们的用途都是为了包裹其他真正显示的组件. # view 视图容器. 它类似于传统html中的div,用于包裹各种元素内容. 如 ...

  2. cnpm : 无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。所在位置 行:1 字符: 1

    出现问题原因: 使用vscode终端powershell控制台查看cnpm版本或者运行cnpm的相关命令时提示如标题错误(cmd控制台提示:'cnpm' 不是内部或外部命令,也不是可运行的程序或批处理 ...

  3. LoginServlet类

    import cn.itcast.dao.UserDao; import cn.itcast.domain.User; import javax.servlet.ServletException; i ...

  4. JZOJ 5355. 【NOIP2017提高A组模拟9.9】保命

    题目 为了加快社会主义现代化,建设新农村,农夫约(Farmer Jo)决定给农庄做一些防火措施,保障自己.猫.奶牛的生命安全. 农夫约的农庄里有N+1 座建筑,排成了一排,编号为0-N.对于0 < ...

  5. Cobalt Strike 之：会话管理

    郑重声明: 本笔记编写目的只用于安全知识提升,并与更多人共享安全知识,切勿使用笔记中的技术进行违法活动,利用笔记中的技术造成的后果与作者本人无关.倡导维护网络安全人人有责,共同维护网络文明和谐. Co ...

  6. Layui 表单元素考到页面样式不生效

    表单元素必须要标记在表单里面(calss="layui-form") 例如: <div class="layui-form"> <input ...

  7. 操作系统复习（updating）

    操作系统复习(updating) 1.进程和线程的区别是什么? 1)调度:进程是操作系统资源分配的基本单位,而线程是处理器任务调度和执行的基本单位 2)拥有资源:不论是传统操作系统还是设有线程的操作系 ...

  8. PostgreSQL建立索引时，如何避免写数据锁定

    先介绍一下Postgresql的建索引语法: CREATE [ UNIQUE ] INDEX [ CONCURRENTLY ] [ name ] ON table [ USING method ] ( ...

  9. python中time模块的常用方法的转换关系图

    获取当前的时间戳 把时间戳转换成了时间的格式 获取时间 把时间格式数据转换为易识别的字符串 获取到表示时间的字符串,再转换为时间数据.

  10. postgreSQL开启数据库guid类型

    执行:create extension "uuid-ossp"; 即可使用:SELECT gen_random_uuid();或SELECT uuid_generate_v4()