最近、個人の Web サイトに非常にシンプルなカラー スキーム (テーマ) スイッチャーを追加しました。ウェブサイトのフッターにあるこのシンプルなカラースイッチャーを切り替えて、動作を確認することができます。他の誰かが自分のサイトやプロジェクトにこのような機能を追加しようとしている場合に備えて、その方法を説明する簡単な投稿を書こうと思いました。始めましょう。 html まず、選択したテーマに基づいてテーマを切り替えるための「ボタン」を含める必要があります。 (注: 必要に応じて、これらを <div class="color-select"> <button onclick="toggleDefaultTheme()"></button> <button onclick="toggleSecondTheme()"></button> <button onclick="toggleThirdTheme()"></button> </div> それでおしまい!今のところ、 <html class="theme-default"> CS 次に、サイト全体で変更されるカスタム カラー スキームを使用して、2 つの色 これらのテーマをシームレスに切り替えるために、変化するカラーセットを 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 各スウォッチ ボタンが対応するテーマをトリガーするようにし、最初にメイン // 指定されたテーマ/カラースキームを設定する 関数 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、Opera、その他のブラウザは Webdings フォントをサポートしていません。回...
リンクを使用する必要がある場合もありますが、リンクする必要はありません。onclick イベントを処...
目次序文電話使用法成し遂げるシンプルな実装バージョン:アップグレード版:適用する使用法成し遂げるバイ...
XiaobaiはVueについて学び、次にwebpackについて学び、そしてさまざまなものをインストー...
MySQL が数千万のデータをクエリする場合、ほとんどのクエリ最適化の問題はインデックスを通じて解決...
この記事では、シームレスなカルーセル効果を実現するためのVueの具体的なコードを例として紹介します。...
Object.definePropertyの理解文法:オブジェクト.defineProperty(o...
この記事の例では、3階層メニューを再帰的に実装するVueの具体的なコードを参考までに共有しています。...
この記事では、フォームデータの非同期取得を実現するためのJavaScriptの具体的なコードを例とし...
ソケットオプション機能機能: ソケットファイル記述子の属性の読み取りと設定に使用されるメソッド #i...
序文:この記事では主にMySQLのロングトランザクションに関する内容を紹介します。例えば、トランザク...
目次1. 前提条件1.1 サポートされているプラットフォーム1.2 jdk および hadoop...
ビューポートとはモバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置し...
1. mysql をインストールします。次のコマンドを実行して、YUM ソースを更新します。 rpm...
目次プロトタイプチェーン図プロトタイピングに必須の知識プロトタイププロパティ(プロトタイプを表示) ...