Merge pull request #394 from haskellfoundation/colors

Colors

Author: david-christiansen

message-index/css/highlight.css

@@ -1 +1,67 @@
-pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+
+code.hljs {
+  padding: 3px 5px
+}
+
+.hljs {
+  color: var(--code-color);
+  background: var(--code-bg-color);
+}
+
+.hljs-comment, .hljs-quote {
+  color: var(--code-comment-color);
+  font-style: italic
+}
+
+.hljs-doctag, .hljs-formula, .hljs-keyword {
+  color: var(--code-kw-color);
+}
+
+.hljs-deletion, .hljs-name, .hljs-section, .hljs-selector-tag, .hljs-subst {
+  color: var(--code-name-color);
+}
+
+.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-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-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(--record-field-color);
+}
+
+.hljs-emphasis {
+  font-style: italic
+}
+
+.hljs-strong {
+  font-weight: 700
+}
+
+.hljs-link {
+  text-decoration: underline
+}

message-index/css/theme.css

@@ -7,6 +7,23 @@
   --anchor-visited-color: #6F5F9C;
   --code-bg-color: #FAFAFA;
   --filename-bg: #EAEAEA;
+
+  /* Code highlighting */
+  --code-color: #383a42;
+  --code-bg-color: #fafafa;
+  --code-comment-color: #a0a1a7;
+  --code-kw-color:#af005f;
+  --code-name-color: #e45649;
+  --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;
+  /* Names of fields in record declarations */
+  --code-record-field-color: #c18401;
+  --code-pragma-color: #2aa198;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -18,13 +35,23 @@
     --anchor-visited-color: #D5C5FF;
     --code-bg-color: transparent;
     --filename-bg: #2C2C2C;
-  }
 
-  /* TODO: this is a stopgap until there's custom highlighting for dark mode */
-  code.hljs {
-    background-color: transparent;
-    filter: invert(1);
+  /* 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;
   }
+
+
 }
 
 *:focus-visible {