add darkmode switch
This commit is contained in:
Tealk
parent
c523ddbcfb
commit
6cecff3cc3
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["main.sass"],"names":[],"mappings":"AAAA,KACE,eAAA,CACA,QAAA,CACA,eAAA,CACA,WAAA,CACA,gBAAA,CACA,kCAAA,CAEA,mDACE,eAAA,CAEJ,IACE,WAAA,CACA,cAAA,CAEF,EACE,SAAA,CACA,QAAA,CACA,oBAAA,CAEA,gBACE,oBAAA,CACA,aAAA,CAEJ,UACE,iBAAA,CAEF,QACE,WAAA,CACA,gBAAA,CACA,cAAA,CACA,iBAAA,CAEA,gBACE,iBAAA,CACA,oBAAA,CACA,UAAA,CACA,WAAA,CAEA,sBACE,SAAA,CACA,OAAA,CACA,QAAA,CAEF,wBACE,iBAAA,CACA,cAAA,CACA,KAAA,CACA,MAAA,CACA,OAAA,CACA,QAAA,CACA,qBAAA,CAEA,cAAA,CAEA,+BACE,iBAAA,CACA,UAAA,CACA,WAAA,CACA,UAAA,CACA,QAAA,CACA,UAAA,CACA,qBAAA,CAEA,cAAA,CAEF,8BACE,kBAAA,CAEA,qCACE,iBAAA,CAGN,8BACE,wBAAA,CAEF,4BACE,0BAAA,CAEF,qCACE,0BAAA,CAEN,cACI,qBAAA,CACA,+BAAA,CAEJ,eACE,gBAAA,CACA,8BAAA,CACA,kBAAA,CACA,iBAAA,CACA,gBAAA,CACA,iBAAA,CAIE,iCACE,mBAAA,CAEF,qFAEE,eAAA,CAKF,uEACE,kBAAA,CACA,YAAA,CACA,iBAAA,CACA,eAAA,CAEF,mEACE,iBAAA,CACA,kBAAA,CACA,cAAA,CAEA,yEACE,eAAA,CACA,iBAAA,CAEF,+EACE,iBAAA,CACA,SAAA,CACA,aAAA,CACA,kBAAA,CACA,OAAA,CACA,UAAA,CACA,gBAAA,CAEA,+FACE,QAAA,CACA,SAAA,CACA,UAAA,CACA,iBAAA,CACA,UAAA,CACA,WAAA,CACA,iBAAA,CACA,kBAAA,CAEJ,6FACE,iBAAA,CACA,yBAAA,CACA,UAAA,CAEF,+EACE,yBAAA,CAEA,+FACE,iBAAA,CACA,OAAA,CACA,UAAA,CACA,UAAA,CACA,cAAA,CACA,iBAAA,CACA,4BAAA,CACA,+BAAA,CACA,6BAAA,CAEF,mHACE,iBAAA,CACA,UAAA,CACA,UAAA,CACA,WAAA,CACA,iBAAA,CACA,iBAAA,CAEA,uHACE,cAAA,CACA,gBAAA,CAEV,sBACE,gBAAA,CAYA,iCACE,WAAA,CACA,gBAAA,CAEF,uDACI,SAAA,CAIF,uEACE,UAAA,CAEF,8IAEE,YAAA,CAIF,4CACE,sBAAA,CACA,WAAA,CACA,6BAAA,CAEF,+CACE,UAAA,CACA,sBAAA,CACA,WAAA,CACA,eAAA,CACA,gBAAA,CAEF,8CACE,eAAA,CACA,eAAA,CACA,UAAA,CACA,gBAAA,CAEA,wGACE,UAAA,CAEN,+BACE,gBAAA,CAEF,uDACE,4BAAA,CAIF,8BACE,gBAAA,CAYF,0CACE,WAAA,CAKN,kBACE,+BAAA,CACA,eAAA,CACA,gBAAA,CACA,mBAAA,CACA,eAAA,CAEA,iCACE,eAAA,CAEA,mCACE,UAAA,CACA,UAAA,CACA,eAAA,CACA,aAAA,CAEA,yCACE,wBAAA,CAEN,2CACE,aAAA,CAEA,+CACE,eAAA,CACA,cAAA,CACA,gBAAA,CACA,qBAAA","file":"main.css"}
|
||||
{"version":3,"sources":["main.sass"],"names":[],"mappings":"AAAA,KAMA,qBANW,CAAA,UACE,CAAA,QAQX,CAAA,eACA,CAAA,WACA,CAAA,gBACA,CAAA,kCACA,CAAA,mDAEA,eACE,CAAA,IAEJ,WACE,CAAA,cACA,CAAA,EAEF,SACE,CAAA,QACA,CAAA,oBACA,CAAA,gBAEA,oBACE,CAAA,aACA,CAAA,UAEJ,iBACE,CAAA,QAEF,WACE,CAAA,gBACA,CAAA,cACA,CAAA,iBACA,CAAA,gBAEA,iBACE,CAAA,oBACA,CAAA,UACA,CAAA,WACA,CAAA,sBAEA,SACE,CAAA,OACA,CAAA,QACA,CAAA,wBAEF,iBACE,CAAA,cACA,CAAA,KACA,CAAA,MACA,CAAA,OACA,CAAA,QACA,CAAA,qBACA,CACA,cACA,CAAA,+BAEA,iBACE,CAAA,UACA,CAAA,WACA,CAAA,UACA,CAAA,QACA,CAAA,UACA,CAAA,qBACA,CACA,cACA,CAAA,8BAEF,kBACE,CAAA,qCAEA,iBACE,CAAA,8BAGN,wBACE,CAAA,4BAEF,0BACE,CAAA,qCAEF,0BACE,CAAA,OAEN,qBACI,CAAA,+BACA,CAAA,eAEJ,gBACE,CAAA,8BACA,CAAA,kBACA,CAAA,iBACA,CAAA,gBACA,CAAA,iBACA,CAAA,iCAIE,mBACE,CAAA,qFAEF,eAEE,CAAA,uEAKF,kBACE,CAAA,YACA,CAAA,iBACA,CAAA,eACA,CAAA,mEAEF,iBACE,CAAA,kBACA,CAAA,cACA,CAAA,yEAEA,eACE,CAAA,iBACA,CAAA,+EAEF,iBACE,CAAA,SACA,CAAA,aACA,CAAA,kBACA,CAAA,OACA,CAAA,UACA,CAAA,gBACA,CAAA,+FAEA,QACE,CAAA,SACA,CAAA,UACA,CAAA,iBACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,kBACA,CAAA,6FAEJ,iBACE,CAAA,yBACA,CAAA,UACA,CAAA,+EAEF,yBACE,CAAA,+FAEA,iBACE,CAAA,OACA,CAAA,UACA,CAAA,UACA,CAAA,cACA,CAAA,iBACA,CAAA,4BACA,CAAA,+BACA,CAAA,6BACA,CAAA,mHAEF,iBACE,CAAA,UACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,iBACA,CAAA,uHAEA,cACE,CAAA,gBACA,CAAA,sBAEV,gBACE,CAAA,iCAYA,WACE,CAAA,gBACA,CAAA,uDAEF,SACI,CAAA,uEAIF,UACE,CAAA,8IAEF,YAEE,CAAA,4CAIF,sBACE,CAAA,WACA,CAAA,6BACA,CAAA,+CAEF,UACE,CAAA,sBACA,CAAA,WACA,CAAA,eACA,CAAA,gBACA,CAAA,8CAEF,eACE,CAAA,eACA,CAAA,UACA,CAAA,gBACA,CAAA,wGAEA,UACE,CAAA,+BAEN,gBACE,CAAA,uDAEF,4BACE,CAAA,8BAIF,gBACE,CAAA,0CAYF,WACE,CAAA,kBAKN,+BACE,CAAA,eACA,CAAA,gBACA,CAAA,mBACA,CAAA,eACA,CAAA,iCAEA,eACE,CAAA,mCAEA,UACE,CAAA,UACA,CAAA,eACA,CAAA,aACA,CAAA,yCAEA,wBACE,CAAA,2CAEN,aACE,CAAA,+CAEA,eACE,CAAA,cACA,CAAA,gBACA,CAAA,qBACA,CAAA,sBAEN,qBA3RU,CAAA,2BA8RR,UA7RU,CAAA,uCAgSV,WACE,CAAA,uCAEF,mCAlSY,CAAA,qDAqSV,qBAvSM,CAAA,UACE,CAAA,4BA0SV,qBA3SQ,CAAA,UACE,CAAA,mCACE,CAAA,6BA8SZ,UA/SU","file":"main.css"}
|
||||
|
|
@ -1,5 +1,12 @@
|
|||
$bg_light: #fff
|
||||
$text_light: #111
|
||||
$bg_dark: #111
|
||||
$text_dark: #fff
|
||||
$border_dark: rgba(255,255,255,.125)
|
||||
|
||||
body
|
||||
background: #ffffff
|
||||
background-color: $bg_light
|
||||
color: $text_light
|
||||
margin: 0
|
||||
margin-top: 80px
|
||||
height: 100%
|
||||
|
|
@ -80,7 +87,7 @@ a
|
|||
&:checked + .slider:before
|
||||
transform: translateX(26px)
|
||||
|
||||
header.navbar
|
||||
header
|
||||
background-color: gray
|
||||
border-radius: 0px 0px 30px 30px
|
||||
|
||||
|
|
@ -274,4 +281,28 @@ footer#footerwrap
|
|||
max-height: 20px
|
||||
max-width: 25px
|
||||
margin-right: 5px
|
||||
vertical-align: middle
|
||||
vertical-align: middle
|
||||
|
||||
body[data-theme="dark"]
|
||||
background-color: $bg_dark
|
||||
|
||||
main
|
||||
color: $text_dark
|
||||
|
||||
.fa-moon::before
|
||||
content: "\f185"
|
||||
|
||||
.list-group-item
|
||||
border-color: $border_dark
|
||||
|
||||
&.sub-component
|
||||
background-color: $bg_dark
|
||||
color: $text_dark
|
||||
|
||||
.card
|
||||
background-color: $bg_dark
|
||||
color: $text_dark
|
||||
border-color: $border_dark
|
||||
|
||||
.table
|
||||
color: $text_dark
|
||||
26
js/main.js
26
js/main.js
|
|
@ -27,3 +27,29 @@ function timeago() {
|
|||
});
|
||||
});
|
||||
})();
|
||||
|
||||
var darkSwitch = document.getElementById("darkSwitch");
|
||||
window.addEventListener("load", function () {
|
||||
if (darkSwitch) {
|
||||
initTheme();
|
||||
darkSwitch.addEventListener("change", function () {
|
||||
resetTheme();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function initTheme() {
|
||||
var darkThemeSelected = localStorage.getItem("darkSwitch") !== null && localStorage.getItem("darkSwitch") === "dark";
|
||||
darkSwitch.checked = darkThemeSelected;
|
||||
darkThemeSelected ? document.body.setAttribute("data-theme", "dark") : document.body.removeAttribute("data-theme");
|
||||
}
|
||||
|
||||
function resetTheme() {
|
||||
if (darkSwitch.checked) {
|
||||
document.body.setAttribute("data-theme", "dark");
|
||||
localStorage.setItem("darkSwitch", "dark");
|
||||
} else {
|
||||
document.body.removeAttribute("data-theme");
|
||||
localStorage.removeItem("darkSwitch");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
12
template.php
12
template.php
|
|
@ -101,8 +101,8 @@ class Template
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<header class="navbar fixed-top navbar-expand-lg navbar-dark">
|
||||
<nav class="container">
|
||||
<header class="fixed-top">
|
||||
<nav class="container navbar navbar-expand-lg navbar-dark">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
|
@ -116,6 +116,10 @@ class Template
|
|||
<?php
|
||||
if (!$admin) {
|
||||
?>
|
||||
<li class="nav-item">
|
||||
<input type="checkbox" class="custom-control-input" id="darkSwitch" hidden>
|
||||
<label class="nav-link" for="darkSwitch"><i class="fas fa-moon"></i></label>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<?php echo $strSubsMenu; ?>
|
||||
</li>
|
||||
|
|
@ -138,6 +142,10 @@ class Template
|
|||
<li class="nav-item">
|
||||
<a class="nav-link link-light" href="<?php echo WEB_URL; ?>/admin/?do=logout"><?php echo _("Logout"); ?></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<input type="checkbox" class="custom-control-input" id="darkSwitch" hidden>
|
||||
<label class="nav-link" for="darkSwitch"><i class="fas fa-moon"></i></label>
|
||||
</li>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
|
|
|||
Loading…
Reference in New Issue