CSSを用いた多用途アプリケーションのブランド化

3236 ワード
webdev css テキストリンク
私の友人はおもしろい挑戦をしました.彼は顧客の色でB 2 Bアプリケーションの公的な部分を持っていて、私がそれをする方法を私に尋ねました.このポストは私が彼に言ったことを説明する.
アプリケーションは、基本的には、ユーザーが提出するデータを記述する簡単な形式と概要です.

CSSのベースセットアップ
色のCSS変数を使用して、一貫してブランドの色を適用する場所を使用します.
:root{
  --brand-color-1:rgb(66,153,225);
  --brand-color-2:rgb(255,255,255);
}
私はこのボタンを作成しました.
button {
  background-color: var(--brand-color-1);
  border-color: var(--brand-color-2);
  color: var(--brand-color-2);
  border-radius: 3.5rem;
  border-style: solid;

  padding: 6px 10px 6px 10px;
}
このように見えます:

CSS継承を使用して色を上書きする
CSSプロパティでは、ルート要素から子要素へ継承されます.
この場合、私はすべての要素がオーバーライドされた色を使用したいと思いますので、これをbodyでオーバーライドします.
<body style="--brand-color-1: #48BB78">

これで、選択したWebフレームワークを使用して、HTML上の色をオーバーライドできます.
サーバー上でレンダリングする場合は、キャッシュを認識する必要があります.あなたはおそらくテナントによってキャッシュするのが好きで、色を変えるとき、あなたが無効にすることを確認します、しかし、それはこのポストのために範囲外です.
あなたがこの解決策で遊ぶことを望むならば、私はCodepenを作りました:

結論
これはバックエンド開発者による解決です:-).より良い解決策をご存知ですか?
Andriod死亡通知メカニズムを利用してサービスにクライアントがkillされたと伝えた.
[python]再符号化/株式の最適な購入/販売時点アルゴリズム