项目地址

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. PopClip使用教程图文详解 2022.12亲测有效

    PopClip简介 PopClip mac版是Macos上一款增强型复制粘贴工具,当你选中文字后,PopClip会自动弹出复制.剪切.粘贴.搜索等等操作,除了复制粘贴外,PopClip还提供了很多的扩 ...

  2. elasticsearch之日期类型有点怪

    一.Date类型简介 elasticsearch通过JSON格式来承载数据的,而JSON中是没有Date对应的数据类型的,但是elasticsearch可以通过以下三种方式处理JSON承载的Date数 ...

  3. python3中，len()、isalpha()、isspace()、isdigit()、isalnum()实例

    # 实例:使用while循环 import string s1 = input('请输入一个字符串:\n') letters = 0 space = 0 digit = 0 others = 0 i  ...

  4. Debug时使用热部署修改代码

    今晚Debug的时候,一些语句怎么也不能debug,F8步过以下跳好多行,看起来很烦人.原来是有些行无法进入debug断点. 是因为Debug之前Tomcat已经编译Class文件,当插入注释/修改代 ...

  5. clion添加ROS环境变量

    gedit ~/.local/share/applications/jetbrains-clion.desktop 修改 Exec="/home/cjn/soft-pack/clion-20 ...

  6. 删除resource中的图片后编译报错

    同僚的一篇文章是:https://www.cnblogs.com/jljxxf/archive/2012/08/19/2646937.html, 详细介绍了C#的Resources,其中关于删除资源这 ...

  7. ransac拟合

    链接:https://zhuanlan.zhihu.com/p/62238520 RANSAC简介 RANSAC(Random Sample Consensus,随机采样一致)算法是从一组含有&quo ...

  8. 【KAWAKO】MNN-1.2.0版本交叉编译遇到的错误与解决方法

    目录 在使用gcc-linaro-7.5.0-aarch64-linux-gnu.gcc-linaro-6.3.1-aarch64-linux-gnu交叉编译链对MNN1.2.0进行交叉编译的过程中, ...

  9. JZOJ 4308.长寿花

    题面 思路 这种题当然要 \(dp\) 啦 设 \(g_{i,j}\) 表示前 \(i\) 个位置用指定的 \(j\) 种颜色装饰(即用颜色 \(1..j\) 来装饰) 那么 \(g_{i,j}=g_ ...

  10. JZOJ 2020.07.16【NOIP提高组】模拟

    总结 这套题相比昨天,简单了不止一点 然而有的人拿了 \(300\) 多 而我只有 \(198\) 预估应该有 \(268\) 的,假了 \(70\) 分 出现了很多奇怪的 \(mistakes\) ...