Implement comprehensive dark mode with theme toggle for eShop web application

src/WebApp/Components/Layout/CartMenu.razor.css

@@ -9,9 +9,9 @@
     right: -0.5rem;
     top: 1rem;
     border-radius: 20px;
-    border: 1px solid #000;
-    background: #000;
-    color: #FFF;
+    border: 1px solid var(--color-button-primary-bg);
+    background: var(--color-button-primary-bg);
+    color: var(--color-button-primary-text);
     font-size: 0.75rem;
     font-style: normal;
     font-weight: 400;

src/WebApp/Components/Layout/FooterBar.razor.css

@@ -1,7 +1,8 @@
 .eshop-footer {
   margin-top: 3.5rem;
-  background-color: #000;
+  background-color: var(--color-surface);
   width: 100%;
+  border-top: 1px solid var(--color-border);
 }
 
 .eshop-footer-content {
@@ -11,14 +12,14 @@
 
 .eshop-footer-row {
   padding: 3.5rem 10rem;
-  color: white;
+  color: var(--color-text);
   display: flex;
   justify-content: flex-end;
   align-items: center;
 }
 
 .eshop-footer .logo-footer {
-  color: white;
+  color: var(--color-text);
   margin-right: auto;
   width: 100px;
   height: auto;

src/WebApp/Components/Layout/HeaderBar.razor

@@ -13,6 +13,7 @@
                 <img alt="AdventureWorks" src="images/logo-header.svg" class="logo logo-header" />
             </a>
 
+            <ThemeToggle />
             <UserMenu />
             <CartMenu />
         </nav>

src/WebApp/Components/Layout/HeaderBar.razor.css

@@ -36,7 +36,7 @@
 }
 
 .eshop-header-intro h1 {
-    color: #000;
+    color: var(--color-header-text);
     font-size: 3.5rem;
     font-style: normal;
     font-weight: 700;
@@ -45,7 +45,7 @@
 }
 
 .eshop-header-intro p {
-    color: #000;
+    color: var(--color-header-text);
     font-size: 2rem;
     font-style: normal;
     font-weight: 700;

src/WebApp/Components/Layout/MainLayout.razor

@@ -1,5 +1,7 @@
 @using eShop.WebApp.Components.Chatbot
+@using eShop.WebApp.Services
 @inherits LayoutComponentBase
+@inject IThemeService ThemeService
 
 <HeaderBar />
 @Body
@@ -11,3 +13,13 @@
     <a href="" class="reload">Reload</a>
     <a class="dismiss">🗙</a>
 </div>
+
+@code {
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await ThemeService.InitializeAsync();
+        }
+    }
+}

src/WebApp/Components/Layout/MainLayout.razor.css

@@ -1,5 +1,5 @@
 #blazor-error-ui {
-    background: lightyellow;
+    background: var(--color-hover);
     bottom: 0;
     box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
     display: none;
@@ -8,11 +8,14 @@
     position: fixed;
     width: 100%;
     z-index: 1000;
+    color: var(--color-text);
+    border-top: 1px solid var(--color-border);
 }
 
     #blazor-error-ui .dismiss {
         cursor: pointer;
         position: absolute;
         right: 0.75rem;
         top: 0.5rem;
+        color: var(--color-text);
     }

src/WebApp/Components/Layout/ThemeToggle.razor

@@ -0,0 +1,36 @@
+@using eShop.WebApp.Services
+@inject IThemeService ThemeService
+@implements IDisposable
+
+<button class="theme-toggle" @onclick="ToggleTheme" aria-label="Toggle dark mode">
+    @if (ThemeService.IsDarkMode)
+    {
+        <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+            <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
+        </svg>
+    }
+    else
+    {
+        <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+            <path d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/>
+        </svg>
+    }
+</button>
+
+@code {
+    protected override async Task OnInitializedAsync()
+    {
+        ThemeService.ThemeChanged += StateHasChanged;
+        await ThemeService.InitializeAsync();
+    }
+
+    private async Task ToggleTheme()
+    {
+        await ThemeService.ToggleThemeAsync();
+    }
+
+    public void Dispose()
+    {
+        ThemeService.ThemeChanged -= StateHasChanged;
+    }
+}

src/WebApp/Components/Layout/ThemeToggle.razor.css

@@ -0,0 +1,29 @@
+.theme-toggle {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    transition: background-color 0.2s ease;
+    color: var(--color-text);
+}
+
+.theme-toggle:hover {
+    background-color: var(--color-hover);
+}
+
+.theme-toggle:focus {
+    outline: 2px solid var(--color-focus);
+    outline-offset: 2px;
+}
+
+.theme-toggle svg {
+    transition: transform 0.2s ease;
+}
+
+.theme-toggle:hover svg {
+    transform: scale(1.1);
+}

src/WebApp/Components/Layout/UserMenu.razor.css

@@ -6,21 +6,24 @@
 .dropdown-content {
     display: none;
     position: absolute;
-    background-color: #FFF;
+    background-color: var(--color-dropdown-bg);
     min-width: 8rem;
     box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2);
     z-index: 1;
+    border: 1px solid var(--color-border);
+    border-radius: 0.25rem;
 }
 
 .dropdown-item {
     padding: 0.75rem 1rem;
     text-decoration: none;
     display: block;
-    color: #000;
+    color: var(--color-dropdown-text);
+    transition: background-color 0.2s ease;
 }
 
 .dropdown-item:hover {
-    background-color: #ddd;
+    background-color: var(--color-dropdown-hover);
 }
 
 .dropdown-menu:hover .dropdown-content {
@@ -34,4 +37,5 @@
     width: 100%;
     padding: 0;
     text-align: left;
+    color: inherit;
 }

src/WebApp/Components/Pages/Cart/CartPage.razor.css

@@ -17,7 +17,7 @@
     padding: 0.5rem 0;
     align-items: center;
     align-self: stretch;
-    border-bottom: 1px solid #D2D2D2;
+    border-bottom: 1px solid var(--color-border);
     flex-grow: 1;
 }
 
@@ -27,7 +27,7 @@
     justify-content: space-between;
     align-items: center;
     align-self: stretch;
-    border-bottom: 1px solid #D2D2D2;
+    border-bottom: 1px solid var(--color-border);
 }
 
 .cart-items .cart-item .catalog-item-info {
@@ -55,6 +55,9 @@
 .cart-items .cart-item .catalog-item-quantity input {
     max-width: 3rem;
     padding: 1rem 0.75rem;
+    background-color: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
 }
 
 .cart-items .cart-item .catalog-item-info img {
@@ -69,7 +72,8 @@
     align-items: flex-start;
     gap: 1rem;
     flex-shrink: 0;
-    background: #F7F7F7;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
 }
 
 .cart-summary-header {
@@ -78,9 +82,9 @@
     justify-content: space-between;
     align-items: center;
     align-self: stretch;
-    border-bottom: 1px solid #000;
+    border-bottom: 1px solid var(--color-button-primary-bg);
     gap: 0.5rem;
-    color: #000;
+    color: var(--color-text);
     font-size: 1.25rem;
     font-weight: 600;
     line-height: 120%;
@@ -93,34 +97,36 @@
     align-items: flex-start;
     gap: 0.5rem;
     align-self: stretch;
-    border-bottom: 1px solid #444;
+    border-bottom: 1px solid var(--color-border);
 }
 
 .cart-summary-breakdown-line {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     align-self: stretch;
+    color: var(--color-text);
 }
 
 .cart-summary-total {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     align-self: stretch;
+    color: var(--color-text);
 }
 
 .cart-summary .cart-summary-link {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    color: #000;
+    color: var(--color-text);
     text-decoration: none;
 }
 
 .cart-summary .filter-badge {
-    background: #000;
-    color: #FFF;
+    background: var(--color-button-primary-bg);
+    color: var(--color-button-primary-text);
     font-size: 1rem;
     font-weight: 600;
     border-radius: 0.75rem;

src/WebApp/Components/Pages/Catalog/Catalog.razor.css

@@ -26,8 +26,8 @@
 }
 
 .catalog .catalog-filter .filter-badge {
-    background: #000;
-    color: #FFF;
+    background: var(--color-button-primary-bg);
+    color: var(--color-button-primary-text);
     font-size: 1rem;
     font-weight: 600;
     border-radius: 0.75rem;
@@ -40,14 +40,14 @@
 }
 
 .catalog .catalog-filter-group h3 {
-    color: #000;
+    color: var(--color-text);
     font-size: 1rem;
     font-weight: 600;
     line-height: 150%;
 }
 
 .catalog .catalog-filter-group .catalog-filter-group-tags {
-    border-top: 1px solid #404040;
+    border-top: 1px solid var(--color-border);
     display: flex;
     padding: 0.75rem 0;
     align-items: center;
@@ -64,21 +64,23 @@
     align-items: center;
     gap: 0.25rem;
     border-radius: 1.25rem;
-    color: #404040;
+    color: var(--color-text-secondary);
     font-family: 'Open Sans';
     font-size: 1rem;
     font-style: normal;
     font-weight: 400;
     line-height: 150%;
+    transition: background-color 0.2s ease, color 0.2s ease;
 }
 
 .catalog-filter-group-tags .catalog-filter-tag:hover {
     cursor: pointer;
+    background-color: var(--color-hover);
 }
 
 .catalog-filter-group-tags .catalog-filter-tag.active {
-    background: #000;
-    color: #FFF;
+    background: var(--color-button-primary-bg);
+    color: var(--color-button-primary-text);
 }
 
 .catalog .catalog-items {
@@ -105,14 +107,15 @@
     justify-content: center;
     align-items: center;
     gap: 4px;
-    background: #F7F7F7;
-    color: #000;
+    background: var(--color-hover);
+    color: var(--color-text);
     text-decoration: none;
+    transition: background-color 0.2s ease, color 0.2s ease;
 }
 
 .page-links ::deep a.active-page {
-    color: #F7F7F7;
-    background-color: #000;
+    color: var(--color-button-primary-text);
+    background-color: var(--color-button-primary-bg);
 }