Skip to content

Adds dark mode #35

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.

Sign up for GitHub

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

Draft
A-Guldborg wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Adds dark mode #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions Shifty.App/Components/MenuItems.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@
<MudIconButton
Size="@Size.Medium"
Icon="@Icons.Material.Outlined.Edit"
Color="Color.Primary"
Color="Color.Dark"
Variant="Variant.Outlined"
OnClick="@context.Actions.StartEditingItemAsync" />
</CellTemplate>
</TemplateColumn>
Expand All @@ -54,7 +55,7 @@
@{
if (context.Item.Active)
{
<MudIconButton Size="@Size.Small" Color="Color.Dark" OnClick="@(() => ConfirmActiveToggle(context.Item))"
<MudIconButton Variant="Variant.Outlined" Size="@Size.Small" Color="Color.Dark" OnClick="@(() => ConfirmActiveToggle(context.Item))"
Icon="@Icons.Material.Filled.Visibility" />
}
else
Expand Down
5 changes: 3 additions & 2 deletions Shifty.App/Components/ProductManager.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@
<MudIconButton
Size="@Size.Medium"
Icon="@Icons.Material.Outlined.Edit"
Color="Color.Primary"
Variant="Variant.Outlined"
Color="Color.Dark"
OnClick="@context.Actions.StartEditingItemAsync" />
</CellTemplate>
</TemplateColumn>
Expand All @@ -57,7 +58,7 @@
@{
if (context.Item.Visible)
{
<MudIcon Size="@Size.Small" Color="Color.Dark"
<MudIcon Size="@Size.Small"
Icon="@Icons.Material.Filled.Visibility" />
}
else
Expand Down
7 changes: 4 additions & 3 deletions Shifty.App/Components/UserTable.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
ValueChanged="@(s => OnSearch(s))"
Placeholder="Search"
Adornment="Adornment.Start"
AdornmentIcon="Icons.Material.Filled.Search"
AdornmentIcon="@Icons.Material.Filled.Search"

IconSize="Size.Medium" />
</ToolBarContent>
<HeaderContent>
Expand Down Expand Up @@ -59,7 +60,7 @@
<NoRecordsContent>No matching records found</NoRecordsContent>
<PagerContent><MudTablePager /></PagerContent>
<EditButtonContent Context="button">
<MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Edit" OnClick="@button.ButtonAction" Disabled="@button.ButtonDisabled" />
<MudIconButton Size="@Size.Small" Variant="Variant.Outlined" Icon="@Icons.Material.Outlined.Edit" OnClick="@button.ButtonAction" Disabled="@button.ButtonDisabled" />
</EditButtonContent>
</MudTable>
</MudContainer>
Expand Down Expand Up @@ -120,6 +121,6 @@
{
((SimpleUserResponse)user).UserGroup = UserGroupBeforeEdit;
StateHasChanged();
Snackbar.Add("Canceled editing", Severity.Warning);
Snackbar.Add("Canceled editing", Severity.Info);
}
}
44 changes: 41 additions & 3 deletions Shifty.App/Shared/MainLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@using MudBlazor.Utilities
@inherits LayoutComponentBase

<MudThemeProvider Theme="_theme"/>
<MudThemeProvider Theme="_theme" @bind-IsDarkMode="_darkmode" @ref="_themeProvider"/>
<MudDialogProvider
CloseOnEscapeKey="true"
/>
Expand All @@ -14,6 +14,8 @@
<MudAppBar Elevation="0">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((_) => DrawerToggle())"/>
<MudText Typo="Typo.h6" Align="Align.Left">Analog Shifty</MudText>
<MudSpacer />
<MudIconButton Icon="@(_darkmode ? Icons.Material.Filled.DarkMode : Icons.Material.Filled.LightMode)" Color="Color.Inherit" Edge="Edge.End" OnClick="@((_) => _darkmode = !_darkmode)"/>
</MudAppBar>
<MudDrawer @bind-Open="_drawerOpen" Elevation="1">
<MudDrawerHeader>
Expand All @@ -28,7 +30,7 @@
<NotAuthorized>
<MudAppBar></MudAppBar>
<MudMainContent>
<MudPaper Elevation="0" Height="60vh" Class="d-flex justify-center align-center" Style=@($"background:{_theme.Palette.Background}")>
<MudPaper Elevation="0" Height="60vh" Class="d-flex justify-center align-center" >
<MudPaper Width="40vw">
<MudAlert Severity="Severity.Info">Please login</MudAlert>
<Login/>
Expand All @@ -41,10 +43,12 @@

@code {
bool _drawerOpen = true;
MudThemeProvider _themeProvider;
private bool _darkmode { get; set; } = false;

readonly MudTheme _theme = new MudTheme()
{
Palette = new Palette()
Palette = new PaletteLight()
{
Primary = new MudColor("#775440"),
Secondary = new MudColor("#38251a"),
Expand All @@ -56,13 +60,47 @@
Warning = new MudColor("#fed521"),
Success = new MudColor("#738d4b"),
Dark = Colors.Grey.Darken3,
},
PaletteDark = new PaletteDark()
{
Primary = new MudColor("#B85C38"),
Secondary = new MudColor("#38251a"),
Tertiary = new MudColor("#8c674c"),
AppbarBackground = new MudColor("#1f1b16"),
Surface = new MudColor("#29221b"),
Background = new MudColor("#1f1b16"),
Info = new MudColor("#20455f"),
Error = new MudColor("#893c24"),
Warning = new MudColor("#fed521"),
Success = new MudColor("#738d4b"),
Dark = new MudColor("E0C097"),
TextPrimary = new MudColor("#f7e8da"),
TextSecondary = new MudColor("#f7e8da"),
AppbarText = new MudColor("#f7e8da"),
DrawerText = new MudColor("#f7e8da"),
DrawerIcon = new MudColor("#f7e8da"),
DrawerBackground = new MudColor("#29221b"),
Divider = new MudColor("#13110f"),
DividerLight = new MudColor("#13110f"),
TableLines = new MudColor("#13110f"),
ActionDefault = new MudColor("#E0C097"),
ActionDisabled = new MudColor("#474747"),
}
};

protected override void OnInitialized()
{
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
_darkmode = await _themeProvider.GetSystemPreference();
StateHasChanged();
}
}

void DrawerToggle()
{
_drawerOpen = !_drawerOpen;
Expand Down
2 changes: 1 addition & 1 deletion Shifty.App/wwwroot/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<body>
<div
id="app"
style="background: #e9e9e9; display: flex; justify-content: center"
style="display: flex; justify-content: center"
>
<div style="padding: 20vh">
<img
Expand Down