wip

2026-02-16 04:40:32 +00:00 · 2025-08-06 16:13:24 +02:00
parent 6393f30735
commit ffff3a6872
30 changed files with 243 additions and 106 deletions
--- 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;
--- 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;
  }
--- 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);
--- 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;
--- 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);
--- 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;

--- 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 <x.div>{children} </x.div>;
 };

@@ -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;
--- 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;
-
 }
--- 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{
--- 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;
 `;
--- 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;
--- 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);
--- 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;
--- 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);
 `;
--- 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 {
--- 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 {
--- 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 {
--- 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 {
--- 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 {
--- 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 {
--- 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;
--- 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);
--- 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;
--- 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);
 `;
--- 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}
+  }
+`;
--- 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);
 }

 // =======
--- 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);
--- 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{
--- 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;
--- 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;