js-cookie 運用餅乾製作簡易黑暗模式示範

2019/07/15 1,109 0 網站技術 , HTML , CSS , JavaScript , jQuery

🍪 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 版本的範例給大家參考。

以上,若有任何問題歡迎留言與站長交流!希望有幫助到你學習前端技術!😉

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇