2 files changed, 35 insertions, 26 deletions

diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index ce791720c..b93738b00 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -5,7 +5,6 @@
  * Originally by Fabio Comuni <fabrix.xm@gmail.com>
  */
 
-
 /* bootstrap variables */
 
 :root {
@@ -1563,13 +1562,13 @@ dl.bb-dl > dd > li {
 
 /* Turn checkboxes into switches */
 .onoffswitch.checkbox > div {
-    position: relative; width: 60px;
-    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
-    display:inline-block;
+	position: relative; width: 60px;
+	-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+	display:inline-block;
 }
 
 .onoffswitch.checkbox input {
-    display: none;
+	display: none;
 }
 
 .onoffswitch.checkbox > div label {
@@ -1581,51 +1580,53 @@ dl.bb-dl > dd > li {
 }
 
 .onoffswitch.checkbox:hover label {
-	color: var(--bs-primary);
+	color: var(--bs-link-color);
 }
 
 .onoffswitch.checkbox:hover > div label {
-	border-color: var(--bs-primary);
+	border-color: var(--bs-link-color);
 }
 
 .onoffswitch-inner {
-    display: block; width: 200%; margin-left: -100%;
+	display: block; width: 200%; margin-left: -100%;
+	transition: margin 0.19s ease-in-out;
 }
 
 .onoffswitch-inner:before, .onoffswitch-inner:after {
-    display: block; float: left; width: 50%; height: 20px; padding: 0; line-height:20px;
-    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
+	display: block; float: left; width: 50%; height: 20px; padding: 0; line-height:20px;
+	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
 
 .onoffswitch-inner:before {
-    content: attr(data-on);
-    padding-right: 21px;
-    background-color: rgba(var(--bs-body-color-rgb), 0);
-    text-align: right;
+	content: attr(data-on);
+	padding-right: 21px;
+	background-color: rgba(var(--bs-body-color-rgb), 0);
+	text-align: right;
 }
 
 .onoffswitch-inner:after {
-    content: attr(data-off);
-    padding-left: 21px;
-    background-color: rgba(var(--bs-body-color-rgb), 0);
-    color: var(--bs-border-color);
-    text-align: left;
+	content: attr(data-off);
+	padding-left: 21px;
+	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: var(--bs-secondary-bg);
-    border-radius: 10px;
-    position: absolute; top: 0; bottom: 0; right: 36px;
+	display: block; width: 15px; margin:4px;
+	background: var(--bs-secondary-bg);
+	border-radius: 10px;
+	position: absolute; top: 0; bottom: 0; right: 36px;
+	transition: right 0.2s ease-in-out;
 }
 
 .onoffswitch.checkbox > div > input:checked + label .onoffswitch-inner {
-    margin-left: 0px;
+	margin-left: 0px;
 }
 
 .onoffswitch.checkbox > div > input:checked + label .onoffswitch-switch {
-    right: 0px;
-    background-color: var(--bs-primary);
+	right: 0px;
+	background-color: var(--bs-link-color);
 }
 
 
@@ -1755,3 +1756,7 @@ dl.bb-dl > dd > li {
 .jg-entry img {
 	border-radius: var(--bs-border-radius);
 }
+
+.disable-transition {
+	transition: none !important;
+}
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 7584f9421..27ad9e15f 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -54,6 +54,8 @@ $(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);
@@ -64,6 +66,8 @@ $(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);
 	});