Removed specific dark theme defaults in favour of css vars that chang…

…e automatically
havit · Aug 2, 2023 · 6978d8c · 6978d8c
1 parent 12d1cde
commit 6978d8c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 21 deletions.
diff --git a/...s.Web.Bootstrap.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor b/...s.Web.Bootstrap.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor
@@ -52,10 +52,10 @@
 		<ComponentApiDocCssVariable Name="--hx-sidebar-toggler-border" Default="1px solid var(--bs-border-color)">
 			Toggler border.
 		</ComponentApiDocCssVariable>
-		<ComponentApiDocCssVariable Name="--hx-sidebar-toggler-background" Default="var(--bs-white)">
+		<ComponentApiDocCssVariable Name="--hx-sidebar-toggler-background" Default="var(--bs-body-bg)">
 			Toggler background.
 		</ComponentApiDocCssVariable>
-		<ComponentApiDocCssVariable Name="--hx-sidebar-toggler-color" Default="var(--bs-dark)">
+		<ComponentApiDocCssVariable Name="--hx-sidebar-toggler-color" Default="var(--bs-body-color)">
 			Toggler color.
 		</ComponentApiDocCssVariable>
 		<ComponentApiDocCssVariable Name="--hx-sidebar-item-font-size" Default="1rem">
@@ -64,7 +64,7 @@
 		<ComponentApiDocCssVariable Name="--hx-sidebar-item-padding" Default=".75rem">
 			Padding of the items.
 		</ComponentApiDocCssVariable>
-		<ComponentApiDocCssVariable Name="--hx-sidebar-item-color" Default="var(--bs-dark)">
+		<ComponentApiDocCssVariable Name="--hx-sidebar-item-color" Default="var(--bs-body-color)">
 			Color of the items.
 		</ComponentApiDocCssVariable>
 		<ComponentApiDocCssVariable Name="--hx-sidebar-item-icon-color" Default="var(--bs-primary)">
@@ -130,7 +130,7 @@
 		<ComponentApiDocCssVariable Name="--hx-sidebar-brand-logo-height" Default="2.5rem">
 			Height of the brand logo.
 		</ComponentApiDocCssVariable>
-		<ComponentApiDocCssVariable Name="--hx-sidebar-brand-name-color" Default="var(--bs-dark)">
+		<ComponentApiDocCssVariable Name="--hx-sidebar-brand-name-color" Default="var(--bs-body-color)">
 			Color of the brand name.
 		</ComponentApiDocCssVariable>
 		<ComponentApiDocCssVariable Name="--hx-sidebar-brand-name-font-weight" Default="600">

diff --git a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css
@@ -14,11 +14,11 @@
 	--hx-sidebar-collapsed-width: 									72px;
 	--hx-sidebar-width: 											250px;
 	--hx-sidebar-toggler-border: 									1px solid var(--bs-border-color);
-	--hx-sidebar-toggler-background: 								var(--bs-white);
-	--hx-sidebar-toggler-color: 									var(--bs-dark);
+	--hx-sidebar-toggler-background: 								var(--bs-body-bg);
+	--hx-sidebar-toggler-color: 									var(--bs-body-color);
 	--hx-sidebar-item-font-size: 									1rem;
 	--hx-sidebar-item-padding: 										.75rem;
-	--hx-sidebar-item-color: 										var(--bs-dark);
+	--hx-sidebar-item-color: 										var(--bs-body-color);
 	--hx-sidebar-item-hover-color: 									var(--bs-primary);
 	--hx-sidebar-item-hover-background-color: 						var(--bs-primary-rgb);
 	--hx-sidebar-item-hover-background-opacity: 					.05;
@@ -39,7 +39,7 @@
 	--hx-sidebar-brand-shortname-border-radius: 					.625rem;
 	--hx-sidebar-brand-shortname-color: 							var(--bs-white);
 	--hx-sidebar-brand-shortname-font-weight: 						600;
-	--hx-sidebar-brand-name-color: 									var(--bs-dark);
+	--hx-sidebar-brand-name-color: 									var(--bs-body-color);
 	--hx-sidebar-brand-name-font-weight: 							600;
 	--hx-sidebar-footer-padding: 									1rem;
 	--hx-sidebar-footer-item-padding: 								.75rem;
@@ -151,7 +151,7 @@
 	--hx-tree-view-item-border-width: 								0;
 	--hx-tree-view-item-border-style: 								unset;
 	--hx-tree-view-item-border-color: 								unset;
-	--hx-tree-view-item-color: 										var(--bs-dark);
+	--hx-tree-view-item-color: 										var(--bs-bg-color);
 	--hx-tree-view-item-hover-color: 								var(--bs-primary);
 	--hx-tree-view-item-selected-color: 							var(--bs-primary);
 	--hx-tree-view-item-background: 								transparent;
@@ -185,19 +185,10 @@
 	--hx-search-box-dropdown-menu-height: 							300px;
 }
 
-[data-bs-theme=dark] {
-	--hx-sidebar-brand-name-color: 									var(--bs-light);
-	--hx-sidebar-item-color: 										var(--bs-light);
-	--hx-sidebar-toggler-color:										var(--bs-light);
-	--hx-sidebar-toggler-background: 								var(--bs-dark);
-
-	--hx-tree-view-item-color:										var(--bs-light);
-}
-
 form {
-	display:	 flex;
-	flex-direction: column;
-	gap: var(--hx-form-spacing);
+	display:				flex;
+	flex-direction: 		column;
+	gap: 					var(--hx-form-spacing);
 }
 
 form > .hx-button {