PhotoshopはUIのテーマ(カラー)を変更することができますので、プラグインもそれに対応するのが理想です。

現状ではテーマカラーを変更すると、このようなことになってしまいます。

全体のカラーはNakatoji UIライブラリが対応しますが、今回のようにボタン内にアイコン画像を配置している場合は、それをテーマに合わせて適宜変更する必要があります。

 

<アイコン画像の作成>

ボタン用アイコンの作成」でダーク用のアイコンは作成済みですので、階調を反転したブライト用のアイコンを作成します。

 これらを「ボタン用アイコンの作成」のときと同様の手順でプロジェクトへ追加します。

 

<index.htmlの変更>

更新のタイミングは他のUIのイベントと同じくntEventHandler関数で受け取りますが、デフォルトではこのイベントの発生がオフになってます。

まずはそのイベントが受け取れるように、index.htmlにあるNakatoji UIライブラリの初期化部でotherEventsオプションをtrueにします。

nakatojiLib.init({
    fontSize: 11,
    defaultFont: "'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif",
    fontOffset: 0,
    otherEvents: true,
    testMode: false
});

これでntEventHandler関数でテーマ変更のイベントを受け取ることができるようになります。

 

起動時の表示もテーマカラーに合わせなければなりませんので、ボタン作成部を以下のように変更します。

var xStr = nakatojiLib.getBgColor() == "dark" ? "" : "x"; //テーマカラー適応用
//
nakatojiLib.addCntl("button", [15, 4], [22, 22], {
    name: "button_L",
    icon: "./icons/ui_L" + xStr + ".png"
});
//以降、ほかのボタンも同様に

nakatojiLibオブジェクト(ライブラリ内)のgetBgColor関数は 、現在のテーマカラーを返します。ダーク系なら「dark」、ブライト系なら「bright」と返ります。

今回の場合、ボタン内に表示するアイコンのファイル名が、ダーク系とブライト系で「xが付くか付かないか」の違いになっていますので、iconオプションの値(ファイル名)を「ui_L" + xStr + ".png」としておき、三項演算子でxStrの内容を変えるようにしています。

 

テーマが変更されたときのイベントに対応するため、ntEventHandler関数の内容を以下のように変更します。

function ntEventHandler(objName, event, detail) {
    if (objName == "themaColor") {
        xStr = detail == "dark" ? "" : "x"; //変更されたテーマカラーに応じて
        nakatojiLib.ctrlDB["button_L"].replaceContents({
            icon: "./icons/ui_L" + xStr + ".png"
        });
        //以降、ほかのボタンも同様に
    } else {
        var offsetNum = nakatojiLib.ctrlDB["txa"].value();
        var sendStr = "addGuide('" + objName + "','" + offsetNum + "')";
        nakatojiLib.sendHostScript(sendStr);
    }
}

引数「objName」が「themaColor」を受け取ったときが更新のタイミングです。

テーマの種類は「detail」を参照します。ダーク系なら「dark」、ブライト系なら「bright」となっていますので、適宜ボタンの内容を変更します。

参照:<個別解説>ボタン

 

すべての変更を反映させたものは以下のようになります。

 

これでテーマカラーに対応したアイコンが表示されるようになります。

 

なお、テーマカラーへの対応については「ホストアプリ―ケーションのテーマカラーへの対応」のページにも解説がありますので、そちらもご参照ください。

 

 

Joomla templates by a4joomla