🍪 Cookie（餅乾）在網路世界中無所不在，可以讓使用者儲存網頁設定到瀏覽器中，下次瀏覽時網站就能提供更個人化的服務給同位訪客，其實是一個不錯運用的技術！因此萌芽站長就決定應用它來製作現在非常流行的「🌙 黑暗模式」，也有人叫做「夜間模式」或「深色模式」，其實都是一樣的功能，也就是把原先白底黑字為主的版面切換成黑底白字為主，可能有些人以為這要用到「後端技術」，事實上完全不需要後端程式，只要純前端技術就可以達成，最少只要 HTML、CSS 與 JavaScript 就能達成囉！不過為了方便我還是會用到 jQuery，再來這次要運用 js-cookie 這款插件簡化使用 Cookie 的步驟，單純用 JavaScript 使用 Cookie 是有點複雜且麻煩的！😂
這個想法算是我臨時想到的，中文資料完全空白，至少我在 Google 沒搜尋到，沒意外這就是中文世界的第一篇相關介紹文，英文世界倒是有提到 Cookie 拿來製作黑暗模式（Dark Mode）的討論，看來前端技術還是要用英文學習比較能學到東西 😅。
那這邊就開始用導引的方式一步步告訴大家關鍵與原始碼囉！首先建立一個完整的 HTML5 網頁。
<head>~</head> 區塊
首先先用 CDN 的方式引入 jQuery 和 js-cookie，這些都是重要的 JavaScript 函式庫。（當然不用 CDN 也可以）
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>我們要設計一個「container」容器用來表示是否有開啟黑暗模式，所以現在要來給 CSS 原始碼。
<style>
body {
margin: 0;
padding: 0;
}
.container {
margin: 15px;
padding: 10px 15px;
background: rgba(213, 213, 213, 0.85);
box-shadow: 0 0 3px rgba(69, 69, 69, 0.3);
border-radius: 8px;
}
.dark .container {
background: rgba(20, 20, 20, 0.85);
color: #FFF;
}
</style>沒錯！後面的「.dark」是要用來顯示黑暗模式的 CSS，「.dark」這個 class 最後將放在 <body> 標籤中。接著我們要放一段 JavaScript 用來製作切換黑暗模式的按鈕，同時要設定儲存 Cookie 設定，這邊就把有效時間設定為 365 天。
<script>
$(document).ready(function () {
var dark = Cookies.get('dark');
if (dark === "on") {
$(".mode").addClass("dark-off");
$(".mode").html("關閉黑暗模式");
} else {
$(".mode").addClass("dark-on");
$(".mode").html("打開黑暗模式");
}
function darkButton() {
$(".dark-on").click(function () {
$(document.body).addClass("dark");
Cookies.set('dark', 'on', {
expires: 365
});
$(".mode").removeClass("dark-on");
$(".mode").addClass("dark-off");
$(".mode").html("關閉黑暗模式");
darkButton();
});
$(".dark-off").click(function () {
$(document.body).removeClass("dark");
Cookies.set('dark', 'off', {
expires: 365
});
$(".mode").removeClass("dark-off");
$(".mode").addClass("dark-on");
$(".mode").html("打開黑暗模式");
darkButton();
});
}
darkButton();
});
</script>Cookie 使用「dark」這個名稱儲存「on」或「off」這兩個值，「on」代表黑暗模式開啟；「off」代表黑暗模式關閉。然後判斷式裡面都有寫把「dark」這個 Cookie 抓出來進行判斷，這邊就不多加敘述，直接看原始碼更快！到這邊，同個畫面下切換黑暗模式與儲存設定到 Cookie 已經沒問題了！接著就要進入 <body> 區塊。
<body>~</body> 區塊
這邊要優先放一段 JavaScript 在 <body> 正下方，用來抓 Cookie 內的設定，來決定是否於 <body> 標籤內放「class="dark"」。
<script>
var dark = Cookies.get('dark');
if (dark === "on") {
$(document.body).addClass("dark");
} else {
$(document.body).removeClass("dark");
}
</script>最後就是一般的 HTML 內容啦！
<div class="container">
<h1>文章標題：js-cookie 運用餅乾製作簡易黑暗模式示範</h1>
這邊將運用「js-cookie」技術，採用 Cookie 記錄使用者的介面設定來決定是否使用黑暗模式！<br><br>
<button class="mode"></button><br><br>
</div>我有特別製作一個按鈕（Button）用來切換黑暗模式，除此之外最外層有套用「container」class 的 div 區塊是套用黑暗模式的區塊，再次強調！這樣就完成囉！
▲ js-cookie 運用餅乾（Cookie）製作簡易黑暗模式示範原始碼與執行結果截圖。
CodePen 線上範例
為了讓大家可以線上學習，我特別製作了 CodePen 版本的範例給大家參考。
以上，若有任何問題歡迎留言與站長交流！希望有幫助到你學習前端技術！😉
《上一篇》React 初嘗試：不使用 npm、Babel 和 webpack 的 HELLO 頁面 
《下一篇》Twitter 介面大改版！更暗的深色模式、顏色與文字大小個人化 
留言區 / Comments
萌芽論壇