Merge branch '345807-highlightjs-dark-theme' into 'master'

Ensure syntax highlighting with highlight.js matches dark theme

See merge request gitlab-org/gitlab!84051

app/assets/stylesheets/framework/highlight.scss

+@import '../highlight/hljs';
+
 .file-content.code {
   border: 0;
   box-shadow: none;

app/assets/stylesheets/highlight/hljs.scss

+.code.highlight {
+  .hljs-comment {
+    color: var(--color-hljs-comment);
+  }
+
+  .hljs-link {
+    color: var(--color-hljs-link);
+  }
+
+  .hljs-meta {
+    color: var(--color-hljs-meta);
+  }
+
+  .hljs-keyword {
+    color: var(--color-hljs-keyword);
+  }
+
+  .hljs-type {
+    color: var(--color-hljs-type);
+  }
+
+  .hljs-attr,
+  .hljs-property {
+    color: var(--color-hljs-attr);
+  }
+
+  .hljs-built_in {
+    color: var(--color-hljs-builtin);
+  }
+
+  .hljs-literal {
+    color: var(--color-hljs-literal);
+  }
+
+  .hljs-title {
+    color: var(--color-hljs-title);
+
+    &.class_ {
+      color: var(--color-hljs-class);
+    }
+
+    &.function_ {
+      color: var(--color-hljs-function);
+    }
+  }
+
+  .hljs-tag ,
+  .hljs-name {
+    color: var(--color-hljs-tag);
+  }
+
+  .hljs-number {
+    color: var(--color-hljs-number);
+  }
+
+  .hljs-subst {
+    color: var(--color-hljs-subst);
+  }
+
+  .hljs-string,
+  .hljs-section,
+  .hljs-bullet {
+    color: var(--color-hljs-string);
+  }
+
+  .hljs-symbol {
+    color: var(--color-hljs-symbol);
+  }
+
+  .hljs-variable {
+    color: var(--color-hljs-variable);
+
+    &.language_ {
+      color: var(--color-hljs-language);
+    }
+
+    &.constant_ {
+      color: var(--color-hljs-constant);
+    }
+  }
+
+  .hljs-attribute {
+    color: var(--color-hljs-attribute);
+  }
+
+  .hljs-operator {
+    color: var(--color-hljs-operator);
+  }
+
+  .hljs-punctuation {
+    color: var(--color-hljs-punctuation);
+  }
+
+  .hljs-regexp {
+    color: var(--color-hljs-regexp);
+  }
+
+  .hljs-params {
+    color: var(--color-hljs-params);
+  }
+
+  .hljs-doctag {
+    color: var(--color-hljs-doctag);
+  }
+
+  .hljs-selector-tag {
+    color: var(--color-hljs-selector-tag);
+  }
+
+  .hljs-selector-class {
+    color: var(--color-hljs-selector-class);
+  }
+
+  .hljs-selector-id {
+    color: var(--color-hljs-selector-id);
+  }
+
+  .hljs-selector-attr {
+    color: var(--color-hljs-selector-attr);
+  }
+
+  .hljs-selector-pseudo {
+    color: var(--color-hljs-selector-pseudo);
+  }
+}

app/assets/stylesheets/highlight/themes/dark.scss

@@ -88,6 +88,39 @@ $dark-vg: #c66;
 $dark-vi: #c66;
 $dark-il: #de935f;
 
+:root {
+  --color-hljs-comment: #{$dark-c};
+  --color-hljs-variable: #{$dark-k};
+  --color-hljs-link: #{$dark-l};
+  --color-hljs-meta: #{$dark-cp};
+  --color-hljs-keyword: #{$dark-kd};
+  --color-hljs-type: #{$dark-kt};
+  --color-hljs-attr: #{$dark-na};
+  --color-hljs-builtin: #{$dark-nb};
+  --color-hljs-title: #{$dark-n};
+  --color-hljs-class: #{$dark-nc};
+  --color-hljs-function: #{$dark-nf};
+  --color-hljs-tag: #{$dark-nt};
+  --color-hljs-number: #{$dark-mi};
+  --color-hljs-subst: #{$dark-sc};
+  --color-hljs-string: #{$dark-s1};
+  --color-hljs-symbol: #{$dark-ss};
+  --color-hljs-variable: #{$dark-vi};
+  --color-hljs-operator: #{$dark-o};
+  --color-hljs-punctuation: #{$dark-p};
+  --color-hljs-regexp: #{$dark-sr};
+  --color-hljs-constant: #{$dark-nx};
+  --color-hljs-literal: #{$dark-kc};
+  --color-hljs-language: #{$dark-nx};
+  --color-hljs-params: #{$dark-nx};
+  --color-hljs-selector-doctag: #{$dark-cm};
+  --color-hljs-selector-tag: #{$dark-nt};
+  --color-hljs-selector-class: #{$dark-nc};
+  --color-hljs-selector-id: #{$dark-nn};
+  --color-hljs-selector-attr: #{$dark-nt};
+  --color-hljs-selector-pseudo: #{$dark-nd};
+}
+
 .code.dark {
   // Line numbers
   .file-line-num {