方法-ダークモードを切り替える
CSSとJavaScriptを使用してダークモードとライトモードを切り替えます。
トグルクラス
ステップ1)HTMLを追加します。
デザインを切り替えるコンテンツを保存する要素を使用します。この例では<body>
、簡単にするために次のように使用します。
例
<body>
ステップ2)CSSを追加します。
<body>
要素のスタイルを設定し、 .dark-mode
toggleのクラスを作成します。
例
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
ステップ3)JavaScriptを追加します。
要素を取得し、クラス<body>
を切り替えます。.dark-mode
例
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
ヒント:クラスを追加する方法も参照してください。
ヒント: JavaScriptリファレンスでclassListプロパティの詳細をご覧ください。