UIkitテーマを作成する

独自のLessコードを配置するようにファイルを設定したら、UIkitのテーマを思いどおりにできます。
これまでLessを使用したことがない場合は、言語機能を確認してください。
UIkitのLessソースを使用する場合、いくつかの推奨事項があります。

変数を使用する

すでに宣言されている変数の値を上書きするだけで、多くのカスタマイズが可能です。フレームワークのLessファイル内で各コンポーネントのすべての変数を見つけて、テーマでそれらをオーバーライドすることができます。

まず、ソース内で変更するLess変数を見つけます。
例えば、グローバルリンクの色は 「/src/less/components/variables.less」で定義されています。

// default value
@global-link-color: #4091D2;

次に、独自のファイル内、つまり「/custom/my-theme.less」にカスタム値を設定して、デフォルトを上書きします。

// new value
@global-link-color: #DA7D02;

コンパイルされたCSSには、カスタムされた値が含まれます。
ただし、グローバルリンクの色が変更されただけではありません。多くのコンポーネントは、@ global- * という変数を使用して独自の色を適応させています。 そうすれば、いくつかのグローバル変数を変更するだけで、テーマをすばやく作成することができます。

フックを使用する

オーバーヘッド セレクターを防ぐために、LessのMixinsを使用します。これは、UIkitソースから事前に定義されたセレクターにフックし、追加のプロパティを適用します。セレクターの全てのドキュメントで繰り返す必要はなく、グローバルな変更をはるかに簡単に行うことができます。

まず、コンポーネントのLessファイルを調べて、拡張するルールを見つけます。
例えば、Cardコンポーネントの場合は「/src/less/components/card.less」です。

// CSS rule
.uk-card {
    position: relative;
    box-sizing: border-box;

    // mixin to allow adding new declarations
    .hook-card;
}

次に、独自のLessファイル内、つまり「/custom/my-theme.less」内のフックを使用して、追加のCSSを挿入します。

// mixin to add new declaration
.hook-card() { color: #000; }

その他のフック

使用可能な変数もフックもない場合は、独自のセレクターを作成することもできます。これを行うには、「.hook-card-misc」フックを使用して、セレクターを内部に記述します。これにより、新しいセレクターがコンパイルされたCSSファイルの適切な場所に並べ替えられます。
次の行を独自のLessファイル「/custom/my-theme.less」に追加するだけです。

// misc mixin
.hook-card-misc() {

    // new rule
    .uk-card a { color: #f00; }
}

反転色を無効にする

反転色には、柔軟な実装をするための追加のスタイルが含まれています。
プロジェクトでこれらのスタイルを使用していない場合は、Lessをコンパイルするときにそれらを無効にできます。そうすることでコンパイルされたCSSのファイルサイズを小さくすることができます。
反転色を無効にするには、color-modeを含むLess変数(@ card-primary-color-modeなど)を検索し、それらをnoneに設定します。

完全に無効にするには、次のように設定します。

@inverse-global-color-mode: none;

特定のコンポーネントの反転色を無効にすることもできます。

// Card
@card-primary-color-mode: none;
@card-secondary-color-mode: none;

// Navbar
@navbar-color-mode: none;

// Off-canvas
@offcanvas-bar-color-mode: none;

// Overlay
@overlay-primary-color-mode: none;

// Section
@section-primary-color-mode: none;
@section-secondary-color-mode: none;

// Tile
@tile-primary-color-mode: none;
@tile-secondary-color-mode: none;