Use highlightjs's dark theme. (#7922)

app/test/frontend/static_files_test.dart

@@ -161,6 +161,7 @@ void main() {
           '/static/css/dartdoc-github-alert.css',
           '/static/css/github-markdown.css',
           '/static/highlight/github.css',
+          '/static/highlight/github-dark.css',
         ])
         // dartdoc files included through dartdoc.scss
         ..removeAll([

pkg/web_css/lib/dartdoc.scss

@@ -23,3 +23,9 @@
   /* TODO(https://github.com/dart-lang/pub-dev/issues/7101): Investigate if this should be fixed in dartdoc's styles.css: the dark theme is not applied there. */
   background-color: inherit;
 }
+
+.dark-theme .hljs .hljs-deletion,
+.dark-theme .hljs .hljs-addition {
+  /* TODO(https://github.com/dart-lang/pub-dev/issues/7101): Investigate if this should be fixed in dartdoc's styles.css: the dark theme is not applied there. */
+  color: black;
+}

pkg/web_css/lib/src/_base.scss

@@ -155,11 +155,15 @@ code {
   padding: 2px 4px;
 }
 
-.hljs,
+.light-theme .hljs,
+.dark-theme .hljs,
 .markdown-body pre,
 pre {
   background: var(--pub-code-background-color);
   color: var(--pub-code-text-color);
+}
+
+pre {
   line-height: 1.2;
   padding: 30px;
   overflow-x: auto;

pkg/web_css/lib/src/_themes.scss

@@ -18,9 +18,3 @@
 .light-theme .markdown-body pre {
   background-color: #f6f8fa;
 }
-
-.dark-theme .hljs .hljs-deletion,
-.dark-theme .hljs .hljs-addition {
-  /* TODO(https://github.com/dart-lang/pub-dev/issues/7101): Investigate if this should be fixed in dartdoc's styles.css: the dark theme is not applied there. */
-  color: black;
-}

pkg/web_css/lib/src/_variables.scss

@@ -130,14 +130,6 @@
     filter: invert(1);
   }
 
-  // This is meant for a temporary override for highlight.js. We need to
-  // figure out a better way to customize the syntax highlights for dark
-  // mode, both in dartdoc and on pub.dev pages.
-  // TODO(https://github.com/dart-lang/pub-dev/issues/7868)
-  .hljs-keyword, .hljs-selector-tag, .hljs-subst {
-    color: var(--pub-code-text-color);
-  }
-
   // The landing page was designed with a light (white) background, and
   // this image is a grid of lines over that. We don't have an a dark
   // landing page design yet, and the `filter invert(1)` change does not

pkg/web_css/lib/style.scss

@@ -1,9 +1,16 @@
 // Include third-party CSS into a single output file
 // to reduce the number of HTTP requests.
-@use '../../../third_party/highlight/github.css';
 @use '../../../third_party/css/github-markdown.css';
 @use '../../../third_party/css/dartdoc-github-alert.css';
 
+.light-theme {
+  @import "../../../third_party/highlight/github";
+}
+
+.dark-theme {
+  @import "../../../third_party/highlight/github-dark";
+}
+
 // Local styles and rules.
 @import 'src/_variables';
 @import 'src/_base';

pkg/web_css/test/expression_test.dart

@@ -59,6 +59,7 @@ void main() {
         '../../third_party/css/dartdoc-github-alert.css',
         '../../third_party/css/github-markdown.css',
         '../../third_party/highlight/github.css',
+        '../../third_party/highlight/github-dark.css',
       ];
       for (final path in thirdPartyCss) {
         expressions.removeAll((await _visitCssFile(path)).expressions);

third_party/highlight/github-dark.css

@@ -0,0 +1,125 @@
+/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+
+.hljs {
+  color: #c9d1d9;
+  background: #0d1117;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #ff7b72;
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #d2a8ff;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #79c0ff;
+}
+
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #a5d6ff;
+}
+
+.hljs-built_in,
+.hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #ffa657;
+}
+
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #8b949e;
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #7ee787;
+}
+
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #c9d1d9;
+}
+
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #1f6feb;
+  font-weight: bold;
+}
+
+.hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #f2cc60;
+}
+
+.hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #c9d1d9;
+  font-style: italic;
+}
+
+.hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #c9d1d9;
+  font-weight: bold;
+}
+
+.hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #aff5b4;
+  background-color: #033a16;
+}
+
+.hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #ffdcd7;
+  background-color: #67060c;
+}
+
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
+}