サイト用ダークモードボタン
2つのテーマの色を選んでください。コードには、CSS変数、ちらつきを防ぐスクリプト、aria-pressed付きのアクセシブルなボタンが含まれています。
使い方ボタン1つでライトテーマとダークテーマ
1. No <head>, antes do CSS
2. CSS
3. ボタンとスクリプト（ページ本体に）
利用できる言語: 
広告
サイト用ダークモードボタン: 用途
ダークモードはスマートフォンで標準となり、サイトも合わせてほしいと考える人が増えています。このジェネレーターは、CSS変数とprefers-color-schemeでライトテーマとダークテーマを作り、サイトがシステムに自動で従うようにしたうえで、このサイトだけ別のテーマを選べるボタンを付けます。
コードは3つの部分からなります。ページが表示される前に保存された選択を適用するheadの1行（誤ったテーマのちらつきなし）、入力欄やスクロールバーも合わせるcolor-scheme付きのCSS、そしてaria-pressedと太陽・月のアイコン付きのボタンです。
使い方
- ライトテーマとダークテーマの色を選びます。
- プレビューでボタンを試します。
- 1行をhead、CSSとボタンを適切な場所に貼り付けます。
使うタイミング
- ブログやコンテンツサイト。
- システムや管理画面。
- 開発者のポートフォリオ。
よくある質問
読み込み時にライトテーマが一瞬表示されるのを防ぐには？
保存された選択を読み取るスクリプトは、ページが表示される前にheadで実行する必要があります。コードは2つの部分に分かれており、headに入れる1行と、ページ本体に入れるボタンです。
color-schemeは何をするのですか？
ページがライトかダークかをブラウザに伝え、スクロールバー、フォームの入力欄、標準の背景色も合わせて調整させます。これがないと、ダークモードで白い入力欄が浮いてしまいます。
サイトがすでにシステムに従っているなら、ボタンは必要ですか？
必須ではありません。prefers-color-schemeだけでも、サイトはスマートフォンやパソコンのテーマに従います。ボタンは、システムとは違うテーマをこのサイトだけで使いたい人に便利です。
本当に無料？
はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。