ライト・ダークテーマジェネレーター（CSS変数）
メインカラーを選んでください。ジェネレーターが2つのパレットを作り、各組み合わせのコントラストを確認して、並べてプレビューします。
使い方ブランドカラーからダークモードを
利用できる言語: 
ライト・ダークテーマジェネレーター（CSS変数）: 用途
よくできたダークテーマは、ライトテーマの反転ではありません。ブランドのメインカラーから、2つのテーマのCSS変数（背景、サーフェス、境界線、テキスト、補助テキスト、メインカラー、その上のテキスト）を、無彩色のグレーまたはブランドカラー寄りのグレーで作成します。
各色の組み合わせはWCAGの式でコントラストを計算し、AAA、AA、不足のいずれかで表示します。メインカラーは両方のテーマで4.5:1を超えるよう調整されます。コードはシステム設定（prefers-color-scheme）でテーマを切り替え、必要ならdata-themeを使ったボタンでも切り替えられます。
使い方
- メインカラーを選びます。
- プレビューとコントラスト表を確認します。
- CSS変数をコピーします。
使うタイミング
- サイトのダークモードを作る。
- 新しいプロジェクトのパレットを作る。
- 色のアクセシビリティを確認する。
よくある質問
ダークモードは色を反転するだけではだめなのですか？
反転すると背景が真っ黒になり、ブランドカラーが目に刺さって目が疲れます。よいダークテーマは、ごく濃いグレーの背景、ほぼ白のテキスト、明るくしたメインカラーを使い、まぶしさを抑えながらコントラストを保ちます。
コントラストのAAとAAAとは何ですか？
アクセシビリティガイドラインWCAGの適合レベルです。AAは通常のテキストでコントラスト比4.5:1以上、AAAは7:1を求めます。ジェネレーターは各色の組み合わせの比率を表示し、4.5:1を下回ると警告します。
ボタンでテーマを切り替えるには？
コードはシステムの設定（prefers-color-scheme）と、htmlのdata-theme属性の両方に対応しています。data-theme="dark" または "light" を設定するボタンで、選んだテーマに切り替えられます。このサイトのダークモードボタンのツールで、そのボタンを生成できます。
本当に無料？
はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。