Fix some dark mode styling

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

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"

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

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')">

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

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

src/app/pages/editor/editor.page.scss

@@ -63,3 +63,6 @@ ion-icon.invisible {
     margin-right: 5px;
   }
 }
+
+body.dark {
+}

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