jafreli/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark mode theme with toggle button and improved UI styling

Browse Source
This commit is contained in:
jafreli
2026-01-31 18:30:35 +01:00
parent 86068e257f
commit 0a5a941222
7 changed files with 391 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/app/components/item-form/item-form.scss
View File

@@ -8,6 +8,20 @@ mat-card {
width: 100%;
}
::ng-deep .mat-mdc-card-title {
display: block !important;
margin-bottom: 24px !important;
padding: 16px 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
font-size: 24px !important;
font-weight: 500 !important;
text-align: center !important;
}
:host-context(.dark-theme) ::ng-deep .mat-mdc-card-title {
border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
mat-form-field {
width: 100%;
margin-bottom: 10px;
@@ -20,6 +34,26 @@ mat-form-field {
margin-top: 20px;
}
:host-context(.dark-theme) .actions button[mat-stroked-button] {
border-color: rgba(255, 255, 255, 0.3) !important;
color: #ffffff !important;
&:hover {
background-color: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
}
}
::ng-deep .dark-theme .mat-mdc-stroked-button {
border-color: rgba(255, 255, 255, 0.3) !important;
color: #ffffff !important;
&:hover {
background-color: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
}
}
.icon-mode-toggle {
margin: 16px 0;
}