通过 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、效果图

深色

浅色

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