mirror of https://github.com/ColorlibHQ/AdminLTE
Merge pull request #3522 from danny007in/dark-mode-in-docs
Enhance: dark-mode in docspull/3525/head
commit
4b73f9cf92
|
@ -2,3 +2,45 @@
|
||||||
<script src="{{ '/assets/plugins/bootstrap/js/bootstrap.bundle.min.js' | prepend: site.baseurl }}"></script>
|
<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/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js' | prepend: site.baseurl }}"></script>
|
||||||
<script src="{{ '/assets/js/adminlte.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>
|
||||||
|
|
|
@ -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">
|
<ul class="navbar-nav">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
|
<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">
|
<!-- <li class="nav-item d-none d-sm-inline-block">
|
||||||
<a href="index3.html" class="nav-link">Home</a>
|
<a href="index3.html" class="nav-link">Home</a>
|
||||||
</li> -->
|
</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>
|
</ul>
|
||||||
|
|
||||||
<!-- SEARCH FORM -->
|
<!-- SEARCH FORM -->
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<img src="{{ '/assets/img/logo-xl.png' | prepend: site.baseurl }}" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px">
|
<img src="{{ '/assets/img/logo-xl.png' | prepend: site.baseurl }}" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px">
|
||||||
</a>
|
</a>
|
||||||
<div class="sidebar">
|
<div class="sidebar">
|
||||||
<div class="form-inline">
|
<div class="form-inline mt-2">
|
||||||
<div class="input-group" data-widget="sidebar-search">
|
<div class="input-group" data-widget="sidebar-search">
|
||||||
<input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
|
<input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
|
||||||
<div class="input-group-append">
|
<div class="input-group-append">
|
||||||
|
|
|
@ -1,3 +1,52 @@
|
||||||
.max-height-300 pre {
|
.max-height-300 pre {
|
||||||
max-height: 300px
|
max-height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-switch {
|
||||||
|
display: inline-block;
|
||||||
|
height: 24px;
|
||||||
|
position: relative;
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-switch input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
background-color: #ccc;
|
||||||
|
bottom: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
transition: 400ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider::before {
|
||||||
|
background-color: #fff;
|
||||||
|
bottom: 4px;
|
||||||
|
content: "";
|
||||||
|
height: 16px;
|
||||||
|
left: 4px;
|
||||||
|
position: absolute;
|
||||||
|
transition: 400ms;
|
||||||
|
width: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider {
|
||||||
|
background-color: #66bb6a;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider::before {
|
||||||
|
transform: translateX(26px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider.round {
|
||||||
|
border-radius: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider.round::before {
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue