Add dark theme on highlightjs theme

webapp/app/styles/highlight-theme.scss

@@ -115,11 +115,112 @@
   background-color: #ffeef0;
 }
 
-.hljs-char.escape_,
-.hljs-link,
-.hljs-params,
-.hljs-property,
-.hljs-punctuation,
-.hljs-tag {
-  /* purposely ignored */
+html[data-theme="dark"] {
+  .hljs {
+  color: #CDD3D8;
+}
+
+.hljs > *::selection {
+  background-color: #3e4451;
+}
+
+.hljs-comment {
+  color: #656565;
+  font-style: italic;
+}
+
+.hljs-selector-tag {
+  color: #C792EA;
+}
+
+.hljs-string,
+.hljs-subst {
+  color: #C3E88D;
+}
+
+.hljs-number,
+.hljs-regexp,
+.hljs-variable,
+.hljs-template-variable {
+  color: #F77669;
+}
+
+.hljs-keyword {
+  color: #C792EA;
+}
+.hljs-function > .hljs-title {
+  color: #75A5FF;
+}
+.hljs-tag {
+  color: #abb2bf;
+}
+.hljs-name {
+  color: #e06c75;
+}
+.hljs-type {
+  color: #da4939;
+}
+
+.hljs-attribute {
+  color: #80CBBF;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-link {
+  color: #C792EA;
+}
+
+.hljs-params {
+  color: #EEFFF7;
+}
+
+
+.hljs-meta {
+  color: #75A5FF;
+}
+
+.hljs-title {
+  color: #75A5FF;
+}
+
+.hljs-section {
+  color: #ffc66d;
+}
+
+.hljs-addition {
+  background-color: #144212;
+  color: #e6e1dc;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #600;
+  color: #e6e1dc;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-selector-class {
+  color: #FFCB68;
+}
+
+.hljs-selector-id {
+  color: #F77669;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
 }