fix: Improve code highlighting in dark mode

closes #5021

app/typings/styled-components.d.ts

@@ -38,6 +38,7 @@ declare module "styled-components" {
     codeProperty: string;
     codeTag: string;
     codeString: string;
+    codeClassName: string;
     codeSelector: string;
     codeAttr: string;
     codeEntity: string;

shared/editor/components/Styles.ts

@@ -122,6 +122,110 @@ const mathStyle = (props: Props) => css`
   }
 `;
 
+const codeBlockStyle = (props: Props) => css`
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: ${props.theme.codeComment};
+  }
+
+  .token.punctuation {
+    color: ${props.theme.codePunctuation};
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.operator,
+  .token.boolean,
+  .token.number {
+    color: ${props.theme.codeNumber};
+  }
+
+  .token.property {
+    color: ${props.theme.codeProperty};
+  }
+
+  .token.tag {
+    color: ${props.theme.codeTag};
+  }
+
+  .token.string {
+    color: ${props.theme.codeString};
+  }
+
+  .token.selector {
+    color: ${props.theme.codeSelector};
+  }
+
+  .token.attr-name {
+    color: ${props.theme.codeAttr};
+  }
+
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string {
+    color: ${props.theme.codeEntity};
+  }
+
+  .token.attr-value,
+  .token.keyword,
+  .token.control,
+  .token.directive,
+  .token.unit {
+    color: ${props.theme.codeKeyword};
+  }
+
+  .token.function,
+  .token.class-name-definition {
+    color: ${props.theme.codeFunction};
+  }
+
+  .token.class-name {
+    color: ${props.theme.codeClassName};
+  }
+
+  .token.statement,
+  .token.regex,
+  .token.atrule {
+    color: ${props.theme.codeStatement};
+  }
+
+  .token.placeholder,
+  .token.variable {
+    color: ${props.theme.codePlaceholder};
+  }
+
+  .token.deleted {
+    text-decoration: line-through;
+  }
+
+  .token.inserted {
+    border-bottom: 1px dotted ${props.theme.codeInserted};
+    text-decoration: none;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.important {
+    color: ${props.theme.codeImportant};
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+`;
+
 const style = (props: Props) => `
 flex-grow: ${props.grow ? 1 : 0};
 justify-content: start;
@@ -1112,103 +1216,6 @@ pre {
   }
 }
 
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: ${props.theme.codeComment};
-}
-
-.token.punctuation {
-  color: ${props.theme.codePunctuation};
-}
-
-.token.namespace {
-  opacity: 0.7;
-}
-
-.token.operator,
-.token.boolean,
-.token.number {
-  color: ${props.theme.codeNumber};
-}
-
-.token.property {
-  color: ${props.theme.codeProperty};
-}
-
-.token.tag {
-  color: ${props.theme.codeTag};
-}
-
-.token.string {
-  color: ${props.theme.codeString};
-}
-
-.token.selector {
-  color: ${props.theme.codeSelector};
-}
-
-.token.attr-name {
-  color: ${props.theme.codeAttr};
-}
-
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: ${props.theme.codeEntity};
-}
-
-.token.attr-value,
-.token.keyword,
-.token.control,
-.token.directive,
-.token.unit {
-  color: ${props.theme.codeKeyword};
-}
-
-.token.function {
-  color: ${props.theme.codeFunction};
-}
-
-.token.statement,
-.token.regex,
-.token.atrule {
-  color: ${props.theme.codeStatement};
-}
-
-.token.placeholder,
-.token.variable {
-  color: ${props.theme.codePlaceholder};
-}
-
-.token.deleted {
-  text-decoration: line-through;
-}
-
-.token.inserted {
-  border-bottom: 1px dotted ${props.theme.codeInserted};
-  text-decoration: none;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.important {
-  color: ${props.theme.codeImportant};
-}
-
-.token.entity {
-  cursor: help;
-}
-
 table {
   width: 100%;
   border-collapse: collapse;
@@ -1533,6 +1540,7 @@ const EditorContainer = styled.div<Props>`
   ${style}
   ${mathStyle}
   ${codeMarkCursor}
+  ${codeBlockStyle}
 `;
 
 export default EditorContainer;

shared/styles/theme.ts

@@ -74,6 +74,7 @@ const buildBaseTheme = (input: Partial<Colors>) => {
     codeNumber: "#d73a49",
     codeProperty: "#c08b30",
     codeTag: "#3d8fd1",
+    codeClassName: "#3d8fd1",
     codeString: "#032f62",
     codeSelector: "#6679cc",
     codeAttr: "#c76b29",
@@ -226,7 +227,13 @@ export const buildDarkTheme = (input: Partial<Colors>): DefaultTheme => {
     code: colors.almostWhite,
     codeBackground: colors.black75,
     codeBorder: colors.white10,
-    codeString: "#3d8fd1",
+    codeTag: "#b5cea8",
+    codeString: "#ce9178",
+    codeKeyword: "#569CD6",
+    codeFunction: "#dcdcaa",
+    codeClassName: "#4ec9b0",
+    codeImportant: "#569CD6",
+    codeAttr: "#9cdcfe",
     embedBorder: colors.black50,
     horizontalRule: lighten(0.1, colors.almostBlack),
     noticeInfoText: colors.white,