MindWorkAI/AI-Studio
1
0 Fork 0
mirror of https://github.com/MindWorkAI/AI-Studio.git synced 2026-10-17 18:58:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added color themes (dark & light) (#148)

Browse Source
This commit is contained in:
Thorsten Sommer authored and GitHub committed 2024-09-15 12:30:07 +02:00
1 parent 0ad7b8d4dd
commit e9998348c5
31 files changed
+350 -50
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/MindWork AI Studio/Layout/MainLayout.razor
+6 -4
View File
@@ -11,17 +11,17 @@
<MudDrawerContainer Class="mud-height-full absolute">
<MudDrawer @bind-Open="@this.navBarOpen" MiniWidth="@NAVBAR_COLLAPSED_WIDTH" Width="@NAVBAR_EXPANDED_WIDTH" Elevation="1" Fixed="@true" Variant="@DrawerVariant.Mini" OpenMiniOnHover="@(this.SettingsManager.ConfigurationData.App.NavigationBehavior is NavBehavior.EXPAND_ON_HOVER)" Color="Color.Default">
<MudNavMenu>
@foreach (var navBarItem in NAV_ITEMS)
@foreach (var navBarItem in this.navItems)
{
if (this.SettingsManager.ConfigurationData.App.NavigationBehavior is NavBehavior.NEVER_EXPAND_USE_TOOLTIPS)
{
<MudTooltip Text="@navBarItem.Name" Placement="Placement.Right">
<MudNavLink Href="@navBarItem.Path" Match="@(navBarItem.MatchAll ? NavLinkMatch.All : NavLinkMatch.Prefix)" Icon="@navBarItem.Icon" IconColor="@navBarItem.IconColor">@navBarItem.Name</MudNavLink>
<MudNavLink Href="@navBarItem.Path" Match="@(navBarItem.MatchAll ? NavLinkMatch.All : NavLinkMatch.Prefix)" Icon="@navBarItem.Icon" Style="@navBarItem.SetColorStyle(this.SettingsManager)" Class="custom-icon-color">@navBarItem.Name</MudNavLink>
</MudTooltip>
}
else
{
<MudNavLink Href="@navBarItem.Path" Match="@(navBarItem.MatchAll ? NavLinkMatch.All : NavLinkMatch.Prefix)" Icon="@navBarItem.Icon" IconColor="@navBarItem.IconColor">@navBarItem.Name</MudNavLink>
<MudNavLink Href="@navBarItem.Path" Match="@(navBarItem.MatchAll ? NavLinkMatch.All : NavLinkMatch.Prefix)" Icon="@navBarItem.Icon" Style="@navBarItem.SetColorStyle(this.SettingsManager)" Class="custom-icon-color">@navBarItem.Name</MudNavLink>
}
}
</MudNavMenu>
@@ -58,4 +58,6 @@
</MudContainer>
</MudMainContent>
</MudLayout>
</MudPaper>
</MudPaper>
<MudThemeProvider @ref="@this.themeProvider" Theme="@this.ColorTheme" IsDarkMode="@this.useDarkMode" />
app/MindWork AI Studio/Layout/MainLayout.razor.cs
+45 -11
View File
@@ -34,6 +34,9 @@ public partial class MainLayout : LayoutComponentBase, IMessageBusReceiver, IDis
[Inject]
private ILogger<MainLayout> Logger { get; init; } = null!;
[Inject]
private MudTheme ColorTheme { get; init; } = null!;
public string AdditionalHeight { get; private set; } = "0em";
@@ -50,16 +53,10 @@ public partial class MainLayout : LayoutComponentBase, IMessageBusReceiver, IDis
private bool userDismissedUpdate;
private string updateToVersion = string.Empty;
private UpdateResponse? currentUpdateResponse;
private static readonly IReadOnlyCollection<NavBarItem> NAV_ITEMS = new List<NavBarItem>
{
new("Home", Icons.Material.Filled.Home, Color.Default, Routes.HOME, true),
new("Chat", Icons.Material.Filled.Chat, Color.Default, Routes.CHAT, false),
new("Assistants", Icons.Material.Filled.Apps, Color.Default, Routes.ASSISTANTS, false),
new("Supporters", Icons.Material.Filled.Favorite, Color.Error, Routes.SUPPORTERS, false),
new("About", Icons.Material.Filled.Info, Color.Default, Routes.ABOUT, false),
new("Settings", Icons.Material.Filled.Settings, Color.Default, Routes.SETTINGS, false),
};
private MudThemeProvider themeProvider = null!;
private bool useDarkMode;
private IReadOnlyCollection<NavBarItem> navItems = [];
#region Overrides of ComponentBase
@@ -87,7 +84,7 @@ public partial class MainLayout : LayoutComponentBase, IMessageBusReceiver, IDis
// Register this component with the message bus:
this.MessageBus.RegisterComponent(this);
this.MessageBus.ApplyFilters(this, [], [ Event.UPDATE_AVAILABLE, Event.USER_SEARCH_FOR_UPDATE, Event.CONFIGURATION_CHANGED ]);
this.MessageBus.ApplyFilters(this, [], [ Event.UPDATE_AVAILABLE, Event.USER_SEARCH_FOR_UPDATE, Event.CONFIGURATION_CHANGED, Event.COLOR_THEME_CHANGED ]);
// Set the snackbar for the update service:
UpdateService.SetBlazorDependencies(this.Snackbar);
@@ -96,6 +93,20 @@ public partial class MainLayout : LayoutComponentBase, IMessageBusReceiver, IDis
// Should the navigation bar be open by default?
if(this.SettingsManager.ConfigurationData.App.NavigationBehavior is NavBehavior.ALWAYS_EXPAND)
this.navBarOpen = true;
await this.themeProvider.WatchSystemPreference(this.SystemeThemeChanged);
await this.UpdateThemeConfiguration();
var palette = this.ColorTheme.GetCurrentPalette(this.SettingsManager);
this.navItems = new List<NavBarItem>
{
new("Home", Icons.Material.Filled.Home, palette.DarkLighten, palette.GrayLight, Routes.HOME, true),
new("Chat", Icons.Material.Filled.Chat, palette.DarkLighten, palette.GrayLight, Routes.CHAT, false),
new("Assistants", Icons.Material.Filled.Apps, palette.DarkLighten, palette.GrayLight, Routes.ASSISTANTS, false),
new("Supporters", Icons.Material.Filled.Favorite, palette.Error.Value, "#801a00", Routes.SUPPORTERS, false),
new("About", Icons.Material.Filled.Info, palette.DarkLighten, palette.GrayLight, Routes.ABOUT, false),
new("Settings", Icons.Material.Filled.Settings, palette.DarkLighten, palette.GrayLight, Routes.SETTINGS, false),
};
await base.OnInitializedAsync();
}
@@ -131,6 +142,11 @@ public partial class MainLayout : LayoutComponentBase, IMessageBusReceiver, IDis
else
this.navBarOpen = false;
await this.UpdateThemeConfiguration();
this.StateHasChanged();
break;
case Event.COLOR_THEME_CHANGED:
this.StateHasChanged();
break;
}
@@ -217,6 +233,24 @@ public partial class MainLayout : LayoutComponentBase, IMessageBusReceiver, IDis
await MessageBus.INSTANCE.SendMessage<bool>(this, Event.RESET_CHAT_STATE);
}
}
private async Task SystemeThemeChanged(bool isDark)
{
this.Logger.LogInformation($"The system theme changed to {(isDark ? "dark" : "light")}.");
await this.UpdateThemeConfiguration();
}
private async Task UpdateThemeConfiguration()
{
if (this.SettingsManager.ConfigurationData.App.PreferredTheme is Themes.SYSTEM)
this.useDarkMode = await this.themeProvider.GetSystemPreference();
else
this.useDarkMode = this.SettingsManager.ConfigurationData.App.PreferredTheme == Themes.DARK;
this.SettingsManager.IsDarkMode = this.useDarkMode;
await this.MessageBus.SendMessage<bool>(this, Event.COLOR_THEME_CHANGED);
this.StateHasChanged();
}
#region Implementation of IDisposable
app/MindWork AI Studio/Layout/NavBarItem.cs
+6 -1
View File
@@ -1,3 +1,8 @@
using AIStudio.Settings;
namespace AIStudio.Layout;
public record NavBarItem(string Name, string Icon, Color IconColor, string Path, bool MatchAll);
public record NavBarItem(string Name, string Icon, string IconLightColor, string IconDarkColor, string Path, bool MatchAll)
{
public string SetColorStyle(SettingsManager settingsManager) => $"--custom-icon-color: {(settingsManager.IsDarkMode ? this.IconDarkColor : this.IconLightColor)};";
}