From 0bc4b3d0faeac45111f5c82af96d0c801ca95516 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 19 Aug 2020 11:04:05 +0200
Subject: [PATCH] Adds theming and dark mode to code editor (#6547)

---
 src/components/ha-code-editor.ts | 101 +++++++++++++++++++++++++++++--
 src/resources/styles.ts          |  18 ++++++
 2 files changed, 113 insertions(+), 6 deletions(-)

diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts
index aac917e31a..d4d74adef5 100644
--- a/src/components/ha-code-editor.ts
+++ b/src/components/ha-code-editor.ts
@@ -101,11 +101,6 @@ export class HaCodeEditor extends UpdatingElement {
       .CodeMirror-scroll {
         max-height: var(--code-mirror-max-height, --code-mirror-height);
       }
-      .CodeMirror-gutters {
-        border-right: 1px solid var(--paper-input-container-color, var(--secondary-text-color));
-        background-color: var(--paper-dialog-background-color, var(--primary-background-color));
-        transition: 0.2s ease border-right;
-      }
       :host(.error-state) .CodeMirror-gutters {
         border-color: var(--error-state-color, red);
       }
@@ -113,7 +108,7 @@ export class HaCodeEditor extends UpdatingElement {
         border-right: 2px solid var(--paper-input-container-focus-color, var(--primary-color));
       }
       .CodeMirror-linenumber {
-        color: var(--paper-dialog-color, var(--primary-text-color));
+        color: var(--paper-dialog-color, var(--secondary-text-color));
       }
       .rtl .CodeMirror-vscrollbar {
         right: auto;
@@ -122,6 +117,100 @@ export class HaCodeEditor extends UpdatingElement {
       .rtl-gutter {
         width: 20px;
       }
+      .CodeMirror-gutters {
+        border-right: 1px solid var(--paper-input-container-color, var(--secondary-text-color));
+        background-color: var(--paper-dialog-background-color, var(--primary-background-color));
+        transition: 0.2s ease border-right;
+      }
+      .cm-s-default.CodeMirror {
+        background-color: var(--card-background-color);
+        color: var(--primary-text-color);
+      }
+      .cm-s-default .CodeMirror-cursor {
+        border-left: 1px solid var(--secondary-text-color);
+      }
+      
+      .cm-s-default div.CodeMirror-selected, .cm-s-default.CodeMirror-focused div.CodeMirror-selected {
+        background: rgba(var(--rgb-primary-color), 0.2);
+      }
+      
+      .cm-s-default .CodeMirror-line::selection,
+      .cm-s-default .CodeMirror-line>span::selection,
+      .cm-s-default .CodeMirror-line>span>span::selection {
+        background: rgba(var(--rgb-primary-color), 0.2);
+      }
+      
+      .cm-s-default .cm-keyword {
+        color: var(--codemirror-keyword, #6262FF);
+      }
+      
+      .cm-s-default .cm-operator {
+        color: var(--codemirror-operator, #cda869);
+      }
+      
+      .cm-s-default .cm-variable-2 {
+        color: var(--codemirror-variable-2, #690);
+      }
+      
+      .cm-s-default .cm-builtin {
+        color: var(--codemirror-builtin, #9B7536);
+      }
+      
+      .cm-s-default .cm-atom {
+        color: var(--codemirror-atom, #F90);
+      }
+      
+      .cm-s-default .cm-number {
+        color: var(--codemirror-number, #ca7841);
+      }
+      
+      .cm-s-default .cm-def {
+        color: var(--codemirror-def, #8DA6CE);
+      }
+      
+      .cm-s-default .cm-string {
+        color: var(--codemirror-string, #07a);
+      }
+      
+      .cm-s-default .cm-string-2 {
+        color: var(--codemirror-string-2, #bd6b18);
+      }
+      
+      .cm-s-default .cm-comment {
+        color: var(--codemirror-comment, #777);
+      }
+      
+      .cm-s-default .cm-variable {
+        color: var(--codemirror-variable, #07a);
+      }
+      
+      .cm-s-default .cm-tag {
+        color: var(--codemirror-tag, #997643);
+      }
+      
+      .cm-s-default .cm-meta {
+        color: var(--codemirror-meta, #000);
+      }
+      
+      .cm-s-default .cm-attribute {
+        color: var(--codemirror-attribute, #d6bb6d);
+      }
+      
+      .cm-s-default .cm-property {
+        color: var(--codemirror-property, #905);
+      }
+      
+      .cm-s-default .cm-qualifier {
+        color: var(--codemirror-qualifier, #690);
+      }
+      
+      .cm-s-default .cm-variable-3  {
+        color: var(--codemirror-variable-3, #07a);
+      }
+
+      .cm-s-default .cm-type {
+        color: var(--codemirror-type, #07a);
+      }
     </style>`;
 
     this.codemirror = codeMirror(shadowRoot, {
diff --git a/src/resources/styles.ts b/src/resources/styles.ts
index 316ccf77e1..89699a83a2 100644
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -11,6 +11,24 @@ export const darkStyles = {
   "switch-unchecked-button-color": "#999999",
   "switch-unchecked-track-color": "#9b9b9b",
   "divider-color": "rgba(225, 225, 225, .12)",
+  "codemirror-keyword": "#C792EA",
+  "codemirror-operator": "#89DDFF",
+  "codemirror-variable": "#f07178",
+  "codemirror-variable-2": "#EEFFFF",
+  "codemirror-variable-3": "#DECB6B",
+  "codemirror-builtin": "#FFCB6B",
+  "codemirror-atom": "#F78C6C",
+  "codemirror-number": "#FF5370",
+  "codemirror-def": "#82AAFF",
+  "codemirror-string": "#C3E88D",
+  "codemirror-string-2": "#f07178",
+  "codemirror-comment": "#545454",
+  "codemirror-tag": "#FF5370",
+  "codemirror-meta": "#FFCB6B",
+  "codemirror-attribute": "#C792EA",
+  "codemirror-property": "#C792EA",
+  "codemirror-qualifier": "#DECB6B",
+  "codemirror-type": "#DECB6B",
 };
 
 export const derivedStyles = {