mirror of https://github.com/ColorlibHQ/AdminLTE
Color Mode Toggler
Daniel
parent
5ee3f38725
commit
7ac224b81f
|
|
@ -6,12 +6,71 @@
|
|||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha256-9SEPo+fwJFpMUet/KACSwO+Z/dKMReF9q4zFhU/fT9M=" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- REQUIRED SCRIPTS -->
|
||||
|
||||
<!-- AdminLTE App -->
|
||||
<script src="@@path/js/adminlte.js"></script>
|
||||
|
||||
<!-- OPTIONAL SCRIPTS -->
|
||||
<!-- DON'T USE THIS IN PRODUCTION -->
|
||||
<script>
|
||||
// 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)
|
||||
})
|
||||
})
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
|
||||
<!-- OPTIONAL SCRIPTS -->
|
||||
<script>
|
||||
const SELECTOR_SIDEBAR = '.sidebar'
|
||||
const Default = {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<!-- Start navbar links -->
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-lte-toggle="sidebar-full" href="#" role="button"><i class="fas fa-bars"></i></a>
|
||||
<a class="nav-link" data-lte-toggle="sidebar-full" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-md-block">
|
||||
<a href="#" class="nav-link">Home</a>
|
||||
|
|
@ -19,14 +19,14 @@
|
|||
<!-- Navbar Search -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
|
||||
<i class="fas fa-search"></i>
|
||||
<i class="fa-solid fa-search"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Messages Dropdown Menu -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-bs-toggle="dropdown" href="#">
|
||||
<i class="far fa-comments"></i>
|
||||
<i class="fa-regular fa-comments"></i>
|
||||
<span class="navbar-badge badge bg-danger">3</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
||||
|
|
@ -39,10 +39,10 @@
|
|||
<div class="flex-grow-1">
|
||||
<h3 class="dropdown-item-title">
|
||||
Brad Diesel
|
||||
<span class="float-end fs-7 text-danger"><i class="fas fa-star"></i></span>
|
||||
<span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="fs-7">Call me whenever you can...</p>
|
||||
<p class="fs-7 text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
|
||||
<p class="fs-7 text-muted"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
|
|
@ -57,10 +57,10 @@
|
|||
<div class="flex-grow-1">
|
||||
<h3 class="dropdown-item-title">
|
||||
John Pierce
|
||||
<span class="float-end fs-7 text-muted"><i class="fas fa-star"></i></span>
|
||||
<span class="float-end fs-7 text-muted"><i class="fa-solid fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="fs-7">I got your message bro</p>
|
||||
<p class="fs-7 text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
|
||||
<p class="fs-7 text-muted"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
|
|
@ -75,10 +75,10 @@
|
|||
<div class="flex-grow-1">
|
||||
<h3 class="dropdown-item-title">
|
||||
Nora Silvester
|
||||
<span class="float-end fs-7 text-warning"><i class="fas fa-star"></i></span>
|
||||
<span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="fs-7">The subject goes here</p>
|
||||
<p class="fs-7 text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
|
||||
<p class="fs-7 text-muted"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
|
|
@ -90,24 +90,24 @@
|
|||
<!-- Notifications Dropdown Menu -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-bs-toggle="dropdown" href="#">
|
||||
<i class="far fa-bell"></i>
|
||||
<i class="fa-regular fa-bell"></i>
|
||||
<span class="navbar-badge badge bg-warning">15</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
||||
<span class="dropdown-item dropdown-header">15 Notifications</span>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fas fa-envelope me-2"></i> 4 new messages
|
||||
<i class="fa-solid fa-envelope me-2"></i> 4 new messages
|
||||
<span class="float-end text-muted fs-7">3 mins</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fas fa-users me-2"></i> 8 friend requests
|
||||
<i class="fa-solid fa-users me-2"></i> 8 friend requests
|
||||
<span class="float-end text-muted fs-7">12 hours</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fas fa-file me-2"></i> 3 new reports
|
||||
<i class="fa-solid fa-file me-2"></i> 3 new reports
|
||||
<span class="float-end text-muted fs-7">2 days</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
|
|
@ -151,15 +151,46 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static">
|
||||
<div class="theme-icon-active">
|
||||
<i class="my-1"></i>
|
||||
</div>
|
||||
<span class="d-lg-none ms-2">Toggle theme</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light">
|
||||
<i class="fa-regular fa-sun me-2 opacity-50"></i>
|
||||
Light
|
||||
<i class="fa-solid fa-check ms-auto d-none"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
|
||||
<i class="fa-solid fa-moon me-2 opacity-50"></i>
|
||||
Dark
|
||||
<i class="fa-solid fa-check ms-auto d-none"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto">
|
||||
<i class="fa-solid fa-circle-half-stroke me-2 opacity-50"></i>
|
||||
Auto
|
||||
<i class="fa-solid fa-check ms-auto d-none"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- TODO tackel in v4.1 -->
|
||||
<!-- <li class="nav-item">
|
||||
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
|
||||
<i class="fas fa-expand-arrows-alt"></i>
|
||||
<i class="fa-solid fa-expand-arrows-alt"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
|
||||
<i class="fas fa-th-large"></i>
|
||||
<i class="fa-solid fa-th-large"></i>
|
||||
</a>
|
||||
</li> -->
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in New Issue