Merge pull request #114 from zetxek/113-idea-an-option-to-force-the-w…

…ebsite-to-darklight-mode

Add option to toggle theme style (dark/light)

assets/css/custom.css

@@ -1,11 +1 @@
 /* You can customize theme styles here */
-.header .navbar-brand span:first-child{
-    color: #478079;
-}
-.header .container{
-    padding-left: 10px;
-}
-
-html body ::selection{
-    background-color:#488079;color:#fff
-}

assets/js/color-modes.js

@@ -0,0 +1,83 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+    'use strict'
+
+    console.log('Dark mode toggle script loaded')
+
+    const getStoredTheme = () => localStorage.getItem('theme')
+    const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+    const getPreferredTheme = () => {
+      const storedTheme = getStoredTheme()
+      if (storedTheme) {
+        return storedTheme
+      }
+
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    }
+
+    const setTheme = theme => {
+      if (theme === 'auto') {
+        document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+      } else {
+        document.documentElement.setAttribute('data-bs-theme', theme)
+      }
+    }
+
+    setTheme(getPreferredTheme())
+
+    const showActiveTheme = (theme, focus = false) => {
+      const themeSwitcher = document.querySelector('#bd-theme')
+
+      if (!themeSwitcher) {
+        return
+      }
+
+      const themeSwitcherText = document.querySelector('#bd-theme-text')
+      const activeTheme = document.querySelector('.current-theme')
+      const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+      const iconOfActiveBtn = btnToActive.querySelector('span.theme-icon')
+
+
+      document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+        element.classList.remove('active')
+        element.setAttribute('aria-pressed', 'false')
+      })
+
+      btnToActive.classList.add('active')
+      btnToActive.setAttribute('aria-pressed', 'true')
+      activeTheme.textContent = btnToActive.textContent
+      const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+      themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+
+      if (focus) {
+        themeSwitcher.focus()
+      }
+    }
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      const storedTheme = getStoredTheme()
+      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')
+            setStoredTheme(theme)
+            setTheme(theme)
+            showActiveTheme(theme, true)
+          })
+        })
+    })
+  })()

assets/scss/_menu.scss

@@ -0,0 +1,30 @@
+$color: white;
+$color-border: #478079;
+$color-dark: scale-color($color, $lightness: -30%);
+$transition: 280ms all 120ms ease-out;
+
+.language-selector {
+  li.choice {
+    padding-left: 22px;
+  }
+
+  .label {
+    color: $color;
+  }
+
+  .dropdown-toggle::after {
+    color: $color;
+  }
+
+}
+
+#footer-color-selector {
+    .dropdown-toggle::after {
+      color: $color;
+    }
+
+    .current-theme{
+      color: $color;
+    }
+
+}

assets/scss/_navbar.scss

@@ -0,0 +1,132 @@
+.bd-navbar {
+    padding: .75rem 0;
+    background-color: transparent;
+
+    @media (forced-colors) {
+      background-color: Canvas;
+    }
+
+    &::after {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      display: block;
+      content: "";
+      background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
+    }
+
+    .bd-navbar-toggle {
+      @include media-breakpoint-down(lg) {
+        width: 4.25rem;
+      }
+    }
+
+    .navbar-toggler {
+      padding: 0;
+      margin-right: -.5rem;
+      border: 0;
+
+      &:first-child {
+        margin-left: -.5rem;
+      }
+
+      .bi {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
+      &:focus {
+        box-shadow: none;
+      }
+    }
+
+    .navbar-brand {
+      color: $white;
+      @include transition(transform .2s ease-in-out);
+
+      &:hover {
+        transform: scale(1.04);
+      }
+    }
+
+    .navbar-toggler,
+    .nav-link {
+      padding-right: $spacer * .25;
+      padding-left: $spacer * .25;
+      color: rgba($white, .85);
+
+      &:hover,
+      &:focus {
+        color: $white;
+      }
+
+      &.active {
+        font-weight: 600;
+        color: $white;
+      }
+    }
+
+    .navbar-nav-svg {
+      display: inline-block;
+      vertical-align: -.125rem;
+    }
+
+    .offcanvas-lg {
+      background-color: var(--bd-violet-bg);
+      border-left: 0;
+
+      @include media-breakpoint-down(lg) {
+        box-shadow: var(--bs-box-shadow-lg);
+      }
+    }
+
+    .dropdown-toggle {
+      &:focus:not(:focus-visible) {
+        outline: 0;
+      }
+    }
+
+    .dropdown-menu {
+      --bs-dropdown-min-width: 12rem;
+      --bs-dropdown-padding-x: .25rem;
+      --bs-dropdown-padding-y: .25rem;
+      --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
+      --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
+      @include rfs(.875rem, --bs-dropdown-font-size);
+      @include font-size(.875rem);
+      @include border-radius(.5rem);
+      box-shadow: $dropdown-box-shadow;
+
+      li + li {
+        margin-top: .125rem;
+      }
+
+      .dropdown-item {
+        @include border-radius(.25rem);
+
+        &:active {
+          .bi {
+            color: inherit !important; // stylelint-disable-line declaration-no-important
+          }
+        }
+      }
+
+      .active {
+        font-weight: 600;
+
+        .bi {
+          display: block !important; // stylelint-disable-line declaration-no-important
+        }
+      }
+    }
+
+    .dropdown-menu-end {
+      --bs-dropdown-min-width: 8rem;
+    }
+  }
+
+  @include color-mode(dark) {
+    .bd-navbar {
+      box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+    }
+  }

assets/scss/adritian.scss

@@ -1,5 +1,19 @@
 @import "./bootstrap/bootstrap.scss";
-@import "./menu.scss";
+@import "navbar";
+@import "menu";
+@import "raditian";
+
+/** main style **/
+.header .navbar-brand span:first-child{
+    color: #478079;
+}
+.header .container{
+    padding-left: 10px;
+}
+
+html body ::selection{
+    background-color:#488079;color:#fff
+}
 
 
 .container {
@@ -138,10 +152,23 @@ br {
     }
 }
 
-
+html[data-bs-theme="dark"] {
+    #dark-toggle {
+        span.dark{ 
+            display: none;
+        }
+    }
+}
+html[data-bs-theme="light"] {
+    #dark-toggle {
+        span.light{ 
+            display: none;
+        }
+    }
+}
 /* dark mode */
 /** Media-query based color switching **/
-$color-mode-type: media-query;
+// $color-mode-type: media-query;
 @include color-mode(dark) {
 
     html body, body {