✨ Add code highlight dark and light modes

frontend/resources/styles/common/refactor/themes/default-theme.scss

@@ -4,6 +4,8 @@
 //
 // Copyright (c) KALEIDOS INC
 
+@use "sass:meta";
+
 :root {
   --color-background-primary: var(--dark-gray-1);
   --color-background-secondary: var(--dark-gray-2);
@@ -25,4 +27,6 @@
   --pending-color: var(--dark-pending-color);
   --error-color: var(--dark-error-color);
   --canvas-color: var(--color-canvas);
+
+  @include meta.load-css("hljs-dark-theme");
 }

frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss

@@ -0,0 +1,98 @@
+/**
+ * Panda Syntax Theme for Highlight.js
+ * Based on: https://github.com/tinkertrain/panda-syntax-vscode
+ * Author: Annmarie Switzer <https://github.com/annmarie-switzer>
+ */
+
+.hljs {
+  color: #e6e6e6;
+  background: #2a2c2d;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #bbbbbb;
+  font-style: italic;
+}
+
+.hljs-params {
+  color: #bbbbbb;
+}
+
+.hljs-punctuation,
+.hljs-attr {
+  color: #e6e6e6;
+}
+
+.hljs-selector-tag,
+.hljs-name,
+.hljs-meta {
+  color: #ff4b82;
+}
+
+.hljs-operator,
+.hljs-char.escape_ {
+  color: #b084eb;
+}
+
+.hljs-keyword,
+.hljs-deletion {
+  color: #ff75b5;
+}
+
+.hljs-regexp,
+.hljs-selector-pseudo,
+.hljs-selector-attr,
+.hljs-variable.language_ {
+  color: #ff9ac1;
+}
+
+.hljs-subst,
+.hljs-property,
+.hljs-code,
+.hljs-formula,
+.hljs-section,
+.hljs-title.function_ {
+  color: #45a9f9;
+}
+
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition,
+.hljs-selector-class,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-meta .hljs-string {
+  color: #19f9d8;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-number,
+.hljs-literal,
+.hljs-type,
+.hljs-link,
+.hljs-built_in,
+.hljs-title,
+.hljs-selector-id,
+.hljs-tag,
+.hljs-doctag,
+.hljs-attribute,
+.hljs-template-tag,
+.hljs-meta .hljs-keyword,
+.hljs-punctuation {
+  color: #ffb86c;
+}

frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss

@@ -0,0 +1,94 @@
+/**
+ * Panda Syntax Theme for Highlight.js
+ * Based on: https://github.com/tinkertrain/panda-syntax-vscode
+ * Author: Annmarie Switzer <https://github.com/annmarie-switzer>
+ */
+
+.hljs {
+  color: #2a2c2d;
+  background: #e6e6e6;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #676b79;
+  font-style: italic;
+}
+
+.hljs-params {
+  color: #676b79;
+}
+
+.hljs-punctuation,
+.hljs-attr {
+  color: #2a2c2d;
+}
+
+.hljs-selector-tag,
+.hljs-name,
+.hljs-meta,
+.hljs-operator,
+.hljs-char.escape_ {
+  color: #c56200;
+}
+
+.hljs-keyword,
+.hljs-deletion {
+  color: #d92792;
+}
+
+.hljs-regexp,
+.hljs-selector-pseudo,
+.hljs-selector-attr,
+.hljs-variable.language_ {
+  color: #cc5e91;
+}
+
+.hljs-subst,
+.hljs-property,
+.hljs-code,
+.hljs-formula,
+.hljs-section,
+.hljs-title.function_ {
+  color: #3787c7;
+}
+
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition,
+.hljs-selector-class,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-meta .hljs-string {
+  color: #0d7d6c;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-number,
+.hljs-literal,
+.hljs-type,
+.hljs-link,
+.hljs-built_in,
+.hljs-title,
+.hljs-selector-id,
+.hljs-tag,
+.hljs-doctag,
+.hljs-attribute,
+.hljs-template-tag,
+.hljs-meta .hljs-keyword {
+  color: #7641bb;
+}

frontend/resources/styles/common/refactor/themes/light-theme.scss

@@ -4,6 +4,8 @@
 //
 // Copyright (c) KALEIDOS INC
 
+@use "sass:meta";
+
 .light {
   --color-background-primary: var(--light-gray-1);
   --color-background-secondary: var(--light-gray-2);
@@ -24,4 +26,6 @@
   --pending-color: var(--light-pending-color);
   --error-color: var(--light-error-color);
   --canvas-color: var(--color-canvas);
+
+  @include meta.load-css("hljs-light-theme");
 }