Skip to content

Commit a3b3f85

Browse files
philasmarphilasmar
committed
feat: added support for light/dark mode
1 parent 68ff1db commit a3b3f85

File tree

16 files changed

+6647
-120
lines changed

16 files changed

+6647
-120
lines changed

‎Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/Components/App.razor

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en" data-bs-theme="dark">
2+
<html lang="en" data-bs-theme="dark" style="height: 100%;">
33

44
<head>
55
<meta charset="utf-8" />
@@ -9,12 +9,14 @@
99
<link rel="stylesheet" href="app.css" />
1010
<link rel="stylesheet" href="Amazon.Lambda.TestTool.styles.css" />
1111
<link rel="icon" type="image/ico" href="favicon.ico" />
12+
<link href="bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
1213
<HeadOutlet @rendermode="InteractiveServer" />
1314
</head>
1415

15-
<body>
16+
<body class="d-flex flex-column" style="height: 100%;">
1617
<Routes @rendermode="InteractiveServer" />
1718
<script src="_framework/blazor.web.js"></script>
19+
<script src="bootstrap/js/color-modes.js"></script>
1820
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
1921
<script src="_content/BlazorMonaco/jsInterop.js"></script>
2022
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>

‎Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/Components/Layout/MainLayout.razor

Lines changed: 66 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1-
@using Amazon.Lambda.TestTool.Utilities
1+
@using Amazon.Lambda.TestTool.Services
2+
@using Amazon.Lambda.TestTool.Utilities
23
@inherits LayoutComponentBase
34

5+
@inject IJSRuntime Js
6+
@inject IThemeService ThemeService
7+
48
<nav class="navbar navbar-expand-lg bd-navbar sticky-top bg-body-tertiary">
59
<div class="container-fluid">
610
<a class="navbar-brand py-0 me-4 d-flex align-items-center gap-3" href="/">
7-
<img src="aws.svg" width="42" height="42" class="d-inline-block align-text-top"/>
11+
<img src="aws.svg" width="42" height="42" class="align-text-top logo-light-mode"/>
12+
<img src="aws-light.svg" width="42" height="42" class="align-text-top logo-dark-mode"/>
813
Lambda Test Tool
914
</a>
1015
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -30,24 +35,78 @@
3035
</NavLink>
3136
</li>
3237
</ul>
38+
39+
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
40+
<li class="nav-item dropdown">
41+
<button class="nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center show" id="bd-theme" type="button" aria-expanded="true" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (light)">
42+
<i class="bi bi-palette-fill"></i>
43+
<span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
44+
</button>
45+
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text" data-bs-popper="static">
46+
<li>
47+
<button type="button" class="dropdown-item d-flex align-items-center gap-2" data-bs-theme-value="light" aria-pressed="true" @onclick="SetLightTheme">
48+
<i class="bi bi-sun-fill"></i>
49+
Light
50+
</button>
51+
</li>
52+
<li>
53+
<button type="button" class="dropdown-item d-flex align-items-center gap-2" data-bs-theme-value="dark" aria-pressed="false" @onclick="SetDarkTheme">
54+
<i class="bi bi-moon-stars-fill"></i>
55+
Dark
56+
</button>
57+
</li>
58+
</ul>
59+
</li>
60+
</ul>
3361
</div>
3462
</div>
3563
</nav>
36-
<div class="page">
64+
<div class="page flex-grow-1">
3765
<main>
3866
<article class="content px-4">
3967
@Body
40-
<hr />
41-
<footer>
42-
<p>@Constants.ProductName (@Utils.DetermineToolVersion()) is an open source project. For issues or feedback visit the <a href="@Constants.LinkGithubTestTool">AWS Lambda for .NET Core GitHub repository.</a></p>
43-
</footer>
4468
</article>
4569
</main>
4670
</div>
4771

72+
<footer class="footer text-muted p-3 mt-4">
73+
<div class="d-flex container justify-content-center">
74+
&copy; @DateTime.Now.Year - AWS Lambda Test Tool
75+
</div>
76+
</footer>
77+
4878

4979
<div id="blazor-error-ui">
5080
An unhandled error has occurred.
5181
<a href="" class="reload">Reload</a>
5282
<a class="dismiss">🗙</a>
5383
</div>
84+
85+
@code {
86+
87+
protected override async Task OnAfterRenderAsync(bool firstRender)
88+
{
89+
if (string.IsNullOrEmpty(ThemeService.CurrentTheme))
90+
{
91+
ThemeService.CurrentTheme = await Js.InvokeAsync<string>("getPreferredTheme");
92+
}
93+
}
94+
95+
private async Task SetLightTheme()
96+
{
97+
await SetTheme("light");
98+
}
99+
100+
private async Task SetDarkTheme()
101+
{
102+
await SetTheme("dark");
103+
}
104+
105+
private async Task SetTheme(string theme)
106+
{
107+
await Js.InvokeVoidAsync("setStoredTheme", theme);
108+
await Js.InvokeVoidAsync("setTheme", theme);
109+
ThemeService.CurrentTheme = theme;
110+
}
111+
112+
}

0 commit comments

Comments
 (0)