From a9dd16cc647636bf3fde32447597f5ab2760ba66 Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Mon, 9 Nov 2020 11:44:01 -0600
Subject: [PATCH] Fix some dark mode styling

---
 src/app/components/editor/code/code.component.ts |  5 +++++
 .../editor/database/database.component.html      |  2 +-
 .../editor/database/database.component.ts        |  4 ++++
 .../components/nodes/norm/norm.component.html    |  2 +-
 .../components/nodes/norm/norm.component.scss    | 10 ++++++++++
 src/app/components/nodes/norm/norm.component.ts  |  4 ++++
 src/app/pages/editor/editor.page.scss            |  3 +++
 src/global.scss                                  | 16 ++++++++++++++++
 8 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/app/components/editor/code/code.component.ts b/src/app/components/editor/code/code.component.ts
index d7c59ea..2ac7a36 100644
--- a/src/app/components/editor/code/code.component.ts
+++ b/src/app/components/editor/code/code.component.ts
@@ -18,6 +18,7 @@ export class CodeComponent extends EditorNodeContract implements OnInit {
     public notAvailableOffline = false;
 
     public editorOptions = {
+        theme: this.isDark() ? 'vs-dark' : 'vs',
         language: 'javascript',
         uri: v4(),
         readOnly: false,
@@ -100,6 +101,10 @@ export class CodeComponent extends EditorNodeContract implements OnInit {
         public readonly api: ApiService,
     ) { super(); }
 
+    public isDark() {
+        return document.body.classList.contains('dark');
+    }
+
     public isDirty(): boolean | Promise<boolean> {
         return this.dirty;
     }
diff --git a/src/app/components/editor/database/database.component.html b/src/app/components/editor/database/database.component.html
index 1da1a76..015dc6e 100644
--- a/src/app/components/editor/database/database.component.html
+++ b/src/app/components/editor/database/database.component.html
@@ -15,7 +15,7 @@
   <div class="grid-wrapper">
     <ag-grid-angular
       style="width: 100%; height: 500px;"
-      class="ag-theme-balham"
+      [ngClass]="isDark() ? 'ag-theme-balham-dark' : 'ag-theme-balham'"
       [rowData]="rowData"
       [columnDefs]="columnDefs"
       suppressMovableColumns="true"
diff --git a/src/app/components/editor/database/database.component.ts b/src/app/components/editor/database/database.component.ts
index df4e88f..eae922b 100644
--- a/src/app/components/editor/database/database.component.ts
+++ b/src/app/components/editor/database/database.component.ts
@@ -33,6 +33,10 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
   public notAvailableOffline = false;
   protected dbId!: string;
 
+  public isDark() {
+    return document.body.classList.contains('dark');
+  }
+
   public get readonly() {
     return !this.node || !this.editorService.canEdit();
   }
diff --git a/src/app/components/nodes/norm/norm.component.html b/src/app/components/nodes/norm/norm.component.html
index 962317e..385d314 100644
--- a/src/app/components/nodes/norm/norm.component.html
+++ b/src/app/components/nodes/norm/norm.component.html
@@ -1,4 +1,4 @@
-<div class="container"
+<div [ngClass]="isDark() ? 'container dark' : 'container'"
      (dblclick)="onFocusIn($event)">
     <div class="toolbar-base" *ngIf="isFocused">
         <button class="toolbar-button" title="Bold" (click)="documentCommand('bold')">
diff --git a/src/app/components/nodes/norm/norm.component.scss b/src/app/components/nodes/norm/norm.component.scss
index 9f6fafb..8eb25b8 100644
--- a/src/app/components/nodes/norm/norm.component.scss
+++ b/src/app/components/nodes/norm/norm.component.scss
@@ -34,3 +34,13 @@
     margin: 0 5px;
   }
 }
+
+.container.dark {
+  .editable-base.focused {
+    background: #404040 !important;
+  }
+
+  .toolbar-base .toolbar-button:hover {
+    background: #404040;
+  }
+}
diff --git a/src/app/components/nodes/norm/norm.component.ts b/src/app/components/nodes/norm/norm.component.ts
index 35d017a..010a326 100644
--- a/src/app/components/nodes/norm/norm.component.ts
+++ b/src/app/components/nodes/norm/norm.component.ts
@@ -27,6 +27,10 @@ export class NormComponent extends EditorNodeContract implements OnInit {
         this.savedValue = this.initialValue;
     }
 
+    public isDark() {
+        return document.body.classList.contains('dark');
+    }
+
     public isDirty(): boolean | Promise<boolean> {
         return this.dirtyOverride || this.contents !== this.savedValue;
     }
diff --git a/src/app/pages/editor/editor.page.scss b/src/app/pages/editor/editor.page.scss
index 7d1c243..0d7df1d 100644
--- a/src/app/pages/editor/editor.page.scss
+++ b/src/app/pages/editor/editor.page.scss
@@ -63,3 +63,6 @@ ion-icon.invisible {
     margin-right: 5px;
   }
 }
+
+body.dark {
+}
diff --git a/src/global.scss b/src/global.scss
index 837dca4..7bf2a41 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -28,6 +28,7 @@
 @import '~@circlon/angular-tree-component/css/angular-tree-component.css';
 @import "~ag-grid-community/dist/styles/ag-grid.css";
 @import "~ag-grid-community/dist/styles/ag-theme-balham.css";
+@import "~ag-grid-community/dist/styles/ag-theme-balham-dark.css";
 @import "~@fortawesome/fontawesome-free/css/all.min.css";
 @import "~@fortawesome/fontawesome-free/css/brands.min.css";
 
@@ -134,3 +135,18 @@ hr {
 .clear-btn {
   background: rgba(0,0,0,0);
 }
+
+/* ============== DARK MODE FIXES ============== */
+body.dark {
+  .node-content-wrapper:hover {
+    background: rgba(35,35,80,0.5);
+  }
+
+  ion-item, ion-title, ion-button {
+    color: white !important;
+  }
+
+  ion-input {
+    --color: white;
+  }
+}