通过 Tailwind CSS 自定义样式 实现深色模式切换

创建vite项目或者vue-cli配置大同小异

1、当前环境

• Vue.js 3.5
• @nuxtjs/tailwindcss 6.13.1
• nuxt3.15.4
• node18
  这里主要依赖是tailwindcss 因为当前项目是使用nuxt开发。

2、配置颜色模式

在assets/css下创建main.css

* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}

[data-theme="light"] {
 /* 基础颜色 */
 --background-color: #FFFFFF;
 /* 次要背景颜色 */
 --background-secondary-color: #F5F5F5;
 --text-color: #333333;          /* 主要文字颜色 */
 --text-secondary-color: #666666; /* 次要文字颜色 */
 --primary-color: #1E90FF;       /* 主色调 */
 --secondary-color: #FF6347;    /* 辅助色调 */
 --border-color: #E0E0E0;        /* 边框颜色 */

 /* 状态颜色 */
 --success-color: #4CAF50;       /* 成功 */
 --error-color: #F44336;         /* 失败 */
 --warning-color: #FF9800;       /* 警告 */
 --info-color: #2196F3;          /* 信息 */

 /* 其他辅助颜色 */
 --disabled-color: #CCCCCC;      /* 禁用状态颜色 */
 --placeholder-color: #999999;   /* 输入框占位符颜色 */
 --icon-color: #666666;          /* 图标颜色 */
}
[data-theme="dark"] {
 /* 基础颜色 */
 --background-color: #1E1E1E;
 /* 次要背景颜色 */
 --background-secondary-color: #282828;
 --text-color: #E0E0E0;          /* 主要文字颜色 */
 --text-secondary-color: #A0A0A0; /* 次要文字颜色 */
 --primary-color: #1E90FF;       /* 主色调 */
 --secondary-color: #FF6347;    /* 辅助色调 */
 --border-color: #444444;        /* 边框颜色 */

 /* 状态颜色 */
 --success-color: #66BB6A;       /* 成功 */
 --error-color: #EF5350;         /* 失败 */
 --warning-color: #FFA726;       /* 警告 */
 --info-color: #42A5F5;          /* 信息 */

 /* 其他辅助颜色 */
 --disabled-color: #666666;      /* 禁用状态颜色 */
 --placeholder-color: #888888;   /* 输入框占位符颜色 */
 --icon-color: #A0A0A0;          /* 图标颜色 */
}

/* 覆盖 vant 组件的默认样式 */
:root:root {
 --van-cell-background: var(--background-color);
}
.theme-transition {
 & * {
   transition:
     background-color 0.2s ease,
     color 0.2s ease,
     border-color 0.2s ease;
 }

 /* 禁用伪元素过渡 */
 & *::before,
 & *::after {
   transition: none;
 }
}

/* 全局样式文件或组件内样式 */
.markdown-content ul {
 list-style-type: disc; /* 恢复小圆点 */
 padding-left: 1.5em; /* 添加合理缩进 */
}

.markdown-content li {
 margin: 4px 0;
}

3、在app.vue引入

<template>
  <NuxtPage />
</template>
<style>
@import url("~/assets/css/main.css");
</style>
<style>
/* 平滑的滚动效果 */
html {
  scroll-behavior: smooth;
}

</style>

4、配置自定义类名

修改配置文件tailwind.config 创建项目安装Tailwind CSS 自动生成的

module.exports = {
  // 配置自定义样式
  theme: {
    extend: {
      colors: {
        background: "var(--background-color)",
        text: "var(--text-color)",
        "text-secondary": "var(--text-secondary-color)",
        primary: "var(--primary-color)",
        "text-primary": "var(--primary-color)",
        secondary: "var(--secondary-color)",
        border: "var(--border-color)",
        success: "var(--success-color)",
        "text-success": "var(--success-color)",
        error: "var(--error-color)",
        warning: "var(--warning-color)",
        "text-warning": "var(--warning-color)",
        info: "var(--info-color)",
        "text-info": "var(--info-color)",
        disabled: "var(--disabled-color)",
        placeholder: "var(--placeholder-color)",
        icon: "var(--icon-color)",
        "background-secondary-color": "var(--background-secondary-color)"
        
      },
    },
  },
};

5、页面使用

<header class=" text-text py-20 text-center">
    <h1 class="text-4xl font-bold">欢迎来到我的博客</h1>
    <p class="mt-4 text-lg">分享技术、生活和思考</p>
</header>

这里主要观察 text-text 样式 这里 类名结构为 text表示字体 text-[自定义类名]
因为配置的样式为text。他的值为css变量

6、切换颜色主题

[data-theme=“light”]和 [data-theme=“dark”] 下分别定义了两套css变量
所以现在如果需要切换颜色主题 只需要修改 根节点data-theme的值。

7、效果图

深色

浅色

怎么样 是不是 很简单 我相信你也可以的。