Skip to content
Snippets Groups Projects
Commit 72f2d281 authored by Michael Long's avatar Michael Long
Browse files

dark mode for webv4

parent fdb743f4
No related branches found
No related tags found
2 merge requests!463MRC mods by Codefenix (2024-10-20),!68dark mode for webv4
Pipeline #1113 passed
Stage: build
Hide whitespace changes
Inline Side-by-side
webv4/components/navbar.xjs
+ 12
− 1
View file @ 72f2d281
...@@ -47,8 +47,19 @@ ...@@ -47,8 +47,19 @@
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<?xjs menu(getPageList(settings.web_pages)); ?> <?xjs menu(getPageList(settings.web_pages)); ?>
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<?xjs if (user.alias === settings.guest || user.number < 1) { ?> <li class="nav-item dark-switch">
<div class="form-group">
<div class="checkbox checbox-switch darkswitchbox">
<label>
<input type="checkbox" id="darkSwitch" />Dark
<span></span>
</label>
</div>
</div>
</li>
<?xjs if (user.alias === settings.guest || user.number < 1) { ?>
<?xjs if (settings.user_registration) { ?> <?xjs if (settings.user_registration) { ?>
<li> <li>
<a href="./?page=000-register.xjs"><? write(locale.strings.main.menu_item_register); ?></a> <a href="./?page=000-register.xjs"><? write(locale.strings.main.menu_item_register); ?></a>
......
webv4/root/css/checkbox.css 0 → 100644
+ 188
− 0
View file @ 72f2d281
/* ---------------------------------------------------
Project : CSS Checkbox Switch
Author : Partha Kar (https://www.facebook.com/partha.creativemind)
Version : 1.0
Release Dtae : 15 November, 2017
---------------------------------------------------- */
.checkbox.checbox-switch {
padding-left: 0;
}
.checkbox.checbox-switch label,
.checkbox-inline.checbox-switch {
display: inline-block;
position: relative;
padding-left: 0;
}
.checkbox.checbox-switch label input,
.checkbox-inline.checbox-switch input {
display: none;
}
.checkbox.checbox-switch label span,
.checkbox-inline.checbox-switch span {
width: 35px;
border-radius: 20px;
height: 18px;
border: 1px solid #dbdbdb;
background-color: rgb(255, 255, 255);
border-color: rgb(223, 223, 223);
box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.checkbox.checbox-switch label span:before,
.checkbox-inline.checbox-switch span:before {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgb(255,255,255);
content: " ";
top: 0;
position: relative;
left: 0;
transition: all 0.3s ease;
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.checkbox.checbox-switch label > input:checked + span:before,
.checkbox-inline.checbox-switch > input:checked + span:before {
left: 17px;
}
/* Switch Default */
.checkbox.checbox-switch label > input:checked + span,
.checkbox-inline.checbox-switch > input:checked + span {
background-color: rgb(180, 182, 183);
border-color: rgb(180, 182, 183);
box-shadow: rgb(180, 182, 183) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch label > input:checked:disabled + span,
.checkbox-inline.checbox-switch > input:checked:disabled + span {
background-color: rgb(220, 220, 220);
border-color: rgb(220, 220, 220);
box-shadow: rgb(220, 220, 220) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch label > input:disabled + span,
.checkbox-inline.checbox-switch > input:disabled + span {
background-color: rgb(232,235,238);
border-color: rgb(255,255,255);
}
.checkbox.checbox-switch label > input:disabled + span:before,
.checkbox-inline.checbox-switch > input:disabled + span:before {
background-color: rgb(248,249,250);
border-color: rgb(243, 243, 243);
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
/* Switch Light */
.checkbox.checbox-switch.switch-light label > input:checked + span,
.checkbox-inline.checbox-switch.switch-light > input:checked + span {
background-color: rgb(248,249,250);
border-color: rgb(248,249,250);
box-shadow: rgb(248,249,250) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
/* Switch Dark */
.checkbox.checbox-switch.switch-dark label > input:checked + span,
.checkbox-inline.checbox-switch.switch-dark > input:checked + span {
background-color: rgb(52,58,64);
border-color: rgb(52,58,64);
box-shadow: rgb(52,58,64) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-dark label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-dark > input:checked:disabled + span {
background-color: rgb(100, 102, 104);
border-color: rgb(100, 102, 104);
box-shadow: rgb(100, 102, 104) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
/* Switch Success */
.checkbox.checbox-switch.switch-success label > input:checked + span,
.checkbox-inline.checbox-switch.switch-success > input:checked + span {
background-color: rgb(40, 167, 69);
border-color: rgb(40, 167, 69);
box-shadow: rgb(40, 167, 69) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-success label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-success > input:checked:disabled + span {
background-color: rgb(153, 217, 168);
border-color: rgb(153, 217, 168);
box-shadow: rgb(153, 217, 168) 0px 0px 0px 8px inset;
}
/* Switch Danger */
.checkbox.checbox-switch.switch-danger label > input:checked + span,
.checkbox-inline.checbox-switch.switch-danger > input:checked + span {
background-color: rgb(200, 35, 51);
border-color: rgb(200, 35, 51);
box-shadow: rgb(200, 35, 51) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-danger label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-danger > input:checked:disabled + span {
background-color: rgb(216, 119, 129);
border-color: rgb(216, 119, 129);
box-shadow: rgb(216, 119, 129) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
/* Switch Primary */
.checkbox.checbox-switch.switch-primary label > input:checked + span,
.checkbox-inline.checbox-switch.switch-primary > input:checked + span {
background-color: rgb(0, 105, 217);
border-color: rgb(0, 105, 217);
box-shadow: rgb(0, 105, 217) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-primary label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-primary > input:checked:disabled + span {
background-color: rgb(109, 163, 221);
border-color: rgb(109, 163, 221);
box-shadow: rgb(109, 163, 221) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
/* Switch Info */
.checkbox.checbox-switch.switch-info label > input:checked + span,
.checkbox-inline.checbox-switch.switch-info > input:checked + span {
background-color: rgb(23, 162, 184);
border-color: rgb(23, 162, 184);
box-shadow: rgb(23, 162, 184) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-info label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-info > input:checked:disabled + span {
background-color: rgb(102, 192, 206);
border-color: rgb(102, 192, 206);
box-shadow: rgb(102, 192, 206) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
/* Switch Warning */
.checkbox.checbox-switch.switch-warning label > input:checked + span,
.checkbox-inline.checbox-switch.switch-warning > input:checked + span {
background-color: rgb(255, 193, 7);
border-color: rgb(255, 193, 7);
box-shadow: rgb(255, 193, 7) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-warning label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-warning > input:checked:disabled + span {
background-color: rgb(226, 195, 102);
border-color: rgb(226, 195, 102);
box-shadow: rgb(226, 195, 102) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
webv4/root/css/style.css
+ 113
− 1
View file @ 72f2d281
...@@ -53,7 +53,72 @@ span.message-header.unread { ...@@ -53,7 +53,72 @@ span.message-header.unread {
background-color: #FCF8E3; background-color: #FCF8E3;
} }
/* You probably don't need to mess with rules below this line. */ /*** Dark mode ***/
/* default links, like the breadcrumbs */
.dark a {
color: #75b8f1;
}
/* background of the top bar */
.dark .navbar {
background-color: #333;
}
/* bbs name at top left */
.dark .navbar-brand {
color: #ccc;
}
.dark .navbar-brand:hover {
color: #fff;
}
/* hover for the top nav buttons */
.dark .navbar-default a:hover {
color: #8cc1ee !important;
color: #fff;
background-color: #444 !important;
}
/* the active top nav button when opened */
.dark .navbar-default .navbar-nav>.open>a,
.dark.navbar-default .navbar-nav>.open>a:focus,
.dark.navbar-default .navbar-nav>.open>a:hover {
background-color: #555;
color: #EEE;
}
/* dropdown menus */
.dark .dropdown-menu {
background-color: #333;
}
.dark .dropdown-menu li a {
color: #75b8f1;
}
/* background color of alternate rows in lists */
.dark .striped:nth-of-type(even), .dark .table-striped > tbody > tr:nth-child(odd) > td, .dark .table-striped > tbody > tr:nth-child(odd) > th {
background: #777;
}
/* this is the text and color for most items, including non-alternating rows */
.dark .list-group-item {
background-color: #555;
color: #CCC;
}
/* A link in a list when the mouse is hovering over it (mostly applies to the Forum) */
.dark a.list-group-item:hover, .dark a.list-group-item:active, .dark li.list-group-item.mail:hover {
background-color: #888;
color: #222;
}
/* background color for the breadcrumb box */
.dark .breadcrumb {
background-color: #555;
}
/*** You probably don't need to mess with rules below this line. ***/
blockquote { blockquote {
margin: .5em; margin: .5em;
...@@ -180,3 +245,50 @@ animation: indicator-fade 3s ease 0s 1 alternate !important; ...@@ -180,3 +245,50 @@ animation: indicator-fade 3s ease 0s 1 alternate !important;
.breadcrumb li { .breadcrumb li {
display: inline; display: inline;
} }
.dark {
background-color: #222 !important;
color: #eee;
}
.dark span.badge.ignored {
background-color: #aaa;
}
.dark .text-danger {
color: #ef1c18;
}
.dark .text-success {
color: #3eef41;
}
.dark a.btn, .dark .icon {
color: #000;
background-color: #ddd !important;
}
.dark a.btn :hover, .dark .icon:hover {
color: #000;
background-color: #fff !important;
}
@media (max-width: 767px) {
.dark-switch {
padding: 10px 15px;
}
}
@media (min-width: 768px) {
.dark-switch {
padding: 0px;
}
}
.darkswitchbox {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
webv4/root/index.xjs
+ 1
− 1
View file @ 72f2d281
...@@ -49,6 +49,7 @@ ...@@ -49,6 +49,7 @@
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="./css/offcanvas.css" rel="stylesheet"> <link href="./css/offcanvas.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet"> <link href="./css/style.css" rel="stylesheet">
<link href="./css/checkbox.css" rel="stylesheet">
<? if (file_exists(settings.web_root + 'css/custom.css')) { ?> <? if (file_exists(settings.web_root + 'css/custom.css')) { ?>
<link href="./css/custom.css" rel="stylesheet"> <link href="./css/custom.css" rel="stylesheet">
<? } ?> <? } ?>
...@@ -101,7 +102,6 @@ ...@@ -101,7 +102,6 @@
return false; return false;
}); });
</script> </script>
</body> </body>
</html> </html>
webv4/root/js/common.js
+ 28
− 0
View file @ 72f2d281
...@@ -139,4 +139,32 @@ window.onload = function () { ...@@ -139,4 +139,32 @@ window.onload = function () {
es.addEventListener(e, _sbbs_events[e].callback); es.addEventListener(e, _sbbs_events[e].callback);
}); });
// originally based on dark-mode-switch by Christian Oliff
var darkSwitch = document.getElementById("darkSwitch");
if (darkSwitch) {
initTheme();
darkSwitch.addEventListener("change", function(event) {
resetTheme();
});
function initTheme() {
var darkThemeSelected =
localStorage.getItem("darkSwitch") !== null &&
localStorage.getItem("darkSwitch") === "dark";
darkSwitch.checked = darkThemeSelected;
if (darkThemeSelected) {
jQuery("body").addClass("dark")
} else {
jQuery("body").removeClass("dark");
}
}
function resetTheme() {
if (darkSwitch.checked) {
jQuery("body").addClass("dark");
localStorage.setItem("darkSwitch", "dark");
} else {
jQuery("body").removeClass("dark");
localStorage.removeItem("darkSwitch");
}
}
}
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment