Merge pull request #967 from rocket-admin/dark-theme

apply dark theme

Author: lyubov-voloshko

frontend/src/app/app.component.css

@@ -1,10 +1,15 @@
 .main-menu-container {
     display: flex;
     flex-direction: column;
-    background: #fff;
     height: 100vh;
 }
 
+@media (prefers-color-scheme: light) {
+    .main-menu-container {
+        --mat-sidenav-content-background-color: #fff;
+    }
+}
+
 .main-menu-sidenav {
     width: 60vw;
 }
@@ -84,6 +89,8 @@
 }
 
 .nav-bar__upgrade-button {
+    --mdc-filled-button-label-text-color: #424242;
+    --mdc-filled-button-container-color: #fff;
     --mdc-filled-button-container-height: 28px;
 
     margin-right: -8px;
@@ -275,4 +282,10 @@
 .user-email {
     color: rgba(0, 0, 0, 0.54);
     font-size: 12px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .user-email {
+        color: rgba(255, 255, 255, 0.7);
+    }
 }

frontend/src/app/components/connect-db/connect-db.component.css

@@ -57,13 +57,22 @@
 .warningMessage {
     display: flex;
     align-items: center;
-    /* border: 2px solid rgba(0, 0, 0, 0.87); */
-    /* border-radius: 6px; */
-    background: #F5F5F5;
     margin-bottom: 8px;
     padding: 16px 12px;
 }
 
+@media (prefers-color-scheme: dark) {
+    .warningMessage {
+        background: #424242;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .warningMessage {
+        background: #F5F5F5;
+    }
+}
+
 .warningMessage__icon {
     flex-shrink: 0;
     margin-right: 12px;

frontend/src/app/components/connection-settings/connection-settings.component.css

@@ -7,8 +7,8 @@
 }
 
 .mat-h1 {
-    margin-top: 2em;
-    margin-bottom: 1.5em;
+    margin-top: 2em !important;
+    margin-bottom: 1.5em !important;
 }
 
 .settings-form {
@@ -146,13 +146,25 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background-color: #fff;
-    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
+    background-color: var(--mat-sidenav-content-background-color);
+    box-shadow: var(--shadow);
     height: 64px;
     padding: 0 max(calc(50vw - 325px), 10%);
     width: 100vw;
 }
 
+@media (prefers-color-scheme: dark) {
+    .actions {
+        --shadow: 0 3px 1px -2px rgba(0,0,0,.5),0 2px 2px 0 rgba(0,0,0,.64),0 1px 5px 0 rgba(0,0,0,0.85);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .actions {
+        --shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
+    }
+}
+
 .settings-form__back-button {
     margin-right: auto;
 }

frontend/src/app/components/connection-settings/zapier/zapier.component.html

@@ -2,7 +2,7 @@
     <zapier-workflow
         [signUpEmail]="currentUser.email"
         [clientId]='"4MFV3OrjI8e8JkZPySqbFVbKtZUz0sV0H3XJnb6w"'
-        [theme]='"light"'
+        [theme]='"auto"'
         [introCopyDisplay]='"show"'
         [guessZapDisplay]='"show"'
         [zapCreateFromScratchDisplay]='"hide"'

frontend/src/app/components/connections-list/connections-list.component.css

@@ -31,7 +31,7 @@
     }
 }
 
-.pageTitle {
+.pageTitleHeader .pageTitle {
     font-weight: 600;
     margin-bottom: 0;
 }
@@ -181,7 +181,7 @@
     object-fit: contain;
 }
 
-.connectionLogoPreview__name {
+.connectionLogoPreview .connectionLogoPreview__name {
     margin-bottom: 0;
     font-size: 20px;
 }
@@ -192,7 +192,7 @@
     align-items: center;
 }
 
-.connectionInfo__connectionTitle {
+.connectionInfo .connectionInfo__connectionTitle {
     margin-bottom: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -224,7 +224,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: #fff;
+    background: var(--mat-sidenav-content-background-color);
     border-radius: 4px;
     box-shadow:
         0px 1px 3px 0px rgba(0, 0, 0, 0.2),
@@ -244,6 +244,24 @@
     }
 }
 
+/* @media (prefers-color-scheme: light) {
+    .testConnectionLink {
+        box-shadow:
+            0px 1px 3px 0px rgba(0, 0, 0, 0.2),
+            0px 2px 2px 0px rgba(0, 0, 0, 0.12),
+            0px 0px 2px 0px rgba(0, 0, 0, 0.14);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .testConnectionLink {
+        box-shadow:
+            0px 1px 3px 0px rgba(255, 255, 255, 0.1),
+            0px 2px 2px 0px rgba(255, 255, 255, 0.08),
+            0px 0px 2px 0px rgba(255, 255, 255, 0.12);
+    }
+} */
+
 .testConnectionLink:hover {
     box-shadow:
         0px 1px 5px 0px rgba(0, 0, 0, 0.2),
@@ -260,13 +278,27 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-image: radial-gradient(#fff 1em, #E8F1EA 1em);
+    background-image: radial-gradient(var(--mat-sidenav-content-background-color) 1em, var(--icon-box-color) 1em);
     border-radius: 4px;
     height: 36px;
     margin-right: 12px;
     width: 36px;
 }
 
+@media (prefers-color-scheme: light) {
+    .testConnectionLink__iconBox {
+        --icon-box-color: #E8F1EA;
+
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .testConnectionLink__iconBox {
+        --icon-box-color: #292929;
+
+    }
+}
+
 .testConnectionLink__icon {
     flex-shrink: 0;
     height: 20px;

frontend/src/app/components/dashboard/dashboard.component.css

@@ -52,7 +52,7 @@
 }
 
 .toggle-button {
-    background-color: #fff;
+    background-color: var(--mat-sidenav-content-background-color);
     border-radius: 4px 0 0 4px !important;
     color: inherit;
     line-height: 24px;

frontend/src/app/components/dashboard/db-table-actions/db-table-actions.component.css

@@ -111,7 +111,8 @@
 
 .text_highlighted {
     background: var(--color-accentedPalette-100);
-    margin-bottom: 0;
+    color: var(--color-accentedPalette-100-contrast);
+    margin-bottom: 0 !important;
     padding: 4px;
 }
 
@@ -237,7 +238,7 @@
 }
 
 .event__or {
-    margin-top: -22px;
+    margin-top: -22px !important;
 }
 
 .event__removeButton {

frontend/src/app/components/dashboard/db-table-ai-panel/db-table-ai-panel.component.css

@@ -26,7 +26,7 @@
     left: calc(100% - clamp(200px, 22vw, 400px));
     display: flex;
     flex-direction: column;
-    background-color: #fff;
+    background-color: var(--mat-sidenav-content-background-color);
     border-left: solid 1px rgba(0, 0, 0, 0.12);
     padding-top: 44px;
     height: 100vh;
@@ -47,7 +47,7 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    margin-bottom: 0;
+    margin-bottom: 0 !important;
 }
 
 .ai-panel-chat {
@@ -136,7 +136,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: #fff;
+    background-color: var(--mat-sidenav-content-background-color);
     padding-left: 16px;
     padding-right: 4px;
     width: calc(100% - 4px);

frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css

@@ -9,7 +9,7 @@
 }
 
 .row-preview-sidebar_open {
-    background-color: #fff;
+    background-color: var(--mat-sidenav-content-background-color);
     border-left: solid 1px rgba(0, 0, 0, 0.12);
     opacity: 1;
     transform: translateX(24px);
@@ -32,7 +32,7 @@
 }
 
 .row-preview-sidebar__title {
-    margin-bottom: 0;
+    margin-bottom: 0 !important;
 }
 
 .row-preview-sidebar__actions {

frontend/src/app/components/dashboard/db-table-settings/db-table-settings.component.css

@@ -96,15 +96,15 @@
 }
 
 .order-item {
-    background: white;
-    color: rgba(0, 0, 0, 0.87);
+    background: var(--mat-expansion-container-background-color);
+    color: var(--mat-expansion-container-text-color);
     box-sizing: border-box;
     cursor: move;
     padding: 20px 12px;
 }
 
 .order-item:not(:last-child) {
-    border-bottom: solid 1px #ccc;
+    border-bottom: solid 1px var(--mat-table-row-item-outline-color);
 }
 
 .cdk-drag-preview {
@@ -156,13 +156,25 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background-color: #fff;
-    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
+    background-color: var(--mat-sidenav-content-background-color);
+    box-shadow: var(--shadow);
     height: 64px;
     padding: 0 max(calc(50vw - 325px), 10%);
     width: 100vw;
 }
 
+@media (prefers-color-scheme: dark) {
+    .actions {
+        --shadow: 0 3px 1px -2px rgba(0,0,0,.5),0 2px 2px 0 rgba(0,0,0,.64),0 1px 5px 0 rgba(0,0,0,0.85);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .actions {
+        --shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
+    }
+}
+
 .settings-form__back-button {
     margin-right: auto;
 }