Catppuccin Palette CSS 变量实战3 行代码完成 Web 项目淡彩换肤的完整教程【免费下载链接】palette Soothing pastel theme to use within your projects!项目地址: https://gitcode.com/gh_mirrors/pal/paletteCatppuccin Palette 是一个知名的柔和淡彩色主题库为开发者提供一套完整、协调的配色方案。本教程将带你用3 行 CSS 变量代码快速完成 Web 项目的 Catppuccin 淡彩换肤并掌握 4 款主题Latte / Frappé / Macchiato / Mocha的切换技巧 Catppuccin Palette 是什么Catppuccin Palette 以咖啡口味命名了 4 种主题风味覆盖浅色与深色场景主题Flavor类型特点☕ Latte浅色明亮柔和适合白天 Frappé深色低饱和、低对比护眼 Macchiato深色中等饱和度与对比度☕ Mocha深色高饱和、高对比最鲜明每个主题都包含 15 个强调色如rosewater、mauve、green和 12 个中性色如text、base、crust颜色定义统一存放在 palette.json 中并自动生成 CSS / Sass / Less 等前端产物。3 行代码一键引入 Catppuccin CSS 变量这是本教程的核心。在你的样式入口文件中只需/* 第 1 行引入全部主题的 CSS 变量 */ import catppuccin/palette/style; /* 第 2、3 行使用变量完成换肤 */ body { background: var(--ctp-mocha-base); color: var(--ctp-mocha-text); }引入方式取决于你的构建方式详见 docs/css.mdnpm 安装执行npm install catppuccin/palette配合 Vite / Webpack 等 CSS loader即可使用上面的import catppuccin/palette/styleCDN 引入不装包的项目可在 HTML 中直接引入官方发布的catppuccin.css样式表。就这么简单——没有构建脚本、没有插件3 行代码即可换肤 ✅看懂 CSS 变量命名规则变量名格式为--ctp-{主题}-{颜色}[-格式后缀]官方构建脚本 scripts/builders/npm/css.ts 会为每个颜色生成 4 种格式后缀格式用途示例无Hexvar(--ctp-mocha-text)直接上色-rgbRGB 通道rgba(var(--ctp-mocha-base-rgb) / 0.9)半透明背景-hslHSLhsla(var(--ctp-frappe-red-hsl) / 0.75)调节明度-oklchOKLCH面向未来色彩空间的取值举例给卡片做一个 90% 不透明度的毛玻璃背景.card { background: rgba(var(--ctp-macchiato-base-rgb) / 0.9); border: 1px solid hsla(var(--ctp-macchiato-mauve-hsl) / 0.5); }-rgb和-hsl变量的存在正是 Catppuccin CSS 变量方案比普通调色板更好用的关键所在 ✨如何切换 4 种 Catppuccin 淡彩主题由于 4 个主题的所有变量都同时挂载在:root上切换主题的“最快配置方法”就是集中管理变量引用:root { --theme-base: var(--ctp-mocha-base); --theme-text: var(--ctp-mocha-text); --theme-accent: var(--ctp-mocha-mauve); } [data-themelatte] { --theme-base: var(--ctp-latte-base); --theme-text: var(--ctp-latte-text); --theme-accent: var(--ctp-latte-mauve); }业务样式全部引用--theme-*别名然后用 JS 一行document.documentElement.dataset.theme latte就能整站从深色 Mocha 切换到浅色 Latte。 提示深色主题建议默认 Mocha白天模式用 Latte两者是 Catppuccin 社区最常配对的一深一浅组合。Sass / Less 项目怎么接入如果你的项目使用 Sass 预处理器也可以跳过 CSS 变量直接拿 Sass 变量详见 docs/sass.mduse ~catppuccin/palette/scss/catppuccin/mocha; .my-class { background: $base; /* 编译后为 #1e1e2e */ color: $text; /* 编译后为 #cdd6f4 */ }也可以use单文件映射_catppuccin.scss通过each循环一次性为 4 个主题生成类名实现编译期换肤。Less 用户可使用 npm 包中./less/*导出的等价文件。常见问题与实用建议变量为什么找不到确认你引入的是构建产物css/catppuccin.cssnpm 包内./css/*导出而不是源码目录。想只要一个主题可以只取需要的--ctp-latte-*变量文件本身是纯 CSS可裁剪后手动维护。颜色数据想程序化使用安装catppuccin/palette后导入flavors对象可拿到每个颜色的 hex、rgb、hsl、oklch 与 ANSI 映射核心导出见 mod.ts。配色不协调优先使用base / mantle / crust三级背景 text / subtext文字体系强调色只做点缀即可轻松复刻出“奶油感”视觉。总结通过CSS 变量引入、变量命名规则、多主题切换三步你已经完成了 Web 项目的 Catppuccin 淡彩换肤 3 行代码import 两个var()即可上手4 个主题、每色 4 种格式天然支持深色模式与半透明效果进阶项目可无缝切换到 Sass 方案获得编译期变量。想让界面瞬间拥有“治愈系”配色从把--ctp-mocha-base写进你的第一个样式规则开始吧【免费下载链接】palette Soothing pastel theme to use within your projects!项目地址: https://gitcode.com/gh_mirrors/pal/palette创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考