前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载导读品牌色Brand Colors是决定一个网站/应用视觉识别最核心的第一步而 Quasar 的 Theme Builder 正是为此设计的交互式工具它内嵌在官方文档页面中允许你点击调色板按钮实时替换九个品牌色的取值并在模拟的 Quasar 页面布局中即时预览效果最后通过底部的Export按钮一键导出为 Sass、SCSS、Quasar CLI 配置或 UMD 初始化代码。读完本文你将掌握 Theme Builder 的完整操作流程、四种导出格式的区别与落盘位置以及它在底层依赖的setCssVar、CSS 自定义属性与亮度判定机制从而在自己的项目中熟练定制与动态切换主题。Theme Builder 是什么品牌色的第一步网站或应用最需要建立的就是“品牌”。官方文档 theme-builder.md 明确点出它的定位“选择一个品牌色方案正是 Theme Builder 帮你完成的事情”。它是打造品牌的第一步——先把品牌色定下来之后组件、页面、插件的所有视觉细节都会以这组颜色为准则自动统一。这个工具并不是独立页面而是由文档页面直接挂载的交互式 Vue 组件 ThemePicker.vue 提供文档通过ThemePicker classq-py-lg /将其渲染进页面左侧是一排品牌色按钮右侧是一个用 Quasar 组件搭建的“模拟应用页面”用于实时展示配色效果。基本操作流程官方文档给出的用法非常直接点击彩色按钮点击布局旁边左侧的彩色按钮选择某个品牌色。在弹窗中取色每个按钮都绑定了q-menuq-color点击后弹出取色器选择新颜色即生效。实时预览右侧模拟页面上的顶部导航栏、卡片、浮动按钮等元素会立刻应用新颜色。点击Export导出配色满意后点击底部的Export按钮在弹窗中选择目标格式并复制代码。九大品牌色与默认取值Theme Builder 可调的品牌色共 9 个源码 ThemePicker.vue 中colors与list两个变量给出了完整清单与默认值变量名默认值用途primary#1976d2主品牌色组件默认主色调secondary#26A69A次要品牌色accent#9C27B0强调色如悬浮按钮FABdark#1d1d1d深色模式下的深色表面dark-page#121212深色模式下的页面背景positive#21BA45正向语义色成功negative#C10015负向语义色错误info#31CCEC信息提示色warning#F2C037警告色这九种颜色与 color-palette.md 中“Brand Colors”一节完全一致Quasar 组件使用的颜色与这八个/九个颜色强绑定修改默认值后组件会立刻跟随这些颜色变化。模拟页面中右侧卡片区域还专门展示了secondary、dark、positive、negative、info、warning六种颜色卡片见sideColors数组方便判断它们在真实卡片上的呈现。此外模拟页面顶部工具栏有一个“Dark page”开关darkMode打开后页面背景切换为--q-dark-page对应的深色见样式theme-picker__bg-dark可同时验证深色模式下品牌色的表现。Export 导出四种格式的完整代码点击Export后弹出对话框包含四个选项卡分别对应四种使用场景。以下代码均来自 ThemePicker.vue 中sassExport、scssExport、quasarCliExport、umdExport四个计算属性颜色值占位符即你刚才在面板中选定的颜色。1. Sass.sass缩进语法对应src/css/quasar.variables.sass文件仅适用于 Quasar CLI 管理的项目// src/css/quasar.variables.sass $primary : #1976d2 $secondary : #26A69A $accent : #9C27B0 $dark : #1d1d1d $dark-page : #121212 $positive : #21BA45 $negative : #C10015 $info : #31CCEC $warning : #F2C0372. SCSS.scss语法对应src/css/quasar.variables.scss文件与 Sass 版本内容等价、仅多分号// src/css/quasar.variables.scss $primary : #1976d2; $secondary : #26A69A; $accent : #9C27B0; $dark : #1d1d1d; $dark-page : #121212; $positive : #21BA45; $negative : #C10015; $info : #31CCEC; $warning : #F2C037;关于该文件的使用细节sass-scss-variables.md 中有几条重要约定两个文件二选一即可.sass与.scss任一存在其中的变量会提供给所有项目内的.sass、.scss及.vue文件若两者同时存在Quasar CLI 优先使用quasar.variables.scss其次才是.sass两者都没有则回退到预编译的 Quasar CSS新建或删除该文件后需要重启 dev server 才会生效仅修改文件内容则无需重启当文件只包含变量声明无 mixin、函数、import等时Quasar 会只向每个样式块注入其实际用到的变量显著加速 Sass 编译Quasar v2.24 / quasar/vite-plugin v2 / quasar/app-vite v3.4。3. Quasar CLIquasar.config 配置对应 Quasar CLI / Quasar Vite 插件项目中的quasar.config文件// quasar.config file return { framework: { config: { brand: { primary: #1976d2, secondary: #26A69A, accent: #9C27B0, dark: #1d1d1d, dark-page: #121212, positive: #21BA45, negative: #C10015, info: #31CCEC, warning: #F2C037 } } } }4. Quasar Vite Plugin / UMD对应不使用构建工具配置、直接在入口处初始化 Quasar 的场景UMD 或手动装配 Vite 插件的项目app.use(Quasar, { config: { brand: { primary: #1976d2, secondary: #26A69A, accent: #9C27B0, dark: #1d1d1d, dark-page: #121212, positive: #21BA45, negative: #C10015, info: #31CCEC, warning: #F2C037 } } })底层原理选择颜色后发生了什么Theme Builder 的实时预览并非“重编译”而是依赖 Quasar 的 CSS 自定义属性CSS Variables机制这也是动态主题能够零成本生效的根本原因。setCssVar写入--q-*变量在 ThemePicker.vue 中每个颜色被修改时都会触发update(color, val)function update(color, val) { setCssVar(color, val, document.getElementById(theme-picker)) dark[color] luminosity(val) 0.4 }setCssVar是 Quasar 导出的官方工具函数其完整实现位于 set-css-var.js核心只有一行element.style.setProperty(--q-${propName}, value)即把primary写入为--q-primarydark-page写入为--q-dark-page依此类推。所有 Quasar 组件的样式都消费这些--q-*变量因此改一个变量整个组件库的配色随之联动。调用时传入的第三个参数document.getElementById(theme-picker)把变量限定在构建器自身的作用域内避免污染整个文档页面——这也是setCssVar(colorName, colorValue[, element])第三个可选参数默认document.body的典型用法。运行时动态换肤的完整说明可参考 color-palette.md 的 “Dynamic Change of Brand Colors” 一节那里还介绍了配套的getCssVar读取工具以及用原生 JS 的等价写法// 等价于 setCssVar(primary, #0273d4) document.body.style.setProperty(--q-primary, #0273d4)luminosity自动判断前景文字用黑还是白update()中的另一行dark[color] luminosity(val) 0.4用于自动决定该颜色上应该放白色文字还是黑色文字。luminosity来自 Quasar 的 colors.js 工具它按 WCAG 标准计算颜色的相对亮度export function luminosity(color) { // ...将 sRGB 通道线性化后加权 return 0.2126 * R 0.7152 * G 0.0722 * B }在 ThemeBuilder 的模板中这个判断被用在按钮文字与卡片文字上例如:text-colordark[color] ? white : black和卡片上的text-${dark[color] ? white : black}。也就是说当你选了一个很亮的颜色构建器自动切换为深色文字保证可读性阈值 0.4 是源码中写死的判定线。该文件还导出了lighten、brightness、blend、changeAlpha等完整的颜色工具可用于在品牌色基础上派生更多辅助色。应用侧brand 配置如何落地如果你把导出的brand配置写入quasar.config或app.use(Quasar, ...)运行时 Quasar 会在安装阶段自动应用它。从 Body.js 的源码可以看到setColors(brand)的实现function setColors(brand) { for (const color in brand) { setCssVar(color, brand[color]) } }即在插件安装时遍历config.brand的每个键统一写入--q-*CSS 变量同时还会把变量以行内样式形式注入根元素源码中可见--q-${key}:${brand[key]}的拼接逻辑。这与 Theme Builder 在编辑时使用的setCssVar是同一套机制——构建器预览的正是你项目中实际会生效的效果。在真实项目中使用导出的主题综合 theme-builder.md、color-palette.md 与 sass-scss-variables.md推荐的应用路径有三种静态定制Quasar CLI把 Sass 或 SCSS 导出内容写入src/css/quasar.variables.sass/.scss。文件只需包含变量声明即可享受“按需注入变量”的编译加速。初始化配置把brand对象写入quasar.config的framework.config.brand或 UMD 项目在app.use(Quasar, { config: { brand } })中传入适合不希望依赖 Sass 文件的场景。动态换肤品牌色随时可通过setCssVar在运行时切换例如在 Boot 文件中读取 API 返回的配色后再设置color-palette.md 提供了defineBoot示例由于变量遵循 CSS 继承规则你也可以只在html或body上覆盖所需颜色删除自定义值即可还原默认主题。小结Theme Builder 把“选品牌色”这一设计决策变成了可视化的即改即见流程并覆盖了从 Sass 变量、构建配置到运行时 API 的全部落地方式。其背后是 Quasar 统一的 CSS 自定义属性体系--q-*变量 setCssVar和基于亮度luminosity的对比度自动判定。理解这层机制后你不仅能用好这个构建器还能在此基础上实现多主题切换、远程下发配色等更复杂的需求。相关扩展阅读Color Palette 文档、Sass/SCSS 变量文档、构建器组件源码 ThemePicker.vue。赞分享前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载相关推荐Pikaday SCSS变量系统主题定制与品牌适配Pikaday SCSS变量系统主题定制与品牌适配 还在为日期选择器与品牌风格冲突而烦恼Pikaday的SCSS变量系统让主题定制变得简单高效。本文将详细介前端UI组件my2sql监控告警集成构建智能数据库运维平台的完整方案my2sql监控告警集成构建智能数据库运维平台的完整方案 在当今数据驱动的业务环境中MySQL数据库的稳定运行直接关系到业务连续性。my2sql作为一款强大数据库数据同步CLITheme Factory Skill 实战指南用 10 套预设主题为 Codex 制品一键套用专业配色与字体Theme Factory Skill 实战指南用 10 套预设主题为 Codex 制品一键套用专业配色与字体 本文以开源仓库 awesome codex sAI 技能AI 插件工作流自动化人工智能上一篇如何用 log_config 把 Freqtrade 日志发送到 syslog 或 journald下一篇CleanArchitecture 如何使用 Web-webapi.http 文件获取 Bearer Token 并调用 API 端点创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Quasar Theme Builder 主题构建器实战：交互式挑选品牌色并一键导出 Sass/SCSS 与项目配置
前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载导读品牌色Brand Colors是决定一个网站/应用视觉识别最核心的第一步而 Quasar 的 Theme Builder 正是为此设计的交互式工具它内嵌在官方文档页面中允许你点击调色板按钮实时替换九个品牌色的取值并在模拟的 Quasar 页面布局中即时预览效果最后通过底部的Export按钮一键导出为 Sass、SCSS、Quasar CLI 配置或 UMD 初始化代码。读完本文你将掌握 Theme Builder 的完整操作流程、四种导出格式的区别与落盘位置以及它在底层依赖的setCssVar、CSS 自定义属性与亮度判定机制从而在自己的项目中熟练定制与动态切换主题。Theme Builder 是什么品牌色的第一步网站或应用最需要建立的就是“品牌”。官方文档 theme-builder.md 明确点出它的定位“选择一个品牌色方案正是 Theme Builder 帮你完成的事情”。它是打造品牌的第一步——先把品牌色定下来之后组件、页面、插件的所有视觉细节都会以这组颜色为准则自动统一。这个工具并不是独立页面而是由文档页面直接挂载的交互式 Vue 组件 ThemePicker.vue 提供文档通过ThemePicker classq-py-lg /将其渲染进页面左侧是一排品牌色按钮右侧是一个用 Quasar 组件搭建的“模拟应用页面”用于实时展示配色效果。基本操作流程官方文档给出的用法非常直接点击彩色按钮点击布局旁边左侧的彩色按钮选择某个品牌色。在弹窗中取色每个按钮都绑定了q-menuq-color点击后弹出取色器选择新颜色即生效。实时预览右侧模拟页面上的顶部导航栏、卡片、浮动按钮等元素会立刻应用新颜色。点击Export导出配色满意后点击底部的Export按钮在弹窗中选择目标格式并复制代码。九大品牌色与默认取值Theme Builder 可调的品牌色共 9 个源码 ThemePicker.vue 中colors与list两个变量给出了完整清单与默认值变量名默认值用途primary#1976d2主品牌色组件默认主色调secondary#26A69A次要品牌色accent#9C27B0强调色如悬浮按钮FABdark#1d1d1d深色模式下的深色表面dark-page#121212深色模式下的页面背景positive#21BA45正向语义色成功negative#C10015负向语义色错误info#31CCEC信息提示色warning#F2C037警告色这九种颜色与 color-palette.md 中“Brand Colors”一节完全一致Quasar 组件使用的颜色与这八个/九个颜色强绑定修改默认值后组件会立刻跟随这些颜色变化。模拟页面中右侧卡片区域还专门展示了secondary、dark、positive、negative、info、warning六种颜色卡片见sideColors数组方便判断它们在真实卡片上的呈现。此外模拟页面顶部工具栏有一个“Dark page”开关darkMode打开后页面背景切换为--q-dark-page对应的深色见样式theme-picker__bg-dark可同时验证深色模式下品牌色的表现。Export 导出四种格式的完整代码点击Export后弹出对话框包含四个选项卡分别对应四种使用场景。以下代码均来自 ThemePicker.vue 中sassExport、scssExport、quasarCliExport、umdExport四个计算属性颜色值占位符即你刚才在面板中选定的颜色。1. Sass.sass缩进语法对应src/css/quasar.variables.sass文件仅适用于 Quasar CLI 管理的项目// src/css/quasar.variables.sass $primary : #1976d2 $secondary : #26A69A $accent : #9C27B0 $dark : #1d1d1d $dark-page : #121212 $positive : #21BA45 $negative : #C10015 $info : #31CCEC $warning : #F2C0372. SCSS.scss语法对应src/css/quasar.variables.scss文件与 Sass 版本内容等价、仅多分号// src/css/quasar.variables.scss $primary : #1976d2; $secondary : #26A69A; $accent : #9C27B0; $dark : #1d1d1d; $dark-page : #121212; $positive : #21BA45; $negative : #C10015; $info : #31CCEC; $warning : #F2C037;关于该文件的使用细节sass-scss-variables.md 中有几条重要约定两个文件二选一即可.sass与.scss任一存在其中的变量会提供给所有项目内的.sass、.scss及.vue文件若两者同时存在Quasar CLI 优先使用quasar.variables.scss其次才是.sass两者都没有则回退到预编译的 Quasar CSS新建或删除该文件后需要重启 dev server 才会生效仅修改文件内容则无需重启当文件只包含变量声明无 mixin、函数、import等时Quasar 会只向每个样式块注入其实际用到的变量显著加速 Sass 编译Quasar v2.24 / quasar/vite-plugin v2 / quasar/app-vite v3.4。3. Quasar CLIquasar.config 配置对应 Quasar CLI / Quasar Vite 插件项目中的quasar.config文件// quasar.config file return { framework: { config: { brand: { primary: #1976d2, secondary: #26A69A, accent: #9C27B0, dark: #1d1d1d, dark-page: #121212, positive: #21BA45, negative: #C10015, info: #31CCEC, warning: #F2C037 } } } }4. Quasar Vite Plugin / UMD对应不使用构建工具配置、直接在入口处初始化 Quasar 的场景UMD 或手动装配 Vite 插件的项目app.use(Quasar, { config: { brand: { primary: #1976d2, secondary: #26A69A, accent: #9C27B0, dark: #1d1d1d, dark-page: #121212, positive: #21BA45, negative: #C10015, info: #31CCEC, warning: #F2C037 } } })底层原理选择颜色后发生了什么Theme Builder 的实时预览并非“重编译”而是依赖 Quasar 的 CSS 自定义属性CSS Variables机制这也是动态主题能够零成本生效的根本原因。setCssVar写入--q-*变量在 ThemePicker.vue 中每个颜色被修改时都会触发update(color, val)function update(color, val) { setCssVar(color, val, document.getElementById(theme-picker)) dark[color] luminosity(val) 0.4 }setCssVar是 Quasar 导出的官方工具函数其完整实现位于 set-css-var.js核心只有一行element.style.setProperty(--q-${propName}, value)即把primary写入为--q-primarydark-page写入为--q-dark-page依此类推。所有 Quasar 组件的样式都消费这些--q-*变量因此改一个变量整个组件库的配色随之联动。调用时传入的第三个参数document.getElementById(theme-picker)把变量限定在构建器自身的作用域内避免污染整个文档页面——这也是setCssVar(colorName, colorValue[, element])第三个可选参数默认document.body的典型用法。运行时动态换肤的完整说明可参考 color-palette.md 的 “Dynamic Change of Brand Colors” 一节那里还介绍了配套的getCssVar读取工具以及用原生 JS 的等价写法// 等价于 setCssVar(primary, #0273d4) document.body.style.setProperty(--q-primary, #0273d4)luminosity自动判断前景文字用黑还是白update()中的另一行dark[color] luminosity(val) 0.4用于自动决定该颜色上应该放白色文字还是黑色文字。luminosity来自 Quasar 的 colors.js 工具它按 WCAG 标准计算颜色的相对亮度export function luminosity(color) { // ...将 sRGB 通道线性化后加权 return 0.2126 * R 0.7152 * G 0.0722 * B }在 ThemeBuilder 的模板中这个判断被用在按钮文字与卡片文字上例如:text-colordark[color] ? white : black和卡片上的text-${dark[color] ? white : black}。也就是说当你选了一个很亮的颜色构建器自动切换为深色文字保证可读性阈值 0.4 是源码中写死的判定线。该文件还导出了lighten、brightness、blend、changeAlpha等完整的颜色工具可用于在品牌色基础上派生更多辅助色。应用侧brand 配置如何落地如果你把导出的brand配置写入quasar.config或app.use(Quasar, ...)运行时 Quasar 会在安装阶段自动应用它。从 Body.js 的源码可以看到setColors(brand)的实现function setColors(brand) { for (const color in brand) { setCssVar(color, brand[color]) } }即在插件安装时遍历config.brand的每个键统一写入--q-*CSS 变量同时还会把变量以行内样式形式注入根元素源码中可见--q-${key}:${brand[key]}的拼接逻辑。这与 Theme Builder 在编辑时使用的setCssVar是同一套机制——构建器预览的正是你项目中实际会生效的效果。在真实项目中使用导出的主题综合 theme-builder.md、color-palette.md 与 sass-scss-variables.md推荐的应用路径有三种静态定制Quasar CLI把 Sass 或 SCSS 导出内容写入src/css/quasar.variables.sass/.scss。文件只需包含变量声明即可享受“按需注入变量”的编译加速。初始化配置把brand对象写入quasar.config的framework.config.brand或 UMD 项目在app.use(Quasar, { config: { brand } })中传入适合不希望依赖 Sass 文件的场景。动态换肤品牌色随时可通过setCssVar在运行时切换例如在 Boot 文件中读取 API 返回的配色后再设置color-palette.md 提供了defineBoot示例由于变量遵循 CSS 继承规则你也可以只在html或body上覆盖所需颜色删除自定义值即可还原默认主题。小结Theme Builder 把“选品牌色”这一设计决策变成了可视化的即改即见流程并覆盖了从 Sass 变量、构建配置到运行时 API 的全部落地方式。其背后是 Quasar 统一的 CSS 自定义属性体系--q-*变量 setCssVar和基于亮度luminosity的对比度自动判定。理解这层机制后你不仅能用好这个构建器还能在此基础上实现多主题切换、远程下发配色等更复杂的需求。相关扩展阅读Color Palette 文档、Sass/SCSS 变量文档、构建器组件源码 ThemePicker.vue。赞分享前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载相关推荐Pikaday SCSS变量系统主题定制与品牌适配Pikaday SCSS变量系统主题定制与品牌适配 还在为日期选择器与品牌风格冲突而烦恼Pikaday的SCSS变量系统让主题定制变得简单高效。本文将详细介前端UI组件my2sql监控告警集成构建智能数据库运维平台的完整方案my2sql监控告警集成构建智能数据库运维平台的完整方案 在当今数据驱动的业务环境中MySQL数据库的稳定运行直接关系到业务连续性。my2sql作为一款强大数据库数据同步CLITheme Factory Skill 实战指南用 10 套预设主题为 Codex 制品一键套用专业配色与字体Theme Factory Skill 实战指南用 10 套预设主题为 Codex 制品一键套用专业配色与字体 本文以开源仓库 awesome codex sAI 技能AI 插件工作流自动化人工智能上一篇如何用 log_config 把 Freqtrade 日志发送到 syslog 或 journald下一篇CleanArchitecture 如何使用 Web-webapi.http 文件获取 Bearer Token 并调用 API 端点创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考