wip

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;

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;
   }

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);

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;

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);
+  .bp4-dark & {
-  --x-color-select-border: rgba(255, 255, 255, 0.15);
+    --x-color-select-background: rgba(17, 20, 24, 0.3);
-  --x-color-select-caret: rgba(255, 255, 255, 0.25);
+    --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);

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);
+  .bp4-dark & {
-  --color-form-topbar-border: rgba(255, 255, 255, 0.15);
+    --color-form-topbar-background: var(--color-dark-gray1);
-
+    --color-form-topbar-border: rgba(255, 255, 255, 0.15);
+  }
   height: 35px;
   padding: 0 20px;
 

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);
+  .bp4-dark & {
-  --x-color-border: rgba(255, 255, 255, 0.1);
+    --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;

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);
+  :global(.bp4-dark) & {
-  --x-color-border: rgba(255, 255, 255, 0.1);
+    --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;
-
 }

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{

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;
 `;

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;

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);

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;

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);
 `;

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-text-color: #252a31;
-  --color-table-total-text-color: var(--color-light-gray4);
+  --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 {

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-text-color: #252a31;
-  --color-table-total-text-color: var(--color-light-gray4);
+  --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 {

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-text-color: #252a31;
-  --color-table-total-text-color: var(--color-light-gray4);
+  --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 {

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 {

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-text-color: #252a31;
-  --color-table-total-text-color: var(--color-light-gray4);
+  --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 {

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-text-color: #252a31;
-  --color-table-total-text-color: var(--color-light-gray4);
+  --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 {

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);
+  :global(.bp4-dark) & {
-  --color-sample-download-border: var(--color-dark-gray5);
+    --color-sample-download-background: var(--color-dark-gray3);
-  --color-sample-download-title-text: var(--color-light-gray1);
+    --color-sample-download-border: var(--color-dark-gray5);
-  --color-sample-download-desc-text: var(--color-light-gray1);
+    --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;

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);

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;

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);
 `;

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

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

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);

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);
+  :global(.bp4-dark) & {
-  --x-color-amount-text: var(--color-light-gray2);
+    --x-color-label-text: var(--color-light-gray1);
-
+    --x-color-amount-text: var(--color-light-gray2);
+  }
   text-align: right;
 
   &__label{

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);
+  :global(.bp4-dark) & {    
-  --color-page-form-header-border: rgba(255, 255, 255, 0.1);
+    --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);
+    :global(.bp4-dark) & {
-    --color-page-form-floating-actions-border: var(--color-dark-gray5);
+      --color-page-form-floating-actions-background: var(--color-dark-gray1);
-    --color-page-form-floating-actions-shadow: rgba(0, 0, 0, 0.05);
+      --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;

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-background: #fff;
-  --x-color-backdrop-background: rgba(2, 9, 19, 0.65);
+    --x-color-backdrop-background: rgba(2, 9, 19, 0.65);
 
-  --x-color-tabs-border: var(--color-dark-gray2);
+    --x-color-tabs-border: #c3cdd5;
-  --x-color-tabs-tab-item-background: var(--color-dark-gray3);
+    --x-color-tabs-tab-item-background: var(--color-dark-gray3);
-  --x-color-tabs-indicator-background: var(--color-dark-gray2);
+    --x-color-tabs-indicator-background: #edf5ff;
-  --x-color-tabs-indicator-border: var(--color-primary);
+    --x-color-tabs-indicator-border: #0350f8;
+    
+    --x-color-footer-background: #ecf0f3;
+    --x-color-footer-border: #c3cdd5;
 
-  --x-color-footer-background: var(--color-dark-gray3);
+  @include dark-mode {
-  --x-color-footer-border: var(--color-dark-gray1);
+    --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;