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

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">

CS

次に、サイト全体で変更されるカスタム カラー スキームを使用して、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ページ作成の基礎知識)

推薦する

Firefox で Webdings フォントをサポートする方法

Firefox、Opera、その他のブラウザは Webdings フォントをサポートしていません。回...

href をクリックした後にページがジャンプしないようにするための空のリンクの正しい書き方 # 問題

リンクを使用する必要がある場合もありますが、リンクする必要はありません。onclick イベントを処...

JavaScript における call、apply、bind の実装原則の詳細な説明

目次序文電話使用法成し遂げるシンプルな実装バージョン:アップグレード版:適用する使用法成し遂げるバイ...

vue の webpack -v エラー解決の概要

XiaobaiはVueについて学び、次にwebpackについて学び、そしてさまざまなものをインストー...

パーティショニングを使用して数十億のデータに対する MySQL データ処理を最適化する方法

MySQL が数千万のデータをクエリする場合、ほとんどのクエリ最適化の問題はインデックスを通じて解決...

Vue はシームレスなカルーセル効果 (マーキー) を実現します

この記事では、シームレスなカルーセル効果を実現するためのVueの具体的なコードを例として紹介します。...

Vue2.0でデータの双方向バインディング機能をjsを使って実装する

Object.definePropertyの理解文法:オブジェクト.defineProperty(o...

Vueは3階層メニューを再帰的に実装する

この記事の例では、3階層メニューを再帰的に実装するVueの具体的なコードを参考までに共有しています。...

JavaScriptはフォームデータの非同期取得を実装します

この記事では、フォームデータの非同期取得を実現するためのJavaScriptの具体的なコードを例とし...

Linux ネットワークプログラミングにおけるソケットオプションの実装

ソケットオプション機能機能: ソケットファイル記述子の属性の読み取りと設定に使用されるメソッド #i...

MySQLのロングトランザクションに関する深い理解

序文:この記事では主にMySQLのロングトランザクションに関する内容を紹介します。例えば、トランザク...

VirtualBox に CentOS、JDK、Hadoop をインストールする詳細なチュートリアル

目次1. 前提条件1.1 サポートされているプラ​​ットフォーム1.2 jdk および hadoop...

HTML メタビューポート属性の説明

ビューポートとはモバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置し...

Linux でリモート MySQL データベースを手動で展開する方法の詳細な説明

1. mysql をインストールします。次のコマンドを実行して、YUM ソースを更新します。 rpm...

JavaScript のプロトタイプとプロトタイプチェーンの詳細な説明

目次プロトタイプチェーン図プロトタイピングに必須の知識プロトタイププロパティ(プロトタイプを表示) ...