✨ 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
@@ -0,0 +1,178 @@
+using MudBlazor;
+
+namespace QuantEngine.Web.Client.Theme;
+
+public static class AppTheme
+{
+    public static MudTheme LightTheme => new()
+    {
+        Palette = new PaletteLight
+        {
+            Primary = "#3f51b5",
+            Secondary = "#f50057",
+            Success = "#4caf50",
+            Warning = "#ff9800",
+            Error = "#f44336",
+            Info = "#2196f3",
+            Dark = "#121212",
+            Background = "#fafafa",
+            Surface = "#ffffff",
+            TextPrimary = "#212121",
+            TextSecondary = "rgba(0,0,0,0.6)",
+            DrawerBackground = "#ffffff",
+            DrawerText = "#212121",
+            AppbarBackground = "#3f51b5",
+            AppbarText = "#ffffff",
+            ActionDefault = "#c0c0c0",
+            ActionDisabled = "#f5f5f5",
+            ActionDisabledBackground = "rgba(0,0,0,0.12)",
+            Divider = "#e0e0e0",
+            DividerLight = "#f5f5f5",
+            TableLines = "#e0e0e0",
+            LinesDefault = "#e0e0e0",
+            LinesInputBorder = "#bdbdbd",
+            TextDisabled = "rgba(0,0,0,0.38)",
+            BorderRadius = "4px",
+            OverlayShadow = "0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12)",
+            Elevation = new Dictionary<int, string>
+            {
+                { 0, "none" },
+                { 1, "0 2px 1px -1px rgba(0,0,0,0.2),0 1px 1px 0 rgba(0,0,0,0.14),0 1px 3px 0 rgba(0,0,0,0.12)" },
+                { 2, "0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12)" },
+                { 3, "0 3px 3px -2px rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.14),0 1px 8px 0 rgba(0,0,0,0.12)" },
+                { 4, "0 2px 4px -1px rgba(0,0,0,0.2),0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12)" },
+            }
+        },
+        Typography = new Typography
+        {
+            Default = new DefaultTypography
+            {
+                FontFamily = "Roboto, sans-serif",
+                FontSize = "1rem",
+                FontWeight = 400,
+                LineHeight = 1.5,
+                LetterSpacing = "0.5px"
+            },
+            H1 = new H1Typography
+            {
+                FontSize = "6rem",
+                FontWeight = 300,
+                LineHeight = 1.167,
+                LetterSpacing = "-0.015625em"
+            },
+            H2 = new H2Typography
+            {
+                FontSize = "3.75rem",
+                FontWeight = 300,
+                LineHeight = 1.2,
+                LetterSpacing = "-0.0083333333em"
+            },
+            H3 = new H3Typography
+            {
+                FontSize = "3rem",
+                FontWeight = 400,
+                LineHeight = 1.167,
+                LetterSpacing = "0em"
+            },
+            H4 = new H4Typography
+            {
+                FontSize = "2.125rem",
+                FontWeight = 500,
+                LineHeight = 1.235,
+                LetterSpacing = "0.0125em"
+            },
+            H5 = new H5Typography
+            {
+                FontSize = "1.5rem",
+                FontWeight = 500,
+                LineHeight = 1.334,
+                LetterSpacing = "0em"
+            },
+            H6 = new H6Typography
+            {
+                FontSize = "1.25rem",
+                FontWeight = 600,
+                LineHeight = 1.6,
+                LetterSpacing = "0.0125em"
+            },
+            Body1 = new Body1Typography
+            {
+                FontSize = "1rem",
+                FontWeight = 500,
+                LineHeight = 1.5,
+                LetterSpacing = "0.03125em"
+            },
+            Body2 = new Body2Typography
+            {
+                FontSize = "0.875rem",
+                FontWeight = 400,
+                LineHeight = 1.43,
+                LetterSpacing = "0.0178571429em"
+            },
+            Button = new ButtonTypography
+            {
+                FontSize = "0.875rem",
+                FontWeight = 600,
+                LineHeight = 1.75,
+                LetterSpacing = "0.0892857143em"
+            },
+            Caption = new CaptionTypography
+            {
+                FontSize = "0.75rem",
+                FontWeight = 400,
+                LineHeight = 1.66,
+                LetterSpacing = "0.0333333333em"
+            }
+        },
+        LayoutProperties = new LayoutProperties
+        {
+            DefaultBorderRadius = "4px",
+            DrawerWidthLeft = "256px",
+            DrawerWidthRight = "256px",
+            AppbarHeight = "64px",
+        }
+    };
+
+    public static MudTheme DarkTheme => new()
+    {
+        Palette = new PaletteDark
+        {
+            Primary = "#bb86fc",
+            Secondary = "#03dac6",
+            Success = "#4caf50",
+            Warning = "#ff9800",
+            Error = "#cf6679",
+            Info = "#2196f3",
+            Dark = "#121212",
+            Background = "#121212",
+            Surface = "#1e1e1e",
+            TextPrimary = "#ffffff",
+            TextSecondary = "rgba(255,255,255,0.7)",
+            DrawerBackground = "#1e1e1e",
+            DrawerText = "#ffffff",
+            AppbarBackground = "#1f1f1f",
+            AppbarText = "#ffffff",
+            ActionDefault = "#3f3f3f",
+            ActionDisabled = "#1e1e1e",
+            ActionDisabledBackground = "rgba(255,255,255,0.12)",
+            Divider = "#37474f",
+            DividerLight = "#2c3e50",
+            TableLines = "#37474f",
+            LinesDefault = "#37474f",
+            LinesInputBorder = "#555555",
+            TextDisabled = "rgba(255,255,255,0.38)",
+            BorderRadius = "4px",
+            OverlayShadow = "0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12)",
+            Elevation = new Dictionary<int, string>
+            {
+                { 0, "none" },
+                { 1, "0 2px 1px -1px rgba(0,0,0,0.2),0 1px 1px 0 rgba(0,0,0,0.14),0 1px 3px 0 rgba(0,0,0,0.12)" },
+                { 2, "0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12)" },
+                { 3, "0 3px 3px -2px rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.14),0 1px 8px 0 rgba(0,0,0,0.12)" },
+                { 4, "0 2px 4px -1px rgba(0,0,0,0.2),0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12)" },
+            }
+        },
+        Typography = LightTheme.Typography,
+        LayoutProperties = LightTheme.LayoutProperties
+    };
+}