ブートストラップのデフォルトのテーマの色を変更する方法は？

ブートストラップ5のデフォルトのテーマの色を変更するには、SASSを使用して、ブートストラップをインポートする前に$プライマリなどの変数をオーバーライドします。 2。$テーマカラーマップを更新して、完全なユーティリティクラスサポートの「ハイライト」などの色を追加または変更します。 3. NPM経由でブートストラップをインストールした後、Webpack、Vite、Sass CLIなどのビルドツールを使用してSASSファイルをコンパイルします。 4.あるいは、CSSカスタムプロパティを使用して迅速なオーバーライドを使用しますが、この方法では新しいユーティリティクラスを生成せず、重要であるため、スケーラブルが低くなります。推奨されるアプローチは、完全で保守可能なカスタマイズにSASSを使用することです。

Bootstrap（特にBootstrap 5以降）のデフォルトのテーマの色を変更するのは、SASSを使用している場合は簡単です。これがブートストラップの構築方法です。フレームワークをインポートする前に、ブートストラップの変数をオーバーライドすることにより、カラーパレットをカスタマイズできます。

適切に行う方法は次のとおりです。

✅1。SASSを使用して変数をカスタマイズします

Bootstrapは、色にSASS変数を使用します。デフォルトのテーマの色（プライマリ、セカンダリ、成功、危険など）を変更するには、次のことが必要です。

1. カスタムSASSファイルを作成します（例： custom.scss ）
2. ブートストラップをインポートする前に、ブートストラップのカラー変数をオーバーライドします
3. SASSをCSSにコンパイルします

例：プライマリを変更し、カスタムカラーを追加します

// custom.scss

//1。デフォルト変数をオーバーライドします
$プライマリ：＃ff6b35; //プライマリを素敵なオレンジに変更します
$ success：＃28A745;
$危険：＃DC3545;

// 2。オプションでテーママップに新しい色を追加します
$ custom-colors：（
  「ハイライト」：＃ffcc00、
）;

// 3。ブートストラップをインポートする（可変オーバーライドの後に来る必要があります）
@import "〜bootstrap/scss/bootstrap";

？注：注文は重要です！ブートストラップをインポートする前に、変数を設定する必要があります。

✅2。テーマの色のクラスを再コンパイルします

Bootstrapは$theme-colorsと呼ばれるマップに基づいて、ユーティリティクラス（ .bg-primary 、 .text-successなど）を生成します。新しい色を完全なサポート（クラス、ホバーステートなど）にしたい場合は、このマップを更新してください。

例： $theme-colorsマップを変更します

// custom.scss

//カスタムカラーを定義します
$ custom-primary：＃ff6b35;
$ custom-secondary：＃6f42c1;

//テーマカラーマップを更新します
$テーマ色：（
  「プライマリ」：$カスタムプリマリー、
  「セカンダリ」：$カスタムセコンダリー、
  「成功」：＃28A745、
  「危険」：＃DC3545、
  「警告」：＃ffc107、
  「情報」：＃17A2B8、
  「光」：＃f8f9fa、
  「ダーク」：＃343A40、
  「ハイライト」：＃ffcc00 //これにより、.btn-highlight、.text-highlightなどが生成されます。
）;

@import "〜bootstrap/scss/bootstrap";

コンパイル後、次のようなユーティリティクラスを取得します。

• .text-highlight
• .bg-highlight
• .btn-highlight

✅3。ビルドツールで使用する（推奨）

この作業を行うには、SASSをコンパイルするビルドセットアップが必要です。一般的なツール：

• sass-loaderを備えたWebpack
• Vite 、 Parcel 、またはNode-Sass
• または、 sass CLIを使用するだけです。

 sass custom.scss output.css

NPM経由でブートストラップがインストールされていることを確認してください。

 npmインストールブートストラップ

✅4。代替：CSSカスタムプロパティを使用（限定）

SASSを使用できない場合は、 CSSでいくつかのスタイルをオーバーライドできますが、これは新しいユーティリティクラスを生成しません。

 / *特定の要素をオーバーライドできます */
.btn-primary {
  バックグラウンドカラー：＃ff6b35;
  境界線：＃ff6b35;
}

.bg-primary {
  バックグラウンドカラー：＃ff6b35！
}

deaverこの方法はスケーラブルではなく、必要です!importantので、理想的ではありません。

まとめ

ほとんどのプロジェクトでは、 SASSを使用して変数をオーバーライドし、ブートストラップを再構築することは、デフォルトのテーマ色を変更する最もクリーンで最も強力な方法です。

基本的に、ただ：

1. 変数をカスタマイズします
2. $theme-colors更新します
3. ブートストラップをインポートします
4. コンパイル

そして、あなたは行ってもいいです。

以上がブートストラップのデフォルトのテーマの色を変更する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。