CSSテーマを簡単に切り替える方法の詳細な説明

最近、個人の Web サイトに非常にシンプルなカラースキーム (テーマ) スイッチャーを追加しました。ウェブサイトのフッターにあるこのシンプルなカラースイッチャーを切り替えて、動作を確認することができます。他の誰かが自分のサイトやプロジェクトにこのような機能を追加しようとしている場合に備えて、その方法を説明する簡単な投稿を書こうと思いました。始めましょう。

html

まず、選択したテーマに基づいてテーマを切り替えるための「ボタン」を含める必要があります。 (注: 必要に応じて、これらをselect要素のoptionsとして作成することもできます)

<div class="color-select">
    <button onclick="toggleDefaultTheme()"></button>
    <button onclick="toggleSecondTheme()"></button>
    <button onclick="toggleThirdTheme()"></button>
</div>

それでおしまい！今のところ、 onclickパラメータについてはあまり心配しないでください。JavaScript を追加するときにこれに戻ります。残っているのは、次のようにデフォルトのテーマクラスをhtml要素に追加することだけです。

<html class="theme-default">

次に、サイト全体で変更されるカスタムカラースキームを使用して、2 つの色color-selectボタンのスタイルを設定する必要があります。まずは配色から始めましょう。

これらのテーマをシームレスに切り替えるために、変化するカラーセットを CSS 変数として設定します。

.テーマデフォルト{
   --アクセントカラー: #72f1b8;
   --font-color: #34294f;
}

.テーマ-セカンド{
    --アクセントカラー: #FFBF00;
    --フォント色: #59316B;
}

.theme-third {
    --アクセントカラー: #d9455f;
    --フォント色: #303960;
}

体 {
    背景色: var(--accent-color);
    色: var(--font-color);
}

最後に、ユーザー向けのカラーパレットのスタイルを設定します。

.color-selectボタン{
    -moz-appearance: なし;
    外観: なし;
    境界線: 2px 実線;
    境界線の半径: 9999px;
    カーソル: ポインタ;
    高さ: 20px;
    マージン: 0 0.8rem 0.8rem 0;
    アウトライン: 0;
    幅: 20px;
}

/* 各スウォッチを対応するテーマに合わせてスタイル設定します */
.color-select ボタン:nth-child(1) { 背景: #72f1b8; 境界線の色: #34294f; }
.color-select ボタン:nth-child(2) { 背景: #FFBF00; 境界線の色: #59316B; }
.color-select ボタン:nth-child(3) { 背景: #d9455f; 境界線の色: #303960; }

JavaScript

各スウォッチボタンが対応するテーマをトリガーするようにし、最初にメインhtml要素に添付したtheme-defaultクラスを交換する必要があります。また、ユーザーが選択した内容をlocalStorage保存して、ページを再読み込みしたり別のページに移動したりしても選択内容が維持されるようにする必要があります。

// 指定されたテーマ/カラースキームを設定する
関数 setTheme(テーマ名) {
    localStorage.setItem('テーマ', テーマ名);
    document.documentElement.className = テーマ名;
}

// カラーテーマを切り替える
関数toggleDefaultTheme() {
    localStorage.getItem('theme') !== 'theme-default' の場合{
        テーマを設定します('theme-default');
    }
}
関数toggleSecondTheme() {
    localStorage.getItem('theme') !== 'theme-second' の場合{
        テーマを設定します('theme-second');
    }
}
関数トグルサードテーマ() {
    localStorage.getItem('theme') !== 'theme-third' の場合{
        テーマを設定します('theme-third');
    }
}

// 初期読み込み時にすぐにテーマを設定する
（関数 （） {
    localStorage.getItem('theme') === 'theme-default'の場合{
        テーマを設定します('theme-default');
    }
    localStorage.getItem('theme') === 'theme-second'の場合{
        テーマを設定します('theme-second');
    }
    localStorage.getItem('theme') === 'theme-third'の場合{
        テーマを設定します('theme-third');
    }
})();

それでおしまい！さて、各テーマスタイルをどの程度カスタマイズしたいかによって異なります。可能性は無限大です！

CSSテーマを簡単に切り替える方法についての記事はこれで終わりです。CSSテーマの切り替えの詳細については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<: MySQLの分離レベルとロックメカニズムの詳細な説明

>>: HTML文書の基本構造（Webページ作成の基礎知識）