（この記事は Fran Dios が 2018年1月17日に The Web Tub に投稿した Onsen UI Dark & Theme Customization の翻訳です。）
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のバージョン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モジュールからでもアクセス可能です。
この情報が皆様の開発に少しでも役立つことを願っております！
フリーランスの翻訳家。インターネット・通信業界で10年ほど翻訳を経験したあと、2013年からフリーランスに。直訳ではない、わかりやすい翻訳を心がけています。校正など翻訳全般に関するご相談がありましたら watabe08@gmail.com（渡部） まで。