Quasar Framework 提供了多種現成的顏色選擇。您可以將它們作為 Sass/SCSS 變數在您的 CSS 程式碼中使用，或者直接在您的 HTML 範本中使用 CSS 類別。

// quasar.config file

return {
  framework: {
    config: {
      brand: /* look at QuasarConfOptions from the API card */
    }
  }
}

Brand Colors

Quasar 元件使用的大多數顏色都與這八種您可以更改的顏色密切相關。選擇這些顏色是區分應用程式設計時應採取的首要步驟。您會立即注意到，在更改其預設值後，Quasar 元件會遵循這些顏色作為指導方針。

Color List

以下是現成的顏色列表。在您應用程式的 *.vue 檔案中，您可以將它們用作 CSS 類別（在 HTML 範本中），或在 <style lang="..."> 標籤中用作 Sass/SCSS 變數。

作為 CSS 類別使用

使用 `text-` 或 `bg-` 前綴作為類別名稱來更改文字顏色或背景顏色。

<!-- changing text color -->
<p class="text-primary">....</p>

<!-- changing background color -->
<p class="bg-positive">...</p>

使用 Sass/SCSS 變數

在您的應用程式的 `*.vue` 檔案中，您可以將顏色用作 `$primary`、`$red-1` 等等。

<!-- Notice lang="sass" -->
<style lang="sass">
div
  color: $red-1
  background-color: $grey-5
</style>

<!-- Notice lang="scss" -->
<style lang="scss">
div {
  color: $red-1;
  background-color: $grey-5;
}
</style>

新增您自己的顏色

如果您想為您的組件使用您自己的顏色（假設我們要新增一個名為「brand」的顏色），您只需要將以下 CSS 新增到您的應用程式中

.text-brand {
  color: #a2aa33 !important;
}
.bg-brand {
  background: #a2aa33 !important;
}

現在我們可以將此顏色用於 Quasar 組件

<q-btn color="brand" ... />

您可以使用 `getPaletteColor` 工具在 JS 環境中存取自訂顏色值（十六進位字串）。

動態更改品牌顏色（動態主題顏色）

運作方式

您可以在執行時動態自訂品牌顏色：`primary`、`secondary`、`accent`、`dark`、`positive`、`negative`、`info`、`warning`。這表示您可以擁有一個具有預設顏色主題的應用程式建置版本，但以執行時選定的主題顯示它。

主要顏色配置是使用 CSS 自訂屬性完成的，這些屬性儲存在根元素（`:root`）上。每個屬性的名稱為 `--q-${name}`（範例：`--q-primary`、`--q-secondary`），並且應具有有效的 CSS 顏色作為值。

CSS 自訂屬性使用與一般 CSS 相同的繼承規則，因此您只能重新定義您想要的顏色，其餘的將從父元素繼承。

建議的工作流程是在 `html`（`document.documentElement`）或 `body`（`document.body`）元素上設定您的自訂顏色屬性。這將允許您僅通過刪除您的自訂屬性來恢復為預設顏色。

有關 CSS 自訂屬性（變數）的更多資訊，請參閱 MDN。

工具程式：setCssVar

Quasar 提供了一個輔助函數，用於設定 Quasar CSS 變數，該變數也可用於品牌顏色：`setCssVar(colorName, colorValue[, element])`

使用輔助函數設定品牌顏色的範例

import { setCssVar } from 'quasar'

setCssVar('light', '#DDD')
setCssVar('primary', '#33F')
setCssVar('primary', '#F33', document.getElementById('rebranded-section-id'))

使用原生 JavaScript 設定品牌顏色的範例

// equivalent of setCssVar('primary') in raw JavaScript:
document.body.style.setProperty('--q-primary', '#0273d4')

工具程式：getCssVar

Quasar 提供了一個輔助函數，用於取得 Quasar CSS 變數的值，該變數也可用於品牌顏色：`getCssVar(colorName[, element])`

使用輔助函數取得品牌顏色的範例

import { getCssVar } from 'quasar'

getCssVar('primary') // '#33F'
getCssVar('primary', document.getElementById('rebranded-section-id'))

此輔助函數的作用是封裝原始 JavaScript `getPropertyValue()`，並且為了方便起見而提供。以下是等效的原生 JavaScript 範例

// equivalent of getCssVar('primary') in raw JavaScript:
getComputedStyle(document.documentElement)
  .getPropertyValue('--q-primary') // #0273d4

更多顏色工具程式

除了上述工具程式外，我們在文件中還有一個專門介紹顏色處理的部分，您可能會感興趣：`顏色工具程式`。

import { colors, setCssVar } from 'quasar'

const { lighten } = colors

const newPrimaryColor = '#933'
setCssVar('primary', newPrimaryColor)
setCssVar('primary-darkened', lighten(newPrimaryColor, -10))

設定預設值

您可以設定一些品牌顏色，而無需修改 Sass/SCSS 變數。

請參閱上面的 `Configuration` 章節，以了解在 Quasar CLI、Vite 外掛程式/Vue CLI 和 UMD 專案的初始配置期間如何設定。

如果您正在使用 Quasar CLI，您也可以使用 `@quasar/app-vite 啟動檔案` 或 `@quasar/app-webpack 啟動檔案`。如果您想在初始載入時動態更改顏色（可能是在從 API 獲取顏色之後），這特別有用。

import { setCssVar } from 'quasar'
import { boot } from 'quasar/wrappers'

export default boot(() => {
  setCssVar('primary', '#ff0000')
})

如果使用 SSR 模式，請在伺服器端執行時停用此啟動檔案

boot: [
  { server: false, path: 'brand-colors' }, // or the name you gave it
  // ...
],