Ionicのvariables.scssでプログラムで変数を設定する方法は？

Question

Ionicにはvariables.scssファイルが付属しており、そこに原色などの異なるスタイル変数を設定することができます。

ここで変数をプログラムで変更する方法はありますか？例えば

$colors: (
    primary: #ffbb00, 
    secondary: #32db64, 
    danger: #f53d3d 
); 

：カラーピッカー

Answer 1

の結果に原色を変更するので、私は好奇心旺盛だと私は解決策を見つけることができたかどうかを確認するために周り探していたので、ここで私が得たものです。

SASS変数はコンパイルされ、CSSに変換されるので変更できません。したがって、属性color="your Color Name"を使用するタグは、ビルドプロセスで事前処理され、background-colorなどのものになります。

だから私は、SASS変数とcss variablesを使用して探し始めた

:root { 
    --modified-color: #333; 
} 
/*Declaring it here \/ or inside :root */ 
$colors: (
    primary: --modified-color, 
    secondary: #32db64, 
    danger: #f53d3d 
); 

のようなものが、私が望んでいたものを達成することができませんでした、または私はそれを正しく行う方法を知りません。変数を使用すると、私の次のアイデアをより簡単に行うことができます。

だから私は「多分回避策はあります」と思ったと何かが私の心に来た：

• あなたがのは.dynamic-bg-colorそれを呼びましょう、クラスを作成することができます。
• 最初に希望の色に設定してください。.dynamic-bg-color: { bakcground-color: #333}としましょう。
• <ion-item>または<ion-toolbar>または<button>のように、変更するコンポーネントにそのクラスを指定します。
• この色は、localStorage、NativeStorageなどの文字列として保存します（this.storage.set('dynamic', '#333')）。ユーザーが新しい色を選択すると

• 、あなたはストレージ内の古い色をオーバーライドして、クラスの色を変更します：

  public updateColor = (pickedColor) => { const color: string = pickedColor; // I'M ASSUMING THE PICKER RETURNS IT AS A STRING LIKE '#333333' let myTags = document.getElementsByClassName('dynamic-bg-color'); for(i=0; i < myTags.length; i++) { myTags [i].style.backgroundColor = color; // UPDATE ANYTHING ELSE YOU WANT } }

は、おそらくあなたは毎回あなたを更新する必要がありますそのクラスで新しいタグが生成されるので、新しいページを入力してください。そうすれば、ionViewWillEnterにコードを置くことで、そのページに移動するたびに、またはそのページに戻って色を更新します。

これを試したことはありませんが、それは価値があります。あなたがこれを試しても、それが働いたら教えてください。

希望するもの：