diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor
index 98c8adad..32cc645d 100644
--- a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor
+++ b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor
@@ -1,14 +1,14 @@
 <style>
 	/* Demonstration purposes only. Put this CSS into your application's CSS file or into the component's CSS file. */
 	.my-sidebar {
-		--hx-sidebar-item-hover-color: var(--bs-dark);
-		--hx-sidebar-item-active-background-color: var(--bs-dark-rgb);
-		--hx-sidebar-item-hover-background-color: var(--bs-dark-rgb);
-		--hx-sidebar-item-icon-color: var(--bs-secondary);
+		--hx-sidebar-item-hover-background-color: var(--bs-emphasis-color-rgb);
+		--hx-sidebar-item-active-background-color: var(--bs-emphasis-color-rgb);
+		--hx-sidebar-item-active-color: var(--bs-emphasis-color);
+		--hx-sidebar-item-hover-color: var(--bs-emphasis-color);
 	}
 </style>
 <div class="my-sidebar d-flex border rounded-3 overflow-hidden">
-	<HxSidebar CssClass="text-bg-light">
+	<HxSidebar CssClass="bg-body-secondary">
 		<HeaderTemplate>
 			<HxSidebarBrand BrandName="Brand name" BrandNameShort="BN" />
 		</HeaderTemplate>
diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor
index cf75374c..b97ad4d6 100644
--- a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor
+++ b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor
@@ -13,7 +13,7 @@
         <Demo Type="typeof(HxSidebar_Demo_Dark)" />
 
         <DocHeading Title="Colors" />
-        <p>Similarly to Bootstrap Navbar, you can use utility classes to create any color variation eg. <code>text-bg-light</code>. Colors of the active/hover states need to be fine-tuned via CSS vars.</p>
+        <p>Similarly to Bootstrap Navbar, you can use utility classes to create any color variation eg. <code>bg-body-secondary</code>. Colors of the items and active/hover states need to be fine-tuned via CSS vars.</p>
         <Demo Type="typeof(HxSidebar_Demo_Colors)" />
 
         <DocHeading Title="Logo" />