(この記事は Fran Dios が 2018年1月17日に The Web Tub に投稿した Onsen UI Dark & Theme Customization の翻訳です。)

Onsen UIテーマローラーが生まれ変わりました!
こちらのオンラインツールを使用すれば、テーマの作成やカスタマイズが簡単に行えます。

Onsen UIテーマローラー

新しいテーマローラーはv2.6.0以上のOnsen UIを対象としています。画面左上のドロップダウンリストからご希望のバージョンを選択できます。
v2.1.0以前のバージョン(Stylusを使用)を対象として、旧テーマローラーも以前のままお使いいただけます。
v2.1.0からv2.6.0の間のバージョンに関してはCSSコンポーネント内に不具合があったため、意図的にドロップダウンリストから外しています。
Onsen UIのアップデートは簡単にできますのでぜひv2.6.0以降をお試しください。Monacaの場合は「JS/CSSコンポーネントの追加と削除」画面から最新のOnsen UIをインストールできます。

テーマローラーでは、画面右側のカラーピッカーを使用してコンポーネントの色をカスタマイズできます。
カスタマイズ終了後、「Download」ボタンをクリックするとダウンロード画面が開き、テーマが設定されたファイルをダウンロードできます。ダウンロード画面ではコンポーネントを選択することができますので、不必要なコンポーネントをテーマから取り除き、ファイルのサイズを縮小することもできます。

テーマローラーの機能紹介:コンポーネントの選択

ダウンロードされたzipファイルを展開すると、以下のファイルが含まれています。

  • onsen-css-components.css
  • onsen-css-components.min.css
  • readme.md
  • theme.css

これらのファイルを、Onsen UIの css フォルダ内に配置することで、テーマが適用されます。

より高度な利用方法として、「Bulk Edit(一括編集)」機能を使用すれば複数の色を一括で変更することもできます。

テーマローラーの機能紹介:一括編集

theme.css ファイル内の変数を「一括編集」画面上にコピー&ペーストすれば、既存のテーマをカスタマイズすることもできます。変更した内容を保存するには「Save changes」ボタンを押してください。また、cssnextでサポートされている機能(「色」に関する機能全般)も「一括編集」画面上で使用できます。

ダークカラーのテーマを提供開始

背景色を黒にしたOnsen UIテーマの提供を始めました。このテーマを使用すれば、画面の色を反転させてハッカー仕様のアプリを作ることもできますし(笑)、既存のアプリを夜間モードに設定することもできます。ぜひ一度お試しください。

黒を基調としたOnsen UIのテーマ

このテーマはOnsen UIのバージョン2.7.0以降から利用できます。
関連ファイルは onsenui/css/ 配下に置かれています。CSSコンポーネントは dark-onsen-css-components.css に、CSS変数(CSS Variables:カスタムプロパティ)は dark-theme.css にそれぞれ定義されています。
これらのファイルをHTML文書に組み込むことで、画面にダークカラーのテーマが適用されます。

おまけの耳より情報:リソースローダーについて

Webpackを利用したアプリケーションの場合、sass-resources-loader を使用すればアプリ内でCSS変数を共有することができます。このリソースローダーはもともとSass向けに開発されたものですが、どのCSSプリプロセッサとも相性が良いようです。また、cssnextともいっしょに使えます。

私はVue.jsアプリを開発する際、<style scoped> ブロック間で共通のCSS変数を設定するときにこのリソースローダーを使用しています。もちろん、使用方法に制限はなく、他のJavaScriptフレームワークでも使用できます。ちなみに、Onsen UIのテーマローラーを利用するのであれば、コンポーネントの種類を問わず、こちらのCSS変数・mixin・メディアクエリをstyleブロックに設定することができます。これにより、Onsen UIテーマで使用しているCSS変数をアプリ内で共有できるようになります。他のCSSモジュールからでもアクセス可能です。

この情報が皆様の開発に少しでも役立つことを願っております!