暗色モードの切り替え方法

CSSとJavaScriptを使用して、暗色と明色モード間で切り替えます。

自分で試してみてください

クラス切り替え

第1ステップ - HTMLの追加：

デザインを切り替えるための内容を保存するための要素を使用します。この例では、シンプルにするために、以下を使用します。 <body>:

<body>

第2ステップ - CSSの追加：

設定 <body> 要素のスタイルを変更して、切り替え用の .dark-mode クラス：

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");
}

自分で試してみてください

関連ページ

チュートリアル：クラスを追加する方法

リファレンスマニュアル：HTML DOM Element classList属性