github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

color mode improve

pull/5153/head
Daniel 2 years ago
parent
6b17e5ca2a
commit
72aaec4761
2 changed files with 101 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 62
      src/html/components/docs/color-mode.mdx
  2. 62
      src/html/pages/docs/color-mode.astro

62
src/html/components/docs/color-mode.mdx
Unescape View File

@ -1,14 +1,14 @@
```html ```html
<!-- Navbar --> <!--begin::Header-->
<nav class="app-header navbar navbar-expand bg-body"> <nav class="navbar navbar-expand bg-body">
<!--begin::Container--> <!--begin::Container-->
<div class="container-fluid"> <div class="container-fluid">
<!-- Start navbar links --> <!--begin::Start Navbar links-->
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"> <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"
<i class="fa-solid fa-bars"></i> ><i class="fa-solid fa-bars"></i
</a> ></a>
</li> </li>
<li class="nav-item d-none d-md-block"> <li class="nav-item d-none d-md-block">
<a href="#" class="nav-link">Home</a> <a href="#" class="nav-link">Home</a>
@ -17,6 +17,8 @@
<a href="#" class="nav-link">Contact</a> <a href="#" class="nav-link">Contact</a>
</li> </li>
</ul> </ul>
<!--end::Start Navbar links-->
<!--begin::End Navbar links-->
<ul class="navbar-nav ms-auto"> <ul class="navbar-nav ms-auto">
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<button <button
@ -30,10 +32,11 @@
<span class="theme-icon-active"> <span class="theme-icon-active">
<i class="my-1"></i> <i class="my-1"></i>
</span> </span>
<span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
</button> </button>
<ul <ul
class="dropdown-menu dropdown-menu-end" class="dropdown-menu dropdown-menu-end"
aria-labelledby="bd-theme" aria-labelledby="bd-theme-text"
style="--bs-dropdown-min-width: 8rem;" style="--bs-dropdown-min-width: 8rem;"
> >
<li> <li>
@ -41,6 +44,7 @@
type="button" type="button"
class="dropdown-item d-flex align-items-center active" class="dropdown-item d-flex align-items-center active"
data-bs-theme-value="light" data-bs-theme-value="light"
aria-pressed="false"
> >
<i class="fa-regular fa-sun me-2"></i> <i class="fa-regular fa-sun me-2"></i>
Light Light
@ -52,6 +56,7 @@
type="button" type="button"
class="dropdown-item d-flex align-items-center" class="dropdown-item d-flex align-items-center"
data-bs-theme-value="dark" data-bs-theme-value="dark"
aria-pressed="false"
> >
<i class="fa-solid fa-moon me-2"></i> <i class="fa-solid fa-moon me-2"></i>
Dark Dark
@ -63,6 +68,7 @@
type="button" type="button"
class="dropdown-item d-flex align-items-center" class="dropdown-item d-flex align-items-center"
data-bs-theme-value="auto" data-bs-theme-value="auto"
aria-pressed="true"
> >
<i class="fa-solid fa-circle-half-stroke me-2"></i> <i class="fa-solid fa-circle-half-stroke me-2"></i>
Auto Auto
@ -72,24 +78,30 @@
</ul> </ul>
</li> </li>
</ul> </ul>
<!--end::End Navbar links-->
</div> </div>
<!--end::Container--> <!--end::Container-->
</nav> </nav>
<!--end::Header-->
``` ```
```js ```js
// Color Mode Toggler // Color Mode Toggler
(() => { (() => {
"use strict"; "use strict";
const storedTheme = localStorage.getItem("theme"); const storedTheme = localStorage.getItem("theme");
const getPreferredTheme = () => { const getPreferredTheme = () => {
if (storedTheme) { if (storedTheme) {
return storedTheme; return storedTheme;
} }
return window.matchMedia("(prefers-color-scheme: dark)").matches return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark" ? "dark"
: "light"; : "light";
}; };
const setTheme = function (theme) { const setTheme = function (theme) {
if ( if (
theme === "auto" && theme === "auto" &&
@ -100,19 +112,39 @@
document.documentElement.setAttribute("data-bs-theme", theme); document.documentElement.setAttribute("data-bs-theme", theme);
} }
}; };
setTheme(getPreferredTheme()); setTheme(getPreferredTheme());
const showActiveTheme = (theme) => {
const showActiveTheme = (theme, focus = false) => {
const themeSwitcher = document.querySelector("#bd-theme");
if (!themeSwitcher) {
return;
}
const themeSwitcherText = document.querySelector("#bd-theme-text");
const activeThemeIcon = document.querySelector(".theme-icon-active i"); const activeThemeIcon = document.querySelector(".theme-icon-active i");
const btnToActive = document.querySelector( const btnToActive = document.querySelector(
'[data-bs-theme-value="' + theme + '"]' `[data-bs-theme-value="${theme}"]`
); );
const svgOfActiveBtn = btnToActive.querySelector("i").getAttribute("class"); const svgOfActiveBtn = btnToActive.querySelector("i").getAttribute("class");
document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
for (const element of document.querySelectorAll("[data-bs-theme-value]")) {
element.classList.remove("active"); element.classList.remove("active");
}); element.setAttribute("aria-pressed", "false");
}
btnToActive.classList.add("active"); btnToActive.classList.add("active");
btnToActive.setAttribute("aria-pressed", "true");
activeThemeIcon.setAttribute("class", svgOfActiveBtn); activeThemeIcon.setAttribute("class", svgOfActiveBtn);
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
if (focus) {
themeSwitcher.focus();
}
}; };
window window
.matchMedia("(prefers-color-scheme: dark)") .matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", () => { .addEventListener("change", () => {
@ -120,16 +152,18 @@
setTheme(getPreferredTheme()); setTheme(getPreferredTheme());
} }
}); });
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
showActiveTheme(getPreferredTheme()); showActiveTheme(getPreferredTheme());
document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
for (const toggle of document.querySelectorAll("[data-bs-theme-value]")) {
toggle.addEventListener("click", () => { toggle.addEventListener("click", () => {
const theme = toggle.getAttribute("data-bs-theme-value"); const theme = toggle.getAttribute("data-bs-theme-value");
localStorage.setItem("theme", theme); localStorage.setItem("theme", theme);
setTheme(theme); setTheme(theme);
showActiveTheme(theme); showActiveTheme(theme, true);
});
}); });
}
}); });
})(); })();
``` ```

62
src/html/pages/docs/color-mode.astro
Unescape View File

@ -56,13 +56,22 @@ const page = "color-mode";
<div class="container-fluid"> <div class="container-fluid">
<!--begin::Row--> <!--begin::Row-->
<div class="row g-4"> <div class="row g-4">
<div class="col-12">
<div class="callout callout-info">
<h5 class="fw-bold">Tips</h5>
<p>
First Visit
https://getbootstrap.com/docs/5.3/customize/color-modes/
</p>
</div>
</div>
<!-- Start column --> <!-- Start column -->
<div class="col-12"> <div class="col-12">
<!-- Navbar --> <!--begin::Header-->
<nav class="navbar navbar-expand bg-body"> <nav class="navbar navbar-expand bg-body">
<!--begin::Container--> <!--begin::Container-->
<div class="container-fluid"> <div class="container-fluid">
<!-- Start navbar links --> <!--begin::Start Navbar links-->
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a <a
@ -79,6 +88,8 @@ const page = "color-mode";
<a href="#" class="nav-link">Contact</a> <a href="#" class="nav-link">Contact</a>
</li> </li>
</ul> </ul>
<!--end::Start Navbar links-->
<!--begin::End Navbar links-->
<ul class="navbar-nav ms-auto"> <ul class="navbar-nav ms-auto">
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<button <button
@ -92,10 +103,13 @@ const page = "color-mode";
<span class="theme-icon-active"> <span class="theme-icon-active">
<i class="my-1"></i> <i class="my-1"></i>
</span> </span>
<span class="d-lg-none ms-2" id="bd-theme-text"
>Toggle theme</span
>
</button> </button>
<ul <ul
class="dropdown-menu dropdown-menu-end" class="dropdown-menu dropdown-menu-end"
aria-labelledby="bd-theme" aria-labelledby="bd-theme-text"
style="--bs-dropdown-min-width: 8rem;" style="--bs-dropdown-min-width: 8rem;"
> >
<li> <li>
@ -103,6 +117,7 @@ const page = "color-mode";
type="button" type="button"
class="dropdown-item d-flex align-items-center active" class="dropdown-item d-flex align-items-center active"
data-bs-theme-value="light" data-bs-theme-value="light"
aria-pressed="false"
> >
<i class="fa-regular fa-sun me-2"></i> <i class="fa-regular fa-sun me-2"></i>
Light Light
@ -114,6 +129,7 @@ const page = "color-mode";
type="button" type="button"
class="dropdown-item d-flex align-items-center" class="dropdown-item d-flex align-items-center"
data-bs-theme-value="dark" data-bs-theme-value="dark"
aria-pressed="false"
> >
<i class="fa-solid fa-moon me-2"></i> <i class="fa-solid fa-moon me-2"></i>
Dark Dark
@ -125,6 +141,7 @@ const page = "color-mode";
type="button" type="button"
class="dropdown-item d-flex align-items-center" class="dropdown-item d-flex align-items-center"
data-bs-theme-value="auto" data-bs-theme-value="auto"
aria-pressed="true"
> >
<i class="fa-solid fa-circle-half-stroke me-2" <i class="fa-solid fa-circle-half-stroke me-2"
></i> ></i>
@ -135,9 +152,11 @@ const page = "color-mode";
</ul> </ul>
</li> </li>
</ul> </ul>
<!--end::End Navbar links-->
</div> </div>
<!--end::Container--> <!--end::Container-->
</nav> </nav>
<!--end::Header-->
</div> </div>
<!-- Start column --> <!-- Start column -->
<div class="col-12"> <div class="col-12">
@ -187,25 +206,40 @@ const page = "color-mode";
setTheme(getPreferredTheme()); setTheme(getPreferredTheme());
const showActiveTheme = (theme) => { const showActiveTheme = (theme, focus = false) => {
const themeSwitcher = document.querySelector("#bd-theme");
if (!themeSwitcher) {
return;
}
const themeSwitcherText = document.querySelector("#bd-theme-text");
const activeThemeIcon = document.querySelector( const activeThemeIcon = document.querySelector(
".theme-icon-active i" ".theme-icon-active i"
); );
const btnToActive = document.querySelector( const btnToActive = document.querySelector(
'[data-bs-theme-value="' + theme + '"]' `[data-bs-theme-value="${theme}"]`
); );
const svgOfActiveBtn = btnToActive const svgOfActiveBtn = btnToActive
.querySelector("i") .querySelector("i")
.getAttribute("class"); .getAttribute("class");
document for (const element of document.querySelectorAll(
.querySelectorAll("[data-bs-theme-value]") "[data-bs-theme-value]"
.forEach((element) => { )) {
element.classList.remove("active"); element.classList.remove("active");
}); element.setAttribute("aria-pressed", "false");
}
btnToActive.classList.add("active"); btnToActive.classList.add("active");
btnToActive.setAttribute("aria-pressed", "true");
activeThemeIcon.setAttribute("class", svgOfActiveBtn); activeThemeIcon.setAttribute("class", svgOfActiveBtn);
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
if (focus) {
themeSwitcher.focus();
}
}; };
window window
@ -219,16 +253,16 @@ const page = "color-mode";
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
showActiveTheme(getPreferredTheme()); showActiveTheme(getPreferredTheme());
document for (const toggle of document.querySelectorAll(
.querySelectorAll("[data-bs-theme-value]") "[data-bs-theme-value]"
.forEach((toggle) => { )) {
toggle.addEventListener("click", () => { toggle.addEventListener("click", () => {
const theme = toggle.getAttribute("data-bs-theme-value"); const theme = toggle.getAttribute("data-bs-theme-value");
localStorage.setItem("theme", theme); localStorage.setItem("theme", theme);
setTheme(theme); setTheme(theme);
showActiveTheme(theme); showActiveTheme(theme, true);
});
}); });
}
}); });
})(); })();
</script> </script>

Write Preview
Loading…
Cancel
Save