Interactive Dark Mode Toggle with light-dark()
Prompt
Create an interactive dark mode toggle using the CSS light-dark() function. The page should have a toggle switch that changes between light and dark themes. Use CSS custom properties with light-dark() for all colors. Add smooth transitions and a minimal, clean UI with a card, some text, and a button. The toggle should use a checkbox with a custom style.
CODE PREVIEW
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
このインタラクティブデモは、モダンCSSのlight-dark()関数を紹介しています。この関数を使うと、1つのプロパティ宣言でライトモードとダークモードの両方の値を定義できます。ルート要素にcolor-scheme: light darkを設定することで、ブラウザはユーザーのシステム設定または明示的に設定されたカラースキームに基づいて自動的に適切な値を選択します。トグルスイッチはドキュメントルートのcolor-schemeを動的に変更し、ダーク/ライトテーマの手動オーバーライドを可能にします。すべての色はlight-dark()を使って2つの引数（ライト値とダーク値）で一度だけ定義されます。これにより、メディアクエリやテーマごとのカスタムプロパティが不要で、テーマ管理が非常にシンプルになります。
Prompt Overview
This interactive demo showcases the modern CSS light-dark() function, which allows you to define both light and dark mode values in a single property declaration. By setting color-scheme: light dark on the root, the browser automatically picks the correct value based on the user's system preference or the explicitly set color scheme. The toggle switch dynamically changes the color-scheme on the document root, enabling manual override of the dark/light theme. All colors are defined once using light-dark() with two arguments: the light value and the dark value. This makes theme management extremely simple without the need for media queries or custom properties for each theme.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選