From ffff3a6872f4dae9ee86d23068b643fe5e3dc259 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Wed, 6 Aug 2025 16:13:24 +0200 Subject: [PATCH] wip --- packages/webapp/src/components/Card/index.tsx | 4 +- .../Datatable/DatatableEditable.tsx | 27 ++++---- .../Drawer/DrawerActionBar.module.scss | 9 +-- .../components/Drawer/DrawerHeaderContent.tsx | 4 +- .../webapp/src/components/Forms/Select.tsx | 9 +-- .../src/components/PageForm/FormTopbar.tsx | 7 ++- .../src/components/PageForm/PageForm.tsx | 11 ++-- .../src/components/Paper/Paper.module.scss | 8 +-- .../UploadAttachmentButton.module.scss | 4 +- .../containers/Authentication/_components.tsx | 11 ++-- .../TagButton.module.scss | 10 +-- .../MatchTransactionCheckbox.module.scss | 16 +++-- .../components/CompanyLogoUpload.module.scss | 6 +- .../ExpenseForm/ExpenseFormFooterRight.tsx | 4 +- .../APAgingSummary/APAgingSummaryTable.tsx | 11 +++- .../ARAgingSummary/ARAgingSummaryTable.tsx | 10 ++- .../BalanceSheet/BalanceSheetTable.tsx | 8 ++- .../GeneralLedger/GeneralLedgerTable.tsx | 12 ++-- .../ProfitLossSheet/ProfitLossSheetTable.tsx | 8 ++- .../TrialBalanceSheetTable.tsx | 8 ++- .../Import/ImportSampleDownload.module.scss | 11 ++-- .../Import/ImportStepper.module.scss | 6 +- .../PreferencesCreditNotesForm.tsx | 4 +- .../VendorCreditNoteFormFooterRight.tsx | 4 +- packages/webapp/src/hooks/useDarkMode.ts | 63 ++++++++++++++++++- packages/webapp/src/style/App.scss | 9 ++- packages/webapp/src/style/_variables.scss | 5 ++ .../src/style/components/BigAmount.scss | 7 ++- .../webapp/src/style/components/PageForm.scss | 18 +++--- .../FinancialStatements/DrawerHeader.scss | 35 ++++++++--- 30 files changed, 243 insertions(+), 106 deletions(-) diff --git a/packages/webapp/src/components/Card/index.tsx b/packages/webapp/src/components/Card/index.tsx index 856b39602..2fcdc3051 100644 --- a/packages/webapp/src/components/Card/index.tsx +++ b/packages/webapp/src/components/Card/index.tsx @@ -19,8 +19,10 @@ const CardRoot = styled.div` export const CardFooterActions = styled.div` --x-color-border: #e0e7ea; - --x-color-border: rgba(255, 255, 255, 0.25); + .bp4-dark & { + --x-color-border: rgba(255, 255, 255, 0.25); + } padding-top: 16px; border-top: 1px solid var(--x-color-border); margin-top: 30px; diff --git a/packages/webapp/src/components/Datatable/DatatableEditable.tsx b/packages/webapp/src/components/Datatable/DatatableEditable.tsx index aecd7dde0..3d50e12dd 100644 --- a/packages/webapp/src/components/Datatable/DatatableEditable.tsx +++ b/packages/webapp/src/components/Datatable/DatatableEditable.tsx @@ -23,27 +23,22 @@ export function DataTableEditable({ const DatatableEditableRoot = styled.div` --x-table-background: #fff; --x-table-border: #d2dce2; - - --x-table-background: var(--color-dark-gray1); - --x-table-border: rgba(255, 255, 255, 0.1); - --x-table-head-border: #d2dce2; --x-table-head-background: #f2f3fb; - - --x-table-head-background: var(--color-dark-gray2); - --x-table-head-border: rgba(255, 255, 255, 0.1); - - - --x-table-head-text: #415060; - --x-table-head-text: rgba(--color-light-gray1); - --x-color-table-body-input-text: #222; - --x-color-table-body-input-text: var(--color-light-gray2); - --x-color-table-cell-border: #d8d8d8; - --x-color-table-cell-border: rgba(255, 255, 255, 0.1); - + + .bp4-dark & { + --x-table-background: var(--color-dark-gray1); + --x-table-border: rgba(255, 255, 255, 0.1); + --x-table-head-background: var(--color-dark-gray2); + --x-table-head-border: rgba(255, 255, 255, 0.1); + --x-table-head-text: rgba(--color-light-gray1); + --x-color-table-body-input-text: var(--color-light-gray2); + --x-color-table-cell-border: rgba(255, 255, 255, 0.1); + } + .bp4-form-group { margin-bottom: 0; } diff --git a/packages/webapp/src/components/Drawer/DrawerActionBar.module.scss b/packages/webapp/src/components/Drawer/DrawerActionBar.module.scss index 00a45c809..2944ab3d3 100644 --- a/packages/webapp/src/components/Drawer/DrawerActionBar.module.scss +++ b/packages/webapp/src/components/Drawer/DrawerActionBar.module.scss @@ -2,11 +2,12 @@ .root { --x-color-background: var(--color-white); - --x-color-background: transparent; - - --x-color-border: var(--color-dark-gray1); --x-color-border: rgba(255, 255, 255, 0.2); - + + :global(.bp4-dark) { + --x-color-background: transparent; + --x-color-border: var(--color-dark-gray1); + } &:global(.bp4-navbar){ background-color: var(--x-color-background); box-shadow: 0 1px 0 var(--x-color-border); diff --git a/packages/webapp/src/components/Drawer/DrawerHeaderContent.tsx b/packages/webapp/src/components/Drawer/DrawerHeaderContent.tsx index 0953fc984..24c32291b 100644 --- a/packages/webapp/src/components/Drawer/DrawerHeaderContent.tsx +++ b/packages/webapp/src/components/Drawer/DrawerHeaderContent.tsx @@ -65,8 +65,10 @@ function SubTitle({ children }) { const SubTitleHead = styled.div` --x-color-text: #666; - --x-color-text: rgba(255, 255, 255, 0.6); + .bp4-dark & { + --x-color-text: rgba(255, 255, 255, 0.6); + } color: var(--x-color-text); font-size: 12px; font-weight: 400; diff --git a/packages/webapp/src/components/Forms/Select.tsx b/packages/webapp/src/components/Forms/Select.tsx index 6e826b77d..f53cde7a5 100644 --- a/packages/webapp/src/components/Forms/Select.tsx +++ b/packages/webapp/src/components/Forms/Select.tsx @@ -22,10 +22,11 @@ const SelectButton = styled(Button)` --x-color-select-border: #ced4da; --x-color-select-caret: #8d8d8d; - --x-color-select-background: rgba(17, 20, 24, 0.3); - --x-color-select-border: rgba(255, 255, 255, 0.15); - --x-color-select-caret: rgba(255, 255, 255, 0.25); - + .bp4-dark & { + --x-color-select-background: rgba(17, 20, 24, 0.3); + --x-color-select-border: rgba(255, 255, 255, 0.15); + --x-color-select-caret: rgba(255, 255, 255, 0.25); + } outline: none; box-shadow: 0 0 0 transparent; border: 1px solid var(--x-color-select-border); diff --git a/packages/webapp/src/components/PageForm/FormTopbar.tsx b/packages/webapp/src/components/PageForm/FormTopbar.tsx index 015ab32a8..f1cac1155 100644 --- a/packages/webapp/src/components/PageForm/FormTopbar.tsx +++ b/packages/webapp/src/components/PageForm/FormTopbar.tsx @@ -16,9 +16,10 @@ const FormTopBarRoot = styled(Navbar)` --color-form-topbar-background: #fff; --color-form-topbar-border: #c7d5db; - --color-form-topbar-background: var(--color-dark-gray1); - --color-form-topbar-border: rgba(255, 255, 255, 0.15); - + .bp4-dark & { + --color-form-topbar-background: var(--color-dark-gray1); + --color-form-topbar-border: rgba(255, 255, 255, 0.15); + } height: 35px; padding: 0 20px; diff --git a/packages/webapp/src/components/PageForm/PageForm.tsx b/packages/webapp/src/components/PageForm/PageForm.tsx index 3764889af..6ea38ffee 100644 --- a/packages/webapp/src/components/PageForm/PageForm.tsx +++ b/packages/webapp/src/components/PageForm/PageForm.tsx @@ -41,7 +41,9 @@ PageFormBody.displayName = 'PageFormBody'; * Page form footer. * @returns {React.ReactNode} */ -const PageFormFooter: FC<{ children: React.ReactNode } & SystemProps> = ({ children }) => { +const PageFormFooter: FC<{ children: React.ReactNode } & SystemProps> = ({ + children, +}) => { return {children} ; }; @@ -51,9 +53,10 @@ const footerActionsStyle = ` --x-color-background: #fff; --x-color-border: rgb(210, 221, 226); - --x-color-background: var(--color-dark-gray1); - --x-color-border: rgba(255, 255, 255, 0.1); - + .bp4-dark & { + --x-color-background: var(--color-dark-gray1); + --x-color-border: rgba(255, 255, 255, 0.1); + } width: 100%; background: var(--x-color-background); padding: 14px 20px; diff --git a/packages/webapp/src/components/Paper/Paper.module.scss b/packages/webapp/src/components/Paper/Paper.module.scss index c114b8eda..a8ab860fc 100644 --- a/packages/webapp/src/components/Paper/Paper.module.scss +++ b/packages/webapp/src/components/Paper/Paper.module.scss @@ -4,11 +4,11 @@ --x-color-background: #fff; --x-color-border: #d2dce2; - --x-color-background: var(--color-dark-gray1); - --x-color-border: rgba(255, 255, 255, 0.1); - + :global(.bp4-dark) & { + --x-color-background: var(--color-dark-gray1); + --x-color-border: rgba(255, 255, 255, 0.1); + } background-color: var(--x-color-background); border: 1px solid var(--x-color-border); padding: 10px; - } \ No newline at end of file diff --git a/packages/webapp/src/containers/Attachments/UploadAttachmentButton.module.scss b/packages/webapp/src/containers/Attachments/UploadAttachmentButton.module.scss index 9ca910ddb..3dc031a4c 100644 --- a/packages/webapp/src/containers/Attachments/UploadAttachmentButton.module.scss +++ b/packages/webapp/src/containers/Attachments/UploadAttachmentButton.module.scss @@ -7,7 +7,9 @@ --x-background-color: #fff; --x-border-color: rgb(206, 212, 218); - --x-border-color: rgba(255, 255, 255, 0.1); + :global(.bp4-dark) & { + --x-border-color: rgba(255, 255, 255, 0.1); + } &, &:hover{ diff --git a/packages/webapp/src/containers/Authentication/_components.tsx b/packages/webapp/src/containers/Authentication/_components.tsx index b6d69d1b8..3f62794aa 100644 --- a/packages/webapp/src/containers/Authentication/_components.tsx +++ b/packages/webapp/src/containers/Authentication/_components.tsx @@ -28,11 +28,12 @@ export const AuthInsiderContent = styled.div` `; export const AuthInsiderCard = styled.div` --x-color-background: #fff; - --x-color-background: var(--color-dark-gray2); - --x-color-border: #d5d5d5; - --x-color-border: rgba(255, 255, 255, 0.1); + .bp4-dark & { + --x-color-background: var(--color-dark-gray2); + --x-color-border: rgba(255, 255, 255, 0.1); + } border: 1px solid var(--x-color-border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); padding: 26px 22px; @@ -66,8 +67,10 @@ export const AuthFooterLinks = styled.div` export const AuthFooterLink = styled.p` --x-color-text: #666; - --x-color-text: rgba(255, 255, 255, 0.75); + .bp4-dark & { + --x-color-text: rgba(255, 255, 255, 0.75); + } color: var(--x-color-text); margin: 0; `; diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.module.scss b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.module.scss index 6f9e2e546..bff81b191 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.module.scss +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.module.scss @@ -1,12 +1,12 @@ .root { --color-background: #fff; - --color-background: #c5cbd3; - --color-border: #e1e2e8; - --color-border: rgba(255, 255, 255, 0.2); - --color-text: var(--color-dark-gray1); - + + :global(.bp4-dark) & { + --color-background: #c5cbd3; + --color-border: rgba(255, 255, 255, 0.2); + } min-height: 26px; border-radius: 15px; font-size: 13px; diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss index 202ea0e23..d7eef6348 100644 --- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss +++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss @@ -1,18 +1,16 @@ .root { --item-background: #fff; - --item-background: var(--color-dark-gray4); - --item-border: #d6dbe3; - --item-border: rgba(255, 255, 255, 0.2); - --item-active-border: #88abdb; - --item-label-text: #252a33; - --item-label-text: var(--color-light-gray4); - --item-date-text: #5c7080; - --item-date-text: var(--color-light-gray1); - + + :global(.bp4-dark) & { + --item-background: var(--color-dark-gray4); + --item-border: rgba(255, 255, 255, 0.2); + --item-date-text: var(--color-light-gray1); + --item-label-text: var(--color-light-gray4); + } background: var(--item-background); border-radius: 5px; border: 1px solid var(--item-border); diff --git a/packages/webapp/src/containers/ElementCustomize/components/CompanyLogoUpload.module.scss b/packages/webapp/src/containers/ElementCustomize/components/CompanyLogoUpload.module.scss index 81053a047..bb1331672 100644 --- a/packages/webapp/src/containers/ElementCustomize/components/CompanyLogoUpload.module.scss +++ b/packages/webapp/src/containers/ElementCustomize/components/CompanyLogoUpload.module.scss @@ -1,9 +1,11 @@ .root { --x-border-color: #E1E1E1; - --x-border-color: rgba(225, 225, 225, 0.15); --x-color-placeholder-text: #738091; - --x-color-placeholder-text: rgba(225, 225, 225, 0.65); + .bp4-dark & { + --x-border-color: rgba(225, 225, 225, 0.15); + --x-color-placeholder-text: rgba(225, 225, 225, 0.65); + } min-height: 120px; height: 120px; padding: 10px; diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx index c162f653b..5d605b92a 100644 --- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx +++ b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx @@ -32,8 +32,10 @@ export function ExpenseFormFooterRight() { const ExpensesTotalLines = styled(TotalLines)` --x-color-text: #555555; - --x-color-text: var(--color-light-gray4); + .bp4-dark & { + --x-color-text: var(--color-light-gray4); + } width: 100%; color: var(--x-color-text); `; diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx index 53267b7ea..0c04fc9aa 100644 --- a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx +++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx @@ -47,10 +47,15 @@ export default function APAgingSummaryTable({ } const APAgingSummaryDataTable = styled(ReportDataTable)` - --color-table-text-color: var(--color-light-gray1); - --color-table-total-text-color: var(--color-light-gray4); + --color-table-text-color: #252a31; + --color-table-total-text-color: #000; --color-table-total-border-top: #bbb; - --color-table-total-border-top: var(--color-dark-gray5); + + .bp4-dark & { + --color-table-text-color: var(--color-light-gray1); + --color-table-total-text-color: var(--color-light-gray4); + --color-table-total-border-top: var(--color-dark-gray5); + } .table { .tbody .tr { diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx index 0d04ea3ed..ce45e51af 100644 --- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx +++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx @@ -47,11 +47,15 @@ export default function ReceivableAgingSummaryTable({ } const ARAgingSummaryDataTable = styled(ReportDataTable)` - --color-table-text-color: var(--color-light-gray1); - --color-table-total-text-color: var(--color-light-gray4); + --color-table-text-color: #252a31; + --color-table-total-text-color: #000; --color-table-total-border-top: #bbb; - --color-table-total-border-top: var(--color-dark-gray5); + .bp4-dark & { + --color-table-text-color: var(--color-light-gray1); + --color-table-total-text-color: var(--color-light-gray4); + --color-table-total-border-top: var(--color-dark-gray5); + } .table { .tbody .tr { .td { diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx index d895acec1..33d672d9e 100644 --- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx +++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx @@ -55,9 +55,13 @@ export default function BalanceSheetTable({ } const BalanceSheetDataTable = styled(ReportDataTable)` - --color-table-text-color: var(--color-light-gray1); - --color-table-total-text-color: var(--color-light-gray4); + --color-table-text-color: #252a31; + --color-table-total-text-color: #000; + .bp4-dark & { + --color-table-text-color: var(--color-light-gray1); + --color-table-total-text-color: var(--color-light-gray4); + } .table { .tbody .tr { .td { diff --git a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.tsx b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.tsx index 404fb3ef0..3dc32d62f 100644 --- a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.tsx +++ b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.tsx @@ -69,13 +69,17 @@ export default function GeneralLedgerTable({ companyName }) { } const GeneralLedgerDataTable = styled(ReportDataTable)` - --color-table-text-color: var(--color-light-gray1); + --color-table-text-color: #252a31; --color-table-total-text-color: #000; - --color-table-total-text-color: var(--color-light-gray4); --color-table-border-color: #ececec; - --color-table-border-color: var(--color-dark-gray4); --color-table-total-border-color: #ddd; - --color-table-total-border-color: var(--color-dark-gray4); + + .bp4-dark & { + --color-table-text-color: var(--color-light-gray1); + --color-table-total-text-color: var(--color-light-gray4); + --color-table-border-color: var(--color-dark-gray4); + --color-table-total-border-color: var(--color-dark-gray4); + } .tbody { .tr .td { diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx index 79d6accf2..3240c6de5 100644 --- a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx +++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx @@ -55,9 +55,13 @@ export default function ProfitLossSheetTable({ } const ProfitLossDataTable = styled(ReportDataTable)` - --color-table-text-color: var(--color-light-gray1); - --color-table-total-text-color: var(--color-light-gray4); + --color-table-text-color: #252a31; + --color-table-total-text-color: #000; + .bp4-dark & { + --color-table-text-color: var(--color-light-gray1); + --color-table-total-text-color: var(--color-light-gray4); + } .table { .tbody .tr { .td { diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.tsx b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.tsx index dff5a9f4f..d7b302ede 100644 --- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.tsx +++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.tsx @@ -48,9 +48,13 @@ export default function TrialBalanceSheetTable({ companyName }) { } const TrialBalanceDataTable = styled(ReportDataTable)` - --color-table-text-color: var(--color-light-gray1); - --color-table-total-text-color: var(--color-light-gray4); + --color-table-text-color: #252a31; + --color-table-total-text-color: #000; + .bp4-dark & { + --color-table-text-color: var(--color-light-gray1); + --color-table-total-text-color: var(--color-light-gray4); + } .table { .tbody { .tr .td { diff --git a/packages/webapp/src/containers/Import/ImportSampleDownload.module.scss b/packages/webapp/src/containers/Import/ImportSampleDownload.module.scss index 096fe2c92..ee82e8115 100644 --- a/packages/webapp/src/containers/Import/ImportSampleDownload.module.scss +++ b/packages/webapp/src/containers/Import/ImportSampleDownload.module.scss @@ -4,11 +4,12 @@ --color-sample-download-title-text: #5f6b7c; --color-sample-download-desc-text: #8f99a8; - --color-sample-download-background: var(--color-dark-gray3); - --color-sample-download-border: var(--color-dark-gray5); - --color-sample-download-title-text: var(--color-light-gray1); - --color-sample-download-desc-text: var(--color-light-gray1); - + :global(.bp4-dark) & { + --color-sample-download-background: var(--color-dark-gray3); + --color-sample-download-border: var(--color-dark-gray5); + --color-sample-download-title-text: var(--color-light-gray1); + --color-sample-download-desc-text: var(--color-light-gray1); + } background: var(--color-sample-download-background); border: 1px solid var(--color-sample-download-border); border-radius: 5px; diff --git a/packages/webapp/src/containers/Import/ImportStepper.module.scss b/packages/webapp/src/containers/Import/ImportStepper.module.scss index 9b8a62da8..147b983b4 100644 --- a/packages/webapp/src/containers/Import/ImportStepper.module.scss +++ b/packages/webapp/src/containers/Import/ImportStepper.module.scss @@ -1,7 +1,9 @@ .content { --border-color: #DCE0E5; - --border-color: var(--color-dark-gray5); - + + :global(.bp4-dark) & { + --border-color: var(--color-dark-gray5); + } margin-top: 0; margin-bottom: 0; border-top: 1px solid var(--border-color); diff --git a/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx b/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx index 315d4ab9d..78bbe5d9f 100644 --- a/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx +++ b/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx @@ -61,8 +61,10 @@ export function PreferencesCreditNotesForm({ isSubmitting }) { const CardFooterActions = styled.div` --x-color-border: #e0e7ea; - --x-color-border: rgba(255, 255, 255, 0.25); + .bp4-dark & { + --x-color-border: rgba(255, 255, 255, 0.25); + } padding-top: 16px; border-top: 1px solid var(--x-color-border); margin-top: 30px; diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.tsx index 33b1da575..2f1e630d5 100644 --- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.tsx +++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.tsx @@ -47,8 +47,10 @@ export function VendorCreditNoteFormFooterRight() { const VendorCreditNoteTotalLines = styled(TotalLines)` --x-color-text: #555; - --x-color-text: var(--color-light-gray4); + .bp4-dark & { + --x-color-text: var(--color-light-gray4); + } width: 100%; color: var(--x-color-text); `; diff --git a/packages/webapp/src/hooks/useDarkMode.ts b/packages/webapp/src/hooks/useDarkMode.ts index bc8787d10..4d6b803b5 100644 --- a/packages/webapp/src/hooks/useDarkMode.ts +++ b/packages/webapp/src/hooks/useDarkMode.ts @@ -1,3 +1,64 @@ +import { css } from '@emotion/css'; +import { useState, useEffect } from 'react'; + export const useIsDarkMode = () => { - return true; + const [isDarkMode, setIsDarkMode] = useState(() => { + // Check initial state on mount + if (typeof window === 'undefined') return false; + + return ( + document.documentElement.classList.contains('bp4-dark') || + document.body.classList.contains('bp4-dark') + ); + }); + + useEffect(() => { + if (typeof window === 'undefined') return; + + const checkDarkMode = () => { + const hasDarkClass = + document.documentElement.classList.contains('bp4-dark') || + document.body.classList.contains('bp4-dark'); + setIsDarkMode(hasDarkClass); + }; + + // Create observer to watch for class changes on html and body elements + const observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if ( + mutation.type === 'attributes' && + mutation.attributeName === 'class' + ) { + checkDarkMode(); + } + }); + }); + + // Observe both html and body elements for class changes + observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ['class'], + }); + + observer.observe(document.body, { + attributes: true, + attributeFilter: ['class'], + }); + + // Initial check + checkDarkMode(); + + // Cleanup observer on unmount + return () => { + observer.disconnect(); + }; + }, []); + + return isDarkMode; }; + +export const darkMode = (styles: string) => css` + .bp4-dark & { + ${styles} + } +`; diff --git a/packages/webapp/src/style/App.scss b/packages/webapp/src/style/App.scss index ae15825c5..79a1f2ee9 100644 --- a/packages/webapp/src/style/App.scss +++ b/packages/webapp/src/style/App.scss @@ -5,6 +5,12 @@ @import '@blueprintjs/datetime/src/blueprint-datetime.scss'; @import '@blueprintjs/popover2/src/blueprint-popover2.scss'; +@mixin dark-mode { + .bp4-dark & { + @content; + } +} + // Objects @import 'objects/form'; @import 'objects/switch'; @@ -38,10 +44,11 @@ @import 'pages/fonts'; @import "section"; +// App .App { min-width: 1100px; min-height: 100vh; - background-color: $app-bg; + background-color: var(--color-app-background); } // ======= diff --git a/packages/webapp/src/style/_variables.scss b/packages/webapp/src/style/_variables.scss index af347e783..d57b3a104 100644 --- a/packages/webapp/src/style/_variables.scss +++ b/packages/webapp/src/style/_variables.scss @@ -60,6 +60,8 @@ $ns: bp4; --color-ui-menu-select-item-hover-background: #edeff2; --color-ui-menu-select-item-active-background: var(--color-primary); + --color-app-background: #fff; + // Splash screen. --color-splash-screen-background: #fff; @@ -341,6 +343,9 @@ body.bp4-dark { --color-ui-menu-select-item-hover-background: rgba(143, 153, 168, .15); --color-ui-menu-select-item-active-background: var(--color-primary); + // App + --color-app-background: var(--color-dark-gray1); + // Splash screen. --color-splash-screen-background: #fff; --color-splash-screen-background: var(--color-dark-gray1); diff --git a/packages/webapp/src/style/components/BigAmount.scss b/packages/webapp/src/style/components/BigAmount.scss index df9f4276a..50eaab67f 100644 --- a/packages/webapp/src/style/components/BigAmount.scss +++ b/packages/webapp/src/style/components/BigAmount.scss @@ -3,9 +3,10 @@ --x-color-amount-text: #343463; --x-color-label-text: #5d6f90; - --x-color-label-text: var(--color-light-gray1); - --x-color-amount-text: var(--color-light-gray2); - + :global(.bp4-dark) & { + --x-color-label-text: var(--color-light-gray1); + --x-color-amount-text: var(--color-light-gray2); + } text-align: right; &__label{ diff --git a/packages/webapp/src/style/components/PageForm.scss b/packages/webapp/src/style/components/PageForm.scss index 9e43cec75..944b3dfbd 100644 --- a/packages/webapp/src/style/components/PageForm.scss +++ b/packages/webapp/src/style/components/PageForm.scss @@ -3,26 +3,26 @@ // > .page-form__content // > .page-form__floating-actions .page-form { - --color-page-form-background: #fff; - --color-page-form-header-background: #fff; --color-page-form-header-border: #d2dce2; - --color-page-form-header-background: var(--color-dark-gray1); - --color-page-form-header-border: rgba(255, 255, 255, 0.1); - + :global(.bp4-dark) & { + --color-page-form-header-background: var(--color-dark-gray1); + --color-page-form-header-border: rgba(255, 255, 255, 0.1); + } $self: '.page-form'; padding-bottom: 20px; - &__floating-actions { --color-page-form-floating-actions-background: #fff; --color-page-form-floating-actions-border: rgb(210, 221, 226); --color-page-form-floating-actions-shadow: rgba(0, 0, 0, 0.05); - --color-page-form-floating-actions-background: var(--color-dark-gray1); - --color-page-form-floating-actions-border: var(--color-dark-gray5); - --color-page-form-floating-actions-shadow: rgba(0, 0, 0, 0.05); + :global(.bp4-dark) & { + --color-page-form-floating-actions-background: var(--color-dark-gray1); + --color-page-form-floating-actions-border: var(--color-dark-gray5); + --color-page-form-floating-actions-shadow: rgba(0, 0, 0, 0.05); + } position: fixed; bottom: 0; diff --git a/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss b/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss index 9c454e009..54dda387d 100644 --- a/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss +++ b/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss @@ -1,17 +1,36 @@ +@mixin dark-mode { + .bp4-dark & { + @content; + } +} + // // Financial sheet - Drawer header. // -------------------- .financial-header-drawer { - --x-color-background: var(--color-dark-gray1); - --x-color-backdrop-background: rgba(2, 9, 19, 0.65); + --x-color-background: #fff; + --x-color-backdrop-background: rgba(2, 9, 19, 0.65); - --x-color-tabs-border: var(--color-dark-gray2); - --x-color-tabs-tab-item-background: var(--color-dark-gray3); - --x-color-tabs-indicator-background: var(--color-dark-gray2); - --x-color-tabs-indicator-border: var(--color-primary); + --x-color-tabs-border: #c3cdd5; + --x-color-tabs-tab-item-background: var(--color-dark-gray3); + --x-color-tabs-indicator-background: #edf5ff; + --x-color-tabs-indicator-border: #0350f8; + + --x-color-footer-background: #ecf0f3; + --x-color-footer-border: #c3cdd5; - --x-color-footer-background: var(--color-dark-gray3); - --x-color-footer-border: var(--color-dark-gray1); + @include dark-mode { + --x-color-background: var(--color-dark-gray1); + --x-color-backdrop-background: rgba(2, 9, 19, 0.65); + + --x-color-tabs-border: var(--color-dark-gray2); + --x-color-tabs-tab-item-background: var(--color-dark-gray3); + --x-color-tabs-indicator-background: var(--color-dark-gray2); + --x-color-tabs-indicator-border: var(--color-primary); + + --x-color-footer-background: var(--color-dark-gray3); + --x-color-footer-border: var(--color-dark-gray1); + } padding: 25px 26px 25px; position: absolute;