D03 - 跟風網頁暗黑模式潮流 (CSS 樣式技巧: Dark Mode) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 3

Modern Web

小白大戰基礎網頁開發系列第 3 篇

D03 - 跟風網頁暗黑模式潮流 (CSS 樣式技巧: Dark Mode)

14th鐵人賽

arieltyit122

2022-09-18 00:02:20

1620 瀏覽

分享至

最近使用了 Windows 11 的 暗黑模式, 感受到了整個作業系統介面, 讓長期需要盯著螢幕的我們有更舒適輕鬆的視覺體驗, 同時也可客製化選擇搭配暗黑模式的 輔色, 打造適合你工作的作業系統介面

上一篇我們學習到 HTML, 而這篇要來認識 CSS 的功能, 該如何套用 CSS 來建立出多采多姿的網頁呢?

Why dark mode?

在滿足最低色彩對比度的同時, 降低使用者觀看螢幕的亮度
改善電腦人體工學: 根據當時環境照明條件來調整螢幕亮度, 以減少使用者眼睛的疲勞
節省講求效能的 devices 的電池電量, 特別是擁有 OLED 螢幕的 devices, 增加螢幕的使用壽命: Android 曾經用 YouTube 等熱門應用程式做過應用程式在暗黑模式下的電量使用研究, 而結果表明可節省高達60%的電量

有興趣想了解更多此項研究的夥伴, 這邊附上影片連結供參考: https://www.youtube.com/watch?v=N_6sPd0Jd3g&t=369s

CSS Media Feature:

prefers-color-scheme media query:

利用 prefers-color-scheme 來判別作業系統主題色系為 亮色 (light) 或者 暗色 (dark)

CSS

body {
  background: #007ad9;
  color: paleturquoise;
}
    
@media (prefers-color-shceme: dark) {
  body {
    background: #2c2c2c;
    color: #e0e0e0;
  }
}
@media (prefers-color-scheme: light) {
   body {
     background: #e0e0e0;
     color: #2c2c2c;
   }
}

HTML

<!doctype html>
<html>
  <body>
    <h1>prefers-color-scheme<h1>
    <p>This is my paragraph.</p>
  <body>
</html>

在 Windows 系統上手動切換網頁 (應用程式) dark/light mode:
設定 → 個人化 → 色彩 → 選擇您的模式 → 淺色/深色

Light Mode

Dark Mode

Toggle dark/light mode with a button created:

Add HTML → Add CSS → Add Javascript

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body.dark {
     background-color: #2c2c2c;
     color: #e0e0e0;
   }
</style>
</head>
<body>
<h2>Toggle Dark/Light Mode</h2>
<p>Click the button to switch between dark and light mode</p>
<button onclick="toggle()">Dark/Light</button>
<script>
function toggle() {
    var element = document.body;
    element.classList.toggle("dark");
}
</script>
</body>
</html>

Dark Mode

Light Mode

Darkmode.js:

這邊和大家介紹一個好用的切換 dark/light mode 工具: Darkmode.js
https://darkmodejs.learn.uno/
可以幫助使用者在網站上放置 UI 與功能相對應的 dark/light mode 切換按鈕, 並成功切換 dark/light mode, 簡單好用易上手。

簡單跟著教學把 Darkmode.js 套用到 D2 分享的 menu.html 網頁上後, 可以輕鬆在頁面上設計一個 dark/light mode 切換鈕 ?, 並且成功切換頁面色彩模式。

  <head>
  ...
    <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
    <script>
      function addDarkmodeWidget() {
        const options = {
          bottom: 'unset', 
          right: '32px', 
          left: 'unset', 
          time: '0.5s', 
          mixColor: '#fff', 
          backgroundColor: '#fff',  
          buttonColorDark: '#100f2c',  
          buttonColorLight: '#fff', 
          saveInCookies: false,
          label: '?', 
          autoMatchOsTheme: true 
        }
      const darkmode = new Darkmode(options);
      darkmode.showWidget();
      }
      window.addEventListener('load', addDarkmodeWidget);
    </script>
  </head>

把 dark/light mode 切換鈕 ? 設置在頁面的右上方

Light Mode