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

color mode improve

pull/5153/head
Daniel 2023-05-31 12:58:33 +05:30
parent 6b17e5ca2a
commit 72aaec4761
2 changed files with 101 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/html/components/docs/color-mode.mdx
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);
}); });
}); }
}); });
})(); })();
``` ```

72
src/html/pages/docs/color-mode.astro
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>