ionicでCSS変数を使う
ゲームブックでブックの枠をデザインする事で多少なりとも”雰囲気”を出そうとしているのですが、これ自体は
1.それぞれのデザインのCSSを用意する
2.AngularのngClassディレクティブを利用する
の2つで単純な例としては実装出来ました。
この連載の『ionic(angular)の画面デザインの動的変更』を参照ください。
https://ncode.syosetu.com/n5283hn/193/
しかし、これだけでは細かいカスタマイズ(もっと明るくしたいなど)には適していません。
そこで存在だけは知っていたCSS変数と言うものを使えないかと考えました。
CSS カスタムプロパティ(変数)の使用
https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties
しかし、どうもうまく行かないので(変数が存在しない時の挙動をする)調べて見ると、ionicでCSS変数を定義する場所が異なっていることが判明しました。
CSS変数
https://ionicframework.com/docs/ja/v6/theming/css-variables
結論を言うと、”src/theme/variables.scss”というファイル内で定義してやることで動作しました。
javascriptで変数の設定も動作するようです。(細かなテストはこれから)
https://ionicframework.com/docs/ja/v6/theming/css-variables#javascript%E3%81%A7%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9
ちょっと引っかかったのは、HTML要素に対して操作する事です。
最初、[ngClass]のクラス名に対して処理を行おうとしたのですが、”動的”なのであるエレメントがそのクラスを使用しているとは限らないためか、うまく動作しませんでした。
操作例は、以下のコードをご参照ください。
const el = document.querySelector('.fancy-button');
el.style.setProperty('--background', '#36454f');