TIL 07|JavaScriptによるDark modeの実装

3253 ワード
TIL JavaScript dark-mode テキストリンク
JavaScript変数を使用したシンプルなダークモード
スクロールボタンと同様に、Htmlに新しいボタンを作成します.
<button onclick="myFunction()">
	<i class="fas fa-adjust fa-2x"></i>
</button>
今回はFontowseomeがダークモードに合ったアイコンを持ってきました.

アイコンを使いたいだけですが、背景色と枠があるので地味になります.
<button onclick="myFunction()" id="myDark">
<i class="fas fa-adjust fa-2x"></i>
</button>
idを追加してCSSで必要な位置とスタイルを適用します.
#myDark {
  border: none;
  outline: none;
  background: none;
  margin-bottom: 40px;
}

CSSを使用したスタイルで、簡潔にアイコンのみを使用している様子が見られます.
.dark-mode {
  background-color: #333333;
  color: #fafafa;
}
CSSでダークモードを実施する場合に適用する色を設定します.
function myFunction() {
    let element = document.body;
    element.classList.toggle("dark-mode");
}
JavaScriptで関数を宣言し、CSSで適用した暗いモードを入力します.
雰囲気が急に反応する🔍(2)
svn日常管理