Update themes for code highlighting

The light theme is now slightly more Haskelly (colors from Hackage),
and the dark theme uses Haskell colors directly rather than being
auto-generated.

Author: david-christiansen

message-index/css/highlight.css

@@ -20,20 +20,26 @@ code.hljs{
 .hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{
   color: var(--code-name-color);
 }
-.hljs-literal{
+.hljs-literal,.hljs-number{
   color: var(--code-literal-color);
 }
 .hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{
   color: var(--code-string-color);
 }
-.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{
+.hljs-type {
+  color: var(--code-constructor-color);
+}
+.hljs-attr,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-variable{
   color: var(--code-attr-color);
 }
-.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{
+.hljs-meta {
+  color: var(--code-pragma-color);
+}
+.hljs-bullet,.hljs-link,.hljs-selector-id,.hljs-symbol,.hljs-title{
   color: var(--code-symbol-color);
 }
 .hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{
-  color: var(--code-class-color);
+  color: var(--record-field-color);
 }
 .hljs-emphasis{
   font-style: italic

message-index/css/theme.css

@@ -12,13 +12,18 @@
   --code-color: #383a42;
   --code-bg-color: #fafafa;
   --code-comment-color: #a0a1a7;
-  --code-kw-color:#a626a4;
+  --code-kw-color:#af005f;
   --code-name-color: #e45649;
-  --code-literal-color: #0184bb;
-  --code-string-color: #50a14f;
+  --code-literal-color: #268bd2;
+  --code-string-color: #cb4b16;
   --code-attr-color: #986801;
+  /* Used for both type and data ctors */
+  --code-constructor-color: #5f5faf;
+  /* Names being defined */
   --code-symbol-color: #4078f2;
-  --code-class-color: #c18401;
+  /* Names of fields in record declarations */
+  --code-record-field-color: #c18401;
+  --code-pragma-color: #2aa198;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -31,14 +36,22 @@
     --code-bg-color: transparent;
     --filename-bg: #2C2C2C;
 
-  /* Code highlighting - TODO */
+  /* Code highlighting*/
+  --code-color: #C9D1D9;
+  --code-bg-color: #333;
+  --code-comment-color: #a0a1a7;
+  --code-kw-color:#BBA1FF;
+  --code-name-color: #e45649;
+  --code-literal-color: #268bd2;
+  --code-string-color: #cb4b16;
+  --code-attr-color: #986801;
+  --code-constructor-color: #d079c9;
+  --code-symbol-color: var(--code-color);
+  --code-record-field-color: #c18401;
+  --code-pragma-color: #2aa198;
   }
 
-  /* TODO: this is a stopgap until there's custom highlighting for dark mode */
-  code.hljs {
-    background-color: transparent;
-    filter: invert(1);
-  }
+
 }
 
 *:focus-visible {