CodeMirror theme selector

polterguy · Nov 11, 2023 · d10cf03 · d10cf03
1 parent 3103b68
commit d10cf03
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 121 deletions.
diff --git a/frontend/angular.json b/frontend/angular.json
@@ -38,7 +38,37 @@
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss",
               "./node_modules/codemirror/lib/codemirror.css",
-              "./node_modules/codemirror/theme/duotone-light.css"
+              "./node_modules/codemirror/theme/duotone-light.css",
+              "./node_modules/codemirror/theme/duotone-dark.css",
+              "./node_modules/codemirror/theme/paraiso-light.css",
+              "./node_modules/codemirror/theme/paraiso-dark.css",
+              "./node_modules/codemirror/theme/3024-day.css",
+              "./node_modules/codemirror/theme/3024-night.css",
+              "./node_modules/codemirror/theme/abbott.css",
+              "./node_modules/codemirror/theme/abcdef.css",
+              "./node_modules/codemirror/theme/ambiance.css",
+              "./node_modules/codemirror/theme/ayu-dark.css",
+              "./node_modules/codemirror/theme/ayu-mirage.css",
+              "./node_modules/codemirror/theme/base16-dark.css",
+              "./node_modules/codemirror/theme/base16-light.css",
+              "./node_modules/codemirror/theme/bespin.css",
+              "./node_modules/codemirror/theme/blackboard.css",
+              "./node_modules/codemirror/theme/cobalt.css",
+              "./node_modules/codemirror/theme/colorforth.css",
+              "./node_modules/codemirror/theme/darcula.css",
+              "./node_modules/codemirror/theme/dracula.css",
+              "./node_modules/codemirror/theme/eclipse.css",
+              "./node_modules/codemirror/theme/elegant.css",
+              "./node_modules/codemirror/theme/erlang-dark.css",
+              "./node_modules/codemirror/theme/gruvbox-dark.css",
+              "./node_modules/codemirror/theme/hopscotch.css",
+              "./node_modules/codemirror/theme/icecoder.css",
+              "./node_modules/codemirror/theme/lesser-dark.css",
+              "./node_modules/codemirror/theme/lucario.css",
+              "./node_modules/codemirror/theme/material.css",
+              "./node_modules/codemirror/theme/material-darker.css",
+              "./node_modules/codemirror/theme/mbo.css",
+              "./node_modules/codemirror/theme/monokai.css"
             ],
             "scripts": [],
             "allowedCommonJsDependencies": [

diff --git a/frontend/src/app/_general/services/codemirror-actions.service.ts b/frontend/src/app/_general/services/codemirror-actions.service.ts
@@ -7,6 +7,7 @@ import { Injectable, NgZone } from '@angular/core';
 import CodeMirror from 'codemirror';
 import { Subject } from 'rxjs';
 import fileTypes from 'src/app/codemirror/file-types.json';
+import { ThemeService } from './theme.service';
 
 /**
  * CodeMirror keyboard shortcut action service for listening to keyboard shortcuts.
@@ -19,7 +20,9 @@ export class CodemirrorActionsService {
   private extensions = fileTypes;
   action: Subject<string> = new Subject();
 
-  constructor(private ngZone: NgZone) { }
+  constructor(
+    private ngZone: NgZone,
+    private themeService: ThemeService) { }
 
   public getActions(path?: string, type?: string) {
 
@@ -36,7 +39,7 @@ export class CodemirrorActionsService {
       return null;
     } else {
       const res = this.clone(options[0]);
-      res.options.theme = 'duotone-light';
+      res.options.theme = this.themeService.codeTheme;
       if (res.options.extraKeys) {
         res.options.extraKeys['Alt-M'] = (cm: any) => {
           cm.setOption('fullScreen', !cm.getOption('fullScreen'));

diff --git a/frontend/src/app/_general/services/theme.service.ts b/frontend/src/app/_general/services/theme.service.ts
@@ -38,6 +38,43 @@ export class ThemeService {
     ];
   }
 
+  get codeThemes() {
+
+    return [
+      'duotone-light',
+      'duotone-dark',
+      'paraiso-light',
+      'paraiso-dark',
+      '3024-day',
+      '3024-night',
+      'abbott',
+      'abcdef',
+      'ambiance',
+      'ayu-dark',
+      'ayu-mirage',
+      'base16-dark',
+      'base16-light',
+      'bespin',
+      'blackboard',
+      'cobalt',
+      'colorforth',
+      'darcula',
+      'dracula',
+      'eclipse',
+      'elegant',
+      'erlang-dark',
+      'gruvbox-dark',
+      'hopscotch',
+      'icecoder',
+      'lesser-dark',
+      'lucario',
+      'material',
+      'material-darker',
+      'mbo',
+      'monokai',
+    ];
+  }
+
   get theme() {
 
     return localStorage.getItem('theme') || 'default';
@@ -60,6 +97,16 @@ export class ThemeService {
     this._themeChanged.next(value);
   }
 
+  get codeTheme() {
+
+    return localStorage.getItem('codeTheme') || 'mbo';
+  }
+
+  set codeTheme(value: string) {
+
+    localStorage.setItem('codeTheme', value);
+  }
+
   get theme_options() {
 
     return themes[this.theme];

diff --git a/frontend/src/app/_protected/pages/user/profile/profile.component.html b/frontend/src/app/_protected/pages/user/profile/profile.component.html
@@ -219,7 +219,26 @@ <h3 class="fw-bold">Theme</h3>
             </mat-form-field>
 
           </div>
-          <div class="col-lg col-sm-6 col-12 mt-lg-0 mt-3"></div>
+          <div class="col-lg col-sm-6 col-12 mb-sm-0 mb-3">
+
+            <mat-form-field class="w-100 standalone-field">
+              <span
+                matPrefix
+                matTooltip="Code theme"
+                class="d-flex flex-nowrap align-items-center justify-content-between me-2">
+                <mat-icon>remove_red_eye</mat-icon>
+                <span class="text-muted">|</span>
+              </span>
+              <mat-select
+                placeholder="Code theme"
+                [(ngModel)]="themeService.codeTheme">
+                <mat-option
+                  *ngFor="let item of themeService.codeThemes"
+                  [value]="item">{{item}}</mat-option>
+              </mat-select>
+            </mat-form-field>
+
+          </div>
           <div class="col-lg col-sm-6 col-12 mt-lg-0 mt-3"></div>
           <div class="col-xl-2 col-lg-3 col-sm-6 col-12 mt-lg-0 mt-3"></div>
         </div>

diff --git a/frontend/src/assets/styles/general/elements.scss b/frontend/src/assets/styles/general/elements.scss
@@ -55,7 +55,6 @@ codemirror
 =-=-=-=-=-=*/
 .CodeMirror {
   border-radius: 5px;
-  background-color: #faf8f3 !important;
   border: solid 1px rgba(0,0,0,.1);
 }
 
@@ -66,122 +65,6 @@ codemirror
   max-height: 100%;
 }
 
-div.CodeMirror-selected {
-  background: transparentize($color: $aista_info, $amount: 0.85);
-}
-
-.CodeMirror-line::selection,
-.CodeMirror-line>span::selection,
-.CodeMirror-line>span>span::selection {
-  background: transparentize($color: $aista_info, $amount: 0.85);
-}
-
-.CodeMirror-line::-moz-selection,
-.CodeMirror-line>span::-moz-selection,
-.CodeMirror-line>span>span::-moz-selection {
-  background: transparentize($color: $aista_info, $amount: 0.85);
-}
-
-.CodeMirror-gutters {
-  background: #fefefe;
-  border-right: 0px;
-  border-top-left-radius: $aista_radius;
-  border-bottom-left-radius: $aista_radius;
-}
-
-.CodeMirror-guttermarker {
-  color: white;
-}
-
-.CodeMirror-guttermarker-subtle {
-  color: grey;
-}
-
-.CodeMirror-linenumber {
-  color: #91828f;
-}
-
-.CodeMirror-cursor {
-  border-left: 1px solid #21121f;
-}
-
-span.cm-comment {
-  color: #95958a;
-}
-
-span.cm-atom {
-  color: #00a8c6;
-}
-
-span.cm-number {
-  color: #00a8c6;
-}
-
-span.cm-property,
-span.cm-attribute {
-  color: #3893a1;
-}
-
-span.cm-keyword {
-  color: #a77106;
-}
-
-span.cm-string {
-  color: #3893a1;
-}
-
-span.cm-string.cm-property {
-  color: #41412f;
-}
-
-span.cm-variable {
-  color: #913ca1;
-}
-
-span.cm-variable-2 {
-  color: #a77106;
-}
-
-span.cm-def {
-  color: #02803a;
-}
-
-span.cm-bracket {
-  color: #a77106;
-  font-weight: bold;
-}
-
-span.cm-tag {
-  color: #037688;
-}
-
-span.cm-link {
-  color: #f54b07;
-}
-
-span.cm-error {
-  border-bottom: #636363;
-  color: #d64f10;
-}
-
-span.cm-qualifier {
-  color: #646452;
-}
-
-.CodeMirror-activeline-background {
-  border-top: 1px solid transparentize($color: $aista_default_grey4, $amount: 0.75);
-  border-bottom: 1px solid transparentize($color: $aista_default_grey4, $amount: 0.75);
-  background: transparentize($color: $aista_default_grey4, $amount: 0.95);
-}
-
-.CodeMirror-matchingbracket {
-  color: #ffb928 !important;
-}
-
-.CodeMirror-matchingtag {
-  background: rgba(255, 255, 255, .37);
-}
-
 .CodeMirror-hints {
   position: absolute;
   z-index: 10000;