Add integrated light theme

ui/component/viewers/codeViewer.jsx

@@ -35,13 +35,14 @@ class CodeViewer extends React.PureComponent<Props> {
     if (prevProps.theme === this.props.theme) return;
 
     // This code is duplicated with componentDidMount
-    const theme = this.props.theme === 'dark' ? 'monokai' : 'default';
+    const theme = this.props.theme === 'dark' ? 'monokai' : 'ttcn';
     this.codeMirror.setOption('theme', theme);
   }
 
   componentDidMount() {
     const me = this;
     const { theme, contentType } = me.props;
+    alert(theme);
     // Init CodeMirror
     import(
       /* webpackChunkName: "codemirror" */
@@ -51,7 +52,7 @@ class CodeViewer extends React.PureComponent<Props> {
         // Auto detect syntax with file contentType
         mode: contentType,
         // Adaptive theme
-        theme: theme === 'dark' ? 'monokai' : 'default',
+        theme: theme === 'dark' ? 'monokai' : 'ttcn',
         // Hide the cursor
         readOnly: true,
         // Styled text selection

ui/scss/component/_syntax-highlighter.scss

@@ -5,22 +5,28 @@
   background: #212529;
   color: #f8f8f2;
 }
+
 .cm-s-monokai div.CodeMirror-selected {
   background: #717273;
 }
+
 .cm-s-monokai .CodeMirror-gutters {
   background: #212529;
   border-right: 0px;
 }
+
 .cm-s-monokai .CodeMirror-guttermarker {
   color: white;
 }
+
 .cm-s-monokai .CodeMirror-guttermarker-subtle {
   color: #d0d0d0;
 }
+
 .cm-s-monokai .CodeMirror-linenumber {
   color: #d0d0d0;
 }
+
 .cm-s-monokai .CodeMirror-cursor {
   border-left: 1px solid #f8f8f0;
 }
@@ -28,9 +34,11 @@
 .cm-s-monokai span.cm-comment {
   color: #ada6a7;
 }
+
 .cm-s-monokai span.cm-atom {
   color: #ae81ff;
 }
+
 .cm-s-monokai span.cm-number {
   color: #ae81ff;
 }
@@ -38,12 +46,15 @@
 .cm-s-monokai span.cm-comment.cm-attribute {
   color: #97b757;
 }
+
 .cm-s-monokai span.cm-comment.cm-def {
   color: #bc9262;
 }
+
 .cm-s-monokai span.cm-comment.cm-tag {
   color: #bc6283;
 }
+
 .cm-s-monokai span.cm-comment.cm-type {
   color: #5998a6;
 }
@@ -52,12 +63,15 @@
 .cm-s-monokai span.cm-attribute {
   color: #a6e22e;
 }
+
 .cm-s-monokai span.cm-keyword {
   color: #f92672;
 }
+
 .cm-s-monokai span.cm-builtin {
   color: #66d9ef;
 }
+
 .cm-s-monokai span.cm-string {
   color: #e6db74;
 }
@@ -65,28 +79,36 @@
 .cm-s-monokai span.cm-variable {
   color: #f8f8f2;
 }
+
 .cm-s-monokai span.cm-variable-2 {
   color: #9effff;
 }
+
 .cm-s-monokai span.cm-variable-3,
 .cm-s-monokai span.cm-type {
   color: #66d9ef;
 }
+
 .cm-s-monokai span.cm-def {
   color: #fd971f;
 }
+
 .cm-s-monokai span.cm-bracket {
   color: #f8f8f2;
 }
+
 .cm-s-monokai span.cm-tag {
   color: #f92672;
 }
+
 .cm-s-monokai span.cm-header {
   color: #ae81ff;
 }
+
 .cm-s-monokai span.cm-link {
   color: #ae81ff;
 }
+
 .cm-s-monokai span.cm-error {
   background: #f92672;
   color: #f8f8f0;
@@ -95,7 +117,221 @@
 .cm-s-monokai .CodeMirror-activeline-background {
   background: #373831;
 }
+
 .cm-s-monokai .CodeMirror-matchingbracket {
   text-decoration: underline;
   color: white !important;
 }
+
+/* From https://codemirror.net/theme/ttcn.css */
+/* Customised slightly for LBRY light theme */
+
+.cm-s-ttnc .CodeMirror {
+  background-color: var(--color-background);
+}
+
+.cm-s-ttnc .CodeMirror {
+  background-color: var(--color-background);
+  border: 0;
+}
+
+.cm-s-ttcn .cm-quote {
+  color: #090;
+}
+
+.cm-s-ttcn .cm-negative {
+  color: #d44;
+}
+
+.cm-s-ttcn .cm-positive {
+  color: #292;
+}
+
+.cm-s-ttcn .cm-header,
+.cm-strong {
+  font-weight: bold;
+}
+
+.cm-s-ttcn .cm-em {
+  font-style: italic;
+}
+
+.cm-s-ttcn .cm-link {
+  text-decoration: underline;
+}
+
+.cm-s-ttcn .cm-strikethrough {
+  text-decoration: line-through;
+}
+
+.cm-s-ttcn .cm-header {
+  color: #00f;
+  font-weight: bold;
+}
+
+.cm-s-ttcn .cm-atom {
+  color: #219;
+}
+
+.cm-s-ttcn .cm-attribute {
+  color: #00c;
+}
+
+.cm-s-ttcn .cm-bracket {
+  color: #997;
+}
+
+.cm-s-ttcn .cm-comment {
+  color: #333333;
+}
+
+.cm-s-ttcn .cm-def {
+  color: #00f;
+}
+
+.cm-s-ttcn .cm-em {
+  font-style: italic;
+}
+
+.cm-s-ttcn .cm-error {
+  color: #f00;
+}
+
+.cm-s-ttcn .cm-hr {
+  color: #999;
+}
+
+.cm-s-ttcn .cm-invalidchar {
+  color: #f00;
+}
+
+.cm-s-ttcn .cm-keyword {
+  font-weight: bold;
+}
+
+.cm-s-ttcn .cm-link {
+  color: #00c;
+  text-decoration: underline;
+}
+
+.cm-s-ttcn .cm-meta {
+  color: #555;
+}
+
+.cm-s-ttcn .cm-negative {
+  color: #d44;
+}
+
+.cm-s-ttcn .cm-positive {
+  color: #292;
+}
+
+.cm-s-ttcn .cm-qualifier {
+  color: #555;
+}
+
+.cm-s-ttcn .cm-strikethrough {
+  text-decoration: line-through;
+}
+
+.cm-s-ttcn .cm-string {
+  color: #006400;
+}
+
+.cm-s-ttcn .cm-string-2 {
+  color: #f50;
+}
+
+.cm-s-ttcn .cm-strong {
+  font-weight: bold;
+}
+
+.cm-s-ttcn .cm-tag {
+  color: #170;
+}
+
+.cm-s-ttcn .cm-variable {
+  color: #8b2252;
+}
+
+.cm-s-ttcn .cm-variable-2 {
+  color: #05a;
+}
+
+.cm-s-ttcn .cm-variable-3,
+.cm-s-ttcn .cm-type {
+  color: #085;
+}
+
+.cm-s-ttcn .cm-invalidchar {
+  color: #f00;
+}
+
+/* ASN */
+.cm-s-ttcn .cm-accessTypes,
+.cm-s-ttcn .cm-compareTypes {
+  color: #27408b;
+}
+
+.cm-s-ttcn .cm-cmipVerbs {
+  color: #8b2252;
+}
+
+.cm-s-ttcn .cm-modifier {
+  color: #d2691e;
+}
+
+.cm-s-ttcn .cm-status {
+  color: #8b4545;
+}
+
+.cm-s-ttcn .cm-storage {
+  color: #a020f0;
+}
+
+.cm-s-ttcn .cm-tags {
+  color: #006400;
+}
+
+/* CFG */
+.cm-s-ttcn .cm-externalCommands {
+  color: #8b4545;
+  font-weight: bold;
+}
+
+.cm-s-ttcn .cm-fileNCtrlMaskOptions,
+.cm-s-ttcn .cm-sectionTitle {
+  color: #2e8b57;
+  font-weight: bold;
+}
+
+/* TTCN */
+.cm-s-ttcn .cm-booleanConsts,
+.cm-s-ttcn .cm-otherConsts,
+.cm-s-ttcn .cm-verdictConsts {
+  color: #006400;
+}
+
+.cm-s-ttcn .cm-configOps,
+.cm-s-ttcn .cm-functionOps,
+.cm-s-ttcn .cm-portOps,
+.cm-s-ttcn .cm-sutOps,
+.cm-s-ttcn .cm-timerOps,
+.cm-s-ttcn .cm-verdictOps {
+  color: #0000ff;
+}
+
+.cm-s-ttcn .cm-preprocessor,
+.cm-s-ttcn .cm-templateMatch,
+.cm-s-ttcn .cm-ttcn3Macros {
+  color: #27408b;
+}
+
+.cm-s-ttcn .cm-types {
+  color: #a52a2a;
+  font-weight: bold;
+}
+
+.cm-s-ttcn .cm-visibilityModifiers {
+  font-weight: bold;
+}