カラー

• プライマリ カラー
• セカンダリ カラー

プライマリ カラー

Konsta UI の色は、たとえば「マテリアル ユー」デザインにはさまざまな色のセットが付属しているため、少し厄介です。

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>