diff --git a/src/html/components/_head.astro b/src/html/components/_head.astro index a7c2f24a3..5a71c4fe6 100644 --- a/src/html/components/_head.astro +++ b/src/html/components/_head.astro @@ -16,13 +16,15 @@ const cssPath = isRtl ? '.rtl' : '' - + + + - - + + - - + + diff --git a/src/html/components/_scripts.astro b/src/html/components/_scripts.astro index 5859a8f85..c911676c3 100644 --- a/src/html/components/_scripts.astro +++ b/src/html/components/_scripts.astro @@ -3,8 +3,8 @@ const { path } = Astro.props const distPath = (path != undefined) ? path : '../../../dist' --- - - + + @@ -36,64 +36,3 @@ const distPath = (path != undefined) ? path : '../../../dist' } }) - - - diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro index f85ffa682..e897415fd 100644 --- a/src/html/components/dashboard/_sidenav.astro +++ b/src/html/components/dashboard/_sidenav.astro @@ -162,6 +162,7 @@ const htmlPath = (path != undefined) ? '.' : '..' +
  • EXAMPLES
  • @@ -186,6 +187,15 @@ const htmlPath = (path != undefined) ? '.' : '..'
    • + +
  • DOCUMENTATIONS
    • +
  • + + +

    Color Mode

    +     +
    • +
  • MULTI LEVEL EXAMPLE
  • diff --git a/src/html/components/dashboard/_topbar.astro b/src/html/components/dashboard/_topbar.astro index 3054085c4..dc39d47d0 100644 --- a/src/html/components/dashboard/_topbar.astro +++ b/src/html/components/dashboard/_topbar.astro @@ -17,8 +17,8 @@ const distPath = (path != undefined) ? path : '../../../dist' Contact
    • - + -
  • - - -
    • + +``` \ No newline at end of file diff --git a/src/html/components/docs/color-mode/toggle-script.md b/src/html/components/docs/color-mode/toggle-script.md new file mode 100644 index 000000000..52892aae4 --- /dev/null +++ b/src/html/components/docs/color-mode/toggle-script.md @@ -0,0 +1,48 @@ +```js +// Color Mode Toggler +(() => { + '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 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) + }) + }) + }) +})() +``` \ No newline at end of file diff --git a/src/html/pages/docs/color-mode.astro b/src/html/pages/docs/color-mode.astro new file mode 100644 index 000000000..41ce69ae2 --- /dev/null +++ b/src/html/pages/docs/color-mode.astro @@ -0,0 +1,227 @@ +--- +import Head from "@components/_head.astro"; +import Footer from "@components/dashboard/_footer.astro"; +import Topbar from "@components/dashboard/_topbar.astro"; +import Sidenav from "@components/dashboard/_sidenav.astro"; +import Scripts from "@components/_scripts.astro"; +import NavbarHtml from "@components/docs/color-mode/navbar-html.md"; +import ToggleScript from "@components/docs/color-mode/toggle-script.md"; +const title = "AdminLTE 4 | General Form Elements"; +const mainPage = "forms"; +const page = "general"; +--- + + + + + + + +
    + + + +
    +
    +
    +
    +
    +

    Color Mode Toggle

    +
    +
    +
      +
    1. Home
      2. +
    2. + General Form +
      3. +
    +
    +
    +
    +
    + +
    +
    +
    + +
    + + +
    + +
    +
    + +
    + +
    + +
    +
    +
    + +
    +
    + +
    + + +
    + + + + + + + diff --git a/src/scss/_docs.scss b/src/scss/_docs.scss new file mode 100644 index 000000000..c93304051 --- /dev/null +++ b/src/scss/_docs.scss @@ -0,0 +1,4 @@ +.lte-code-snippet .astro-code { + padding: 1.5rem; + @include border-radius($border-radius); +} diff --git a/src/scss/parts/_core.scss b/src/scss/parts/_core.scss index 57dd0e87d..f7f1c9baa 100644 --- a/src/scss/parts/_core.scss +++ b/src/scss/parts/_core.scss @@ -9,3 +9,4 @@ @import "../app-main"; @import "../app-footer"; @import "../dropdown"; +@import "../docs";