🔥 認識我們的新專案 t0ggles - 您的終極專案管理工具! 🔥

顏色

主要顏色

Konsta UI 中的顏色有點複雜,例如「Material You」設計就帶有一整套不同的顏色。

Konsta UI 會根據 Tailwind 配置中 konsta.colors 區段提供的顏色,自動產生所有需要的顏色。

// tailwind.config.js

const konstaConfig = require('konsta/config');

module.exports = konstaConfig({
  konsta: {
    colors: {
      // "primary" is the main app color, if not specified will be default to '#007aff'
      primary: '#007aff'
    }
  },
  /*
   * "Usual" tailwind colors can be used for some custom elements and styling.
   * These colors will not suite for Konsta UI components theming
   */
  theme: {
    extend: {
      colors: {
        'my-red': '#ff0000'
      }
    }
  }
  // rest of your usual Tailwind CSS config here
  ...
});

根據指定的 primary 顏色,Konsta UI 配置將在您的配置中產生以下 theme.extend.colors

// will be added automatically to Tailwind config:

theme: {
  extend: {
    colors: {
      // auto generated colors
      'primary': 'rgb(var(--k-color-primary) / <alpha-value>)',
      'md-light-primary': 'rgb(var(--k-color-md-light-primary) / <alpha-value>)',
      'md-light-on-primary': 'rgb(var(--k-color-md-light-on-primary) / <alpha-value>)',
      'md-light-primary-container': 'rgb(var(--k-color-md-light-primary-container) / <alpha-value>)',
      'md-light-on-primary-container': 'rgb(var(--k-color-md-light-on-primary-container) / <alpha-value>)',
      'md-light-secondary': 'rgb(var(--k-color-md-light-secondary) / <alpha-value>)',
      'md-light-on-secondary': 'rgb(var(--k-color-md-light-on-secondary) / <alpha-value>)',
      'md-light-secondary-container': 'rgb(var(--k-color-md-light-secondary-container) / <alpha-value>)',
      'md-light-on-secondary-container': 'rgb(var(--k-color-md-light-on-secondary-container) / <alpha-value>)',
      'md-light-surface': 'rgb(var(--k-color-md-light-surface) / <alpha-value>)',
      'md-light-on-surface': 'rgb(var(--k-color-md-light-on-surface) / <alpha-value>)',
      'md-light-surface-variant': 'rgb(var(--k-color-md-light-surface-variant) / <alpha-value>)',
      'md-light-on-surface-variant': 'rgb(var(--k-color-md-light-on-surface-variant) / <alpha-value>)',
      'md-light-outline': 'rgb(var(--k-color-md-light-outline) / <alpha-value>)',
      'md-light-outline-variant': 'rgb(var(--k-color-md-light-outline-variant) / <alpha-value>)',
      'md-light-surface-1': 'rgb(var(--k-color-md-light-surface-1) / <alpha-value>)',
      'md-light-surface-2': 'rgb(var(--k-color-md-light-surface-2) / <alpha-value>)',
      'md-light-surface-3': 'rgb(var(--k-color-md-light-surface-3) / <alpha-value>)',
      'md-light-surface-4': 'rgb(var(--k-color-md-light-surface-4) / <alpha-value>)',
      'md-light-surface-5': 'rgb(var(--k-color-md-light-surface-5) / <alpha-value>)',
      'md-dark-primary': 'rgb(var(--k-color-md-dark-primary) / <alpha-value>)',
      'md-dark-on-primary': 'rgb(var(--k-color-md-dark-on-primary) / <alpha-value>)',
      'md-dark-primary-container': 'rgb(var(--k-color-md-dark-primary-container) / <alpha-value>)',
      'md-dark-on-primary-container': 'rgb(var(--k-color-md-dark-on-primary-container) / <alpha-value>)',
      'md-dark-secondary': 'rgb(var(--k-color-md-dark-secondary) / <alpha-value>)',
      'md-dark-on-secondary': 'rgb(var(--k-color-md-dark-on-secondary) / <alpha-value>)',
      'md-dark-secondary-container': 'rgb(var(--k-color-md-dark-secondary-container) / <alpha-value>)',
      'md-dark-on-secondary-container': 'rgb(var(--k-color-md-dark-on-secondary-container) / <alpha-value>)',
      'md-dark-surface': 'rgb(var(--k-color-md-dark-surface) / <alpha-value>)',
      'md-dark-on-surface': 'rgb(var(--k-color-md-dark-on-surface) / <alpha-value>)',
      'md-dark-surface-variant': 'rgb(var(--k-color-md-dark-surface-variant) / <alpha-value>)',
      'md-dark-on-surface-variant': 'rgb(var(--k-color-md-dark-on-surface-variant) / <alpha-value>)',
      'md-dark-outline': 'rgb(var(--k-color-md-dark-outline) / <alpha-value>)',
      'md-dark-outline-variant': 'rgb(var(--k-color-md-dark-outline-variant) / <alpha-value>)',
      'md-dark-surface-1': 'rgb(var(--k-color-md-dark-surface-1) / <alpha-value>)',
      'md-dark-surface-2': 'rgb(var(--k-color-md-dark-surface-2) / <alpha-value>)',
      'md-dark-surface-3': 'rgb(var(--k-color-md-dark-surface-3) / <alpha-value>)',
      'md-dark-surface-4': 'rgb(var(--k-color-md-dark-surface-4) / <alpha-value>)',
      'md-dark-surface-5': 'rgb(var(--k-color-md-dark-surface-5) / <alpha-value>)',
      'ios-primary': 'rgb(var(--k-color-ios-primary) / <alpha-value>)',
      'ios-primary-tint': 'rgb(var(--k-color-ios-primary-tint) / <alpha-value>)',
      'ios-primary-shade': 'rgb(var(--k-color-ios-primary-shade) / <alpha-value>)'
      // static colors that you can override
      'ios-light-surface': '#efeff4',
      'ios-dark-surface': '#000',
      'ios-light-surface-1': '#fff',
      'ios-dark-surface-1': '#1c1c1d',
      'ios-light-surface-2': '#f7f7f8',
      'ios-dark-surface-2': '#121212',
      'ios-light-surface-3': '#fff',
      'ios-dark-surface-3': '#1c1c1d',
      'ios-light-surface-variant': '#f4f4f4',
      'ios-dark-surface-variant': '#232323',
    }
  }
}

次要顏色

如果您想要 Konsta UI 組件的一些次要顏色,例如將某些按鈕設為紅色,您需要在 tailwind.config.jskonsta.colors 中指定這些顏色

const konstaConfig = require('konsta/config');

module.exports = konstaConfig({
  konsta: {
    colors: {
      // "primary" is the main app color, if not specified will be default to '#007aff'
      primary: '#007aff',
      // custom colors used for Konsta UI components theming
      'brand-red': '#ff0000',
      'brand-green': '#00ff00',
    }
  },
  // rest of your usual Tailwind CSS config here
  ...
});

為了應用這些顏色,我們需要將 k-color-[name] 類別新增到所需的組件,例如:

<Button>Usual Button</Button>
<Button class="k-color-brand-red">Red Button</Button>
<Button class="k-color-brand-green">Green Button</Button>

此類顏色將正確繼承,因此 k-color-[name] 類別也可以新增到父元素,例如:

<Page class="k-color-brand-red">
  <Button>Red Button</Button>
  <Button>Red Button</Button>
  <Button>Red Button</Button>
</Page>
程式碼授權條款 MIT.
2022 © Konsta UI 由 nolimits4web.