项目地址

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. .NET Core项目部署到Windows系统Docker

    1.新建一个ASP.NET Core Web应用(模型-视图-控制器) 2. 项目启动Docker.Docker OS选择Windows 3.系统默认的dockerfile文件如下 #See http ...

  2. SpringCloud GateWay网关（入门）

    1.介绍 强烈推荐,看官网文档 Spring Cloud Gateway ①简介 Cloud全家桶里有个重要组件:网关 SpringCloud Gateway基于WebFlux框架 WebFlux底层 ...

  3. PCL PointCloud类型介绍

    1. PCL PointCloud 类型介绍 在 PCL 中,PointT 是基本的点的表示形式,包括 PointXYZ.PointXYZRGB.Normal 等,而 PointCloud 则是存储点 ...

  4. JumpServer(v2.28.6) 堡垒机常见问题

    JumpServer 各组件查询日志方法 # 默认持久化目录 /data/jumpserver ls -al /data/jumpserver/core/logs ls -al /data/jumps ...

  5. PostgreSQL 绑定变量浅析

    今天我们要探讨的是 custom执行计划和通用执行计划.这一技术在 Oracle中被称为绑定变量窥视.但 Postgresql中并没有这样的定义,更严格地说,Postgresql叫做custom执行计 ...

  6. Python Socket 基础多用户编程

    简介   写下这篇小记的原因是想记录一下自己学习Python Socket编程的心路历程.之前在中专的时间学过一些基础的Socket编程,知道了一些比较基础的内容比如基础的socket.bind()类 ...

  7. ASP.NET Core - 配置系统之配置读取

    一个应用要运行起来,往往需要读取很多的预设好的配置信息,根据约定好的信息或方式执行一定的行为. 配置的本质就是软件运行的参数,在一个软件实现中需要的参数非常多,如果我们以 Hard Code(硬编码) ...

  8. C++ cannot bind non-const lvalue reference of type ‘Dog&’ to an rvalue of type ‘Dog’

    void function(Dog & d){ /************** } 调用这个函数,如果传参一个右值对象,临时对象,则会出现这个问题 一个临时对象的引用,这怎么想都不合理 从该函 ...

  9. go常见的坑

    1. for循环中使用短变量声明初始值 案例1: type Data struct { d *int } func main() { list := make([]Data, 0) for i := ...

  10. 解决用flex布局时内容溢出的问题

    1,2正常现象如下: 2,点击折叠图标 再点折叠 无图标了 解决:flex:1,width:0 就可以了