Implemented custom theming system based on MudThemeProvider. Used for…

… DiffViewers.
Felix-CodingClimber · Apr 1, 2024 · a121158 · a121158
1 parent 1092e63
commit a121158
Show file tree

Hide file tree

Showing 14 changed files with 108 additions and 20 deletions.
diff --git a/samples/DotNetElements.CrudExample/.config/dotnet-tools.json b/samples/DotNetElements.CrudExample/.config/dotnet-tools.json
@@ -0,0 +1,12 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {
+    "dotnet-ef": {
+      "version": "8.0.3",
+      "commands": [
+        "dotnet-ef"
+      ]
+    }
+  }
+}
diff --git a/samples/DotNetElements.CrudExample/Components/App.razor b/samples/DotNetElements.CrudExample/Components/App.razor
@@ -8,7 +8,6 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="app.css" />
-    <link rel="stylesheet" href="BlazorCrud.styles.css" />
     <link rel="icon" type="image/png" href="favicon.png" />
     <HeadOutlet @rendermode="@InteractiveServer" />
 </head>

diff --git a/samples/DotNetElements.CrudExample/Components/Layout/MainLayout.razor b/samples/DotNetElements.CrudExample/Components/Layout/MainLayout.razor
@@ -1,9 +1,13 @@
-@inherits LayoutComponentBase
+@using DotNetElements.Web.Blazor
+@inherits LayoutComponentBase
+
+<MudProviders @bind-DarkModeActive="@darkModeActive" />
 
 <MudLayout>
 	<MudAppBar Elevation="1">
-		<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@DrawerToggle" />
+		<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@OnToggleDrawer" />
 		<MudSpacer />
+		<ThemeToggleButton @bind-DarkModeActive="darkModeActive" />
 		<MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Edge="Edge.End" />
 	</MudAppBar>
 	<MudDrawer @bind-Open="@drawerOpen">
@@ -21,10 +25,16 @@
 
 @code
 {
-	bool drawerOpen = true;
+	private bool drawerOpen = true;
+	private bool darkModeActive;
 
-	void DrawerToggle()
+	private void OnToggleDrawer()
 	{
 		drawerOpen = !drawerOpen;
 	}
+
+	private void OnToggleDarkMode()
+	{
+		darkModeActive = !darkModeActive;
+	}
 }
diff --git a/samples/DotNetElements.CrudExample/Components/Routes.razor b/samples/DotNetElements.CrudExample/Components/Routes.razor
@@ -4,7 +4,3 @@
 		<FocusOnNavigate RouteData="@routeData" Selector="h1" />
 	</Found>
 </Router>
-
-<MudThemeProvider />
-<MudDialogProvider />
-<MudSnackbarProvider />
diff --git a/samples/DotNetElements.CrudExample/TestDb.db-shm b/samples/DotNetElements.CrudExample/TestDb.db-shm
diff --git a/samples/DotNetElements.CrudExample/TestDb.db-wal b/samples/DotNetElements.CrudExample/TestDb.db-wal
diff --git a/src/DotNetElements.Web.Blazor/DiffViewer/CompactDiffViewer.razor b/src/DotNetElements.Web.Blazor/DiffViewer/CompactDiffViewer.razor
@@ -30,7 +30,7 @@
                               ChangeType="line.Type"
                               Text="@line.Text"
                               SubPieces="line.SubPieces"
-                              BackgroundColor="@GetNewDiffLineBackground()" />
+                              BackgroundColor="@($"var({DnePalette.DiffLineNew})")" />
                 </tr>
 
                 hasOldLine = false;
@@ -58,11 +58,6 @@ else
 
     private string GetOldDiffLineBackground(DiffPiece diffLine)
     {
-        return diffLine.Type is ChangeType.Unchanged ? "" : "#FDF2D0;";
-    }
-
-    private string GetNewDiffLineBackground()
-    {
-        return hasOldLine ? "#DDEEDD" : "#DDFFDD";
+        return diffLine.Type is ChangeType.Unchanged ? DnePalette.DiffLineUnchanged.ToString() : $"var({DnePalette.DiffLineOld})";
     }
 }
diff --git a/src/DotNetElements.Web.Blazor/DiffViewer/DiffLine.razor b/src/DotNetElements.Web.Blazor/DiffViewer/DiffLine.razor
@@ -94,9 +94,9 @@
         string style = "border-radius: 10%; padding: 1px 4px;";
 
         if (changeType is ChangeType.Deleted or ChangeType.Modified)
-            style += " background-color: #FFB6BA;";
+            style += $" background-color: var({DnePalette.DiffPieceDeleted});";
         else if (changeType is ChangeType.Inserted)
-            style += "background-color: #97F295;";
+            style += $"background-color: var({DnePalette.DiffPieceInserted});";
 
         return style;
     }

diff --git a/src/DotNetElements.Web.Blazor/DiffViewer/SideBySideDiffViewer.razor b/src/DotNetElements.Web.Blazor/DiffViewer/SideBySideDiffViewer.razor
@@ -48,11 +48,11 @@ else
 
     private string GetOldDiffLineBackground(DiffPiece diffLine)
     {
-        return diffLine.Type is ChangeType.Unchanged or ChangeType.Imaginary ? "" : "#FDF2D0;";
+        return diffLine.Type is ChangeType.Unchanged or ChangeType.Imaginary ? $"var({DnePalette.DiffLineUnchanged})" : $"var({DnePalette.DiffLineOld})";
     }
 
     private string GetNewDiffLineBackground(DiffPiece diffLine)
     {
-        return diffLine.Type is ChangeType.Unchanged ? "" : "#DDFFDD";
+        return diffLine.Type is ChangeType.Unchanged ? $"var({DnePalette.DiffLineUnchanged})" : $"var({DnePalette.DiffLineNew})";
     }
 }
diff --git a/src/DotNetElements.Web.Blazor/DnePalette.cs b/src/DotNetElements.Web.Blazor/DnePalette.cs
@@ -0,0 +1,26 @@
+using MudBlazor.Utilities;
+
+namespace DotNetElements.Web.Blazor;
+
+public static class DnePalette
+{
+    public const string DiffLineUnchanged = "--dne-palette-diff-line-unchanged";
+    public const string DiffLineUnchangedDark = "#0D1117";
+	public const string DiffLineUnchangedLight = "#FFFFFF";
+
+    public const string DiffLineOld = "--dne-palette-diff-line-old";
+	public const string DiffLineOldDark = "#25171C";
+    public const string DiffLineOldLight = "#FFEBE9";
+
+    public const string DiffLineNew = "--dne-palette-diff-line-new";
+    public const string DiffLineNewDark = "#12261E";
+    public const string DiffLineNewLight = "#E6FFEC";
+
+    public const string DiffPieceDeleted = "--dne-palette-diff-piece-deleted";
+    public const string DiffPieceDeletedDark = "#792E2E";
+    public const string DiffPieceDeletedLight = "#FFC1C0";
+
+    public const string DiffPieceInserted = "--dne-palette-diff-piece-inserted";
+    public const string DiffPieceInsertedDark = "#1D572D";
+    public const string DiffPieceInsertedLight = "#ABF2BC";
+}
diff --git a/src/DotNetElements.Web.Blazor/DneThemeProvider.razor b/src/DotNetElements.Web.Blazor/DneThemeProvider.razor
@@ -0,0 +1,4 @@
+@inherits DneThemingProvider
+
+<DneThemingProvider Theme="Theme" DefaultScrollbar="DefaultScrollbar" IsDarkMode="IsDarkMode" IsDarkModeChanged="IsDarkModeChanged" />
+<MudPopoverProvider />
diff --git a/src/DotNetElements.Web.Blazor/DneThemingProvider.razor b/src/DotNetElements.Web.Blazor/DneThemingProvider.razor
@@ -0,0 +1,5 @@
+@inherits MudThemingProvider
+
+@{
+    base.BuildRenderTree(__builder);
+}
diff --git a/src/DotNetElements.Web.Blazor/DneThemingProvider.razor.cs b/src/DotNetElements.Web.Blazor/DneThemingProvider.razor.cs
@@ -0,0 +1,17 @@
+using System.Text;
+
+namespace DotNetElements.Web.Blazor;
+
+partial class DneThemingProvider : MudThemingProvider
+{
+    protected override void GenerateTheme(StringBuilder theme)
+    {
+        base.GenerateTheme(theme);
+
+        theme.AppendLine($"{DnePalette.DiffLineUnchanged}: {(IsDarkMode ? DnePalette.DiffLineUnchangedDark : DnePalette.DiffLineUnchangedLight)};");
+        theme.AppendLine($"{DnePalette.DiffLineOld}: {(IsDarkMode ? DnePalette.DiffLineOldDark : DnePalette.DiffLineOldLight)};");
+        theme.AppendLine($"{DnePalette.DiffLineNew}: {(IsDarkMode ? DnePalette.DiffLineNewDark : DnePalette.DiffLineNewLight)};");
+        theme.AppendLine($"{DnePalette.DiffPieceDeleted}: {(IsDarkMode ? DnePalette.DiffPieceDeletedDark : DnePalette.DiffPieceDeletedLight)};");
+        theme.AppendLine($"{DnePalette.DiffPieceInserted}: {(IsDarkMode ? DnePalette.DiffPieceInsertedDark : DnePalette.DiffPieceInsertedLight)};");
+    }
+}
diff --git a/src/DotNetElements.Web.Blazor/MudProviders.razor b/src/DotNetElements.Web.Blazor/MudProviders.razor
@@ -0,0 +1,24 @@
+<MudDialogProvider />
+<MudSnackbarProvider />
+<DneThemeProvider @ref="@mudThemeProvider" @bind-IsDarkMode="@DarkModeActive" />
+
+@code
+{
+    [Parameter, EditorRequired]
+    public bool DarkModeActive { get; set; }
+
+    [Parameter]
+    public EventCallback<bool> DarkModeActiveChanged { get; set; }
+
+    private DneThemeProvider mudThemeProvider = default!;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            DarkModeActive = await mudThemeProvider.GetSystemPreference();
+            if (DarkModeActiveChanged.HasDelegate)
+                await DarkModeActiveChanged.InvokeAsync(DarkModeActive);
+        }
+    }
+}