feat(theme): add dark theme to jar editor

exadel-inc · Jun 15, 2023 · f03e35f · f03e35f
1 parent 3cbfd6d
commit f03e35f
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 3 deletions.
diff --git a/src/plugins/editor/editor.less b/src/plugins/editor/editor.less
@@ -9,4 +9,120 @@
     height: 100%;
     border-top: 1px solid @section-border;
   }
-}
+
+  .uip-root.dark-theme & {
+    code[class*=language-],
+    pre[class*=language-] {
+      color: #ccc;
+      background: 0 0;
+      text-shadow: none;
+      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+      font-size: 1em;
+      text-align: left;
+      white-space: pre;
+      word-spacing: normal;
+      word-break: normal;
+      word-wrap: normal;
+      line-height: 1.5;
+      -moz-tab-size: 4;
+      -o-tab-size: 4;
+      tab-size: 4;
+      -webkit-hyphens: none;
+      -moz-hyphens: none;
+      -ms-hyphens: none;
+      hyphens: none
+    }
+
+    pre[class*=language-] {
+      padding: 1em;
+      margin: .5em 0;
+      overflow: auto
+    }
+
+    :not(pre)>code[class*=language-],
+    pre[class*=language-] {
+      background: #2d2d2d
+    }
+
+    :not(pre)>code[class*=language-] {
+      padding: .1em;
+      border-radius: .3em;
+      white-space: normal
+    }
+
+    .token.block-comment,
+    .token.cdata,
+    .token.comment,
+    .token.doctype,
+    .token.prolog {
+      color: #999
+    }
+
+    .token.punctuation {
+      color: #ccc
+    }
+
+    .token.attr-name,
+    .token.deleted,
+    .token.namespace,
+    .token.tag {
+      color: #e2777a
+    }
+
+    .token.function-name {
+      color: #6196cc
+    }
+
+    .token.boolean,
+    .token.function,
+    .token.number {
+      color: #f08d49
+    }
+
+    .token.class-name,
+    .token.constant,
+    .token.property,
+    .token.symbol {
+      color: #f8c555
+    }
+
+    .token.atrule,
+    .token.builtin,
+    .token.important,
+    .token.keyword,
+    .token.selector {
+      color: #cc99cd
+    }
+
+    .token.attr-value,
+    .token.char,
+    .token.regex,
+    .token.string,
+    .token.variable {
+      color: #7ec699
+    }
+
+    .token.entity,
+    .token.operator,
+    .token.url {
+      color: #67cdcc
+    }
+
+    .token.bold,
+    .token.important {
+      font-weight: 700
+    }
+
+    .token.italic {
+      font-style: italic
+    }
+
+    .token.entity {
+      cursor: help
+    }
+
+    .token.inserted {
+      color: green
+    }
+  }
+}
diff --git a/src/plugins/editor/jar/jar-editor.ts b/src/plugins/editor/jar/jar-editor.ts
@@ -1,9 +1,10 @@
+import {bind} from '@exadel/esl/modules/esl-utils/decorators/bind';
+import {SyntheticEventTarget} from '@exadel/esl/modules/esl-utils/dom/events/target';
+
 import {CodeJar} from 'codejar';
 import {withLineNumbers} from 'codejar/linenumbers';
 import Prism from 'prismjs';
 import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
-import {bind} from '@exadel/esl/modules/esl-utils/decorators/bind';
-import {SyntheticEventTarget} from '@exadel/esl/modules/esl-utils/dom/events/target';
 
 export class JarEditor extends SyntheticEventTarget {
   private editor: CodeJar;