✨ Phase 1.3: Theme & Global Styles Integration

MudBlazor Theme Configuration ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✅ AppTheme.cs (Client/Theme/) - Light theme: Professional Material Design colors - Dark theme: Modern dark mode palette - Complete typography system (H1-H6, Body1-2, Button, Caption) - Layout properties (Border radius, Drawer width, AppBar height) - Color variables: Primary, Secondary, Success, Warning, Error, Info ✅ Global Styles (app.css) - Base reset and typography - Utility classes (spacing, flex, gaps, text colors) - MudBlazor component overrides - Skeleton loading animation - Form, table, and button styling - Responsive design (mobile-first) - Accessibility support (prefers-reduced-motion) - Print styles - Smooth transitions and animations ✅ App.razor Integration - MudThemeProvider with theme binding - Default: Light theme on initialization - Ready for theme switching Features: - Consistent Material Design - Custom scrollbar styling - Card elevation effects - Navigation link styling - Input field styling - Table styling with hover effects - Responsive breakpoints - Animation utilities (fade-in, slide-in) Next: Phase 2 - Admin UI Development Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-05 16:38:41 +09:00
parent 2fb1a3bf18
commit 908c9ebc9a
3 changed files with 487 additions and 1 deletions
@@ -17,7 +17,7 @@
 </head>

 <body>
-    <MudThemeProvider />
+    <MudThemeProvider Theme="@_theme" />
    <MudDialogProvider />
    <MudSnackbarProvider />
    <Routes @rendermode="InteractiveWebAssembly" />
@@ -27,4 +27,15 @@
    <script src="@Assets["_framework/blazor.web.js"]"></script>
 </body>

+@code {
+    private MudTheme _theme = AppTheme.LightTheme;
+
+    protected override void OnInitialized()
+    {
+        _theme = AppTheme.LightTheme;
+    }
+}
+
+@using QuantEngine.Web.Client.Theme
+
 </html>