From 7496dd41fa053c4636a82027fe3fb3e38357e385 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 17 Jun 2026 23:20:12 +0800
Subject: [PATCH] feat(theme): persist user theme preferences (#2756)

- Migrate theme persistence from `sessionStorage` to `localStorage`
- Rename theme HTML attribute to `data-bs-theme` for Bootstrap compatibility
- Trim and compile CSS according to the chosen theme mode
---
 _data/locales/ar.yml                          |   5 +
 _data/locales/bg-BG.yml                       |   5 +
 _data/locales/ca-ES.yml                       |   5 +
 _data/locales/cs-CZ.yml                       |   5 +
 _data/locales/da-DK.yml                       |   5 +
 _data/locales/de-DE.yml                       |   5 +
 _data/locales/dv‑MV.yml                       |   5 +
 _data/locales/el-GR.yml                       |   5 +
 _data/locales/en.yml                          |   5 +
 _data/locales/es-ES.yml                       |   5 +
 _data/locales/fa-IR.yml                       |   5 +
 _data/locales/fi-FI.yml                       |   5 +
 _data/locales/fr-FR.yml                       |   5 +
 _data/locales/hu-HU.yml                       |   5 +
 _data/locales/id-ID.yml                       |   5 +
 _data/locales/it-IT.yml                       |   5 +
 _data/locales/ja-JP.yml                       |   5 +
 _data/locales/ko-KR.yml                       |   5 +
 _data/locales/ku-IQ.yml                       |   5 +
 _data/locales/my-MM.yml                       |   5 +
 _data/locales/nl-NL.yml                       |   5 +
 _data/locales/ps‑AF.yml                       |   5 +
 _data/locales/pt-BR.yml                       |   5 +
 _data/locales/ru-RU.yml                       |   5 +
 _data/locales/sl-SI.yml                       |   5 +
 _data/locales/sv-SE.yml                       |   5 +
 _data/locales/th.yml                          |   5 +
 _data/locales/tr-TR.yml                       |   5 +
 _data/locales/uk-UA.yml                       |   5 +
 _data/locales/ur-PK.yml                       |   5 +
 _data/locales/vi-VN.yml                       |   5 +
 _data/locales/zh-CN.yml                       |   5 +
 _data/locales/zh-TW.yml                       |   5 +
 _data/origin/cors.yml                         |   3 +
 _includes/comments/disqus.html                |   4 +-
 _includes/comments/giscus.html                |   9 +-
 _includes/comments/utterances.html            |   8 +-
 _includes/head.html                           |   2 +-
 _includes/sidebar.html                        |  52 ++++-
 _javascript/modules/components/img-popup.js   |  10 +-
 _javascript/modules/components/mermaid.js     |  14 +-
 _javascript/modules/components/mode-toggle.js |  41 +++-
 _javascript/theme.js                          | 196 ++++++++++--------
 _layouts/default.html                         |  11 +-
 _sass/abstracts/_mixins.scss                  |   6 +
 _sass/abstracts/_variables.scss               |   6 +
 _sass/base/_base.scss                         |  43 ++--
 _sass/layout/_sidebar.scss                    | 102 ++++++++-
 _sass/themes/_dark.scss                       |   9 +-
 _sass/themes/_light.scss                      |   9 +-
 assets/css/jekyll-theme-chirpy.scss           |   4 +
 51 files changed, 541 insertions(+), 153 deletions(-)

diff --git a/_data/locales/ar.yml b/_data/locales/ar.yml
index 78e6f9427..7a10aa151 100644
--- a/_data/locales/ar.yml
+++ b/_data/locales/ar.yml
@@ -49,6 +49,11 @@ notification:
   update_found: يتوفر اصدار جديد للمحتوى.
   update: تحديث
 
+theme:
+  light: فاتح
+  dark: داكن
+  system: النظام
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/bg-BG.yml b/_data/locales/bg-BG.yml
index 5b50a3ee2..1c8ab32e9 100644
--- a/_data/locales/bg-BG.yml
+++ b/_data/locales/bg-BG.yml
@@ -49,6 +49,11 @@ notification:
   update_found: Налична е нова версия на съдържанието.
   update: Обнови
 
+theme:
+  light: Светла
+  dark: Тъмна
+  system: Системна
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/ca-ES.yml b/_data/locales/ca-ES.yml
index 7e68f451c..ea0ea130b 100644
--- a/_data/locales/ca-ES.yml
+++ b/_data/locales/ca-ES.yml
@@ -49,6 +49,11 @@ notification:
   update_found: Hi ha una nova versió de contingut disponible.
   update: Actualitzar
 
+theme:
+  light: Clar
+  dark: Fosc
+  system: Sistema
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/cs-CZ.yml b/_data/locales/cs-CZ.yml
index 41b31d61f..a2689efdd 100644
--- a/_data/locales/cs-CZ.yml
+++ b/_data/locales/cs-CZ.yml
@@ -49,6 +49,11 @@ notification:
   update_found: Je k dispozici nová verze obsahu.
   update: Aktualizace
 
+theme:
+  light: Světlý
+  dark: Tmavý
+  system: Systém
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/da-DK.yml b/_data/locales/da-DK.yml
index 3b841750c..73c350343 100644
--- a/_data/locales/da-DK.yml
+++ b/_data/locales/da-DK.yml
@@ -49,6 +49,11 @@ notification:
   update_found: En ny version af indholdet er fundet!
   update: Opdater
 
+theme:
+  light: Lys
+  dark: Mørk
+  system: System
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/de-DE.yml b/_data/locales/de-DE.yml
index 8e26b617a..fe5940b0f 100644
--- a/_data/locales/de-DE.yml
+++ b/_data/locales/de-DE.yml
@@ -48,6 +48,11 @@ notification:
   update_found: Eine neue Version ist verfügbar.
   update: Neue Version
 
+theme:
+  light: Hell
+  dark: Dunkel
+  system: System
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/dv‑MV.yml b/_data/locales/dv‑MV.yml
index a808fd611..a0158c852 100644
--- a/_data/locales/dv‑MV.yml
+++ b/_data/locales/dv‑MV.yml
@@ -49,6 +49,11 @@ notification:
   update_found: ޔޫ ވާރޝަން ހުރިހާ.
   update: އޮޕްޑޭޓް
 
+theme:
+  light: އަލި
+  dark: އަނދިރި
+  system: ސިސްޓަމް
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/el-GR.yml b/_data/locales/el-GR.yml
index 48d25f743..5df549e97 100644
--- a/_data/locales/el-GR.yml
+++ b/_data/locales/el-GR.yml
@@ -49,6 +49,11 @@ notification:
   update_found: Υπάρχει διαθέσιμη μια νέα έκδοση του περιεχομένου.
   update: Ενημέρωση
 
+theme:
+  light: Φωτεινό
+  dark: Σκοτεινό
+  system: Σύστημα
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/en.yml b/_data/locales/en.yml
index d35362e02..e453b121b 100644
--- a/_data/locales/en.yml
+++ b/_data/locales/en.yml
@@ -49,6 +49,11 @@ notification:
   update_found: A new version of content is available.
   update: Update
 
+theme:
+  light: Light
+  dark: Dark
+  system: System
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/es-ES.yml b/_data/locales/es-ES.yml
index d989b5b51..a8390c372 100644
--- a/_data/locales/es-ES.yml
+++ b/_data/locales/es-ES.yml
@@ -49,6 +49,11 @@ notification:
   update_found: Hay una nueva versión de contenido disponible.
   update: Actualizar
 
+theme:
+  light: Claro
+  dark: Oscuro
+  system: Sistema
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/fa-IR.yml b/_data/locales/fa-IR.yml
index 0d990a8ee..6cc27cd02 100644
--- a/_data/locales/fa-IR.yml
+++ b/_data/locales/fa-IR.yml
@@ -49,6 +49,11 @@ notification:
   update_found: نسخه جدیدی از محتوا موجود است.
   update: به‌روزرسانی
 
+theme:
+  light: روشن
+  dark: تیره
+  system: سیستم
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/fi-FI.yml b/_data/locales/fi-FI.yml
index b8b1c196f..889ac7215 100644
--- a/_data/locales/fi-FI.yml
+++ b/_data/locales/fi-FI.yml
@@ -48,6 +48,11 @@ notification:
   update_found: Uusi versio sisällöstä on saatavilla.
   update: Päivitä
 
+theme:
+  light: Vaalea
+  dark: Tumma
+  system: Järjestelmä
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/fr-FR.yml b/_data/locales/fr-FR.yml
index c4884c3c9..2925a7412 100644
--- a/_data/locales/fr-FR.yml
+++ b/_data/locales/fr-FR.yml
@@ -49,6 +49,11 @@ notification:
   update_found: Une nouvelle version du contenu est disponible.
   update: Mise à jour
 
+theme:
+  light: Clair
+  dark: Sombre
+  system: Système
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/hu-HU.yml b/_data/locales/hu-HU.yml
index 3c379f658..a14756b78 100644
--- a/_data/locales/hu-HU.yml
+++ b/_data/locales/hu-HU.yml
@@ -50,6 +50,11 @@ notification:
   update_found: Elérhető a tartalom új verziója.
   update: Frissítés
 
+theme:
+  light: Világos
+  dark: Sötét
+  system: Rendszer
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/id-ID.yml b/_data/locales/id-ID.yml
index 337e4c008..0f1bb2f9e 100644
--- a/_data/locales/id-ID.yml
+++ b/_data/locales/id-ID.yml
@@ -49,6 +49,11 @@ notification:
   update_found: Versi konten baru tersedia.
   update: Perbarui
 
+theme:
+  light: Terang
+  dark: Gelap
+  system: Sistem
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/it-IT.yml b/_data/locales/it-IT.yml
index e1137a996..671ff1ca5 100644
--- a/_data/locales/it-IT.yml
+++ b/_data/locales/it-IT.yml
@@ -48,6 +48,11 @@ notification:
   update_found: Nuova versione del contenuto disponibile.
   update: Aggiornamento
 
+theme:
+  light: Chiaro
+  dark: Scuro
+  system: Sistema
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/ja-JP.yml b/_data/locales/ja-JP.yml
index 68891dcb1..c271e3326 100644
--- a/_data/locales/ja-JP.yml
+++ b/_data/locales/ja-JP.yml
@@ -49,6 +49,11 @@ notification:
   update_found: 新しいバージョンが利用可能です。
   update: 更新
 
+theme:
+  light: ライト
+  dark: ダーク
+  system: システム
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/ko-KR.yml b/_data/locales/ko-KR.yml
index ed45a75c0..48af8bc27 100644
--- a/_data/locales/ko-KR.yml
+++ b/_data/locales/ko-KR.yml
@@ -49,6 +49,11 @@ notification:
   update_found: 새 버전의 콘텐츠를 사용할 수 있습니다.
   update: 업데이트
 
+theme:
+  light: 라이트
+  dark: 다크
+  system: 시스템
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/ku-IQ.yml b/_data/locales/ku-IQ.yml
index 61cd3cd21..1d809b81e 100644
--- a/_data/locales/ku-IQ.yml
+++ b/_data/locales/ku-IQ.yml
@@ -49,6 +49,11 @@ notification:
   update_found: وەشانێکی نوێی ناوەڕۆک بەردەستە.
   update: نوێکردنەوە
 
+theme:
+  light: ڕووناک
+  dark: تاریک
+  system: سیستەم
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/my-MM.yml b/_data/locales/my-MM.yml
index 5559aea0a..e497636ba 100644
--- a/_data/locales/my-MM.yml
+++ b/_data/locales/my-MM.yml
@@ -49,6 +49,11 @@ notification:
   update_found: အကြောင်းအရာဗားရှင်းအသစ်ကို ရနိုင်ပါပြီ။
   update: အပ်ဒိတ်
 
+theme:
+  light: အလင်း
+  dark: အမှောင်
+  system: စနစ်
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/nl-NL.yml b/_data/locales/nl-NL.yml
index 691fb75c7..e39281b49 100644
--- a/_data/locales/nl-NL.yml
+++ b/_data/locales/nl-NL.yml
@@ -49,6 +49,11 @@ notification:
   update_found: Nieuwe versie van inhoud beschikbaar.
   update: Update
 
+theme:
+  light: Licht
+  dark: Donker
+  system: Systeem
+
 # ----- Posts related labels -----
 post:
   written_by: Door
diff --git a/_data/locales/ps‑AF.yml b/_data/locales/ps‑AF.yml
index fa2c19246..0ea9ac23f 100644
--- a/_data/locales/ps‑AF.yml
+++ b/_data/locales/ps‑AF.yml
@@ -49,6 +49,11 @@ notification:
   update_found: نوې نسخه شتون لري.
   update: تازه
 
+theme:
+  light: روښانه
+  dark: تیاره
+  system: سیستم
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/pt-BR.yml b/_data/locales/pt-BR.yml
index 22de99ae6..ec7fb35b9 100644
--- a/_data/locales/pt-BR.yml
+++ b/_data/locales/pt-BR.yml
@@ -49,6 +49,11 @@ notification:
   update_found: Uma nova versão do conteúdo está disponível.
   update: atualização
 
+theme:
+  light: Claro
+  dark: Escuro
+  system: Sistema
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/ru-RU.yml b/_data/locales/ru-RU.yml
index de9e0165b..8842bb813 100644
--- a/_data/locales/ru-RU.yml
+++ b/_data/locales/ru-RU.yml
@@ -48,6 +48,11 @@ notification:
   update_found: Доступна новая версия контента.
   update: Обновить
 
+theme:
+  light: Светлая
+  dark: Темная
+  system: Системная
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/sl-SI.yml b/_data/locales/sl-SI.yml
index 9b3ea4696..61a932897 100644
--- a/_data/locales/sl-SI.yml
+++ b/_data/locales/sl-SI.yml
@@ -49,6 +49,11 @@ notification:
   update_found: Novejša različica vsebine je na voljo. #A new version of content is available.
   update: Posodobi #Update
 
+theme:
+  light: Svetla
+  dark: Temna
+  system: Sistemska
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/sv-SE.yml b/_data/locales/sv-SE.yml
index 77e6fe6b8..5882a8b4f 100644
--- a/_data/locales/sv-SE.yml
+++ b/_data/locales/sv-SE.yml
@@ -49,6 +49,11 @@ notification:
   update_found: Det finns en ny version av innehållet.
   update: Uppdatera sidan
 
+theme:
+  light: Ljust
+  dark: Mörkt
+  system: System
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/th.yml b/_data/locales/th.yml
index c9560fc86..6b54739ae 100644
--- a/_data/locales/th.yml
+++ b/_data/locales/th.yml
@@ -49,6 +49,11 @@ notification:
   update_found: มีเวอร์ชันใหม่ของเนื้อหา
   update: อัปเดต
 
+theme:
+  light: สว่าง
+  dark: มืด
+  system: ระบบ
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/tr-TR.yml b/_data/locales/tr-TR.yml
index 4a08722e3..bb9ac9946 100644
--- a/_data/locales/tr-TR.yml
+++ b/_data/locales/tr-TR.yml
@@ -49,6 +49,11 @@ notification:
   update_found: İçeriğin yeni bir sürümü mevcut.
   update: Güncelle
 
+theme:
+  light: Açık
+  dark: Koyu
+  system: Sistem
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/uk-UA.yml b/_data/locales/uk-UA.yml
index f337187d6..e2cbbff40 100644
--- a/_data/locales/uk-UA.yml
+++ b/_data/locales/uk-UA.yml
@@ -49,6 +49,11 @@ notification:
   update_found: Доступна нова версія вмісту.
   update: Оновлення
 
+theme:
+  light: Світла
+  dark: Темна
+  system: Системна
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/ur-PK.yml b/_data/locales/ur-PK.yml
index 081bc2086..e25522076 100644
--- a/_data/locales/ur-PK.yml
+++ b/_data/locales/ur-PK.yml
@@ -49,6 +49,11 @@ notification:
   update_found: نیا مواد دستیاب ہے۔
   update: اپ ڈیٹ
 
+theme:
+  light: روشن
+  dark: تاریک
+  system: سسٹم
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/vi-VN.yml b/_data/locales/vi-VN.yml
index 48b767e8b..b82ec50f1 100644
--- a/_data/locales/vi-VN.yml
+++ b/_data/locales/vi-VN.yml
@@ -48,6 +48,11 @@ notification:
   update_found: Đã có phiên bản mới của nội dung.
   update: Cập nhật
 
+theme:
+  light: Sáng
+  dark: Tối
+  system: Hệ thống
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/zh-CN.yml b/_data/locales/zh-CN.yml
index 9a3b2fb67..8cbfe1fac 100644
--- a/_data/locales/zh-CN.yml
+++ b/_data/locales/zh-CN.yml
@@ -48,6 +48,11 @@ notification:
   update_found: 发现新版本的内容。
   update: 更新
 
+theme:
+  light: 浅色
+  dark: 深色
+  system: 跟随系统
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/locales/zh-TW.yml b/_data/locales/zh-TW.yml
index ad4ea6898..7afeb420a 100644
--- a/_data/locales/zh-TW.yml
+++ b/_data/locales/zh-TW.yml
@@ -48,6 +48,11 @@ notification:
   update_found: 發現新版本更新。
   update: 更新
 
+theme:
+  light: 淺色
+  dark: 深色
+  system: 跟隨系統
+
 # ----- Posts related labels -----
 
 post:
diff --git a/_data/origin/cors.yml b/_data/origin/cors.yml
index e40cc357d..719d8fbe4 100644
--- a/_data/origin/cors.yml
+++ b/_data/origin/cors.yml
@@ -19,6 +19,9 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Sour
 
 # Libraries
 
+bootstrap:
+  css: https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css
+
 toc:
   css: https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.css
   js: https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js
diff --git a/_includes/comments/disqus.html b/_includes/comments/disqus.html
index fd12a3c72..0fb676606 100644
--- a/_includes/comments/disqus.html
+++ b/_includes/comments/disqus.html
@@ -19,7 +19,7 @@
 
   {%- comment -%} Auto switch theme {%- endcomment -%}
   function reloadDisqus(event) {
-    if (event.source === window && event.data && event.data.id === Theme.ID) {
+    if (event.source === window && event.data && event.data.id === Theme.eventId) {
       {%- comment -%} Disqus hasn't been loaded {%- endcomment -%}
       if (typeof DISQUS === 'undefined') {
         return;
@@ -33,7 +33,7 @@
 
   addDisqus();
 
-  if (Theme.switchable) {
+  if (Theme.isToggleable) {
     addEventListener('message', reloadDisqus);
   }
 
diff --git a/_includes/comments/giscus.html b/_includes/comments/giscus.html
index 2d5f7e7bf..ddaf64706 100644
--- a/_includes/comments/giscus.html
+++ b/_includes/comments/giscus.html
@@ -1,8 +1,8 @@
 <!-- https://giscus.app/ -->
 <script>
   (function () {
-    const themeMapper = Theme.getThemeMapper('light', 'dark_dimmed');
-    const initTheme = themeMapper[Theme.visualState];
+    const themeMap = Theme.newThemeMap('light', 'dark_dimmed');
+    const initTheme = themeMap[Theme.resolvedTheme];
 
     let lang = '{{ site.comments.giscus.lang | default: lang }}';
     {%- comment -%} https://github.com/giscus/giscus/tree/main/locales {%- endcomment -%}
@@ -37,8 +37,9 @@
     $footer.insertAdjacentElement("beforebegin", giscusNode);
 
     addEventListener('message', (event) => {
-      if (event.source === window && event.data && event.data.id === Theme.ID) {
-        const newTheme = themeMapper[Theme.visualState];
+      if (event.source === window && event.data && event.data.id === Theme.eventId) {
+        const newTheme = themeMap[Theme.resolvedTheme];
+
         const message = {
           setConfig: {
             theme: newTheme
diff --git a/_includes/comments/utterances.html b/_includes/comments/utterances.html
index 99408976f..211ebed7a 100644
--- a/_includes/comments/utterances.html
+++ b/_includes/comments/utterances.html
@@ -2,8 +2,8 @@
 <script>
   (function () {
     const origin = 'https://utteranc.es';
-    const themeMapper = Theme.getThemeMapper('github-light', 'github-dark');
-    const initTheme = themeMapper[Theme.visualState];
+    const themeMap = Theme.newThemeMap('github-light', 'github-dark');
+    const initTheme = themeMap[Theme.resolvedTheme];
 
     let script = document.createElement('script');
     script.src = 'https://utteranc.es/client.js';
@@ -22,8 +22,8 @@
       {%- comment -%}
         Credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347>
       {%- endcomment -%}
-      if (event.source === window && event.data && event.data.id === Theme.ID) {
-        newTheme = themeMapper[Theme.visualState];
+      if (event.source === window && event.data && event.data.id === Theme.eventId) {
+        newTheme = themeMap[Theme.resolvedTheme];
 
         const message = {
           type: 'set-theme',
diff --git a/_includes/head.html b/_includes/head.html
index 048904c47..0ce5315de 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -81,7 +81,7 @@
 
   <!-- Bootstrap -->
   {% unless jekyll.environment == 'production' %}
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="{{ site.data.origin.cors.bootstrap.css }}">
   {% endunless %}
 
   <!-- Theme style -->
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index ed35424ef..b325ba871 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -40,11 +40,53 @@
     </ul>
   </nav>
 
-  <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
-    {% unless site.theme_mode %}
-      <button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
-        <i class="fas fa-adjust"></i>
-      </button>
+  <div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
+    {% unless site.theme_mode == 'light' or site.theme_mode == 'dark' %}
+      {%- capture icon_system -%}
+        <i class="fa-solid fa-display" data-theme-mode="system"></i>
+      {%- endcapture -%}
+
+      {%- capture icon_light -%}
+        <i class="fa-regular fa-sun" data-theme-mode="light"></i>
+      {%- endcapture -%}
+
+      {%- capture icon_dark -%}
+        <i class="fa-regular fa-moon" data-theme-mode="dark"></i>
+      {%- endcapture -%}
+
+      <div class="btn-group dropup">
+        <button
+          type="button"
+          class="btn btn-link nav-link"
+          aria-label="Switch Mode"
+          id="mode-toggle"
+          data-bs-toggle="dropdown"
+        >
+          {{- icon_light -}}
+          {{- icon_dark -}}
+          {{- icon_system -}}
+        </button>
+        <ul class="dropdown-menu rounded-3 mb-1 p-1">
+          <li>
+            <button class="dropdown-item d-flex align-items-center" type="button" data-theme-mode="light">
+              {{- icon_light -}}
+              {{- site.data.locales[lang].theme.light -}}
+            </button>
+          </li>
+          <li>
+            <button class="dropdown-item d-flex align-items-center" type="button" data-theme-mode="dark">
+              {{- icon_dark -}}
+              {{- site.data.locales[lang].theme.dark -}}
+            </button>
+          </li>
+          <li>
+            <button class="dropdown-item d-flex align-items-center" type="button" data-theme-mode="system">
+              {{- icon_system -}}
+              {{- site.data.locales[lang].theme.system -}}
+            </button>
+          </li>
+        </ul>
+      </div>
 
       {% if site.data.contact.size > 0 %}
         <span class="icon-border"></span>
diff --git a/_javascript/modules/components/img-popup.js b/_javascript/modules/components/img-popup.js
index c9fc0402a..34db948f0 100644
--- a/_javascript/modules/components/img-popup.js
+++ b/_javascript/modules/components/img-popup.js
@@ -32,17 +32,21 @@ export function imgPopup() {
     document.querySelector('.popup.dark') === null
   );
 
-  if (Theme.visualState === Theme.DARK) {
+  if (Theme.isDark) {
     selector = darkImages;
   }
 
   let current = GLightbox({ selector: `${selector}` });
 
-  if (hasDualImages && Theme.switchable) {
+  if (hasDualImages && Theme.isToggleable) {
     let reverse = null;
 
     window.addEventListener('message', (event) => {
-      if (event.source === window && event.data && event.data.id === Theme.ID) {
+      if (
+        event.source === window &&
+        event.data &&
+        event.data.id === Theme.eventId
+      ) {
         [current, reverse] = swapImages(current, reverse);
       }
     });
diff --git a/_javascript/modules/components/mermaid.js b/_javascript/modules/components/mermaid.js
index 91df4f254..17e3a8ae1 100644
--- a/_javascript/modules/components/mermaid.js
+++ b/_javascript/modules/components/mermaid.js
@@ -3,10 +3,14 @@
  */
 
 const MERMAID = 'mermaid';
-const themeMapper = Theme.getThemeMapper('default', 'dark');
+const themeMap = Theme.newThemeMap('default', 'dark');
 
 function refreshTheme(event) {
-  if (event.source === window && event.data && event.data.id === Theme.ID) {
+  if (
+    event.source === window &&
+    event.data &&
+    event.data.id === Theme.eventId
+  ) {
     // Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344>
     const mermaidList = document.getElementsByClassName(MERMAID);
 
@@ -16,7 +20,7 @@ function refreshTheme(event) {
       elem.removeAttribute('data-processed');
     });
 
-    const newTheme = themeMapper[Theme.visualState];
+    const newTheme = themeMap[Theme.resolvedTheme];
 
     mermaid.initialize({ theme: newTheme });
     mermaid.init(null, `.${MERMAID}`);
@@ -43,7 +47,7 @@ export function loadMermaid() {
     return;
   }
 
-  const initTheme = themeMapper[Theme.visualState];
+  const initTheme = themeMap[Theme.resolvedTheme];
 
   let mermaidConf = {
     theme: initTheme
@@ -54,7 +58,7 @@ export function loadMermaid() {
 
   mermaid.initialize(mermaidConf);
 
-  if (Theme.switchable) {
+  if (Theme.isToggleable) {
     window.addEventListener('message', refreshTheme);
   }
 }
diff --git a/_javascript/modules/components/mode-toggle.js b/_javascript/modules/components/mode-toggle.js
index 455ff0a02..4f69d0b7c 100644
--- a/_javascript/modules/components/mode-toggle.js
+++ b/_javascript/modules/components/mode-toggle.js
@@ -1,15 +1,46 @@
 /**
- * Add listener for theme mode toggle
+ * Sets up the mode toggle dropdown, allowing users to switch between light, dark, and system themes.
+ *
+ * Dependencies:
+ *  - Theme (${JS_ROOT}/theme.js)
  */
 
-const $toggle = document.getElementById('mode-toggle');
+import 'bootstrap/js/src/dropdown.js';
+
+const ACTIVE_CLASS = 'active';
+const dropdown = document.querySelector('#mode-toggle + .dropdown-menu');
+const activeMode = Theme.isSystemTheme
+  ? Theme.Mode.SYSTEM
+  : Theme.resolvedTheme;
 
 export function modeWatcher() {
-  if (!$toggle) {
+  if (!Theme.isToggleable) {
     return;
   }
 
-  $toggle.addEventListener('click', () => {
-    Theme.flip();
+  dropdown.querySelectorAll('.dropdown-item').forEach((option) => {
+    const mode = option.dataset.themeMode;
+    if (mode === activeMode) {
+      option.classList.add(ACTIVE_CLASS);
+      return;
+    }
+  });
+
+  dropdown.addEventListener('click', (event) => {
+    const current = event.target.closest('.dropdown-item');
+
+    if (!current) {
+      return;
+    }
+
+    const lastActive = dropdown.querySelector(`.${ACTIVE_CLASS}`);
+
+    if (lastActive === current) {
+      return;
+    }
+
+    lastActive.classList.remove(ACTIVE_CLASS);
+    current.classList.add(ACTIVE_CLASS);
+    Theme.update(current.dataset.themeMode);
   });
 }
diff --git a/_javascript/theme.js b/_javascript/theme.js
index 49e4e89bb..a10dd3e44 100644
--- a/_javascript/theme.js
+++ b/_javascript/theme.js
@@ -1,135 +1,153 @@
 /**
- * Theme management class
+ *  A utility class that manages the site's theme mode.
  *
- * To reduce flickering during page load, this script should be loaded synchronously.
+ * Concepts:
+ *  - Mode: dark, light, or system. The latter follows the operating system's preference.
+ *  - Theme: The actual theme applied to the DOM, either dark or light. Determined by the mode or system preference.
  */
 class Theme {
-  static #modeKey = 'mode';
-  static #modeAttr = 'data-mode';
-  static #darkMedia = window.matchMedia('(prefers-color-scheme: dark)');
-  static switchable = !document.documentElement.hasAttribute(this.#modeAttr);
+  /** @type {string} LocalStorage key for the selected theme mode. */
+  static #storageKey = 'theme';
 
-  static get DARK() {
-    return 'dark';
+  static Mode = Object.freeze({
+    DARK: 'dark',
+    LIGHT: 'light',
+    SYSTEM: 'system'
+  });
+
+  static #root = document.documentElement;
+
+  /** @type {MediaQueryList} System dark-mode preference query. */
+  static #mediaDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+  /** @returns {string|null} The theme currently set on the DOM. */
+  static get #domTheme() {
+    return this.#root.dataset.bsTheme || null;
   }
 
-  static get LIGHT() {
-    return 'light';
+  /** @returns {string|null} The theme stored on the client. */
+  static get #storedTheme() {
+    return localStorage.getItem(this.#storageKey);
+  }
+
+  /** @returns {string} The theme preferred by the operating system. */
+  static get #systemTheme() {
+    return this.#prefersDark ? this.Mode.DARK : this.Mode.LIGHT;
+  }
+
+  /** @returns {boolean} Whether the operating system prefers dark mode. */
+  static get #prefersDark() {
+    return this.#mediaDark.matches;
   }
 
   /**
-   * @returns {string} Theme mode identifier
-   */
-  static get ID() {
-    return 'theme-mode';
-  }
-
-  /**
-   * Gets the current visual state of the theme.
+   * Applies a theme and optionally persists it as a user preference.
    *
-   * @returns {string} The current visual state, either the mode if it exists,
-   *                   or the system dark mode state ('dark' or 'light').
+   * @param {'light'|'dark'} theme
+   * @param {{ persist?: boolean, domPersist?: boolean }} [options]
+   *        - `persist`: Whether the theme is persisted in localStorage.
+   *        - `domPersist`: Whether the theme is persisted in data attributes on the DOM.
    */
-  static get visualState() {
-    if (this.#hasMode) {
-      return this.#mode;
-    } else {
-      return this.#sysDark ? this.DARK : this.LIGHT;
+  static #apply(theme, { persist = false, domPersist = false } = {}) {
+    this.#root.dataset.bsTheme = theme;
+
+    if (persist) {
+      localStorage.setItem(this.#storageKey, theme);
+    }
+
+    if (domPersist || persist) {
+      this.#root.toggleAttribute('data-theme-persisted', true);
     }
   }
 
-  static get #mode() {
-    return (
-      sessionStorage.getItem(this.#modeKey) ||
-      document.documentElement.getAttribute(this.#modeAttr)
-    );
+  /** Removes the stored user preference. */
+  static #clearStorage() {
+    localStorage.removeItem(this.#storageKey);
+    this.#root.toggleAttribute('data-theme-persisted', false);
   }
 
-  static get #isDarkMode() {
-    return this.#mode === this.DARK;
+  /** Broadcasts a theme change event to dependent modules. */
+  static #notify() {
+    window.postMessage({ id: this.eventId }, '*');
   }
 
-  static get #hasMode() {
-    return this.#mode !== null;
+  /** @type {boolean} Whether the current page allows theme toggling. */
+  static isToggleable = this.#domTheme === null;
+
+  static eventId = 'theme-updated';
+
+  /** @returns {string} Resolved theme, falling back to the system preference. */
+  static get resolvedTheme() {
+    return this.#storedTheme || this.#systemTheme;
   }
 
-  static get #sysDark() {
-    return this.#darkMedia.matches;
+  /** @returns {boolean} Whether the theme is determined by the system preference. */
+  static get isSystemTheme() {
+    return this.#storedTheme === null;
+  }
+
+  /** @returns {boolean} Whether the resolved theme is dark. */
+  static get isDark() {
+    return this.resolvedTheme === this.Mode.DARK;
   }
 
   /**
-   * Maps theme modes to provided values
-   * @param {string} light Value for light mode
-   * @param {string} dark Value for dark mode
-   * @returns {Object} Mapped values
+   * Creates a mode-indexed value map.
+   *
+   * @template T
+   * @param {T} light Value for light mode.
+   * @param {T} dark Value for dark mode.
+   * @returns {{ light: T, dark: T }}
    */
-  static getThemeMapper(light, dark) {
+  static newThemeMap(light, dark) {
     return {
-      [this.LIGHT]: light,
-      [this.DARK]: dark
+      [this.Mode.LIGHT]: light,
+      [this.Mode.DARK]: dark
     };
   }
 
-  /**
-   * Initializes the theme based on system preferences or stored mode
-   */
+  /** Initializes the theme from the stored value or system preference. */
   static init() {
-    if (!this.switchable) {
+    if (!this.isToggleable) {
+      this.#clearStorage();
       return;
     }
 
-    this.#darkMedia.addEventListener('change', () => {
-      const lastMode = this.#mode;
-      this.#clearMode();
+    const storedTheme = this.#storedTheme;
 
-      if (lastMode !== this.visualState) {
-        this.#notify();
+    if (storedTheme) {
+      this.#apply(storedTheme, { domPersist: true });
+    } else {
+      this.#apply(this.#systemTheme);
+    }
+
+    this.#mediaDark.addEventListener('change', () => {
+      if (this.#storedTheme) {
+        return;
       }
+
+      this.#apply(this.#systemTheme);
+      this.#notify();
     });
-
-    if (!this.#hasMode) {
-      return;
-    }
-
-    if (this.#isDarkMode) {
-      this.#setDark();
-    } else {
-      this.#setLight();
-    }
   }
 
   /**
-   * Flips the current theme mode
+   * Updates the theme by the specified mode.
+   *
+   * @param {'light'|'dark'|'system'} mode
    */
-  static flip() {
-    if (this.#hasMode) {
-      this.#clearMode();
-    } else {
-      this.#sysDark ? this.#setLight() : this.#setDark();
+  static update(mode) {
+    const newTheme = mode === this.Mode.SYSTEM ? this.#systemTheme : mode;
+
+    if (newTheme !== this.resolvedTheme) {
+      this.#notify();
     }
-    this.#notify();
-  }
 
-  static #setDark() {
-    document.documentElement.setAttribute(this.#modeAttr, this.DARK);
-    sessionStorage.setItem(this.#modeKey, this.DARK);
-  }
+    this.#apply(newTheme, { persist: mode !== this.Mode.SYSTEM });
 
-  static #setLight() {
-    document.documentElement.setAttribute(this.#modeAttr, this.LIGHT);
-    sessionStorage.setItem(this.#modeKey, this.LIGHT);
-  }
-
-  static #clearMode() {
-    document.documentElement.removeAttribute(this.#modeAttr);
-    sessionStorage.removeItem(this.#modeKey);
-  }
-
-  /**
-   * Notifies other plugins that the theme mode has changed
-   */
-  static #notify() {
-    window.postMessage({ id: this.ID }, '*');
+    if (mode === this.Mode.SYSTEM) {
+      this.#clearStorage();
+    }
   }
 }
 
diff --git a/_layouts/default.html b/_layouts/default.html
index 72db34c1e..704bebae5 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -8,12 +8,13 @@ layout: compress
 
 {% include lang.html %}
 
-{% if site.theme_mode %}
-  {% capture prefer_mode %}data-mode="{{ site.theme_mode }}"{% endcapture %}
-{% endif %}
-
 <!-- `site.alt_lang` can specify a language different from the UI -->
-<html lang="{{ page.lang | default: site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
+<html
+  lang="{{ page.lang | default: site.alt_lang | default: site.lang }}"
+  {%- if site.theme_mode == 'light' or site.theme_mode == 'dark' -%}
+    data-bs-theme="{{ site.theme_mode }}"
+  {%- endif -%}
+>
   {% include head.html lang=lang %}
 
   <body>
diff --git a/_sass/abstracts/_mixins.scss b/_sass/abstracts/_mixins.scss
index c5eeee3ca..b08bc8110 100644
--- a/_sass/abstracts/_mixins.scss
+++ b/_sass/abstracts/_mixins.scss
@@ -1,3 +1,9 @@
+@mixin color-scheme($mode) {
+  @media (prefers-color-scheme: #{$mode}) {
+    @content;
+  }
+}
+
 @mixin text-ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/_sass/abstracts/_variables.scss b/_sass/abstracts/_variables.scss
index 0194e40ba..39c3b4a1c 100644
--- a/_sass/abstracts/_variables.scss
+++ b/_sass/abstracts/_variables.scss
@@ -28,3 +28,9 @@ $code-icon-width: 1.75rem !default;
 
 $font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif !default;
 $font-family-heading: Lato, 'Microsoft Yahei', sans-serif !default;
+
+/* Theme mode settings */
+
+$theme-attr: 'data-bs-theme'; /* the attribute used to indicate the resolved theme */
+$theme-options: light, dark;
+$theme: null !default; /* set by Jekyll site configuration */
diff --git a/_sass/base/_base.scss b/_sass/base/_base.scss
index 80c84827e..6a5df78fa 100644
--- a/_sass/base/_base.scss
+++ b/_sass/base/_base.scss
@@ -1,3 +1,4 @@
+@use 'sass:list';
 @use '../abstracts/variables' as v;
 @use '../abstracts/breakpoints' as bp;
 @use '../abstracts/mixins' as mx;
@@ -5,32 +6,36 @@
 @use '../themes/light';
 @use '../themes/dark';
 
-:root {
-  font-size: 16px;
+$enable-dual: not list.index(v.$theme-options, v.$theme);
+$enable-light: v.$theme == light or $enable-dual;
+$enable-dark: v.$theme == dark or $enable-dual;
+
+@if $enable-light {
+  :root[#{v.$theme-attr}='light'] {
+    @include light.styles;
+  }
 }
 
-html {
-  @media (prefers-color-scheme: light) {
-    &:not([data-mode]),
-    &[data-mode='light'] {
+@if $enable-dark {
+  :root[#{v.$theme-attr}='dark'] {
+    @include dark.styles;
+  }
+}
+
+@if $enable-dual {
+  :root:not([#{v.$theme-attr}]) {
+    @include mx.color-scheme(light) {
       @include light.styles;
     }
 
-    &[data-mode='dark'] {
+    @include mx.color-scheme(dark) {
       @include dark.styles;
     }
   }
+}
 
-  @media (prefers-color-scheme: dark) {
-    &:not([data-mode]),
-    &[data-mode='dark'] {
-      @include dark.styles;
-    }
-
-    &[data-mode='light'] {
-      @include light.styles;
-    }
-  }
+:root {
+  font-size: 16px;
 
   @include bp.lg {
     overflow-y: scroll;
@@ -369,7 +374,9 @@ main {
   box-shadow: none;
   border-color: var(--input-focus-border-color) !important;
   background: center !important;
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out;
 }
 
 .left {
diff --git a/_sass/layout/_sidebar.scss b/_sass/layout/_sidebar.scss
index eaad470c6..ec8ac7c3f 100644
--- a/_sass/layout/_sidebar.scss
+++ b/_sass/layout/_sidebar.scss
@@ -17,7 +17,6 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
   overflow-y: auto;
   width: v.$sidebar-width;
   background: var(--sidebar-bg);
-  border-right: 1px solid var(--sidebar-border-color);
 
   /* Hide scrollbar for IE, Edge and Firefox */
   -ms-overflow-style: none; /* IE and Edge */
@@ -105,6 +104,8 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
     letter-spacing: 0.25px;
     margin-top: 1.25rem;
     margin-bottom: 0.5rem;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
     width: fit-content;
     color: var(--site-title-color);
   }
@@ -207,7 +208,7 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
       }
     }
 
-    a {
+    > a {
       @extend %button;
       @extend %sidebar-link-hover;
       @extend %clickable-transition;
@@ -227,13 +228,102 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
 
     #mode-toggle {
       @extend %button;
-      @extend %sidebar-links;
       @extend %sidebar-link-hover;
+      @extend %clickable-transition;
+
+      > i {
+        display: none;
+
+        @at-root :root[data-bs-theme='light'][data-theme-persisted]
+            &[data-theme-mode='light'] {
+          display: block;
+        }
+
+        @at-root :root[data-bs-theme='dark'][data-theme-persisted]
+            &[data-theme-mode='dark'] {
+          display: block;
+        }
+
+        @at-root :root:not([data-theme-persisted]) &[data-theme-mode='system'] {
+          display: block;
+        }
+      }
+
+      @-webkit-keyframes menu-pop {
+        from {
+          opacity: 0;
+          translate: 0 0.5rem;
+        }
+
+        to {
+          opacity: 1;
+          translate: 0 0;
+        }
+      }
+
+      @keyframes menu-pop {
+        from {
+          opacity: 0;
+          translate: 0 0.5rem;
+        }
+
+        to {
+          opacity: 1;
+          translate: 0 0;
+        }
+      }
+
+      + .dropdown-menu {
+        background-color: var(--menu-bg);
+        border-color: var(--menu-border-color);
+        box-shadow: var(--menu-shadow-color) 0 1px 4px;
+        border-radius: 0.75rem !important;
+
+        &.show {
+          display: flex;
+          flex-direction: column;
+          gap: 0.25rem;
+          left: -0.25rem !important;
+          -webkit-animation: menu-pop 0.2s ease-out;
+          animation: menu-pop 0.2s ease-out;
+        }
+
+        .dropdown-item {
+          border-radius: 0.5rem;
+          color: var(--sidebar-muted-color);
+          font-size: 90%;
+
+          &.active {
+            font-weight: 600;
+            color: var(--menu-active-color);
+
+            &::after {
+              content: '\f00c';
+              font: var(--fa-font-solid);
+              font-size: 0.75rem;
+              color: var(--sidebar-btn-color);
+              margin-left: auto;
+              padding-left: 1rem;
+            }
+          }
+
+          &:active,
+          &:hover,
+          &.active {
+            background-color: var(--menu-highlight-bg);
+          }
+
+          > i {
+            color: var(--sidebar-btn-color);
+            margin-right: 0.5rem;
+          }
+        }
+      }
     }
 
     .icon-border {
       @extend %no-cursor;
-      @include mx.ml-mr(calc((v.$sb-btn-gap - $btn-border-width) / 2));
+      @include mx.ml-mr(0.6rem);
 
       background-color: var(--sidebar-btn-color);
       content: '';
@@ -241,10 +331,6 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
       height: $btn-border-width;
       border-radius: 50%;
       margin-bottom: $btn-mb;
-
-      @include bp.xxxl {
-        @include mx.ml-mr(calc((v.$sb-btn-gap-lg - $btn-border-width) / 2));
-      }
     }
   } /* .sidebar-bottom */
 } /* #sidebar */
diff --git a/_sass/themes/_dark.scss b/_sass/themes/_dark.scss
index aae652213..be2a3aae3 100644
--- a/_sass/themes/_dark.scss
+++ b/_sass/themes/_dark.scss
@@ -30,6 +30,11 @@
     rgb(58 55 55 / 40%) 50%,
     rgb(255 255 255 / 0%) 100%
   );
+  --menu-bg: rgb(30 30 30);
+  --menu-border-color: rgb(77 77 77 / 60%);
+  --menu-shadow-color: rgb(4 4 4 / 42%);
+  --menu-active-color: rgb(240 248 255 / 63%);
+  --menu-highlight-bg: rgb(90 91 92 / 12%);
 
   /* Sidebar */
   --site-title-color: #717070;
@@ -67,8 +72,8 @@
   --btn-share-hover-color: #bfc1ca;
   --card-bg: #1e1e1e;
   --card-hover-bg: #464d51;
-  --card-shadow: rgb(21 21 21 / 72%) 0 6px 18px 0,
-    rgb(137 135 135 / 24%) 0 0 0 1px;
+  --card-shadow:
+    rgb(21 21 21 / 72%) 0 6px 18px 0, rgb(137 135 135 / 24%) 0 0 0 1px;
   --kbd-wrap-color: #6a6a6a;
   --kbd-text-color: #d3d3d3;
   --kbd-bg-color: #242424;
diff --git a/_sass/themes/_light.scss b/_sass/themes/_light.scss
index 48d47558a..19e8e01a9 100644
--- a/_sass/themes/_light.scss
+++ b/_sass/themes/_light.scss
@@ -27,6 +27,11 @@
     rgb(232 230 230 / 100%) 50%,
     rgb(250 250 250 / 0%) 100%
   );
+  --menu-bg: white;
+  --menu-border-color: white;
+  --menu-shadow-color: rgb(0 0 0 / 16%);
+  --menu-active-color: rgb(91 91 91);
+  --menu-highlight-bg: rgb(243 244 245 / 50%);
 
   /* Sidebar */
   --site-title-color: rgb(113 113 113);
@@ -59,8 +64,8 @@
   --btn-share-hover-color: #0d6efd;
   --card-bg: white;
   --card-hover-bg: #e2e2e2;
-  --card-shadow: rgb(104 104 104 / 5%) 0 2px 6px 0,
-    rgb(211 209 209 / 15%) 0 0 0 1px;
+  --card-shadow:
+    rgb(104 104 104 / 5%) 0 2px 6px 0, rgb(211 209 209 / 15%) 0 0 0 1px;
   --footnote-target-bg: lightcyan;
   --tb-odd-bg: #fbfcfd;
   --tb-border-color: #eaeaea;
diff --git a/assets/css/jekyll-theme-chirpy.scss b/assets/css/jekyll-theme-chirpy.scss
index ff1f01c0a..2f731accc 100644
--- a/assets/css/jekyll-theme-chirpy.scss
+++ b/assets/css/jekyll-theme-chirpy.scss
@@ -1,6 +1,10 @@
 ---
 ---
 
+@use 'abstracts/variables' with (
+  $theme: '{{ site.theme_mode }}'
+);
+
 /* prettier-ignore */
 @use 'main
 {%- if jekyll.environment == 'production' -%}