From a12115830779b1543a7bf9a862226d97f5585406 Mon Sep 17 00:00:00 2001 From: Felix-CodingClimber Date: Mon, 1 Apr 2024 22:12:37 +0200 Subject: [PATCH] Implemented custom theming system based on MudThemeProvider. Used for DiffViewers. --- .../.config/dotnet-tools.json | 12 ++++++++ .../Components/App.razor | 1 - .../Components/Layout/MainLayout.razor | 18 +++++++++--- .../Components/Routes.razor | 4 --- .../DotNetElements.CrudExample/TestDb.db-shm | Bin 32768 -> 0 bytes .../DotNetElements.CrudExample/TestDb.db-wal | 0 .../DiffViewer/CompactDiffViewer.razor | 9 ++---- .../DiffViewer/DiffLine.razor | 4 +-- .../DiffViewer/SideBySideDiffViewer.razor | 4 +-- src/DotNetElements.Web.Blazor/DnePalette.cs | 26 ++++++++++++++++++ .../DneThemeProvider.razor | 4 +++ .../DneThemingProvider.razor | 5 ++++ .../DneThemingProvider.razor.cs | 17 ++++++++++++ .../MudProviders.razor | 24 ++++++++++++++++ 14 files changed, 108 insertions(+), 20 deletions(-) create mode 100644 samples/DotNetElements.CrudExample/.config/dotnet-tools.json delete mode 100644 samples/DotNetElements.CrudExample/TestDb.db-shm delete mode 100644 samples/DotNetElements.CrudExample/TestDb.db-wal create mode 100644 src/DotNetElements.Web.Blazor/DnePalette.cs create mode 100644 src/DotNetElements.Web.Blazor/DneThemeProvider.razor create mode 100644 src/DotNetElements.Web.Blazor/DneThemingProvider.razor create mode 100644 src/DotNetElements.Web.Blazor/DneThemingProvider.razor.cs create mode 100644 src/DotNetElements.Web.Blazor/MudProviders.razor diff --git a/samples/DotNetElements.CrudExample/.config/dotnet-tools.json b/samples/DotNetElements.CrudExample/.config/dotnet-tools.json new file mode 100644 index 0000000..d9d129c --- /dev/null +++ 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" + ] + } + } +} \ No newline at end of file diff --git a/samples/DotNetElements.CrudExample/Components/App.razor b/samples/DotNetElements.CrudExample/Components/App.razor index 59ce88e..36a0a79 100644 --- a/samples/DotNetElements.CrudExample/Components/App.razor +++ b/samples/DotNetElements.CrudExample/Components/App.razor @@ -8,7 +8,6 @@ - diff --git a/samples/DotNetElements.CrudExample/Components/Layout/MainLayout.razor b/samples/DotNetElements.CrudExample/Components/Layout/MainLayout.razor index d04151d..0e5ee13 100644 --- 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 + + - + + @@ -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; + } } \ No newline at end of file diff --git a/samples/DotNetElements.CrudExample/Components/Routes.razor b/samples/DotNetElements.CrudExample/Components/Routes.razor index d4feabe..b725bab 100644 --- a/samples/DotNetElements.CrudExample/Components/Routes.razor +++ b/samples/DotNetElements.CrudExample/Components/Routes.razor @@ -4,7 +4,3 @@ - - - - diff --git a/samples/DotNetElements.CrudExample/TestDb.db-shm b/samples/DotNetElements.CrudExample/TestDb.db-shm deleted file mode 100644 index fe9ac2845eca6fe6da8a63cd096d9cf9e24ece10..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 32768 zcmeIuAr62r3 + BackgroundColor="@($"var({DnePalette.DiffLineNew})")" /> 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 index 3ee10ca..d95da2d 100644 --- 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 index f3feb5c..fc22a4f 100644 --- 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 new file mode 100644 index 0000000..7c9e404 --- /dev/null +++ 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 new file mode 100644 index 0000000..4ac3097 --- /dev/null +++ b/src/DotNetElements.Web.Blazor/DneThemeProvider.razor @@ -0,0 +1,4 @@ +@inherits DneThemingProvider + + + \ No newline at end of file diff --git a/src/DotNetElements.Web.Blazor/DneThemingProvider.razor b/src/DotNetElements.Web.Blazor/DneThemingProvider.razor new file mode 100644 index 0000000..04e4dd5 --- /dev/null +++ b/src/DotNetElements.Web.Blazor/DneThemingProvider.razor @@ -0,0 +1,5 @@ +@inherits MudThemingProvider + +@{ + base.BuildRenderTree(__builder); +} \ No newline at end of file diff --git a/src/DotNetElements.Web.Blazor/DneThemingProvider.razor.cs b/src/DotNetElements.Web.Blazor/DneThemingProvider.razor.cs new file mode 100644 index 0000000..5f8ffb0 --- /dev/null +++ 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 new file mode 100644 index 0000000..07105e0 --- /dev/null +++ b/src/DotNetElements.Web.Blazor/MudProviders.razor @@ -0,0 +1,24 @@ + + + + +@code +{ + [Parameter, EditorRequired] + public bool DarkModeActive { get; set; } + + [Parameter] + public EventCallback 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); + } + } +} \ No newline at end of file