redbasic: implement setting for always light navbar icons and some minor fixes

6 files changed, 35 insertions, 13 deletions

diff --git a/include/nav.php b/include/nav.php
index d4e9b8f92..31a447a84 100644
--- a/include/nav.php
+++ b/include/nav.php
@@ -319,6 +319,8 @@ function nav($template = 'default') {
 
 	App::$page['nav'] .= replace_macros($tpl, [
 		'$baseurl'            => z_root(),
+		'$color_mode'         => App::$page['color_mode'] ?? '',
+		'$navbar_color_mode'  => App::$page['navbar_color_mode'] ?? '',
 		'$theme_switch_icon'  => $theme_switch_icon,
 		'$fulldocs'           => t('Help'),
 		'$sitelocation'       => $sitelocation,
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index ea74660b4..54d683ce7 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -5,13 +5,11 @@
 let redbasic_dark_mode = localStorage.getItem('redbasic_dark_mode');
 let redbasic_theme_color = localStorage.getItem('redbasic_theme_color');
 
-if (redbasic_dark_mode) {
+if (redbasic_dark_mode === 1) {
 	$('html').attr('data-bs-theme', 'dark');
-	$('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o');
 }
-else {
+if (redbasic_dark_mode === 0) {
 	$('html').attr('data-bs-theme', 'light');
-	$('#theme-switch-icon').removeClass('fa-sun-o').addClass('fa-moon-o');
 }
 
 
@@ -21,6 +19,15 @@ if (redbasic_theme_color) {
 
 $(document).ready(function() {
 
+	if (redbasic_dark_mode === 1) {
+		$('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o');
+		$('[data-bs-theme="light"]').attr('data-bs-theme', 'dark');
+	}
+	if (redbasic_dark_mode === 0) {
+		$('#theme-switch-icon').removeClass('fa-sun-o').addClass('fa-moon-o');
+		$('[data-bs-theme="dark"]:not(nav)').attr('data-bs-theme', 'light');
+	}
+
 	if (redbasic_theme_color != $('nav').css('background-color')) {
 		$('meta[name=theme-color]').attr('content', $('nav').css('background-color'));
 		localStorage.setItem('redbasic_theme_color', $('nav').css('background-color'));
@@ -65,12 +72,17 @@ $(document).ready(function() {
 
 	$('#theme-switch').click(function() {
 		if ($('html').attr('data-bs-theme') === 'dark') {
-			$('html').attr('data-bs-theme', 'light');
-			localStorage.removeItem('redbasic_dark_mode');
+			if ($('nav').data('bs-theme') === 'dark') {
+				$('[data-bs-theme="dark"]:not(nav)').attr('data-bs-theme', 'light');
+			}
+			else {
+				$('[data-bs-theme="dark"]').attr('data-bs-theme', 'light');
+			}
+			localStorage.setItem('redbasic_dark_mode', 0);
 			$('#theme-switch-icon').removeClass('fa-sun-o').addClass('fa-moon-o');
 		}
 		else {
-			$('html').attr('data-bs-theme', 'dark');
+			$('[data-bs-theme="light"]').attr('data-bs-theme', 'dark');
 			localStorage.setItem('redbasic_dark_mode', 1);
 			$('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o');
 		}
diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php
index 87a4c45d5..ef1cb7a11 100644
--- a/view/theme/redbasic/php/config.php
+++ b/view/theme/redbasic/php/config.php
@@ -38,6 +38,7 @@ class RedbasicConfig {
 
 		$arr = array();
 		$arr['dark_mode'] = get_pconfig(local_channel(),'redbasic', 'dark_mode');
+		$arr['navbar_dark_mode'] = get_pconfig(local_channel(),'redbasic', 'navbar_dark_mode');
 		$arr['narrow_navbar'] = get_pconfig(local_channel(),'redbasic', 'narrow_navbar' );
 		$arr['nav_bg'] = get_pconfig(local_channel(),'redbasic', 'nav_bg' );
 		$arr['nav_bg_dark'] = get_pconfig(local_channel(),'redbasic', 'nav_bg_dark' );
@@ -65,6 +66,7 @@ class RedbasicConfig {
 
 		if (isset($_POST['redbasic-settings-submit'])) {
 			set_pconfig(local_channel(), 'redbasic', 'narrow_navbar', $_POST['redbasic_narrow_navbar']);
+			set_pconfig(local_channel(), 'redbasic', 'navbar_dark_mode', $_POST['redbasic_navbar_dark_mode']);
 			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_bg_dark', $_POST['redbasic_nav_bg_dark']);
@@ -99,6 +101,7 @@ class RedbasicConfig {
 			'$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'))),
+			'$navbar_dark_mode' => array('redbasic_navbar_dark_mode',t('Always use light icons for navbar'),$arr['navbar_dark_mode'], t('Enable this option if you use a dark navbar color in light 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_bg_dark' => array('redbasic_nav_bg_dark', t('Dark navigation bar background color'), $arr['nav_bg_dark']),
diff --git a/view/theme/redbasic/php/theme.php b/view/theme/redbasic/php/theme.php
index abfac05b6..8864f5ea5 100644
--- a/view/theme/redbasic/php/theme.php
+++ b/view/theme/redbasic/php/theme.php
@@ -18,18 +18,23 @@ use App;
 function redbasic_init(&$a) {
 
 	$mode = '';
+	$navbar_mode = '';
 
 	if (local_channel()) {
 		$mode = ((get_pconfig(local_channel(), 'redbasic', 'dark_mode')) ? 'dark' : 'light');
+		$navbar_mode = ((get_pconfig(local_channel(), 'redbasic', 'navbar_dark_mode')) ? 'dark' : 'light');
 	}
 
 	if (App::$profile_uid) {
 		$mode = ((get_pconfig(App::$profile_uid, 'redbasic', 'dark_mode')) ? 'dark' : 'light');
+		$navbar_mode = ((get_pconfig(App::$profile_uid, 'redbasic', 'navbar_dark_mode')) ? 'dark' : 'light');
 	}
 
 	if (!$mode) {
 		$mode = ((get_config('redbasic', 'dark_mode')) ? 'dark' : 'light');
+		$navbar_mode = ((get_config('redbasic', 'navbar_dark_mode')) ? 'dark' : 'light');
 	}
 
 	App::$page['color_mode'] = 'data-bs-theme="' . $mode . '"';
+	App::$page['navbar_color_mode'] = (($navbar_mode === 'dark') ? 'data-bs-theme="' . $navbar_mode . '"' : '');
 }
diff --git a/view/theme/redbasic/tpl/theme_settings.tpl b/view/theme/redbasic/tpl/theme_settings.tpl
index e91a68265..6e4fe55ed 100644
--- a/view/theme/redbasic/tpl/theme_settings.tpl
+++ b/view/theme/redbasic/tpl/theme_settings.tpl
@@ -6,6 +6,7 @@
 
 {{if $expert}}
 	<h3>Light</h3>
+	{{include file="field_checkbox.tpl" field=$navbar_dark_mode}}
 	{{include file="field_colorinput.tpl" field=$nav_bg}}
 	{{include file="field_colorinput.tpl" field=$bgcolor}}
 	{{include file="field_colorinput.tpl" field=$background_image}}
@@ -26,8 +27,7 @@
 
 <script>
 	$(function(){
-		$('#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();
+		$('#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, #id_redbasic_nav_bg, #id_redbasic_nav_bg_dark').colorpicker({format: 'rgba'});
 	});
 </script>
 {{/if}}
diff --git a/view/tpl/navbar_default.tpl b/view/tpl/navbar_default.tpl
index d376647e3..36363bcf1 100644
--- a/view/tpl/navbar_default.tpl
+++ b/view/tpl/navbar_default.tpl
@@ -1,4 +1,4 @@
-<nav class="navbar fixed-top navbar-expand-lg bg-body-tertiary">
+<nav class="navbar fixed-top navbar-expand-lg bg-body-tertiary" {{$navbar_color_mode}}>
 	<div class="container-fluid flex-nowrap">
 		{{if $userinfo}}
 		<div class="d-flex" style="max-width: 50%">
@@ -8,7 +8,7 @@
 					<i class="navbar-text fa fa-caret-down"></i>
 				</div>
 				{{if $is_owner}}
-				<div class="dropdown-menu">
+				<div class="dropdown-menu" {{$color_mode}}>
 					{{foreach $nav.usermenu as $usermenu}}
 					<a class="dropdown-item{{if $usermenu.2}} active{{/if}}"  href="{{$usermenu.0}}" title="{{$usermenu.3}}" role="menuitem" id="{{$usermenu.4}}">{{$usermenu.1}}</a>
 					{{/foreach}}
@@ -116,7 +116,7 @@
 			<div class="navbar-text navbar-banner">{{$banner}}</div>
 
 			<ul id="nav-right" class="navbar-nav">
-				<li class="nav-item collapse clearfix" id="nav-search">
+				<li class="nav-item collapse clearfix" id="nav-search" {{$color_mode}}>
 					<form class="form-inline" method="get" action="{{$nav.search.4}}" role="search">
 						<input class="form-control form-control-sm mt-1 me-2" id="nav-search-text" type="text" value="" placeholder="{{$help}}" name="search" title="{{$nav.search.3}}" onclick="this.submit();" onblur="closeMenu('nav-search'); openMenu('nav-search-btn');"/>
 					</form>
@@ -134,7 +134,7 @@
 				{{/if}}
 				{{if $localuser || $nav.pubs}}
 				<li id="notifications-btn" class="nav-item d-xl-none">
-					<a class="nav-link text-white notifications-btn" href="#"><i id="notifications-btn-icon" class="fa fa-exclamation-circle  notifications-btn-icon"></i></a>
+					<a class="nav-link notifications-btn" href="#"><i id="notifications-btn-icon" class="fa fa-exclamation-circle  notifications-btn-icon"></i></a>
 				</li>
 				{{/if}}
 				{{if $navbar_apps}}