前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载Quasar Framework 内置了一整套开箱即用的颜色体系8 个品牌色Brand Colors与 19 组共 266 个 Material 风格调色板色阶既可以直接作为 CSS 类用在 HTML 模板中也可以作为 Sass/SCSS 变量在style中使用。本文围绕 color-palette.md 展开结合仓库源码ui/src/css/core/colors.sass、ui/src/css/variables.sass、setCssVar、getCssVar 等逐层讲解如何读懂默认色值、如何在模板与样式中使用、如何添加自定义颜色以及如何利用 CSS 自定义属性实现运行时动态换肤Dynamic Theme Colors最终覆盖 Quasar CLI、Quasar Vite 插件与 UMD 三种场景下的配置方式。品牌色Brand Colors整个组件库的调色中枢Quasar 组件库中绝大多数颜色都强关联到以下 8 个品牌色它们是区分一款 App 设计的第一步。改变这些颜色的默认值后Quasar 组件会立即跟随新值刷新外观品牌色默认值HEX语义primary#1976D2应用主色绝大多数组件默认使用secondary#26A69A次要强调色accent#9C27B0强调/点缀色dark#1d1d1d暗色主题下的主要表面色positive#21BA45成功/正向反馈negative#C10015错误/负向反馈info#31CCEC信息提示warning#F2C037警告提示这些默认值定义在 ui/src/css/variables.sass并且每个颜色都有对应的!default标记意味着你可以通过项目的变量文件自由覆盖。除此之外还有两个常与暗色模式配合使用的颜色$dark-page#121212暗色页面背景与$dark。8 个品牌色的完整清单同样以数据形式维护在 docs/src/pages/style/color-palette/colors.js 中被 BrandColors.vue 渲染成可视色块。如果你不想手写配置可以借助官方文档中的 Theme Builder 工具theme-builder.md可视化地挑选品牌色并一键导出配置。仓库中该工具的导出逻辑ThemePicker.vue会同时生成 Sass 变量文件内容、quasar.config中的framework.config.brand对象以及 UMD 场景的app.use(Quasar, { config: { brand } })代码与下文各小节一一对应。颜色列表Color List266 个内置色阶除品牌色外Quasar 还提供 19 组 Material Design 风格的颜色族每组从-1最浅到-14最深共 14 个色阶加上每组的基础色颜色族red、pink、purple、deep-purple、indigoblue、light-blue、cyan、tealgreen、light-green、lime、yellow、amberorange、deep-orange、brown、grey、blue-grey这份清单定义在 colors.js 中paletteShades 14表示每个颜色族包含 14 个深浅色阶ColorList.vue 负责在文档页渲染出完整的bg-{color}-{n}色卡网格。所有色阶的十六进制默认值都逐一定义在 ui/src/css/variables.sass例如$red-1 : #ffebee最浅到$red-14 : #d50000最深中间$red-6与基础色$red相同均为#f44336。作为 CSS 类使用text- / bg- 前缀在应用内的*.vue文件中颜色可以作为 CSS 类直接用于 HTML 模板使用text-前缀改变文字颜色使用bg-前缀改变背景颜色。!-- 改变文字颜色 -- p classtext-primary..../p !-- 改变背景颜色 -- p classbg-positive.../p其底层实现位于 ui/src/css/core/colors.sass对于 8 个品牌色类名直接引用 CSS 自定义属性例如.text-primary { color: var(--q-primary) !important }、.bg-primary { background: var(--q-primary) !important }见 colors.sass对于 19 个颜色族则为每一个{color}-{n}组合生成对应的.text-*与.bg-*规则见 colors.sass。这也是改变品牌色后组件立即跟随的根本原因——所有规则都间接引用同一个 CSS 变量。值得注意的是规则普遍带!important因此这些工具类在样式覆盖优先级上拥有较高权重。所有类都基于品牌色变体时--q-dark的变化同样会影响.text-dark/.bg-dark。作为 Sass/SCSS 变量使用在*.vue文件的style标签中可以像使用普通变量一样引用调色板颜色$primary、$red-1、$grey-5等。!-- 注意 langsass -- style langsass div color: $red-1 background-color: $grey-5 /style!-- 注意 langscss -- style langscss div { color: $red-1; background-color: $grey-5; } /style这些变量由 Quasar CLI 管理细节可参考 sass-scss-variables.md变量文件为/src/css/quasar.variables.sass或等价的/src/css/quasar.variables.scss无需创建这些文件也能访问 Quasar 内置变量创建它们的唯一目的是自定义变量。Quasar CLI 会检测样式代码中是否包含至少一个$字符若存在则自动注入 Quasar 的 Sass/SCSS 变量。如果通过import引入的文件本身不含$需要在文件中加一行注释// $帮助检测sass-scss-variables.md。在 Quasar CLI 项目中Quasar 自身 CSS 的编译优先级为quasar.variables.scssquasar.variables.sass 预编译的 Quasar CSSsass-scss-variables.md。性能提示若变量文件只包含变量声明Quasar 会按需只向每个样式块注入实际用到的变量显著加快 Sass 编译文件里一旦出现 mixin、函数或import/use该优化自动关闭。创建或删除quasar.variables.*文件后需要重启 dev server 才能生效但修改文件内容无需重启。如果你想在变量基础上扩展而非覆盖某个 Sass map可以采用use quasar/src/css/variables as q;配合sass:map的map.merge合并方式见 sass-scss-variables.md。添加自定义颜色Adding Your Own Colors如果内置颜色不够用可以自己注册一个自定义颜色供 Quasar 组件使用。假设要新增一个名为brand的颜色只需在应用中加入如下 CSS.text-brand { color: #a2aa33 !important; } .bg-brand { background: #a2aa33 !important; }之后就能把它当作内置颜色一样传给组件q-btn colorbrand ... /此外你还可以在 JS 上下文中通过getPaletteColor工具读取任意自定义颜色的十六进制值详见 color-utils.mdimport { colors } from quasar const { getPaletteColor } colors console.log(getPaletteColor(my-color)) // #...其实现位于 ui/src/utils/colors/colors.js它临时创建一个text-{colorName}类名的不可见 div 挂到document.body用getComputedStyle读取计算后的color属性再转成 HEX最后移除该元素官方文档明确提示该方法运行成本较高应谨慎使用。对应测试见 colors.test.js。动态改变品牌色Dynamic Theme ColorsQuasar 支持在运行时动态定制品牌色primary、secondary、accent、dark、positive、negative、info、warning意味着同一份构建产物可以默认一套主题、运行时展示另一套主题——非常适合多租户换肤、用户自定义主题等场景。工作原理CSS 自定义属性品牌色的主配置通过 CSS 自定义属性Custom Properties完成存放在根元素:root上。每个属性的命名规则为--q-${name}例如--q-primary、--q-secondary值必须是合法的 CSS 颜色。默认值在 ui/src/css/core/colors.sass 中声明:root --q-primary: #{$primary} --q-secondary: #{$secondary} --q-accent: #{$accent} --q-positive: #{$positive} --q-negative: #{$negative} --q-info: #{$info} --q-warning: #{$warning} --q-dark: #{$dark} --q-dark-page: #{$dark-page}CSS 自定义属性遵循与普通 CSS 相同的继承规则你可以只重定义想要改的颜色其余颜色会从父元素继承。官方推荐的做法是把自定义颜色属性设置在htmldocument.documentElement或bodydocument.body元素上这样只需删除自定义属性即可恢复到默认颜色。工具函数 setCssVarQuasar 提供setCssVar(colorName, colorValue[, element])辅助函数用于设置品牌色也适用于其他--q-*变量参数类型必填说明colorNameString是primary、secondary、accent、dark、positive、negative、info、warning之一colorValueString是合法的 CSS 颜色值elementElement否设置自定义属性的目标元素默认document.body示例import { setCssVar } from quasar setCssVar(light, #DDD) setCssVar(primary, #33F) setCssVar(primary, #F33, document.getElementById(rebranded-section-id))等价的原生 JavaScript// 相当于 setCssVar(primary) document.body.style.setProperty(--q-primary, #0273d4)其源码实现非常直观set-css-var.js对三个参数做类型校验后调用element.style.setProperty(--q-${propName}, value)。注意它允许你指定任意元素——这意味着你可以对页面局部区域单独换肤而不是全局生效。工具函数 getCssVarQuasar 还提供getCssVar(colorName[, element])用于读取品牌色当前值参数类型必填说明colorNameString是同setCssVar的 8 个品牌色之一elementElement否读取自定义属性的目标元素默认document.body示例import { getCssVar } from quasar getCssVar(primary) // #33F getCssVar(primary, document.getElementById(rebranded-section-id))该函数本质上是封装了原生getPropertyValue()get-css-var.js内部调用getComputedStyle(element).getPropertyValue(--q-${propName}).trim()读取不到时返回null。等价的原生写法// 相当于 getCssVar(primary) getComputedStyle(document.documentElement).getPropertyValue(--q-primary) // #0273d4两个工具函数都配有完整单测set-css-var.test.js、get-css-var.test.js对非法参数类型会抛出TypeError。更多颜色工具Color Utils除了上述两个函数quasar还导出一组颜色处理工具colors详情见 color-utils.md。结合setCssVar可以做动态品牌色 派生色的组合import { colors, setCssVar } from quasar const { lighten } colors const newPrimaryColor #933 setCssVar(primary, newPrimaryColor) setCssVar(primary-darkened, lighten(newPrimaryColor, -10))colors命名空间包含以下函数实现见 ui/src/utils/colors/colors.js颜色转换rgbToHex、rgbToHsv、hexToRgb、textToRgb、hsvToRgb颜色处理lighten(color, percent)正数变亮、负数变暗返回 HEX、luminosity(color)返回 01 的相对亮度、brightness(color)返回 0255 的对比度 128 视为深色、blend(fgColor, bgColor)Alpha 合成、changeAlpha(color, offset)在 -11 之间增减透明度、getPaletteColor(colorName)lighten的算法colors.js对 RGB 三通道向白色正值或黑色负值方向按百分比线性插值测试用例覆盖了黑/白/红/绿/蓝等边界情况colors.test.js。设置默认值Setting Up Defaults除了编译期通过 Sass 变量改色Quasar 还允许在不改动 Sass/SCSS 变量的前提下在运行期配置阶段直接设置品牌色。方式一Quasar 配置对象中的 brandbrand配置项适用于 Quasar CLI、Quasar Vite 插件与 UMD 项目其字段定义在 ui/src/Brand.json 中8 个品牌色均为 String 类型还允许传入...customColors自定义色。Quasar CLIquasar.config 文件与 Quasar Vite 插件framework: { config: { brand: { primary: #e46262, // ... 或其他所有品牌色 }, notify: {...}, // Notify 插件的默认配置 loading: {...}, // Loading 插件的默认配置 loadingBar: { ... }, // LoadingBar 插件的配置 // ... 更多 } }UMD 项目在app.use(Quasar, ...)时传入见 umd.mdapp.use(Quasar, { config: { brand: { primary: #e46262, // ... 或其他所有品牌色 } } })这套配置在底层正是通过 CSS 变量生效的Quasar 的 Body 插件在安装时会遍历$q.config.brand并逐个调用setCssVarui/src/plugins/private.body/Body.js在 SSR 场景下则会把所有--q-${key}:${value}拼成一个style:root{...}/style注入到服务端渲染的头部标签中Body.js。方式二Boot 文件Quasar CLI如果你使用 Quasar CLI还可以通过 quasar/app-vite Boot 文件 在应用初始加载阶段动态设置颜色——特别适合启动时从 API 拉取主题再应用的场景// /src/boot/brand-colors.js —— 文件名可自定义 import { setCssVar } from quasar import { defineBoot } from #q-app export default defineBoot(() { setCssVar(primary, #ff0000) })若项目运行在 SSR/SSG 模式下需要在该 boot 文件的服务端执行阶段禁用避免在服务端渲染时执行依赖 DOM 的代码// quasar.config 文件 boot: [ { server: false, path: brand-colors }, // 或你自定义的文件名 // ... ],小结四种改色路径的取舍改色方式生效时机适用场景Sass/SCSS 变量quasar.variables.sass/.scss编译期静态品牌色、需要派生变量或参与编译计算framework.config.brand配置应用启动安装 Quasar 时全局静态品牌色的声明式配置Boot 文件 setCssVar应用初始化可异步启动时拉取远端主题、动态换肤任意时机调用setCssVar/ 原生setProperty运行时用户切换主题、局部区域换肤核心要点是一切运行时换肤都归结为对--q-*CSS 自定义属性的修改而组件与工具类.text-primary、.bg-primary全部通过 colors.sass 间接引用这些变量因此改一处即可全库生效。如需系统化地挑选与导出品牌色方案可直接使用文档内置的 Theme Builder想深入理解 Sass 变量注入机制可继续阅读 sass-scss-variables.md颜色工具函数的完整 API 参考见 color-utils.md。赞分享前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载相关推荐Vuetify 颜色系统完全指南Material 调色板、颜色类与 Sass/JavaScript Color PackVuetify 颜色系统完全指南Material 调色板、颜色类与 Sass/JavaScript Color Pack Vuetify 内置了完整的 Mat前端UI组件flutter_background_geolocation与原生集成深入理解iOS/Android实现原理flutter_background_geolocation与原生集成深入理解iOS/Android实现原理 flutter_background_geoloBOOLR 14种组件详解Input、Clock、ROM、LED等电路仿真利器清单BOOLR 14种组件详解Input、Clock、ROM、LED等电路仿真利器清单 BOOLR 是一款免费的数字逻辑仿真器Digital Logic Sim上一篇Tcl扩展开发终极指南如何用C语言为Tcl添加自定义命令 下一篇ChatGLM3智能客服系统构建意图识别与话术生成实践指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考