QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-18 05:40:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: darkmode preferences screens

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2025-11-02 16:43:47 +02:00
parent a76445a6eb
commit 77dc0778a3
12 changed files with 78 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/webapp/src/style/_variables.scss
View File

@@ -455,9 +455,9 @@ body.bp4-dark {
--color-datatable-constrant-head-border: var(--color-dark-gray5);
// Card
--color-card-background: var(--color-dark-gray4);
--color-card-background: var(--color-dark-gray2);
--color-card-border: #d2dce2;
--color-card-border: rgba(255, 255, 255, 0.2);
--color-card-border: rgba(255, 255, 255, 0.1);
// Bank accounts.
--color-bank-account-card-background: var(--color-card-background);
@@ -492,8 +492,7 @@ body.bp4-dark {
--color-bank-transaction-matching-aside-footer: var(--color-dark-gray1);
--color-sidebar-preferences-background: var(--color-dark-gray1);
--color-sidebar-preferences-border: #c6d0d9;
--color-sidebar-preferences-border: rgba(255, 255, 255, 0.25);
--color-sidebar-preferences-border: rgba(255, 255, 255, 0.15);
// Preferences - Sidebar.
--color-sidebar-preferences-item-background: transparent;
@@ -502,10 +501,7 @@ body.bp4-dark {
--color-sidebar-preferences-item-hover-background: var(--color-dark-gray4);
--color-sidebar-preferences-item-hover-text: #fff;
--color-preferences-sidebar-head-border: #bbcbd0;
--color-preferences-sidebar-head-text: #3b3b4c;
--color-preferences-sidebar-head-border: rgba(255, 255, 255, 0.25);
--color-preferences-sidebar-head-border: rgba(255, 255, 255, 0.1);
--color-preferences-sidebar-head-text: rgba(255, 255, 255, 0.85);
// Preferences - Topbar.

22
packages/webapp/src/style/components/DataTable/DataTable.scss
View File

@@ -216,28 +216,6 @@
.tr.is-context-menu-active .td {
background: #f3fafc;
}
.td.actions .#{$ns}-button {
background: #e6effb;
border: 0;
box-shadow: none;
padding: 5px 15px;
border-radius: 8px;
&:hover,
&:focus {
background-color: #cfdcee;
}
svg {
color: #425361;
}
.bp4-icon-more-h-16 {
margin-top: 2px;
}
}
.tr.no-results {
.td {
flex-direction: column;

7
packages/webapp/src/style/pages/Preferences/Page.scss
View File

@@ -14,6 +14,11 @@
}
}
.preferences-page {
--x-color-tab-list-border: #e5e5e5;
.bp4-dark & {
--x-color-tab-list-border: rgba(255, 255, 255, 0.1);
}
&__inside-content {
display: flex;
flex-direction: column;
@@ -36,7 +41,7 @@
overflow: auto;
.#{$ns}-tab-list {
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid var(--x-color-tab-list-border);
padding-left: 15px;
padding-right: 15px;
align-items: baseline;

3
packages/webapp/src/style/pages/Preferences/Topbar.scss
View File

@@ -55,6 +55,9 @@
margin-right: 15px;
border-right: 1px solid #e5e5e5;
.bp4-dark &{
border-right-color: rgba(255, 255, 255, 0.2);
}
.bp4-button + .bp4-button {
margin-left: 10px;
}

9
packages/webapp/src/style/pages/Preferences/Users.scss
View File

@@ -1,6 +1,13 @@
// Users/Roles List.
// ---------------------------------
.preferences-page__inside-content--users {
--color-avatar-background: #b7bfc6;
--color-avatar-text: #fff;
.bp4-dark & {
--color-avatar-background: rgba(255, 255, 255, 0.2);
--color-avatar-text: #fff;
}
.bigcapital-datatable {
.td {
.avatar {
@@ -8,7 +15,7 @@
height: 28px;
width: 28px;
text-align: center;
background: #b7bfc6;
background: var(--color-avatar-background);
border-radius: 50%;
line-height: 28px;
color: #fff;