lisone/AdminLTE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance: dark-mode in docs

Browse Source
This commit is contained in:
Daniel
2021-03-18 22:29:18 +05:30
parent 18bc68fc1a
commit e7ed74d4ea
3 changed files with 104 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
docs/_includes/foot.html
View File

@@ -2,3 +2,45 @@
<script src="{{ '/assets/plugins/bootstrap/js/bootstrap.bundle.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/assets/js/adminlte.min.js' | prepend: site.baseurl }}"></script>
<script>
var toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
var currentTheme = localStorage.getItem('theme');
var mainHeader = document.querySelector('.main-header');
if (currentTheme) {
if (currentTheme === 'dark') {
if (!document.body.classList.contains('dark-mode')) {
document.body.classList.add("dark-mode");
}
if (mainHeader.classList.contains('navbar-light')) {
mainHeader.classList.add('navbar-dark');
mainHeader.classList.remove('navbar-light');
}
toggleSwitch.checked = true;
}
}
function switchTheme(e) {
if (e.target.checked) {
if (!document.body.classList.contains('dark-mode')) {
document.body.classList.add("dark-mode");
}
if (mainHeader.classList.contains('navbar-light')) {
mainHeader.classList.add('navbar-dark');
mainHeader.classList.remove('navbar-light');
}
localStorage.setItem('theme', 'dark');
} else {
if (document.body.classList.contains('dark-mode')) {
document.body.classList.remove("dark-mode");
}
if (mainHeader.classList.contains('navbar-dark')) {
mainHeader.classList.add('navbar-light');
mainHeader.classList.remove('navbar-dark');
}
localStorage.setItem('theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
</script>

13
docs/_includes/navbar.html
View File

@@ -1,4 +1,4 @@
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<nav class="main-header navbar navbar-expand navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
@@ -21,6 +21,17 @@
<!-- <li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li> -->
<li class="nav-item">
<div class="theme-switch-wrapper nav-link">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<span class="slider round"></span>
</label>
</div>
</li>
<!-- <li class="nav-item">
<em class="nav-link">Enable Dark Mode!</em>
</li> -->
</ul>
<!-- SEARCH FORM -->