-
Notifications
You must be signed in to change notification settings - Fork 476
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Theme Detection (Dark Mode) #246
Merged
tlmii
merged 6 commits into
dotnet:main
from
tlmii:dev/system-theme-detection-and-dark-mode
Oct 12, 2023
Merged
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
f6d05c8
Theme Detection (Dark Mode)
tlmii 7f5b0f0
Add comment
tlmii 1391952
Merge branch 'main' into dev/system-theme-detection-and-dark-mode
tlmii a43e8c8
Update MainLayout.razor
vnbaaij 84aad88
Update MainLayout.razor.cs
vnbaaij a396e7b
Update MainLayout.razor.cs
vnbaaij File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,43 @@ | ||
| @using Aspire.Dashboard.Model | ||
| @using Microsoft.AspNetCore.Http | ||
| @using Microsoft.Fast.Components.FluentUI.DesignTokens | ||
| @inject IDashboardViewModelService dashboardViewModelService | ||
| @inject IJSRuntime JS | ||
| @inject BaseLayerLuminance BaseLayerLuminance | ||
| @inject PersistentComponentState ApplicationState | ||
| @inherits LayoutComponentBase | ||
|
|
||
| <div> | ||
| <FluentLayout> | ||
| <FluentHeader Style="margin-bottom:0px">@dashboardViewModelService.ApplicationName Dashboard</FluentHeader> | ||
| <FluentStack Orientation="Orientation.Horizontal" Width="100%"> | ||
| <FluentDesignSystemProvider BaseLayerLuminance="@_baseLayerLuminance"> | ||
| <FluentLayout> | ||
| <FluentHeader Style="margin-bottom:0px">@dashboardViewModelService.ApplicationName Dashboard</FluentHeader> | ||
| <FluentStack Orientation="Orientation.Horizontal" Width="100%"> | ||
| <div class="nav-menu-container"> | ||
| <FluentNavMenu Width="250" Collapsible="true"> | ||
| <FluentNavLink Icon="@(new Icons.Regular.Size24.AppGeneric())" Href="/" Match="NavLinkMatch.All">Projects</FluentNavLink> | ||
| <FluentNavLink Icon="@(new Icons.Regular.Size24.BinFull())" Href="/Containers">Containers</FluentNavLink> | ||
| <FluentNavLink Icon="@(new Icons.Regular.Size24.AppGeneric())" Href="/Executables">Executables</FluentNavLink> | ||
| <FluentNavGroup Title="Logs" Icon="@(new Icons.Regular.Size24.SlideText())" Expanded="true" Gap="10px 0;"> | ||
| <FluentNavLink Icon="@(new Icons.Regular.Size24.SlideText())" Href="/ProjectLogs">Project</FluentNavLink> | ||
| <FluentNavLink Icon="@(new Icons.Regular.Size24.SlideText())" Href="/ContainerLogs">Container</FluentNavLink> | ||
| <FluentNavLink Icon="@(new Icons.Regular.Size24.SlideText())" Href="/ExecutableLogs">Executable</FluentNavLink> | ||
| <FluentNavLink Icon="@(new Icons.Regular.Size24.SlideTextSparkle())" Href="/StructuredLogs">Structured</FluentNavLink> | ||
| </FluentNavGroup> | ||
| <FluentNavLink Icon="@(new Icons.Regular.Size24.GanttChart())" Href="/Traces">Traces</FluentNavLink> | ||
| </FluentNavMenu> | ||
| </div> | ||
| <FluentBodyContent Class="custom-body-content"> | ||
| @Body | ||
| </FluentBodyContent> | ||
|
|
||
| <FluentNavMenu Width="250" Collapsible="true"> | ||
| <FluentNavLink Icon="@(new Icons.Regular.Size24.AppGeneric())" Href="/" Match="NavLinkMatch.All">Projects</FluentNavLink> | ||
| <FluentNavLink Icon="@(new Icons.Regular.Size24.BinFull())" Href="/Containers">Containers</FluentNavLink> | ||
| <FluentNavLink Icon="@(new Icons.Regular.Size24.AppGeneric())" Href="/Executables">Executables</FluentNavLink> | ||
| <FluentNavGroup Title="Logs" Icon="@(new Icons.Regular.Size24.SlideText())" Expanded="true" Gap="10px 0;"> | ||
| <FluentNavLink Icon="@(new Icons.Regular.Size24.SlideText())" Href="/ProjectLogs">Project</FluentNavLink> | ||
| <FluentNavLink Icon="@(new Icons.Regular.Size24.SlideText())" Href="/ContainerLogs">Container</FluentNavLink> | ||
| <FluentNavLink Icon="@(new Icons.Regular.Size24.SlideText())" Href="/ExecutableLogs">Executable</FluentNavLink> | ||
| <FluentNavLink Icon="@(new Icons.Regular.Size24.SlideTextSparkle())" Href="/StructuredLogs">Structured</FluentNavLink> | ||
| </FluentNavGroup> | ||
| <FluentNavLink Icon="@(new Icons.Regular.Size24.GanttChart())" Href="/Traces">Traces</FluentNavLink> | ||
| </FluentNavMenu> | ||
|
|
||
| <FluentBodyContent Class="custom-body-content"> | ||
| @Body | ||
| </FluentBodyContent> | ||
|
|
||
| </FluentStack> | ||
| </FluentLayout> | ||
| <FluentDialogProvider /> | ||
| <FluentTooltipProvider /> | ||
| <div id="blazor-error-ui"> | ||
| An unhandled error has occurred. | ||
| <a href="" class="reload">Reload</a> | ||
| <a class="dismiss">🗙</a> | ||
| </div> | ||
| </FluentStack> | ||
| </FluentLayout> | ||
| <FluentDialogProvider /> | ||
| <FluentTooltipProvider /> | ||
| <div id="blazor-error-ui"> | ||
| An unhandled error has occurred. | ||
| <a href="" class="reload">Reload</a> | ||
| <a class="dismiss">🗙</a> | ||
| </div> | ||
| </FluentDesignSystemProvider> | ||
| </div> |
71 changes: 71 additions & 0 deletions
71
src/Aspire.Dashboard/Components/Layout/MainLayout.razor.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| // Licensed to the .NET Foundation under one or more agreements. | ||
| // The .NET Foundation licenses this file to you under the MIT license. | ||
|
|
||
| using Microsoft.AspNetCore.Components; | ||
| using Microsoft.AspNetCore.Http; | ||
| using Microsoft.JSInterop; | ||
|
|
||
| namespace Aspire.Dashboard.Components.Layout; | ||
|
|
||
| public partial class MainLayout | ||
| { | ||
| [CascadingParameter] | ||
| public HttpContext? HttpContext { get; set; } | ||
|
|
||
| private const float LightModeLuminosity = 0.99f; | ||
| private const float DarkModeLuminosity = 0.15f; | ||
|
|
||
| private float _baseLayerLuminance = 0.9f; | ||
| private PersistingComponentStateSubscription _persistingSubscription; | ||
|
|
||
| protected override void OnParametersSet() | ||
| { | ||
| if (HttpContext is not null) | ||
| { | ||
| _persistingSubscription = ApplicationState.RegisterOnPersisting(PersistBaseLayerLuminance); | ||
|
|
||
| // Look to see if we have a cookie saying what the last system theme was | ||
| // and set the base layer luminance based on that | ||
| var lastSystemTheme = HttpContext.Request.Cookies["lastSystemTheme"]; | ||
| _baseLayerLuminance = lastSystemTheme switch | ||
| { | ||
| "dark" => DarkModeLuminosity, | ||
| _ => LightModeLuminosity | ||
| }; | ||
| } | ||
| } | ||
|
|
||
| protected override void OnInitialized() | ||
| { | ||
| // See if we got a base layer luminance value from the cookie and set the value | ||
| // This will avoid a flash of white if the last system theme and current system theme are both dark | ||
| if (ApplicationState.TryTakeFromJson<float>("baseLayerLuminance", out var restoredBaseLayerLuminance)) | ||
| { | ||
| _baseLayerLuminance = restoredBaseLayerLuminance; | ||
| StateHasChanged(); | ||
| } | ||
| } | ||
|
|
||
| protected override async Task OnAfterRenderAsync(bool firstRender) | ||
| { | ||
| if (firstRender) | ||
| { | ||
| // Use javascript to determine the current system theme and set the theme cookie | ||
| // based on that value. Then use the result of that to update the base layer luminance. | ||
| // If the system theme hasn't changed from last time, this will have no effect. | ||
| // If it has, we might have a flash of (last system theme color) before the current | ||
| // system theme color takes effect. | ||
| var isSystemThemeDark = await JS.InvokeAsync<bool>("setThemeCookie"); | ||
| _baseLayerLuminance = isSystemThemeDark ? DarkModeLuminosity : LightModeLuminosity; | ||
| StateHasChanged(); | ||
| } | ||
| } | ||
|
|
||
| private Task PersistBaseLayerLuminance() | ||
| { | ||
| // Persist the base layer luminance value from pre-rendering (when we pull it out of the | ||
| // cookie) to rendering (when setting it is important. | ||
| ApplicationState.PersistAsJson("baseLayerLuminance", _baseLayerLuminance); | ||
| return Task.CompletedTask; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
123 changes: 122 additions & 1 deletion
123
src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this to avoid flash of white on page load? Add a comment.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's right. The custom properties (e.g. --neutral-fill-rest) aren't available at this point so I just took the raw color. Makes sure the page loads dark.