jekyll-theme-purple 1.0.4 → 1.0.5

data/_data/locales/tr-TR.yml

@@ -46,9 +46,14 @@ not_found:
   statement: Üzgünüz, bu linki yanlış yerleştirdik veya var olmayan bir şeye işaret ediyor.
 
 notification:
-  update_found: İçeriğin yeni bir sürümü mevcut.
+  update_found: Yeni içerik bulundu
   update: Güncelle
 
+theme:
+  light: Açık
+  dark: Koyu
+  system: Sistem
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: dakikada
     prompt: okunabilir
+  edit: Bu gönderiyi düzenle
   relate_posts: Benzer Gönderiler
   share: Paylaş
   button:

data/_data/locales/uk-UA.yml

@@ -46,9 +46,14 @@ not_found:
   statement: Вибачте, це посилання вказує на ресурс, що не існує.
 
 notification:
-  update_found: Доступна нова версія вмісту.
+  update_found: Знайдено новий вміст
   update: Оновлення
 
+theme:
+  light: Світла
+  dark: Темна
+  system: Системна
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: хвилин
     prompt: читання
+  edit: Редагувати цей пост
   relate_posts: Вас також може зацікавити
   share: Поділитися
   button:

data/_data/locales/ur-PK.yml

@@ -46,9 +46,14 @@ not_found:
   statement: معذرت، یہ URL غلط ہے یا جس چیز کی طرف اشارہ کر رہا ہے وہ موجود نہیں۔
 
 notification:
-  update_found: نیا مواد دستیاب ہے۔
+  update_found: نیا مواد مل گیا
   update: اپ ڈیٹ
 
+theme:
+  light: روشن
+  dark: تاریک
+  system: سسٹم
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: منٹ
     prompt: پڑھیں
+  edit: اس تحریر میں ترمیم کریں
   relate_posts: مزید مطالعہ
   share: شیئر
   button:

data/_data/locales/vi-VN.yml

@@ -45,9 +45,14 @@ not_found:
   statement: Xin lỗi, chúng tôi đã đặt nhầm URL hoặc đường dẫn trỏ đến một trang nào đó không tồn tại.
 
 notification:
-  update_found: Đã có phiên bản mới của nội dung.
+  update_found: Đã tìm thấy nội dung mới
   update: Cập nhật
 
+theme:
+  light: Sáng
+  dark: Tối
+  system: Hệ thống
+
 # ----- Posts related labels -----
 
 post:
@@ -59,6 +64,7 @@ post:
   read_time:
     unit: phút
     prompt: đọc
+  edit: Chỉnh sửa bài viết này
   relate_posts: Bài viết liên quan
   share: Chia sẻ
   button:

data/_data/locales/zh-CN.yml

@@ -45,9 +45,14 @@ not_found:
   statement: 抱歉，我们放错了该 URL，或者它指向了不存在的内容。
 
 notification:
-  update_found: 发现新版本的内容。
+  update_found: 发现新内容
   update: 更新
 
+theme:
+  light: 浅色
+  dark: 深色
+  system: 跟随系统
+
 # ----- Posts related labels -----
 
 post:
@@ -59,6 +64,7 @@ post:
   read_time:
     unit: 分钟
     prompt: 阅读
+  edit: 编辑此文
   relate_posts: 相关文章
   share: 分享
   button:

data/_data/locales/zh-TW.yml

@@ -45,9 +45,14 @@ not_found:
   statement: 抱歉，您可能正在存取一個已被移動的 URL，或者它從未存在。
 
 notification:
-  update_found: 發現新版本更新。
+  update_found: 發現新內容
   update: 更新
 
+theme:
+  light: 淺色
+  dark: 深色
+  system: 跟隨系統
+
 # ----- Posts related labels -----
 
 post:
@@ -59,6 +64,7 @@ post:
   read_time:
     unit: 分鐘
     prompt: 閱讀
+  edit: 編輯此文
   relate_posts: 相關文章
   share: 分享
   button:

data/_data/origin/cors.yml

@@ -19,36 +19,39 @@ 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.36.4/dist/tocbot.min.css
-  js: https://cdn.jsdelivr.net/npm/tocbot@4.36.4/dist/tocbot.min.js
+  css: https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.css
+  js: https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js
 
 fontawesome:
-  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.1.0/css/all.min.css
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7/css/all.min.css
 
 search:
-  js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js
+  js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1/dest/simple-jekyll-search.min.js
 
 mermaid:
-  js: https://cdn.jsdelivr.net/npm/mermaid@11.12.0/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js
 
 dayjs:
   js:
-    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.18/dayjs.min.js
-    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.18/locale/:LOCALE.js
-    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.18/plugin/relativeTime.js
-    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.18/plugin/localizedFormat.js
+    common: https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js
+    locale: https://cdn.jsdelivr.net/npm/dayjs@1/locale/:LOCALE.js
+    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js
+    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/localizedFormat.js
 
 glightbox:
-  css: https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css
-  js: https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/js/glightbox.min.js
+  css: https://cdn.jsdelivr.net/npm/glightbox@3/dist/css/glightbox.min.css
+  js: https://cdn.jsdelivr.net/npm/glightbox@3/dist/js/glightbox.min.js
 
 lazy-polyfill:
-  css: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.min.css
-  js: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.umd.min.js
+  css: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2/dist/loading-attribute-polyfill.min.css
+  js: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2/dist/loading-attribute-polyfill.umd.min.js
 
 clipboard:
-  js: https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js
+  js: https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js
 
 mathjax:
-  js: https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml.js
+  js: https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js

data/_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);
   }
 

data/_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,8 @@
     $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: {
@@ -46,9 +46,19 @@
           }
         };
 
-        const giscus =
-          document.getElementsByClassName('giscus-frame')[0].contentWindow;
-        giscus.postMessage({ giscus: message }, 'https://giscus.app');
+        const iframe = document.querySelector('.giscus-frame');
+
+        if (!iframe) {
+          return;
+        }
+
+        if (iframe.classList.contains('giscus-frame--loading')) {
+          let url = new URL(iframe.src);
+          url.searchParams.set('theme', newTheme);
+          iframe.src = url.toString();
+        }
+
+        iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
       }
     });
   })();

data/_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',

data/_includes/datetime.html

@@ -1,6 +1,6 @@
 <!--
   Date format snippet
-  See: ${JS_ROOT}/utils/locale-dateime.js
+  See: ${JS_ROOT}/modules/components/locale-datetime.js
 -->
 
 {% assign df_strftime = site.data.locales[include.lang].df.post.strftime | default: '%d/%m/%Y' %}

data/_includes/head.html

@@ -2,8 +2,6 @@
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
   <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e">
-  <meta name="mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta
     name="viewport"
     content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
@@ -50,11 +48,24 @@
 
   {{ seo_tags }}
 
+  {%- if site.social.fediverse_handle %}
+    <!-- Fediverse handle/creator -->
+    <meta name="fediverse:creator" content="{{ site.social.fediverse_handle }}">
+  {% endif %}
+
   <title>
     {%- unless page.layout == 'home' -%}
-      {{ page.title | append: ' | ' }}
+      {%- capture title -%}
+        {%- if page.collection == 'tabs' -%}
+          {%- assign tab_key = page.title | downcase -%}
+          {{- site.data.locales[include.lang].tabs[tab_key] -}}
+        {%- else -%}
+          {{- page.title -}}
+        {%- endif -%}
+      {%- endcapture -%}
+      {{- title | append: ' | ' -}}
     {%- endunless -%}
-    {{ site.title }}
+    {{- site.title -}}
   </title>
 
   {% include_cached favicons.html %}
@@ -70,7 +81,7 @@
 
   <!-- Bootstrap -->
   {% unless jekyll.environment == 'production' %}
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="{{ site.data.origin.cors.bootstrap.css }}">
   {% endunless %}
 
   <!-- Theme style -->

data/_includes/js-selector.html

@@ -67,7 +67,6 @@
 {% if page.math %}
   <!-- MathJax -->
   <script src="{{ '/assets/js/data/mathjax.js' | relative_url }}"></script>
-  <script async src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
   <script id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
 {% endif %}
 

data/_includes/language-alias.html

@@ -1,9 +1,7 @@
 {% comment %}
-
   Convert the alias of the syntax language to the official name
 
   See: <https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers>
-
 {% endcomment %}
 
 {% assign _lang = include.language | default: '' %}
@@ -20,13 +18,13 @@
   {% when 'coffeescript', 'coffee', 'coffee-script' %}
     {{ 'CoffeeScript' }}
   {% when 'cs', 'csharp' %}
-   {{ 'C#' }}
+    {{ 'C#' }}
   {% when 'erl' %}
     {{ 'Erlang' }}
   {% when 'graphql' %}
-   {{ 'GraphQL' }}
+    {{ 'GraphQL' }}
   {% when 'haskell', 'hs' %}
-   {{ 'Haskell' }}
+    {{ 'Haskell' }}
   {% when 'javascript', 'js' %}
     {{ 'JavaScript' }}
   {% when 'make', 'mf', 'gnumake', 'bsdmake' %}
@@ -39,22 +37,22 @@
     {{ 'Objective-C' }}
   {% when 'perl', 'pl' %}
     {{ 'Perl' }}
-  {% when 'php','php3','php4','php5' %}
+  {% when 'php', 'php3', 'php4', 'php5' %}
     {{ 'PHP' }}
   {% when 'py' %}
     {{ 'Python' }}
   {% when 'rb' %}
     {{ 'Ruby' }}
-  {% when 'rs','no_run','ignore','should_panic' %}
+  {% when 'rs', 'no_run', 'ignore', 'should_panic' %}
     {{ 'Rust' }}
   {% when 'bash', 'zsh', 'ksh', 'sh' %}
     {{ 'Shell' }}
   {% when 'st', 'squeak' %}
     {{ 'Smalltalk' }}
-  {% when 'tex'%}
+  {% when 'tex' %}
     {{ 'TeX' }}
   {% when 'latex' %}
-    {{ 'LaTex' }}
+    {{ 'LaTeX' }}
   {% when 'ts', 'typescript' %}
     {{ 'TypeScript' }}
   {% when 'vb', 'visualbasic' %}

data/_includes/media-url.html

@@ -17,7 +17,7 @@
     {%- comment -%} Add media resources subpath prefix {%- endcomment -%}
     {% assign url = include.subpath | default: '' | append: '/' | append: url %}
 
-    {%- comment -%} Prepend CND URL {%- endcomment -%}
+    {%- comment -%} Prepend CDN URL {%- endcomment -%}
     {% if site.cdn %}
       {% assign url = site.cdn | append: '/' | append: url %}
     {% endif %}

data/_includes/notification.html

@@ -1,24 +1,28 @@
 <aside
   id="notification"
-  class="toast"
+  class="toast w-auto rounded-5 text-nowrap"
   role="alert"
   aria-live="assertive"
   aria-atomic="true"
   data-bs-animation="true"
   data-bs-autohide="false"
 >
-  <div class="toast-header">
+  <div class="d-flex align-items-center">
+    <div class="toast-body ps-3">
+      {{- site.data.locales[include.lang].notification.update_found -}}
+    </div>
     <button
       type="button"
-      class="btn-close ms-auto"
+      class="btn btn-primary btn-sm rounded-2 py-0"
+      aria-label="Update"
+    >
+      {{- site.data.locales[include.lang].notification.update -}}
+    </button>
+    <button
+      type="button"
+      class="btn-close mx-3 ms-2"
       data-bs-dismiss="toast"
       aria-label="Close"
     ></button>
   </div>
-  <div class="toast-body text-center pt-0">
-    <p class="px-2 mb-3">{{ site.data.locales[include.lang].notification.update_found }}</p>
-    <button type="button" class="btn btn-primary" aria-label="Update">
-      {{ site.data.locales[include.lang].notification.update }}
-    </button>
-  </div>
 </aside>

data/_includes/post-edit.html

@@ -0,0 +1,23 @@
+<!-- Link to edit the post to contribute. -->
+
+{% assign enabled = site.actions.edit_post.enabled %}
+{% assign url = site.actions.edit_post.url %}
+{% assign static_url = site.actions.edit_post.static_url %}
+
+{% unless static_url %}
+  {% assign url = url | append: '/' | append: page.path %}
+{% endunless %}
+
+{% if enabled %}
+  <div class="post-edit">
+    {% assign edit = site.data.locales[include.lang].post.edit %}
+    <a
+      href="{{ url }}"
+      target="_blank"
+      rel="noopener"
+    >
+      <i class="fa fa-pen fa-fw me-1"></i>
+      <span>{{ edit }}</span>
+    </a>
+  </div>
+{% endif %}

data/_includes/post-paginator.html

@@ -1,4 +1,4 @@
-<!-- The paginator for post list on HomgPage. -->
+<!-- The paginator for post list on HomePage. -->
 
 <nav aria-label="Page Navigation">
   <ul class="pagination align-items-center mt-4 mb-0">

data/_includes/refactor-content.html

@@ -173,7 +173,7 @@
       {% assign _parent = _right | slice: 1, 4 %}
 
       {% if _parent == '</a>' %}
-        <!-- add class to exist <a> tag -->
+        <!-- add class to existing <a> tag -->
         {% assign _size = _img_content | size | minus: 1 %}
         {% capture _class %}
           class="img-link{% unless _lqip %} shimmer{% endunless %}"

data/_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>
@@ -68,7 +110,7 @@
           {%- endunless -%}
           {%- assign email = site.social.email | split: '@' -%}
           {%- capture url -%}
-            javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
+            javascript:void(location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@'))
           {%- endcapture -%}
         {% when 'rss' %}
           {% assign url = '/feed.xml' | relative_url %}

data/_layouts/default.html

@@ -8,13 +8,14 @@ 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 }}>
-  {% include head.html %}
+<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>
     {% include sidebar.html lang=lang %}

data/_layouts/post.html

@@ -113,9 +113,7 @@ script_includes:
     <dialog id="toc-popup" class="p-0">
       <div class="header d-flex flex-row align-items-center justify-content-between">
         <div class="label text-truncate py-2 ms-4">{{- page.title -}}</div>
-        <button id="toc-popup-close" type="button" class="btn mx-1 my-1 opacity-75">
-          <i class="fas fa-close"></i>
-        </button>
+        <button id="toc-popup-close" type="button" class="btn-close btn-sm mx-3" aria-label="Close"></button>
       </div>
       <div id="toc-popup-content" class="px-4 py-3 pb-4"></div>
     </dialog>
@@ -126,16 +124,21 @@ script_includes:
   </div>
 
   <div class="post-tail-wrapper text-muted">
-    <!-- categories -->
-    {% if page.categories.size > 0 %}
-      <div class="post-meta mb-3">
-        <i class="far fa-folder-open fa-fw me-1"></i>
-        {% for category in page.categories %}
-          <a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
-          {%- unless forloop.last -%},{%- endunless -%}
-        {% endfor %}
-      </div>
-    {% endif %}
+    <div class="d-flex justify-content-between align-items-center gap-3 mb-3">
+      <!-- categories -->
+      {% if page.categories.size > 0 %}
+        <div class="post-meta">
+          <i class="far fa-folder-open fa-fw me-1"></i>
+          {% for category in page.categories %}
+            <a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
+            {%- unless forloop.last -%},{%- endunless -%}
+          {% endfor %}
+        </div>
+      {% endif %}
+
+      <!-- "Edit this post" link -->
+      {% include post-edit.html lang=lang %}
+    </div>
 
     <!-- tags -->
     {% if page.tags.size > 0 %}

data/_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;

data/_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 */