-
-
+
Alexander Pierce - Web Developer diff --git a/src/html/components/docs/browser-support.mdx b/src/html/components/docs/browser-support.mdx index 200d1320d..36e7bbdf8 100644 --- a/src/html/components/docs/browser-support.mdx +++ b/src/html/components/docs/browser-support.mdx @@ -1,7 +1,8 @@ AdminLTE comes with the same browser support as Bootstrap 5. > ##### Excerpt from Bootstrap's official Documentation! -> Bootstrap supports the __latest, stable releases__ of all major browsers and platforms. +> +> Bootstrap supports the **latest, stable releases** of all major browsers and platforms. > > For more details [look here](https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#supported-browsers). diff --git a/src/html/components/docs/color-mode.mdx b/src/html/components/docs/color-mode.mdx index cdb9f9611..09d5745a6 100644 --- a/src/html/components/docs/color-mode.mdx +++ b/src/html/components/docs/color-mode.mdx @@ -6,12 +6,9 @@
-
Home
@@ -67,8 +64,7 @@
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="auto"
>
-
+
Auto
@@ -84,48 +80,56 @@
```js
// Color Mode Toggler
(() => {
- 'use strict'
- const storedTheme = localStorage.getItem('theme')
+ "use strict";
+ const storedTheme = localStorage.getItem("theme");
const getPreferredTheme = () => {
if (storedTheme) {
- return storedTheme
+ return storedTheme;
}
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
- }
+ 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')
+ 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)
+ document.documentElement.setAttribute("data-bs-theme", theme);
}
- }
- setTheme(getPreferredTheme())
- const showActiveTheme = theme => {
- const activeThemeIcon = document.querySelector('.theme-icon-active i')
- const btnToActive = document.querySelector('[data-bs-theme-value="' + theme + '"]')
- const svgOfActiveBtn = btnToActive.querySelector('i').getAttribute('class')
- document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
- element.classList.remove('active')
- })
- btnToActive.classList.add('active')
- activeThemeIcon.setAttribute('class', 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)
- })
- })
- })
-})()
+ };
+ setTheme(getPreferredTheme());
+ const showActiveTheme = (theme) => {
+ const activeThemeIcon = document.querySelector(".theme-icon-active i");
+ const btnToActive = document.querySelector(
+ '[data-bs-theme-value="' + theme + '"]'
+ );
+ const svgOfActiveBtn = btnToActive.querySelector("i").getAttribute("class");
+ document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
+ element.classList.remove("active");
+ });
+ btnToActive.classList.add("active");
+ activeThemeIcon.setAttribute("class", 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/src/html/components/docs/components/main-header.mdx b/src/html/components/docs/components/main-header.mdx
index d794282a6..412d7e522 100644
--- a/src/html/components/docs/components/main-header.mdx
+++ b/src/html/components/docs/components/main-header.mdx
@@ -6,7 +6,9 @@
-
Home
@@ -36,15 +38,23 @@
@@ -54,15 +64,23 @@-
+
Brad Diesel - + + +
Call me whenever you can...
-4 Hours Ago
++ 4 Hours Ago +
@@ -72,15 +90,23 @@-
+
John Pierce - + + +
I got your message bro
-4 Hours Ago
++ 4 Hours Ago +
@@ -113,18 +139,28 @@ 2 days-
+
Nora Silvester - + + +
The subject goes here
-4 Hours Ago
++ 4 Hours Ago +
-
Home
@@ -36,15 +38,23 @@
-
Home
@@ -67,8 +64,7 @@
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="auto"
>
-
+
Auto
@@ -84,48 +80,56 @@
```js
// Color Mode Toggler
(() => {
- 'use strict'
- const storedTheme = localStorage.getItem('theme')
+ "use strict";
+ const storedTheme = localStorage.getItem("theme");
const getPreferredTheme = () => {
if (storedTheme) {
- return storedTheme
+ return storedTheme;
}
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
- }
+ 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')
+ 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)
+ document.documentElement.setAttribute("data-bs-theme", theme);
}
- }
- setTheme(getPreferredTheme())
- const showActiveTheme = theme => {
- const activeThemeIcon = document.querySelector('.theme-icon-active i')
- const btnToActive = document.querySelector('[data-bs-theme-value="' + theme + '"]')
- const svgOfActiveBtn = btnToActive.querySelector('i').getAttribute('class')
- document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
- element.classList.remove('active')
- })
- btnToActive.classList.add('active')
- activeThemeIcon.setAttribute('class', 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)
- })
- })
- })
-})()
+ };
+ setTheme(getPreferredTheme());
+ const showActiveTheme = (theme) => {
+ const activeThemeIcon = document.querySelector(".theme-icon-active i");
+ const btnToActive = document.querySelector(
+ '[data-bs-theme-value="' + theme + '"]'
+ );
+ const svgOfActiveBtn = btnToActive.querySelector("i").getAttribute("class");
+ document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
+ element.classList.remove("active");
+ });
+ btnToActive.classList.add("active");
+ activeThemeIcon.setAttribute("class", 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/src/html/components/docs/components/main-header.mdx b/src/html/components/docs/components/main-header.mdx
index d794282a6..412d7e522 100644
--- a/src/html/components/docs/components/main-header.mdx
+++ b/src/html/components/docs/components/main-header.mdx
@@ -6,7 +6,9 @@
+ 
+