native dark theme initial checkin

author: Mario <mario@mariovavti.com> 2023-01-20 11:05:15 +0000
committer: Mario <mario@mariovavti.com> 2023-01-20 11:05:15 +0000
commit: 9dc949b62c6b5e3c8872211f71b11714d9d22b22 (patch)
tree: 38c06e7a128742e219eb74d6adb035f2f106918a /view
parent: 40394b94d7c8a8bf1f61f5482195164fff434b90 (diff)
download: volse-hubzilla-9dc949b62c6b5e3c8872211f71b11714d9d22b22.tar.gz
volse-hubzilla-9dc949b62c6b5e3c8872211f71b11714d9d22b22.tar.bz2
volse-hubzilla-9dc949b62c6b5e3c8872211f71b11714d9d22b22.zip
18 files changed, 315 insertions, 355 deletions
diff --git a/view/css/bootstrap-red.css b/view/css/bootstrap-red.css
index f1296d7b2..b85889c87 100644
--- a/view/css/bootstrap-red.css
+++ b/view/css/bootstrap-red.css
@@ -7,6 +7,11 @@
   }
 }
 
+.nav-link,
+.form-control {
+	transition: none;
+}
+
 /* nav overrides */
 
 nav .badge {
diff --git a/view/css/conversation.css b/view/css/conversation.css
index d6a99f853..5a0117939 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -21,12 +21,12 @@
 #jot-pagetitle-wrap,
 #jot-category-wrap,
 #jot-customjotheaders-wrap {
-	border-bottom: 1px solid rgba(0, 0, 0, .2);
+	border-bottom: 1px solid var(--bs-border-color);
 }
 
 #jot-attachment-wrap,
 #jot-poll-wrap {
-	border-top: 1px solid rgba(0, 0, 0, .2);
+	border-top: 1px solid rvar(--bs-border-color);
 }
 
 #jot-title-wrap input,
@@ -89,7 +89,7 @@
 }
 
 #profile-jot-submit-wrapper {
-	border-top: 1px solid rgba(0, 0, 0, .2);
+	border-top: 1px solid var(--bs-border-color);
 }
 
 /* conversation */
@@ -226,10 +226,11 @@ a.wall-item-name-link {
 	padding: 0.5rem;
 	width: 100%;
 	display: inherit;
-	line-height: 1;
-	height: 2rem;
+	line-height: 1.25;
+	height: 2.5rem;
 	resize: none;
 	overflow: hidden;
+	outline: none;
 }
 
 .comment-edit-text.expanded {
diff --git a/view/css/widgets.css b/view/css/widgets.css
index ebe0f47b0..463f53d22 100644
--- a/view/css/widgets.css
+++ b/view/css/widgets.css
@@ -213,7 +213,7 @@ a.wikilist {
 	top: 0px;
 	left: 0px;
 	padding: 4.5rem .5rem 1rem .5rem;
-	background-color: white;
+	background-color: var(--bs-body-bg);
 	width: 100%;
 	max-width: 100%;
 	height: 100%;
@@ -223,6 +223,7 @@ a.wikilist {
 
 #notifications {
 	margin-bottom: 1rem;
+	background-color: var(--bs-body-bg);
 }
 
 .tt-filter-active,
diff --git a/view/php/default.php b/view/php/default.php
index 10e150906..f0699090a 100644
--- a/view/php/default.php
+++ b/view/php/default.php
@@ -11,7 +11,7 @@
  */
 ?>
 <!DOCTYPE html >
-<html prefix="og: http://ogp.me/ns#">
+<html prefix="og: http://ogp.me/ns#" <?php if(x($page,'color_mode')) echo $page['color_mode'] ?>>
 <head>
   <title><?php if(x($page,'title')) echo $page['title'] ?></title>
   <script>var baseurl="<?php echo z_root() ?>";</script>
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 9069500d9..ce791720c 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -6,14 +6,33 @@
  */
 
 
-/* bootstrap variable */
+/* bootstrap variables */
 
 :root {
 	--bs-border-radius: $radius;
-	--bs-link-color: $link_colour;
-	--bs-link-hover-color: $link_hover_colour;
-	--bs-body-bg: $bgcolour;
-	--bs-highlight-bg: yellow;
+	--bs-highlight-bg: var(--bs-warning);
+}
+
+[data-bs-theme=light] {
+	--bs-link-color: $link_color;
+	--bs-link-hover-color: $link_hover_color;
+	--hz-body-bg: $bgcolor;
+	--hz-body-bg-image: url('$background_image');
+}
+
+[data-bs-theme=dark] {
+	--bs-link-color: $link_color_dark;
+	--bs-link-hover-color: $link_hover_color_dark;
+	--hz-body-bg: $bgcolor_dark;
+	--hz-body-bg-image: url('$background_image_dark');
+}
+
+[data-bs-theme=light] .navbar-dark.bg-dark {
+	background-color: $nav_bg !important;
+}
+
+[data-bs-theme=dark] .navbar-dark.bg-dark {
+	background-color: $nav_bg_dark !important;
 }
 
 .nav-tabs {
@@ -41,12 +60,12 @@ html {
 
 body {
 	font-size: 0.9rem;
-	background-color: var(--bs-body-bg);
-	background-image: url('$background_image');
+	background-color: var(--hz-body-bg);
+	background-image: var(--hz-body-bg-image);
 	background-attachment: fixed;
 	background-size: cover;
-	color: $font_colour;
-	margin: 0px;
+	color: var(--bs-body-color);
+	margin: 0;
 }
 
 aside#region_1 {
@@ -108,7 +127,6 @@ h6, .h6 {
 }
 
 #banner {
-	color: $banner_colour;
 	font-weight: bold;
 	white-space: nowrap;
 	overflow: hidden;
@@ -154,8 +172,8 @@ input, optgroup, select, textarea {
 
 input[type=text], textarea {
 	resize: vertical;
-	background-color: $comment_item_colour;
-	color: $font_colour;
+	background-color: var(--bs-body-bg);
+	color: var(--bs-body-color);
 }
 
 .selected-doco-nav {
@@ -176,11 +194,6 @@ input[type=text], textarea {
 	color: #FF0000;
 }
 
-nav {
-	opacity: $nav_float_min_opacity;
-	filter:alpha(opacity=$nav_percent_min_opacity);
-}
-
 #powered-by {
 	font-size: 0.5rem;
 	position: absolute;
@@ -217,7 +230,7 @@ nav {
 	left: 0px;
 	width: 100%;
 	max-height: 50%;
-	background: $comment_item_colour;
+	background: var(--bs-body-bg);
 	padding: 1rem;
 	border-bottom: #e0e0e0 1px solid;
 	overflow: auto;
@@ -243,7 +256,6 @@ nav {
 }
 
 .contextual-help-tool i {
-	color: $font_colour;
 	font-size: 1.05rem;
 }
 
@@ -279,10 +291,10 @@ nav {
 	-moz-animation: rotation 1s infinite linear;
 	-o-animation: rotation 1s infinite linear;
 	animation: rotation 1s infinite linear;
-	border-left: .2rem solid rgba(77, 77, 77, .15);
-	border-right: .2rem solid rgba(77, 77, 77, .15);
-	border-bottom: .2rem solid rgba(77, 77, 77, .15);
-	border-top: .2rem solid rgba(77, 77, 77, .5);
+	border-left: .2rem solid var(--bs-border-color);
+	border-right: .2rem solid var(--bs-border-color);
+	border-bottom: .2rem solid var(--bs-border-color);
+	border-top: .2rem solid var(--bs-tertiary-color);
 	border-radius: 100%;
 }
 
@@ -410,7 +422,7 @@ footer {
 }
 
 .vcard-card {
-	background-color: rgba(254,254,254,0.5);
+	background-color: rgba(var(--bs-body-bg-rgb), .7);
 }
 
 .vcard {
@@ -465,7 +477,7 @@ footer {
 .pager-prev,
 .pager-next,
 .pager_n {
-	border: 1px solid #e0e0e0;
+	border: 1px solid var(--bs-border-color);
 	background: transparent;
 	padding: 4px;
 }
@@ -479,7 +491,6 @@ footer {
 .photo,
 .contact-block-img {
 	border-radius: $radius;
-	box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
 }
 
 #side-bar-photos-albums {
@@ -493,7 +504,6 @@ footer {
 .profile-match-photo img,
 .directory-photo-img {
 	border-radius: $radius;
-	box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
 }
 
 .profile-match-photo img {
@@ -502,7 +512,7 @@ footer {
 }
 
 #photo-view-wrapper {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 .pmenu.horizontal {
@@ -573,10 +583,6 @@ footer {
 	margin-left: 15px;
 }
 
-.wall-item-conv {
-	background-color: $comment_item_colour;
-}
-
 #nav-notifications-template,
 #nav-notifications-forums-template {
 	display: none;
@@ -631,7 +637,7 @@ nav .acpopup {
 
 #cboxContent {
 	padding: 3px;
-	border: 0px solid #fff;
+	border: 0px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 	background-color: #fff;
 	z-index: 1052;
@@ -682,7 +688,7 @@ nav .acpopup {
 	padding: 10px;
 	height: 250px;
 	overflow: auto;
-	border: 1px solid #ddd;
+	border: 1px solid var(--bs-border-color);
 }
 
 #prof-separator {
@@ -694,7 +700,7 @@ nav .acpopup {
 	padding: 10px;
 	height: 450px;
 	overflow: auto;
-	border: 1px solid #ddd;
+	border: 1px solid var(--bs-border-color);
 }
 
 #prof-edit-desc {
@@ -774,10 +780,6 @@ div.jGrowl div.jGrowl-notification {
 	text-align: center;
 }
 
-.conv-participants {
-	color: $font_colour;
-}
-
 .contactname {
 	display: block;
 	overflow: hidden;
@@ -797,7 +799,6 @@ div.jGrowl div.jGrowl-notification {
 
 .notification.notification-forum {
 	font-size: 0.9rem;
-	color: $font_colour;
 }
 
 #acl-search::-webkit-input-placeholder {
@@ -920,20 +921,11 @@ margin-right: 50px;
 a .generic-icons {
 	font-size: 1rem;
 	margin-right: 0.5rem;
-	color: $font_colour;
 }
 
 .generic-icons-right {
 	font-size: 1rem;
 	margin-left: 0.5rem;
-	color: $font_colour;
-}
-
-.generic-icons:hover,
-a .generic-icons:hover,
-.generic-icons-right:hover,
-a .generic-icons-right:hover {
-	color: $font_colour;
 }
 
 .generic-icons-nav {
@@ -949,7 +941,6 @@ a .generic-icons-right:hover {
 .drop-icons,
 a .drop-icons {
 	font-size: 1rem;
-	color: $font_colour;
 	text-decoration: none;
 	cursor: pointer;
 }
@@ -1018,8 +1009,8 @@ img.mail-conv-sender-photo {
 }
 
 #profile-jot-wrapper {
-	background-color: rgba(254, 254, 254, 1);
-	border: 1px solid rgba(0, 0, 0, .2);
+	background-color: var(--bs-body-bg);
+	border: 1px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 
 }
@@ -1079,19 +1070,19 @@ img.mail-conv-sender-photo {
 }
 
 .wall-item-content-wrapper {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 	border-top-right-radius: var(--bs-border-radius);
 	border-top-left-radius: var(--bs-border-radius);
 }
 
 .wall-item-content-wrapper.comment {
-	background-color: $comment_item_colour;
+	background-color: var(--bs-body-bg);
 	border-top-right-radius: 0px;
 	border-top-left-radius: 0px;
 }
 
 .hide-comments-outer {
-	background-color: $comment_item_colour;
+	background-color: var(--bs-body-bg);
 	border-top-color: #e0e0e0;
 	border-style: solid;
 	border-top-style: dashed;
@@ -1106,15 +1097,15 @@ img.mail-conv-sender-photo {
 
 .wall-item-comment-wrapper {
 	padding: 7px 10px;
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 	border-radius: 0px;
 	border-bottom-right-radius: var(--bs-border-radius);
 	border-bottom-left-radius: var(--bs-border-radius);
-	border-top: 3px solid $comment_item_colour;
+	border-top: 3px solid var(--bs-body-bg);
 }
 
 .wall-item-comment-wrapper-wc {
-	border-top: 0px solid $comment_item_colour;
+	border-top: 0px solid var(--bs-body-bg);
 }
 
 
@@ -1123,7 +1114,6 @@ img.mail-conv-sender-photo {
 	height: $top_photo;
 	border: none;
 	border-radius: var(--bs-border-radius);
-	box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
 }
 
 .comment .wall-item-photo {
@@ -1146,7 +1136,7 @@ img.mail-conv-sender-photo {
 
 
 .comment-edit-text {
-	border: 1px solid #e0e0e0;
+	border: 1px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 }
 
@@ -1161,13 +1151,13 @@ img.mail-conv-sender-photo {
 }
 
 .directory-item .divgrow-showmore {
-	background-color: $comment_item_colour;
+	background-color: var(--bs-body-bg);
 }
 
 /* widgets */
 
 .widget {
-	background-color: rgba(254,254,254,.5);
+	background-color: rgba(var(--bs-body-bg-rgb), .7);
 	border-radius: var(--bs-border-radius);
 }
 
@@ -1186,7 +1176,7 @@ img.mail-conv-sender-photo {
 }
 
 #datebrowse-sidebar select {
-	border: 1px solid #e0e0e0;
+	border: 1px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 }
 
@@ -1215,7 +1205,7 @@ img.mail-conv-sender-photo {
 .chat-item-title,
 .chat-item-title-self {
 	border-radius: var(--bs-border-radius);
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 #chatMembers img {
@@ -1271,17 +1261,17 @@ img.mail-conv-sender-photo {
 }
 
 .generic-content-wrapper {
-	border: 1px solid #e0e0e0;
+	border: 1px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 	margin-bottom: 1.5rem;
 }
 
 .section-title-wrapper {
 	padding: 7px 10px;
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 	border-top-left-radius: var(--bs-border-radius);
 	border-top-right-radius: var(--bs-border-radius);
-	border-bottom: 3px solid $comment_item_colour;
+	border-bottom: 3px solid var(--bs-body-bg);
 }
 
 .section-title-wrapper h2,
@@ -1299,21 +1289,21 @@ img.mail-conv-sender-photo {
 
 .section-subtitle-wrapper {
 	padding: 4px 10px;
-	background-color: $item_colour;
-	border-bottom: 3px solid $comment_item_colour;
+	background-color: var(--bs-tertiary-bg);
+	border-bottom: 3px solid var(--bs-body-bg);
 }
 
 .section-content-tools-wrapper {
 	padding: 7px 10px;
-	background-color: $comment_item_colour;
-	border-bottom: 3px solid $comment_item_colour;
+	background-color: var(--bs-body-bg);
+	border-bottom: 3px solid var(--bs-body-bg);
 }
 
 .section-content-success-wrapper {
 	padding: 21px 10px;
 	color: #155724;
 	background-color: #d4edda;
-	border-bottom: 3px solid $comment_item_colour;
+	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 
@@ -1321,7 +1311,7 @@ img.mail-conv-sender-photo {
 	padding: 21px 10px;
 	color: #0c5460;
 	background-color: #d1ecf1;
-	border-bottom: 3px solid $comment_item_colour;
+	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 
@@ -1329,7 +1319,7 @@ img.mail-conv-sender-photo {
 	padding: 21px 10px;
 	color: #856404;
 	background-color: #fff3cd;
-	border-bottom: 3px solid $comment_item_colour;
+	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 
@@ -1337,7 +1327,7 @@ img.mail-conv-sender-photo {
 	padding: 21px 10px;
 	color: #721c24;
 	background-color: #f8d7da;
-	border-bottom: 3px solid $comment_item_colour;
+	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 .section-content-tools-wrapper .section-content-success-wrapper,
@@ -1356,14 +1346,14 @@ img.mail-conv-sender-photo {
 
 .section-content-wrapper {
 	padding: 7px 10px;
-	background-color: $comment_item_colour;
+	background-color: var(--bs-body-bg);
 	border-bottom-left-radius: var(--bs-border-radius);
 	border-bottom-right-radius: var(--bs-border-radius);
 	word-wrap: break-word;
 }
 
 .section-content-wrapper-np {
-	background-color: $comment_item_colour;
+	background-color: var(--bs-body-bg);
 	border-bottom-left-radius: var(--bs-border-radius);
 	border-bottom-right-radius: var(--bs-border-radius);
 	word-wrap: break-word;
@@ -1408,7 +1398,7 @@ main.fullscreen .section-content-wrapper-np {
 .locs-index-row:hover td,
 [id^="cloud-index-"]:hover td,
 .cloud-index-active {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 [id^="webpage-list-item-"]:hover td,
@@ -1416,15 +1406,15 @@ main.fullscreen .section-content-wrapper-np {
 [id^="layout-list-item-"]:hover td,
 [id^="menu-list-item-"]:hover td,
 [id^="mitem-list-item-"]:hover td {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 #perms-tool-table .highlight:hover {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 .notify-seen {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 /* bootstrap overrides */
@@ -1436,30 +1426,11 @@ main.fullscreen .section-content-wrapper-np {
 blockquote {
 	font-size: 1rem;
 	font-style: italic;
-	border-left: 3px solid #e0e0e0;
+	border-left: 3px solid var(--bs-border-color);
 	padding: 1em 0px 1em 1.5em;
 	margin: 0px;
 }
 
-.dropdown-menu {
-	color: $font_colour;
-}
-
-.dropdown-item {
-	color: $font_colour;
-}
-
-.dropdown-item:active,
-.dropdown-item:focus,
-.dropdown-item:hover,
-.textcomplete-item:focus .dropdown-item,
-.textcomplete-item:hover .dropdown-item,
-.textcomplete-item.active .dropdown-item,
-.textcomplete-item:active .dropdown-item {
-	color: $font_colour;
-	background-color: $item_colour;
-}
-
 .textcomplete-dropdown {
 	max-height: 300px;
 	max-width: 250px;
@@ -1471,25 +1442,11 @@ blockquote {
 	background-color: #007bff;
 }
 
-.bg-dark {
-	background-color: $nav_bg !important;
-}
-
 .navbar {
 	z-index:1030;
 }
 
-.navbar-dark .navbar-nav .nav-link,
-.usermenu i {
-	color: $nav_icon_colour;
-}
 
-.navbar-dark .navbar-nav .nav-link:focus,
-.navbar-dark .navbar-nav .nav-link:hover,
-.usermenu:focus i,
-.usermenu:hover i {
-	color: $nav_active_icon_colour;
-}
 
 @media screen and (max-width: 992px) {
 
@@ -1578,8 +1535,9 @@ dl.bb-dl > dd > li {
 	display: inline-block;
 	border-radius: var(--bs-border-radius);
 	cursor: text;
-	padding: 0px 10px;
-	width: 100%;
+	border-radius: 0px;
+	background-color: var(--bs-body-bg);
+
 }
 
 .bootstrap-tagsinput .label {
@@ -1588,6 +1546,12 @@ dl.bb-dl > dd > li {
 
 .bootstrap-tagsinput input {
 	height: 2.5rem;
+	margin: 0;
+	max-width: 30%;
+}
+
+.bootstrap-tagsinput {
+	padding: 0 .5rem;
 }
 
 /* Abusing theme-green is less work than makeing a new new one */
@@ -1610,27 +1574,22 @@ dl.bb-dl > dd > li {
 
 .onoffswitch.checkbox > div label {
 	display: block; overflow: hidden; cursor: pointer;
-	border: 1px solid #e0e0e0;
+	border: 1px solid var(--bs-border-color);
 	border-radius: 12px;
 	margin:0px;
-	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 	font-weight: normal;
 }
 
 .onoffswitch.checkbox:hover label {
-	color: var(--bs-link-color);
+	color: var(--bs-primary);
 }
 
 .onoffswitch.checkbox:hover > div label {
-	border-color: var(--bs-link-color);
+	border-color: var(--bs-primary);
 }
 
 .onoffswitch-inner {
     display: block; width: 200%; margin-left: -100%;
-    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
 }
 
 .onoffswitch-inner:before, .onoffswitch-inner:after {
@@ -1641,25 +1600,23 @@ dl.bb-dl > dd > li {
 .onoffswitch-inner:before {
     content: attr(data-on);
     padding-right: 21px;
-    background-color: $item_colour;
-	color: $font_colour;
+    background-color: rgba(var(--bs-body-color-rgb), 0);
     text-align: right;
 }
 
 .onoffswitch-inner:after {
     content: attr(data-off);
     padding-left: 21px;
-    background-color: $item_colour; color: #e0e0e0;
+    background-color: rgba(var(--bs-body-color-rgb), 0);
+    color: var(--bs-border-color);
     text-align: left;
 }
 
 .onoffswitch-switch {
     display: block; width: 15px; margin:4px;
-    background: #e0e0e0;
+    background: var(--bs-secondary-bg);
     border-radius: 10px;
     position: absolute; top: 0; bottom: 0; right: 36px;
-    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
 }
 
 .onoffswitch.checkbox > div > input:checked + label .onoffswitch-inner {
@@ -1668,7 +1625,7 @@ dl.bb-dl > dd > li {
 
 .onoffswitch.checkbox > div > input:checked + label .onoffswitch-switch {
     right: 0px;
-    background-color: var(--bs-link-color);
+    background-color: var(--bs-primary);
 }
 
 
@@ -1747,7 +1704,7 @@ dl.bb-dl > dd > li {
 .cloud-icon-container {
 	width: 64px;
 	height: 64px;
-	border: 1px solid #eee;
+	border: 1px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 }
 
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 04469cb85..7584f9421 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -2,6 +2,19 @@
  * redbasic theme specific JavaScript
  */
 
+let redbasic_dark_mode = localStorage.getItem('redbasic_dark_mode');
+
+if (redbasic_dark_mode == 1) {
+	$('html').attr('data-bs-theme', 'light');
+	$('#theme-switch-icon').removeClass('fa-sun-o').addClass('fa-moon-o');
+}
+
+
+if (redbasic_dark_mode == 2) {
+	$('html').attr('data-bs-theme', 'dark');
+	$('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o');
+}
+
 $(document).ready(function() {
 
 	// CSS3 calc() fallback (for unsupported browsers)
@@ -40,6 +53,20 @@ $(document).ready(function() {
 		}
 	});
 
+	$('#theme-switch').click(function() {
+		if ($('html').attr('data-bs-theme') === 'dark') {
+			$('html').attr('data-bs-theme', 'light');
+			localStorage.setItem('redbasic_dark_mode', 1);
+			$('#theme-switch-icon').removeClass('fa-sun-o').addClass('fa-moon-o');
+		}
+		else {
+			$('html').attr('data-bs-theme', 'dark');
+			localStorage.setItem('redbasic_dark_mode', 2);
+			$('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o');
+		}
+	});
+
+
 	$('#menu-btn').click(function() {
 		if($('#navbar-collapse-1').hasClass('show')){
 			$('#navbar-collapse-1').removeClass('show');
diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php
index 65834526d..96b9354ed 100644
--- a/view/theme/redbasic/php/config.php
+++ b/view/theme/redbasic/php/config.php
@@ -37,21 +37,27 @@ class RedbasicConfig {
 		}
 
 		$arr = array();
+		$arr['dark_mode'] = get_pconfig(local_channel(),'redbasic', 'dark_mode');
 		$arr['narrow_navbar'] = get_pconfig(local_channel(),'redbasic', 'narrow_navbar' );
 		$arr['nav_bg'] = get_pconfig(local_channel(),'redbasic', 'nav_bg' );
-		$arr['nav_icon_colour'] = get_pconfig(local_channel(),'redbasic', 'nav_icon_colour' );
-		$arr['nav_active_icon_colour'] = get_pconfig(local_channel(),'redbasic', 'nav_active_icon_colour' );
-		$arr['link_colour'] = get_pconfig(local_channel(),'redbasic', 'link_colour' );
-		$arr['link_hover_colour'] = get_pconfig(local_channel(),'redbasic', 'link_hover_colour' );
-		$arr['banner_colour'] = get_pconfig(local_channel(),'redbasic', 'banner_colour' );
-		$arr['bgcolour'] = get_pconfig(local_channel(),'redbasic', 'background_colour' );
+		$arr['nav_bg_dark'] = get_pconfig(local_channel(),'redbasic', 'nav_bg_dark' );
+//		$arr['nav_icon_colour'] = get_pconfig(local_channel(),'redbasic', 'nav_icon_colour' );
+//		$arr['nav_active_icon_colour'] = get_pconfig(local_channel(),'redbasic', 'nav_active_icon_colour' );
+		$arr['link_color'] = get_pconfig(local_channel(),'redbasic', 'link_color' );
+		$arr['link_color_dark'] = get_pconfig(local_channel(),'redbasic', 'link_color_dark' );
+		$arr['link_hover_color'] = get_pconfig(local_channel(),'redbasic', 'link_hover_color' );
+		$arr['link_hover_color_dark'] = get_pconfig(local_channel(),'redbasic', 'link_hover_color_dark' );
+//		$arr['banner_color'] = get_pconfig(local_channel(),'redbasic', 'banner_color' );
+		$arr['bgcolor'] = get_pconfig(local_channel(),'redbasic', 'background_color' );
+		$arr['bgcolor_dark'] = get_pconfig(local_channel(),'redbasic', 'background_color_dark' );
 		$arr['background_image'] = get_pconfig(local_channel(),'redbasic', 'background_image' );
-		$arr['item_colour'] = get_pconfig(local_channel(),'redbasic', 'item_colour' );
-		$arr['comment_item_colour'] = get_pconfig(local_channel(),'redbasic', 'comment_item_colour' );
+		$arr['background_image_dark'] = get_pconfig(local_channel(),'redbasic', 'background_image_dark' );
+//		$arr['item_color'] = get_pconfig(local_channel(),'redbasic', 'item_color' );
+//		$arr['comment_item_color'] = get_pconfig(local_channel(),'redbasic', 'comment_item_color' );
 		$arr['font_size'] = get_pconfig(local_channel(),'redbasic', 'font_size' );
-		$arr['font_colour'] = get_pconfig(local_channel(),'redbasic', 'font_colour' );
+//		$arr['font_colour'] = get_pconfig(local_channel(),'redbasic', 'font_colour' );
 		$arr['radius'] = get_pconfig(local_channel(),'redbasic', 'radius' );
-		$arr['shadow'] = get_pconfig(local_channel(),'redbasic', 'photo_shadow' );
+//		$arr['shadow'] = get_pconfig(local_channel(),'redbasic', 'photo_shadow' );
 		$arr['converse_width']=get_pconfig(local_channel(),"redbasic","converse_width");
 		$arr['top_photo']=get_pconfig(local_channel(),"redbasic","top_photo");
 		$arr['reply_photo']=get_pconfig(local_channel(),"redbasic","reply_photo");
@@ -66,20 +72,26 @@ class RedbasicConfig {
 
 		if (isset($_POST['redbasic-settings-submit'])) {
 			set_pconfig(local_channel(), 'redbasic', 'narrow_navbar', $_POST['redbasic_narrow_navbar']);
+			set_pconfig(local_channel(), 'redbasic', 'dark_mode', $_POST['redbasic_dark_mode']);
 			set_pconfig(local_channel(), 'redbasic', 'nav_bg', $_POST['redbasic_nav_bg']);
-			set_pconfig(local_channel(), 'redbasic', 'nav_icon_colour', $_POST['redbasic_nav_icon_colour']);
-			set_pconfig(local_channel(), 'redbasic', 'nav_active_icon_colour', $_POST['redbasic_nav_active_icon_colour']);
-			set_pconfig(local_channel(), 'redbasic', 'link_colour', $_POST['redbasic_link_colour']);
-			set_pconfig(local_channel(), 'redbasic', 'link_hover_colour', $_POST['redbasic_link_hover_colour']);
-			set_pconfig(local_channel(), 'redbasic', 'background_colour', $_POST['redbasic_background_colour']);
-			set_pconfig(local_channel(), 'redbasic', 'banner_colour', $_POST['redbasic_banner_colour']);
+			set_pconfig(local_channel(), 'redbasic', 'nav_bg_dark', $_POST['redbasic_nav_bg_dark']);
+//			set_pconfig(local_channel(), 'redbasic', 'nav_icon_color', $_POST['redbasic_nav_icon_color']);
+//			set_pconfig(local_channel(), 'redbasic', 'nav_active_icon_color', $_POST['redbasic_nav_active_icon_color']);
+			set_pconfig(local_channel(), 'redbasic', 'link_color', $_POST['redbasic_link_color']);
+			set_pconfig(local_channel(), 'redbasic', 'link_color_dark', $_POST['redbasic_link_color_dark']);
+			set_pconfig(local_channel(), 'redbasic', 'link_hover_color', $_POST['redbasic_link_hover_color']);
+			set_pconfig(local_channel(), 'redbasic', 'link_hover_color_dark', $_POST['redbasic_link_hover_color_dark']);
+			set_pconfig(local_channel(), 'redbasic', 'background_color', $_POST['redbasic_background_color']);
+			set_pconfig(local_channel(), 'redbasic', 'background_color_dark', $_POST['redbasic_background_color_dark']);
+//			set_pconfig(local_channel(), 'redbasic', 'banner_color', $_POST['redbasic_banner_color']);
 			set_pconfig(local_channel(), 'redbasic', 'background_image', $_POST['redbasic_background_image']);
-			set_pconfig(local_channel(), 'redbasic', 'item_colour', $_POST['redbasic_item_colour']);
-			set_pconfig(local_channel(), 'redbasic', 'comment_item_colour', $_POST['redbasic_comment_item_colour']);
+			set_pconfig(local_channel(), 'redbasic', 'background_image_dark', $_POST['redbasic_background_image_dark']);
+//			set_pconfig(local_channel(), 'redbasic', 'item_color', $_POST['redbasic_item_color']);
+//			set_pconfig(local_channel(), 'redbasic', 'comment_item_color', $_POST['redbasic_comment_item_color']);
 			set_pconfig(local_channel(), 'redbasic', 'font_size', $_POST['redbasic_font_size']);
-			set_pconfig(local_channel(), 'redbasic', 'font_colour', $_POST['redbasic_font_colour']);
+//			set_pconfig(local_channel(), 'redbasic', 'font_color', $_POST['redbasic_font_color']);
 			set_pconfig(local_channel(), 'redbasic', 'radius', $_POST['redbasic_radius']);
-			set_pconfig(local_channel(), 'redbasic', 'photo_shadow', $_POST['redbasic_shadow']);
+//			set_pconfig(local_channel(), 'redbasic', 'photo_shadow', $_POST['redbasic_shadow']);
 			set_pconfig(local_channel(), 'redbasic', 'converse_width', $_POST['redbasic_converse_width']);
 			set_pconfig(local_channel(), 'redbasic', 'top_photo', $_POST['redbasic_top_photo']);
 			set_pconfig(local_channel(), 'redbasic', 'reply_photo', $_POST['redbasic_reply_photo']);
@@ -100,21 +112,27 @@ class RedbasicConfig {
 			'$theme' => \App::$channel['channel_theme'],
 			'$expert' => $expert,
 			'$title' => t("Theme settings"),
+			'$dark_mode' => array('redbasic_dark_mode',t('Default to dark mode'),$arr['dark_mode'], '', array(t('No'),t('Yes'))),
 			'$narrow_navbar' => array('redbasic_narrow_navbar',t('Narrow navbar'),$arr['narrow_navbar'], '', array(t('No'),t('Yes'))),
 			'$nav_bg' => array('redbasic_nav_bg', t('Navigation bar background color'), $arr['nav_bg']),
-			'$nav_icon_colour' => array('redbasic_nav_icon_colour', t('Navigation bar icon color '), $arr['nav_icon_colour']),
-			'$nav_active_icon_colour' => array('redbasic_nav_active_icon_colour', t('Navigation bar active icon color '), $arr['nav_active_icon_colour']),
-			'$link_colour' => array('redbasic_link_colour', t('Link color'), $arr['link_colour']),
-			'$link_hover_colour' => array('redbasic_link_hover_colour', t('Link hover color'), $arr['link_hover_colour']),
-			'$banner_colour' => array('redbasic_banner_colour', t('Set font-color for banner'), $arr['banner_colour']),
-			'$bgcolour' => array('redbasic_background_colour', t('Set the background color'), $arr['bgcolour']),
+			'$nav_bg_dark' => array('redbasic_nav_bg_dark', t('Dark navigation bar background color'), $arr['nav_bg_dark']),
+//			'$nav_icon_colour' => array('redbasic_nav_icon_color', t('Navigation bar icon color '), $arr['nav_icon_color']),
+//			'$nav_active_icon_colour' => array('redbasic_nav_active_icon_color', t('Navigation bar active icon color '), $arr['nav_active_icon_color']),
+			'$link_color' => array('redbasic_link_color', t('Link color'), $arr['link_color']),
+			'$link_color_dark' => array('redbasic_link_color_dark', t('Dark link color'), $arr['link_color_dark']),
+			'$link_hover_color' => array('redbasic_link_hover_color', t('Link hover color'), $arr['link_hover_color']),
+			'$link_hover_color_dark' => array('redbasic_link_hover_color_dark', t('Dark link hover color'), $arr['link_hover_color_dark']),
+//			'$banner_color' => array('redbasic_banner_color', t('Set font-color for banner'), $arr['banner_colour']),
+			'$bgcolor' => array('redbasic_background_color', t('Set the background color'), $arr['bgcolor']),
+			'$bgcolor_dark' => array('redbasic_background_color_dark', t('Set the dark background color'), $arr['bgcolor_dark']),
 			'$background_image' => array('redbasic_background_image', t('Set the background image'), $arr['background_image']),
-			'$item_colour' => array('redbasic_item_colour', t('Set the background color of items'), $arr['item_colour']),
-			'$comment_item_colour' => array('redbasic_comment_item_colour', t('Set the background color of comments'), $arr['comment_item_colour']),
+			'$background_image_dark' => array('redbasic_background_image_dark', t('Set the dark background image'), $arr['background_image_dark']),
+//			'$item_color' => array('redbasic_item_color', t('Set the background color of items'), $arr['item_color']),
+//			'$comment_item_color' => array('redbasic_comment_item_color', t('Set the background color of comments'), $arr['comment_item_color']),
 			'$font_size' => array('redbasic_font_size', t('Set font-size for the entire application'), $arr['font_size'], t('Examples: 1rem, 100%, 16px')),
-			'$font_colour' => array('redbasic_font_colour', t('Set font-color for posts and comments'), $arr['font_colour']),
+//			'$font_colour' => array('redbasic_font_color', t('Set font-color for posts and comments'), $arr['font_color']),
 			'$radius' => array('redbasic_radius', t('Set radius of corners'), $arr['radius'], t('Example: 4px')),
-			'$shadow' => array('redbasic_shadow', t('Set shadow depth of photos'), $arr['shadow']),
+//			'$shadow' => array('redbasic_shadow', t('Set shadow depth of photos'), $arr['shadow']),
 			'$converse_width' => array('redbasic_converse_width',t('Set maximum width of content region in rem'),$arr['converse_width'], t('Leave empty for default width')),
 			'$top_photo' => array('redbasic_top_photo', t('Set size of conversation author photo'), $arr['top_photo']),
 			'$reply_photo' => array('redbasic_reply_photo', t('Set size of followup author photos'), $arr['reply_photo']),
diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php
index 667377838..8485d4dfe 100644
--- a/view/theme/redbasic/php/style.php
+++ b/view/theme/redbasic/php/style.php
@@ -11,22 +11,19 @@ if(! App::$install) {
 
 	// Load the owners pconfig
 	$nav_bg = get_pconfig($uid, 'redbasic', 'nav_bg');
-	$nav_icon_colour = get_pconfig($uid, 'redbasic', 'nav_icon_colour');
-	$nav_active_icon_colour = get_pconfig($uid, 'redbasic', 'nav_active_icon_colour');
-	$banner_colour = get_pconfig($uid,'redbasic','banner_colour');
+	$nav_bg_dark = get_pconfig($uid, 'redbasic', 'nav_bg_dark');
 	$narrow_navbar = get_pconfig($uid,'redbasic','narrow_navbar');
-	$link_colour = get_pconfig($uid, 'redbasic', 'link_colour');
-	$link_hover_colour = get_pconfig($uid, 'redbasic', 'link_hover_colour');
+	$link_color = get_pconfig($uid, 'redbasic', 'link_color');
+	$link_color_dark = get_pconfig($uid, 'redbasic', 'link_color_dark');
+	$link_hover_color = get_pconfig($uid, 'redbasic', 'link_hover_color');
+	$link_hover_color_dark = get_pconfig($uid, 'redbasic', 'link_hover_color_dark');
+	$bgcolor = get_pconfig($uid, 'redbasic', 'background_color');
+	$bgcolor_dark = get_pconfig($uid, 'redbasic', 'background_color_dark');
 	$schema = get_pconfig($uid,'redbasic','schema');
-	$bgcolour = get_pconfig($uid, 'redbasic', 'background_colour');
 	$background_image = get_pconfig($uid, 'redbasic', 'background_image');
-	$item_colour = get_pconfig($uid, 'redbasic', 'item_colour');
-	$comment_item_colour = get_pconfig($uid, 'redbasic', 'comment_item_colour');
-	$item_opacity = get_pconfig($uid, 'redbasic', 'item_opacity');
+	$background_image_dark = get_pconfig($uid, 'redbasic', 'background_image_dark');
 	$font_size = get_pconfig($uid, 'redbasic', 'font_size');
-	$font_colour = get_pconfig($uid, 'redbasic', 'font_colour');
 	$radius = get_pconfig($uid, 'redbasic', 'radius');
-	$shadow = get_pconfig($uid,'redbasic','photo_shadow');
 	$converse_width=get_pconfig($uid,'redbasic','converse_width');
 	$top_photo=get_pconfig($uid,'redbasic','top_photo');
 	$reply_photo=get_pconfig($uid,'redbasic','reply_photo');
@@ -75,39 +72,59 @@ if ((!$schema) || ($schema == '---')) {
 //Set some defaults - we have to do this after pulling owner settings, and we have to check for each setting
 //individually.  If we don't, we'll have problems if a user has set one, but not all options.
 if (! $nav_bg)
-	$nav_bg = '#343a40';
-if (! $nav_icon_colour)
-	$nav_icon_colour = 'rgba(255, 255, 255, 0.55)';
-if (! $nav_active_icon_colour)
-	$nav_active_icon_colour = 'rgba(255, 255, 255, 0.75)';
-if (! $link_colour)
-	$link_colour = '#0d6efd';
-if (! $link_hover_colour)
-	$link_hover_colour = '#0a58ca;';
-if (! $banner_colour)
-	$banner_colour = '#efefef';
-if (! $bgcolour)
-	$bgcolour = 'rgb(254,254,254)';
+	$nav_bg = 'rgba(33, 37, 41, 1)';
+
+if (! $nav_bg_dark)
+	$nav_bg_dark = 'rgba(0, 0, 0, 1)';
+
+if (! $link_color)
+	$link_color = '#0d6efd';
+
+if (! $link_color_dark)
+	$link_color_dark = '#6ea8fe';
+
+if (! $link_hover_color)
+	$link_hover_color = '#0a58ca';
+
+if (! $link_hover_color_dark)
+	$link_hover_color_dark = '#9ec5fe';
+
+if (! $bgcolor)
+	$bgcolor = '#fff';
+
+if (! $bgcolor_dark)
+	$bgcolor_dark = '#212529';
+
 if (! $background_image)
-	$background_image ='';
-if (! $item_colour)
-	$item_colour = '#f6f6f6';
-if (! $comment_item_colour)
-	$comment_item_colour = 'rgb(255,255,255)';
-if (! $item_opacity)
-	$item_opacity = '1';
+	$background_image = '';
+
+if (! $background_image_dark)
+	$background_image_dark = '';
+
+if (! $item_color)
+	$item_color = '#fff';
+
+if (! $item_color_dark)
+	$item_color_dark = '#212529';
+
+if (! $header_item_color)
+	$header_item_color = '#f8f9fa';
+
+if (! $header_item_color_dark)
+	$header_item_color_dark = '#212529';
+
 if (! $font_size)
 	$font_size = '0.875rem';
-if (! $font_colour)
-	$font_colour = '#4d4d4d';
+
 if (! $radius)
 	$radius = '0.375rem';
-if (! $shadow)
-	$shadow = '0';
+
 if (! $converse_width)
 	$converse_width = '52'; //unit: rem
+
 if(! $top_photo)
 	$top_photo = '2.3rem';
+
 if(! $reply_photo)
 	$reply_photo = '2.3rem';
 
@@ -138,19 +155,21 @@ if(file_exists('view/theme/redbasic/css/style.css')) {
 
 	$options = array (
 		'$nav_bg' => $nav_bg,
-		'$nav_icon_colour' => $nav_icon_colour,
-		'$nav_active_icon_colour' => $nav_active_icon_colour,
-		'$link_colour' => $link_colour,
-		'$link_hover_colour' => $link_hover_colour,
-		'$banner_colour' => $banner_colour,
-		'$bgcolour' => $bgcolour,
+		'$nav_bg_dark' => $nav_bg_dark,
+		'$link_color' => $link_color,
+		'$link_color_dark' => $link_color_dark,
+		'$link_hover_color' => $link_hover_color,
+		'$link_hover_color_dark' => $link_hover_color_dark,
+		'$bgcolor' => $bgcolor,
+		'$bgcolor_dark' => $bgcolor_dark,
 		'$background_image' => $background_image,
-		'$item_colour' => $item_colour,
-		'$comment_item_colour' => $comment_item_colour,
+		'$background_image_dark' => $background_image_dark,
+		'$item_color' => $item_color,
+		'$item_color_dark' => $item_color_dark,
+		'$header_item_color' => $header_item_color,
+		'$header_item_color_dark' => $header_item_color_dark,
 		'$font_size' => $font_size,
-		'$font_colour' => $font_colour,
 		'$radius' => $radius,
-		'$shadow' => $shadow,
 		'$converse_width' => $converse_width,
 		'$top_photo' => $top_photo,
 		'$reply_photo' => $reply_photo,
@@ -159,7 +178,7 @@ if(file_exists('view/theme/redbasic/css/style.css')) {
 		'$right_aside_width' => $right_aside_width
 	);
 
-	echo str_replace(array_keys($options), array_values($options), $x);
+	echo strtr($x, $options);
 
 }
 
diff --git a/view/theme/redbasic/php/theme.php b/view/theme/redbasic/php/theme.php
index fefd7d26c..5803198fd 100644
--- a/view/theme/redbasic/php/theme.php
+++ b/view/theme/redbasic/php/theme.php
@@ -9,10 +9,27 @@
  *   * Author: Fabrixxm
  *   * Maintainer: Mike Macgirvin
  *   * Maintainer: Mario Vavti
- *   * Theme_Color: #343a40
+ *   * Theme_Color: #212529
  *   * Background_Color: rgb(254,254,254)
  */
 
+use App;
+
 function redbasic_init(&$a) {
 
+	$mode = '';
+
+	if (local_channel()) {
+		$mode = ((get_pconfig(local_channel(), 'redbasic', 'dark_mode')) ? 'dark' : 'light');
+	}
+
+	if (App::$profile_uid) {
+		$mode = ((get_pconfig(App::$profile_uid, 'redbasic', 'dark_mode')) ? 'dark' : 'light');
+	}
+
+	if (!$mode) {
+		$mode = ((get_config('redbasic', 'dark_mode')) ? 'dark' : 'light');
+	}
+
+	App::$page['color_mode'] = 'data-bs-theme="' . $mode . '"';
 }
diff --git a/view/theme/redbasic/schema/Focus-Boxy.css b/view/theme/redbasic/schema/Focus-Boxy.css
index 1b09137a9..e9fa0381d 100644
--- a/view/theme/redbasic/schema/Focus-Boxy.css
+++ b/view/theme/redbasic/schema/Focus-Boxy.css
@@ -2,8 +2,8 @@
 	padding-left: 3rem;
 }
 
-.wall-item-content-wrapper {
-	border-bottom: 1px solid rgba(0,0,0,.125);
+.wall-item-content-wrapper.comment {
+	border-bottom: 1px solid var(--bs-border-color);
 }
 
 .hide-comments-outer,
@@ -12,7 +12,7 @@
 }
 
 .widget {
-	border: 1px solid rgba(0,0,0,.125);
+	border: 1px solid var(--bs-border-color);
 }
 
 #note-text {
@@ -20,7 +20,7 @@
 }
 
 .vcard-card {
-	border: 1px solid rgba(0,0,0,.125);
+	border: 1px solid var(--bs-border-color);
 	border-bottom: 0;
 }
 
@@ -31,7 +31,7 @@
 }
 
 .vcard-card .vcard {
-	border: 1px solid rgba(0,0,0,.125);
+	border: 1px solid var(--bs-border-color);
 	border-top: 0;
 	border-right: 0;
 	border-left: 0;
diff --git a/view/theme/redbasic/schema/Focus-Light.css b/view/theme/redbasic/schema/Focus-Light.css
index 7289acffe..bc5da2a1d 100644
--- a/view/theme/redbasic/schema/Focus-Light.css
+++ b/view/theme/redbasic/schema/Focus-Light.css
@@ -1,5 +1,10 @@
 .dropdown-header.text-white-50,
 .navbar-dark .navbar-toggler,
-.navbar-dark .nav-link.active {
-	color: rgba(0,0,0,0.7) !important;
+.navbar-dark .nav-link:active, .navbar-dark .nav-link.active,
+.navbar-dark .navbar-text, .navbar-dark .nav-link, .navbar-dark .nav-link:hover {
+	color: var(--bs-secondary) !important;
+}
+
+.navbar-dark.bg-dark {
+	background-color: var(--bs-tertiary-bg) !important;
 }
diff --git a/view/theme/redbasic/schema/dark.css b/view/theme/redbasic/schema/dark.css
deleted file mode 100644
index bc1a84ec8..000000000
--- a/view/theme/redbasic/schema/dark.css
+++ /dev/null
@@ -1,51 +0,0 @@
-
-:root {
-  color-scheme: dark;
-  --bs-dark-rgb: #e1e1e1;
-  --bs-border-color: rgba(250, 250, 250, 0.125);
-  --bs-body-bg: #111;
-}
-
-.widget,
-.vcard-card {
-	background-color: unset;
-}
-
-.comment-edit-text {
-	border: 1px solid var(--bs-border-color);
-}
-
-.generic-content-wrapper {
-	border: 1px solid var(--bs-border-color);
-}
-
-#profile-jot-wrapper {
-	background-color: unset;
-	border: 1px solid var(--bs-border-color);
-}
-
-.bootstrap-tagsinput {
-	background-color: unset;
-}
-
-a,
-.fakelink {
-	color: var(--bs-link-color);
-}
-.item-category {
-	background-color: #293a4f !important;
-}
-#cboxContent {
-	background-color: #273039;
-}
-#jot-title-wrap,
-#jot-summary-wrap,
-#jot-pagetitle-wrap,
-#jot-category-wrap,
-#jot-customjotheaders-wrap {
-	border-bottom: 1px solid var(--bs-border-color);
-}
-#adminpage table tr:hover {
-	background-color: #2E3136;
-}
-
diff --git a/view/theme/redbasic/schema/dark.php b/view/theme/redbasic/schema/dark.php
deleted file mode 100644
index cd9653a23..000000000
--- a/view/theme/redbasic/schema/dark.php
+++ /dev/null
@@ -1,43 +0,0 @@
-<?php
-
-	if (! $nav_bg)
-		$nav_bg = "#000";
-	if (! $nav_gradient_top)
-		$nav_gradient_top = "#000";
-	if (! $nav_gradient_bottom)
-		$nav_gradient_bottom = "#000";
-	if (! $nav_active_gradient_top)
-		$nav_active_gradient_top = "#333";
-	if (! $nav_active_gradient_bottom)
-		$nav_active_gradient_bottom = "#111";
-	if (! $nav_bd)
-		$nav_bd = "#111";
-	if (! $nav_icon_colour)
-		$nav_icon_colour = "#999";
-	if (! $nav_active_icon_colour)
-		$nav_active_icon_colour = "#fff";
-	if (! $link_colour)
-		$link_colour = "#5f7b99;";
-	if (! $link_hover_colour)
-		$link_hover_colour = "#4b6b8c";
-	if (! $banner_colour)
-		$banner_colour = "#999";
-	if (! $bgcolour)
-		$bgcolour = "#111";
-	if (! $item_colour)
-		$item_colour = "rgba(28,28,28,0.8)";
-	if (! $comment_item_colour)
-		$comment_item_colour = "rgba(18,18,18,0.4)";
-	if (! $comment_border_colour)
-		$comment_border_colour = "rgba(28,28,28,0.8)";
-	if (! $toolicon_colour)
-		$toolicon_colour = '#999';
-	if (! $toolicon_activecolour)
-		$toolicon_activecolour = '#fff';
-	if (! $font_colour)
-		$font_colour = "#ccc";
-	if (! $converse_width)
-		$converse_width = '52'; //unit: rem;
-
-
-
diff --git a/view/theme/redbasic/tpl/theme_settings.tpl b/view/theme/redbasic/tpl/theme_settings.tpl
index 65b3a7883..e91a68265 100644
--- a/view/theme/redbasic/tpl/theme_settings.tpl
+++ b/view/theme/redbasic/tpl/theme_settings.tpl
@@ -1,32 +1,33 @@
+{{include file="field_checkbox.tpl" field=$dark_mode}}
 {{include file="field_checkbox.tpl" field=$narrow_navbar}}
 {{include file="field_input.tpl" field=$converse_width}}
 {{include file="field_input.tpl" field=$font_size}}
 {{include file="field_checkbox.tpl" field=$advanced_theming}}
+
 {{if $expert}}
+	<h3>Light</h3>
 	{{include file="field_colorinput.tpl" field=$nav_bg}}
-	{{include file="field_colorinput.tpl" field=$nav_icon_colour}}
-	{{include file="field_colorinput.tpl" field=$nav_active_icon_colour}}
-	{{include file="field_colorinput.tpl" field=$banner_colour}}
-	{{include file="field_colorinput.tpl" field=$bgcolour}}
+	{{include file="field_colorinput.tpl" field=$bgcolor}}
 	{{include file="field_colorinput.tpl" field=$background_image}}
-	{{include file="field_colorinput.tpl" field=$item_colour}}
-	{{include file="field_colorinput.tpl" field=$comment_item_colour}}
-	{{*include file="field_colorinput.tpl" field=$comment_border_colour*}}
-	{{*include file="field_input.tpl" field=$comment_indent*}}
-	{{include file="field_colorinput.tpl" field=$font_colour}}
-	{{include file="field_colorinput.tpl" field=$link_colour}}
-	{{include file="field_colorinput.tpl" field=$link_hover_colour}}
+	{{include file="field_colorinput.tpl" field=$link_color}}
+	{{include file="field_colorinput.tpl" field=$link_hover_color}}
+
+	<h3>Dark</h3>
+	{{include file="field_colorinput.tpl" field=$nav_bg_dark}}
+	{{include file="field_colorinput.tpl" field=$bgcolor_dark}}
+	{{include file="field_colorinput.tpl" field=$background_image_dark}}
+	{{include file="field_colorinput.tpl" field=$link_color_dark}}
+	{{include file="field_colorinput.tpl" field=$link_hover_color_dark}}
+
+	<h3>Common</h3>
 	{{include file="field_input.tpl" field=$radius}}
-	{{include file="field_input.tpl" field=$shadow}}
 	{{include file="field_input.tpl" field=$top_photo}}
 	{{include file="field_input.tpl" field=$reply_photo}}
 
 <script>
 	$(function(){
-		$('#id_redbasic_nav_bg, #id_redbasic_nav_icon_colour, #id_redbasic_nav_active_icon_colour, #id_redbasic_banner_colour').colorpicker({format: 'rgba'});
-		$('#id_redbasic_link_colour,#id_redbasic_link_hover_colour,#id_redbasic_background_colour').colorpicker();
-		$('#id_redbasic_toolicon_colour,#id_redbasic_toolicon_activecolour,#id_redbasic_font_colour').colorpicker();
-		$('#id_redbasic_item_colour,#id_redbasic_comment_item_colour,#id_redbasic_comment_border_colour').colorpicker({format: 'rgba'});
+		$('#id_redbasic_nav_bg, #id_redbasic_nav_bg_dark').colorpicker({format: 'rgba'});
+		$('#id_redbasic_link_color, #id_redbasic_link_color_dark, #id_redbasic_link_hover_color, #id_redbasic_link_hover_color_dark, #id_redbasic_background_color, #id_redbasic_background_color_dark').colorpicker();
 	});
 </script>
 {{/if}}
diff --git a/view/tpl/cdav_widget_calendar.tpl b/view/tpl/cdav_widget_calendar.tpl
index c27f4789e..b076a3320 100644
--- a/view/tpl/cdav_widget_calendar.tpl
+++ b/view/tpl/cdav_widget_calendar.tpl
@@ -3,9 +3,9 @@
 	{{foreach $channel_calendars as $channel_calendar}}
 	<div id="calendar-{{$channel_calendar.calendarid}}">
 		<div class="ml-3{{if !$channel_calendar@last}} mb-3{{/if}}">
-			<i id="calendar-btn-{{$channel_calendar.calendarid}}" class="fa {{if $channel_calendar.switch}}fa-calendar-check-o{{else}}fa-calendar-o{{/if}} generic-icons fakelink" onclick="add_remove_json_source('{{$channel_calendar.json_source}}', '{{$channel_calendar.color}}', {{$channel_calendar.editable}})" style="color: {{$channel_calendar.color}};"></i>{{$channel_calendar.displayname}}
+			<i id="calendar-btn-{{$channel_calendar.calendarid}}" class="fa {{if $channel_calendar.switch}}fa-calendar-check-o{{else}}fa-calendar-o{{/if}} generic-icons cursor-pointer" onclick="add_remove_json_source('{{$channel_calendar.json_source}}', '{{$channel_calendar.color}}', {{$channel_calendar.editable}})" style="color: {{$channel_calendar.color}};"></i>{{$channel_calendar.displayname}}
 			<div class="float-end">
-				<a href="#" onclick="exportDate(); return false;"><i id="download-icon" class="fa fa-cloud-download fakelink generic-icons-right"></i></a>
+				<a class="text-reset" href="#" onclick="exportDate(); return false;"><i id="download-icon" class="fa fa-cloud-download cursor-pointer generic-icons-right"></i></a>
 			</div>
 		</div>
 	</div>
@@ -18,12 +18,12 @@
 	{{foreach $my_calendars as $calendar}}
 	<div id="calendar-{{$calendar.calendarid}}">
 		<div class="ml-3{{if !$calendar@last}} mb-3{{/if}}">
-			<i id="calendar-btn-{{$calendar.calendarid}}" class="fa {{if $calendar.switch}}fa-calendar-check-o{{else}}fa-calendar-o{{/if}} generic-icons fakelink" onclick="add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}})" style="color: {{$calendar.color}};"></i>{{$calendar.displayname}}
+			<i id="calendar-btn-{{$calendar.calendarid}}" class="fa {{if $calendar.switch}}fa-calendar-check-o{{else}}fa-calendar-o{{/if}} generic-icons cursor-pointer" onclick="add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}})" style="color: {{$calendar.color}};"></i>{{$calendar.displayname}}
 			<div class="float-end">
-				<i id="edit-icon" class="fa fa-pencil fakelink generic-icons" onclick="openClose('edit-calendar-{{$calendar.calendarid}}')"></i>
-				<a href="/cdav/calendars/{{$calendar.ownernick}}/{{$calendar.uri}}/?export"><i id="download-icon" class="fa fa-cloud-download fakelink generic-icons"></i></a>
-				<i id="share-icon" class="fa fa-share-alt fakelink generic-icons" onclick="openClose('share-calendar-{{$calendar.calendarid}}')"></i>
-				<a href="#" onclick="var drop = dropItem('/cdav/calendar/drop/{{$calendar.calendarid}}/{{$calendar.instanceid}}', '#calendar-{{$calendar.calendarid}}'); if(drop) { add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}}, 'drop'); } return false;"><i class="fa fa-trash-o drop-icons"></i></a>
+				<i id="edit-icon" class="fa fa-pencil cursor-pointer generic-icons" onclick="openClose('edit-calendar-{{$calendar.calendarid}}')"></i>
+				<a class="text-reset" href="/cdav/calendars/{{$calendar.ownernick}}/{{$calendar.uri}}/?export"><i id="download-icon" class="fa fa-cloud-download cursor-pointer generic-icons"></i></a>
+				<i id="share-icon" class="fa fa-share-alt cursor-pointer generic-icons" onclick="openClose('share-calendar-{{$calendar.calendarid}}')"></i>
+				<a class="text-reset" href="#" onclick="var drop = dropItem('/cdav/calendar/drop/{{$calendar.calendarid}}/{{$calendar.instanceid}}', '#calendar-{{$calendar.calendarid}}'); if(drop) { add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}}, 'drop'); } return false;"><i class="fa fa-trash-o drop-icons"></i></a>
 			</div>
 			<div id="share-calendar-{{$calendar.calendarid}}" class="sub-menu" style="display: none; border-color: {{$calendar.color}};">
 				{{if $calendar.sharees}}
@@ -31,7 +31,7 @@
 				<div id="sharee-{{$calendar.calendarid}}-{{$sharee@iteration}}" class="mb-3">
 					<i class="fa fa-share generic-icons"></i>{{$sharee.name}}&nbsp;{{$sharee.access}}
 					<div class="float-end">
-						<a href="#" onclick="dropItem('/cdav/calendar/dropsharee/{{$calendar.calendarid}}/{{$calendar.instanceid}}/{{$sharee.hash}}', '#sharee-{{$calendar.calendarid}}-{{$sharee@iteration}}'); return false;"><i class="fa fa-trash-o drop-icons"></i></a>
+						<a class="text-reset" href="#" onclick="dropItem('/cdav/calendar/dropsharee/{{$calendar.calendarid}}/{{$calendar.instanceid}}/{{$sharee.hash}}', '#sharee-{{$calendar.calendarid}}-{{$sharee@iteration}}'); return false;"><i class="fa fa-trash-o drop-icons"></i></a>
 					</div>
 				</div>
 				{{/foreach}}
@@ -80,10 +80,10 @@
 	<h3>{{$shared_calendars_label}}</h3>
 	{{foreach $shared_calendars as $calendar}}
 	<div id="shared-calendar-{{$calendar.calendarid}}" class="ml-3{{if !$calendar@last}} mb-3{{/if}}">
-		<i id="calendar-btn-{{$calendar.calendarid}}" class="fa {{if $calendar.switch}}{{if $calendar.access == 'read-write'}}fa-calendar-check-o{{else}}fa-calendar-times-o{{/if}}{{else}}fa-calendar-o{{/if}} generic-icons fakelink" onclick="add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}}, {{if $calendar.access == 'read-write'}}'fa-calendar-check-o'{{else}}'fa-calendar-times-o'{{/if}})"  style="color: {{$calendar.color}};"></i>{{$calendar.displayname}} ({{$calendar.sharer}})
+		<i id="calendar-btn-{{$calendar.calendarid}}" class="fa {{if $calendar.switch}}{{if $calendar.access == 'read-write'}}fa-calendar-check-o{{else}}fa-calendar-times-o{{/if}}{{else}}fa-calendar-o{{/if}} generic-icons cursor-pointer" onclick="add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}}, {{if $calendar.access == 'read-write'}}'fa-calendar-check-o'{{else}}'fa-calendar-times-o'{{/if}})"  style="color: {{$calendar.color}};"></i>{{$calendar.displayname}} ({{$calendar.sharer}})
 		<div class="float-end">
-			<a href="/cdav/calendars/{{$calendar.ownernick}}/{{$calendar.uri}}/?export"><i id="download-icon" class="fa fa-cloud-download fakelink generic-icons"></i></a>
-			<a href="#" onclick="var drop = dropItem('/cdav/calendar/drop/{{$calendar.calendarid}}/{{$calendar.instanceid}}', '#shared-calendar-{{$calendar.calendarid}}'); if(drop) { add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}}, 'drop'); } return false;"><i class="fa fa-trash-o drop-icons"></i></a>
+			<a class="text-reset" href="/cdav/calendars/{{$calendar.ownernick}}/{{$calendar.uri}}/?export"><i id="download-icon" class="fa fa-cloud-download cursor-pointer generic-icons"></i></a>
+			<a class="text-reset" href="#" onclick="var drop = dropItem('/cdav/calendar/drop/{{$calendar.calendarid}}/{{$calendar.instanceid}}', '#shared-calendar-{{$calendar.calendarid}}'); if(drop) { add_remove_json_source('{{$calendar.json_source}}', '{{$calendar.color}}', {{$calendar.editable}}, 'drop'); } return false;"><i class="fa fa-trash-o drop-icons"></i></a>
 		</div>
 	</div>
 	{{/foreach}}
@@ -94,7 +94,7 @@
 	<h3>{{$tools_label}}</h3>
 	<div class="nav nav-pills flex-column">
 		<li class="nav-item">
-			<a class="nav-link" href="#" onclick="openClose('create-calendar'); return false;"><i class="fa fa-calendar-plus-o generic-icons"></i> {{$create_label}}</a>
+			<a class="nav-link text-reset" href="#" onclick="openClose('create-calendar'); return false;"><i class="fa fa-calendar-plus-o generic-icons"></i> {{$create_label}}</a>
 		</li>
 		<div id="create-calendar" class="sub-menu-wrapper">
 			<div class="sub-menu">
@@ -111,7 +111,7 @@
 			</div>
 		</div>
 		<li class="nav-item">
-			<a class="nav-link" href="#" onclick="openClose('upload-form'); return false;"><i class="fa fa-cloud-upload generic-icons"></i> {{$import_label}}</a>
+			<a class="nav-link text-reset" href="#" onclick="openClose('upload-form'); return false;"><i class="fa fa-cloud-upload generic-icons"></i> {{$import_label}}</a>
 		</li>
 		<div id="upload-form" class="sub-menu-wrapper">
 			<div class="sub-menu">
diff --git a/view/tpl/channel_activities.tpl b/view/tpl/channel_activities.tpl
index 242fc519a..acce3cb13 100644
--- a/view/tpl/channel_activities.tpl
+++ b/view/tpl/channel_activities.tpl
@@ -5,7 +5,7 @@
 	{{foreach $items as $i}}
 	<div class="col">
 		<div class="card">
-			<a href="{{$i.url}}" class="text-dark">
+			<a href="{{$i.url}}" class="text-reset">
 				<div class="card-body">
 					{{if $i.title}}
 						<strong>{{$i.title}}</strong>
diff --git a/view/tpl/navbar_default.tpl b/view/tpl/navbar_default.tpl
index 4861c196f..58c6506b6 100644
--- a/view/tpl/navbar_default.tpl
+++ b/view/tpl/navbar_default.tpl
@@ -3,9 +3,9 @@
 		{{if $userinfo}}
 		<div class="d-flex" style="max-width: 50%">
 			<div class="dropdown">
-				<div class="fakelink usermenu" data-bs-toggle="dropdown">
+				<div class="cursor-pointer usermenu" data-bs-toggle="dropdown">
 					<img id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}">
-					<i class="fa fa-caret-down"></i>
+					<i class="navbar-text fa fa-caret-down"></i>
 				</div>
 				{{if $is_owner}}
 				<div class="dropdown-menu">
@@ -162,8 +162,9 @@
 </nav>
 <div class="offcanvas offcanvas-end" tabindex="-1" id="app-bin" aria-labelledby="app-bin-label">
 	<div class="offcanvas-header">
+
 		{{if $nav.login && !$userinfo}}
-		<div class="d-lg-none pt-1 pb-1">
+		<div class="hstack gap-1 d-lg-none pt-1 pb-1">
 			{{if $nav.loginmenu.1.4}}
 			<a class="btn btn-primary btn-sm text-white" href="#" title="{{$nav.loginmenu.1.3}}" id="{{$nav.loginmenu.1.4}}_collapse" data-bs-toggle="modal" data-bs-target="#nav-login">
 				{{$nav.loginmenu.1.1}}
@@ -178,8 +179,9 @@
 				{{$nav.register.1}}
 			</a>
 			{{/if}}
+
 		</div>
-		<div class="nav d-lg-flex"></div>
+		<div class="nav d-lg-flex w-100"></div>
 		{{else}}
 		<div class="lh-sm w-100" id="app-bin-label">
 			{{if $name}}
@@ -193,6 +195,7 @@
 		<i id="app-bin-trash" class="fa fa-2x fa-fw fa-trash-o d-none"></i>
 		{{/if}}
 
+		<button id="theme-switch" type="button" class="btn btn-outline-secondary border-0"><i id="theme-switch-icon" class="fa fa-{{$theme_switch_icon}}-o"></i></button>
 		<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 
 	</div>
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 7a4e909c7..f9499695b 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -531,9 +531,9 @@
 		{{$no_notifications}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
 	</div>
 	<div id="nav-notifications-template" rel="template">
-		<a class="list-group-item text-decoration-none text-dark clearfix notification {6}" href="{0}" title="{13}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-when="{5}">
+		<a class="list-group-item text-decoration-none text-reset clearfix notification {6}" href="{0}" title="{13}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-when="{5}">
 			<img class="menu-img-3" data-src="{1}" loading="lazy">
-			<div class="contactname"><span class="text-dark fw-bold">{2}</span> <span class="text-muted">{3}</span></div>
+			<div class="contactname"><span class="text-reset fw-bold">{2}</span> <span class="text-muted">{3}</span></div>
 			<span class="text-muted">{4}</span><br>
 			<span class="text-muted notifications-autotime" title="{5}">{5}</span>
 		</a>
@@ -556,7 +556,7 @@
 		</div>
 		<div id="nav-{{$notification.type}}-sub" class="rounded-bottom border border-start-0 border-end-0 border-bottom-0 list-group list-group-flush collapse notification-content" data-bs-parent="#notifications" data-sse_type="{{$notification.type}}">
 			{{if $notification.viewall}}
-			<a class="list-group-item text-decoration-none text-dark" id="nav-{{$notification.type}}-see-all" href="{{$notification.viewall.url}}">
+			<a class="list-group-item text-decoration-none text-reset" id="nav-{{$notification.type}}-see-all" href="{{$notification.viewall.url}}">
 				<i class="fa fa-fw fa-external-link"></i> {{$notification.viewall.label}}
 			</a>
 			{{/if}}
author	Mario <mario@mariovavti.com>	2023-01-20 11:05:15 +0000
committer	Mario <mario@mariovavti.com>	2023-01-20 11:05:15 +0000
commit	9dc949b62c6b5e3c8872211f71b11714d9d22b22 (patch)
tree	38c06e7a128742e219eb74d6adb035f2f106918a /view
parent	40394b94d7c8a8bf1f61f5482195164fff434b90 (diff)
download	volse-hubzilla-9dc949b62c6b5e3c8872211f71b11714d9d22b22.tar.gz volse-hubzilla-9dc949b62c6b5e3c8872211f71b11714d9d22b22.tar.bz2 volse-hubzilla-9dc949b62c6b5e3c8872211f71b11714d9d22b22.zip