Add dark mode (#554)

src/components/markdown-renderer/markdown-renderer.scss

@@ -1,4 +1,4 @@
-@import '../../../node_modules/github-markdown-css/github-markdown.css';
+@import './github-markdown';
 
 .markdown-body {
   position: relative;

src/components/markdown-renderer/replace-components/abc/abc-frame.tsx

@@ -14,6 +14,6 @@ export const AbcFrame: React.FC<AbcFrameProps> = ({ code }) => {
   }, [code])
 
   return (
-    <div ref={container}/>
+    <div ref={container} className={'bg-white text-center'}/>
   )
 }

src/components/markdown-renderer/replace-components/csv/csv-table.tsx

@@ -63,7 +63,7 @@ export const CsvTable: React.FC<CsvTableProps> = ({ code, delimiter, showHeader,
   }
 
   return (
-    <table className={'csv-html-table'}>
+    <table className={'csv-html-table table-striped'}>
       {renderTableHeader(headerRow)}
       {renderTableBody(rowsWithColumns)}
     </table>

src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.scss

@@ -1,42 +1,55 @@
 .markdown-body {
-  @import '../../../../../../node_modules/highlight.js/styles/github-gist.css';
+
 }
 
-.markdown-body code.hljs {
+.markdown-body {
+  @import '../../../../../../node_modules/highlight.js/styles/github';
 
-  padding: 16px;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
+  body.dark & {
+    @import '../../../../../../node_modules/highlight.js/styles/tomorrow-night';
+  }
 
-  &.showGutter {
-    .linenumber {
-      position: relative;
-      cursor: default;
-      z-index: 4;
-      padding: 0 8px 0 0;
-      min-width: 20px;
-      box-sizing: content-box;
-      color: #afafaf;
-      border-right: 3px solid #6ce26c;
-      flex-direction: column;
-      overflow: hidden;
-      user-select: none;
+  code.hljs {
+    background-color: rgba(27, 31, 35, .05);
+    body.dark & {
+      background-color: rgb(27, 31, 35);
+    }
 
-      display: flex;
-      align-items: flex-end;
+    body.dark &, & {
+      padding: 16px;
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
 
-      &:before {
-        content: attr(data-line-number);
+      &.showGutter {
+        .linenumber {
+          position: relative;
+          cursor: default;
+          z-index: 4;
+          padding: 0 8px 0 0;
+          min-width: 20px;
+          box-sizing: content-box;
+          color: #afafaf;
+          border-right: 3px solid #6ce26c;
+          flex-direction: column;
+          overflow: hidden;
+          user-select: none;
+
+          display: flex;
+          align-items: flex-end;
+
+          &:before {
+            content: attr(data-line-number);
+          }
+        }
+      }
+
+      &.showGutter .codeline {
+        margin: 0 0 0 16px;
+      }
+
+      &.wrapLines .codeline {
+        white-space: pre-wrap;
       }
     }
   }
-
-  &.showGutter .codeline {
-    margin: 0 0 0 16px;
-  }
-
-  &.wrapLines .codeline {
-    white-space: pre-wrap;
-  }
-
 }

src/components/markdown-renderer/replace-components/sequence-diagram/deprecation-warning.tsx

@@ -11,7 +11,7 @@ export const DeprecationWarning: React.FC = () => {
     <Alert className={'mt-2'} variant={'warning'}>
       <Trans i18nKey={'renderer.sequence.deprecationWarning'}/>
       &nbsp;
-      <TranslatedExternalLink i18nKey={'common.why'} className={'text-dark'} href={links.faq}/>
+      <TranslatedExternalLink i18nKey={'common.why'} className={'text-primary'} href={links.faq}/>
     </Alert>
   )
 }