theme fixes

4 files changed, 19 insertions, 18 deletions

diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index a31c5ec32..4c991a724 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -125,14 +125,15 @@ h6, .h6 {
 	font-size: 0.75rem;
 }
 
-#banner {
+.navbar-banner {
 	font-weight: bold;
+	color: var(--bs-emphasis-color);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
-#banner img {
+.navbar-banner img {
 	max-height: 1.35rem;
 	width: auto;
 }
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 27ad9e15f..b32042668 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -4,18 +4,20 @@
 
 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');
-}
+$(document).ready(function() {
 
+	if (redbasic_dark_mode == 1) {
+		$('html').attr('data-bs-theme', 'light');
+		$('meta[name=theme-color]').attr('content', $('nav').css('background-color'));
+		$('#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() {
+	if (redbasic_dark_mode == 2) {
+		$('html').attr('data-bs-theme', 'dark');
+		$('meta[name=theme-color]').attr('content', $('nav').css('background-color'));
+		$('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o');
+	}
 
 	// CSS3 calc() fallback (for unsupported browsers)
 	$('body').append('<div id="css3-calc" style="width: 10px; width: calc(10px + 10px); display: none;"></div>');
@@ -54,8 +56,6 @@ $(document).ready(function() {
 	});
 
 	$('#theme-switch').click(function() {
-		// $('*').addClass('disable-transition');
-
 		if ($('html').attr('data-bs-theme') === 'dark') {
 			$('html').attr('data-bs-theme', 'light');
 			localStorage.setItem('redbasic_dark_mode', 1);
@@ -66,8 +66,7 @@ $(document).ready(function() {
 			localStorage.setItem('redbasic_dark_mode', 2);
 			$('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o');
 		}
-
-		// setTimeout(() => { $('*').removeClass('disable-transition') }, 100);
+		$('meta[name=theme-color]').attr('content', $('nav').css('background-color'));
 	});
 
 
@@ -86,7 +85,7 @@ $(document).ready(function() {
 	});
 
 	$("input[data-role=cat-tagsinput]").tagsinput({
-		tagClass: 'badge rounded-pill bg-warning text-dark'
+		tagClass: 'badge rounded-pill bg-warning'
 	});
 
 	$('a.disabled').click(function(e) {
diff --git a/view/theme/redbasic/php/theme.php b/view/theme/redbasic/php/theme.php
index abfac05b6..5d603fd04 100644
--- a/view/theme/redbasic/php/theme.php
+++ b/view/theme/redbasic/php/theme.php
@@ -32,4 +32,5 @@ function redbasic_init(&$a) {
 	}
 
 	App::$page['color_mode'] = 'data-bs-theme="' . $mode . '"';
+	App::$page['theme_color'] = 'rgb(248, 249, 250)';
 }
diff --git a/view/tpl/navbar_default.tpl b/view/tpl/navbar_default.tpl
index 685fb01d6..83844a2f7 100644
--- a/view/tpl/navbar_default.tpl
+++ b/view/tpl/navbar_default.tpl
@@ -66,7 +66,7 @@
 			{{/if}}
 		</div>
 		{{else}}
-		<div id="banner" class="navbar-text d-lg-none">{{$banner}}</div>
+		<div class="navbar-text d-lg-none navbar-banner">{{$banner}}</div>
 		{{/if}}
 		<div class="navbar-toggler-right">
 			{{if $nav.help.6}}
@@ -113,7 +113,7 @@
 				{{/if}}
 			</ul>
 
-			<div id="banner" class="navbar-text">{{$banner}}</div>
+			<div class="navbar-text navbar-banner">{{$banner}}</div>
 
 			<ul id="nav-right" class="navbar-nav">
 				<li class="nav-item collapse clearfix" id="nav-search">