CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix: Dark theme details and auto detection

Browse Source
This commit is contained in:
Jose Alberto Hernandez
2024-03-08 21:39:26 -06:00
committed by Jose Alberto Hernandez
parent ccd6e8dded
commit e232ab2e3a
14 changed files with 287 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/theme/_content.scss
+16
View File
@@ -3,6 +3,19 @@
@mixin account-view-component-theme($theme) {
$primary: map-get($theme, primary);
mifosx-view-bulk-import {
.cover {
background-color: white;
margin-top: 1%;
}
}
mifosx-clients {
.status {
color: black;
}
}
mifosx-clients-view,
mifosx-fixed-deposit-account-view,
mifosx-loans-view,
@@ -42,6 +55,9 @@
object-fit: cover;
border-radius: 20px;
}
.signature {
background-color: mat.get-color-from-palette($primary, 500);
}
}
.account-actions {
align-self: flex-end;
src/theme/_dark_content.scss
+183
View File
@@ -0,0 +1,183 @@
@use "@angular/material" as mat;
@mixin account-view-component-dark-theme($theme) {
$primary: map-get($theme, primary);
mifosx-view-bulk-import {
.cover {
background-color: #424242;
margin-top: 1%;
}
}
mifosx-clients {
.status {
color: white;
}
}
mifosx-clients-view,
mifosx-fixed-deposit-account-view,
mifosx-loans-view,
mifosx-recurring-deposits-account-view,
mifosx-savings-account-view {
.account-card {
margin: 0 auto;
max-width: 80rem;
width: 90%;
padding: 0;
.header {
background-color: mat.get-color-from-palette($primary, 500);
padding: 1%;
.header-title-group {
.account-card-title {
color: white;
width: 90%;
p {
color: white;
}
.account-overview {
border: none;
max-width: 240px;
font-size: 14px;
tr:nth-child(even) {
background-color: transparent;
}
}
}
}
.profile-image-container {
margin: 1%;
.profile-image {
object-fit: cover;
border-radius: 20px;
}
.signature {
background-color: mat.get-color-from-palette($primary, 500);
}
}
.account-actions {
align-self: flex-end;
margin: 0 1%;
i {
margin-bottom: 2px;
margin-right: 4px;
}
}
}
.navigation-tabs {
background-color: #303135;
color: white;
overflow: auto;
}
.content {
.savings-account-tables {
padding: 1%;
margin: 1%;
.table-headers {
margin: 0;
padding: 6px;
}
td {
padding: 3px;
}
}
}
i,
img:hover {
cursor: pointer;
}
}
}
}
.dark-theme {
// Override the background color of the label text for dark theme
.mat-option-text,
.mat-input-element,
.mat-form-field-label {
color: white !important;
}
mifosx-popover,
.mat-menu-content,
.mat-dialog-container {
background-color: #303135;
color: white;
}
// Override the background color of the calendar for dark theme
.mat-calendar,
.mat-calendar-body-cell,
.mat-calendar-body-label,
.mat-calendar-table,
.mat-list-item.active {
background-color: #303135;
border: none;
}
.mat-tab-label-active {
border-bottom: lightgray;
}
// Changing the logo color for dark mode
.img-button,
.app-user-photo,
.profile-image {
filter: invert(100%);
}
span.breadcrumb-link {
a {
color: #0098ff !important;
}
}
a:-webkit-any-link {
color: #0098ff !important;
}
div.alert {
color: #303135;
}
a.tab-link {
color: white !important;
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
display: table;
background-color: white;
color: #303135;
}
#footer {
.business-date {
color: #0098ff;
}
}
}
src/theme/mifosx-theme.scss
+8 -33
View File
@@ -9,6 +9,7 @@
@import '../app/home/dashboard/dashboard.component-theme.scss';
@import '../app/shares/shares-account-view/shares-account-view.component-theme.scss';
@import 'content';
@import 'dark_content';
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@@ -23,10 +24,10 @@
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$mifosx-app-primary: mat.define-palette($primary-palette);
$mifosx-app-accent: mat.define-palette($accent-palette);
$mifosx-app-accent: mat.define-palette($accent-palette);
// The warn palette is optional (defaults to red).
$mifosx-app-warn: mat.define-palette(mat.$red-palette);
$mifosx-app-warn: mat.define-palette(mat.$red-palette);
// Create the theme object (a Sass map containing all of the palettes).
$mifosx-app-theme: mat.define-light-theme($mifosx-app-primary, $mifosx-app-accent, $mifosx-app-warn);
@@ -46,45 +47,19 @@ $mifosx-app-theme: mat.define-light-theme($mifosx-app-primary, $mifosx-app-accen
// Define the palettes for your theme using the Material Design palettes available in palette.scss
$mifosx-app-dark-primary: mat.define-palette($dark-primary-palette);
$mifosx-app-dark-accent: mat.define-palette($dark-accent-palette);
$mifosx-app-dark-warn: mat.define-palette(mat.$red-palette);
$mifosx-app-dark-primary: mat.define-palette($dark-primary-palette);
$mifosx-app-dark-accent: mat.define-palette($dark-accent-palette);
$mifosx-app-dark-warn: mat.define-palette(mat.$red-palette);
// Create the theme object (a Sass map containing all of the palettes).
$mifosx-app-dark-theme: mat.define-dark-theme($mifosx-app-dark-primary, $mifosx-app-dark-accent, $mifosx-app-dark-warn);
// Include theme styles for core and each component used in your app.
.dark-theme {
// Override the background color of the label text for dark theme
.mat-option-text,.mat-input-element,.mat-form-field-label{
color: white !important;
}
mifosx-popover,.mat-menu-content{
background-color: #303135;
color : white;
}
// Override the background color of the calendar for dark theme
.mat-calendar,
.mat-calendar-body-cell,
.mat-calendar-body-label,
.mat-calendar-table{
background-color: #303135;
border: none;
}
// Changing the logo color for dark mode
.img-button,
.app-user-photo,
.profile-image{
filter: invert(100%);
}
@include mat.all-component-themes($mifosx-app-dark-theme);
@include groups-view-component-theme($mifosx-app-dark-theme);
@include centers-view-component-theme($mifosx-app-dark-theme);
@include dashboard-component-theme($mifosx-app-dark-theme);
@include shares-account-view-component-theme($mifosx-app-dark-theme);
@include account-view-component-theme($mifosx-app-dark-theme);
}
@include account-view-component-dark-theme($mifosx-app-dark-theme);
}