feat: darkmode preferences screens

packages/webapp/src/style/pages/Preferences/Page.scss

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

packages/webapp/src/style/pages/Preferences/Topbar.scss

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

packages/webapp/src/style/pages/Preferences/Users.scss

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