颜色

• 主色
• 辅助颜色

主色

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.js 中的 konsta.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] 类添加到所需组件中，例如：

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

这些颜色将被正确继承，因此 k-color-[name] 类也可以添加到父元素中，例如：

<k-page class="k-color-brand-red">
  <k-button>Red Button</k-button>
  <k-button>Red Button</k-button>
  <k-button>Red Button</k-button>
</k-page>