signified · threehymns · Feb 1, 2023
diff --git a/_includes/theme-switcher.html b/_includes/theme-switcher.html
@@ -0,0 +1,33 @@
+{%- assign class = nil -%}
+
+
+<div class="theme-switcher dropdown{% if include.class %} {{ include.class }}{% endif %}">
+  <button class="btn btn-link text-reset py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bs-theme"
+    type="button" data-bs-toggle="dropdown">
+    <span class="bi mb-2 theme-icon-active">{% include icon.html name='sun-fill' type='sprite' size=16 %}</span>
+    <span class="d-none ms-2">Toggle theme</span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bs-theme" style="--bs-dropdown-min-width: 8rem;">
+    <li>
+      <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light">
+        {% include icon.html name='sun-fill' class="me-2 opacity-50 theme-icon" type='sprite' size=16 %}
+        Light
+        {% include icon.html name='check2' class="ms-auto d-none" type='sprite' size=16 %}
+      </button>
+    </li>
+    <li>
+      <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
+        {% include icon.html name='moon-stars-fill' class="me-2 opacity-50 theme-icon" type='sprite' size=16 %}
+        Dark
+        {% include icon.html name='check2' class="ms-auto d-none" type='sprite' size=16 %}
+      </button>
+    </li>
+    <li>
+      <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto">
+        {% include icon.html name='circle-half' class="me-2 opacity-50 theme-icon" type='sprite' size=16 %}
+        Auto
+        {% include icon.html name='check2' class="ms-auto d-none" type='sprite' size=16 %}
+      </button>
+    </li>
+  </ul>
+</div>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -21,5 +21,6 @@
   <body>
     {{ content }}
     <script src="{{- '/assets/js/bootstrap.bundle.min.js' | relative_url -}}"></script>
+    <script src="{{- '/assets/js/theme-switcher.js' | relative_url -}}"></script>
   </body>
 </html>
diff --git a/_sass/_highlight.scss b/_sass/_highlight.scss
@@ -8,7 +8,7 @@
 
   margin: 0;
   padding: 0;
-  background-color: $light;
+  background-color: var(--bs-tertiary-bg);
   border-radius: $border-radius;
 
   pre {
@@ -32,7 +32,7 @@
   }
 
   .hll {
-    background-color: $yellow-100;
+    background-color: var(--bs-warning-bg-subtle);
   }
 
   .c,

diff --git a/_sass/_prose.scss b/_sass/_prose.scss
@@ -53,7 +53,7 @@
   }
 
   pre:not(.highlight pre) {
-    background: $light;
+    background: var(--bs-tertiary-bg);
     margin-bottom: 0 0 map-get($spacers, 4) 0;
     padding: $spacer;
     color: $pre-color;

diff --git a/_sass/_theme-switcher.scss b/_sass/_theme-switcher.scss
@@ -0,0 +1,28 @@
+.theme-switcher .dropdown-menu {
+    --bs-dropdown-padding-x: .25rem;
+    --bs-dropdown-padding-y: .25rem;
+    --bs-dropdown-link-hover-bg: rgba(var(--bs-primary-rgb), .1);
+    --bs-dropdown-link-active-bg: rgba(var(--bs-primary-rgb), 1);
+    --bs-dropdown-font-size: .875rem;
+    font-size: .875rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), 0.15);
+
+    .active {
+        font-weight: 600;
+
+        .bi {
+            display: block !important;
+        }
+    }
+
+    li {
+        border-radius: 0.25rem;
+        margin-top: var(--bs-dropdown-padding-y);
+        overflow: hidden;
+
+        :first-child {
+            margin-top: 0;
+        }
+    }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -6,3 +6,4 @@
 @import "bootstrap-icons";
 @import "highlight";
 @import "prose";
+@import "theme-switcher";
diff --git a/assets/js/theme-switcher.js b/assets/js/theme-switcher.js
@@ -0,0 +1,62 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/) (modified)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  'use strict'
+
+  const storedTheme = localStorage.getItem('theme')
+
+  const getPreferredTheme = () => {
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = function (theme) {
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = theme => {
+    const activeThemeIcon = document.querySelector('.theme-icon-active use')
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('xlink:href')
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('active')
+    })
+
+    btnToActive.classList.add('active')
+    activeThemeIcon.setAttribute('xlink:href', svgOfActiveBtn)
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (storedTheme !== 'light' || storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          localStorage.setItem('theme', theme)
+          setTheme(theme)
+          showActiveTheme(theme)
+        })
+      })
+  })
+})()
diff --git a/index.md b/index.md
@@ -4,6 +4,7 @@ layout: home
 
 <header class="bg-dark text-light py-5">
   <div class="container">
+    {% include theme-switcher.html class="float-end" %}
     <h1 class="display-1 mb-4">{{ site.title }}</h1>
     <p class="lead mb-4">{{ site.description }}</p>
     <a class="d-block d-md-inline mb-3 mb-md-0 btn btn-outline-light" href="https://getbootstrap.com/" target="_blank">{% include icon.html name='bootstrap' %} Bootstrap 5.3.0</a>