Now switches highligter theme instead

Author: JesmoDev

storyhelpers/storybook-readme/register.js

@@ -9,7 +9,10 @@ import { STORY_RENDERED } from '@storybook/core-events';
 import React, { useEffect, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vs } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import {
+  vs,
+  vscDarkPlus,
+} from 'react-syntax-highlighter/dist/esm/styles/prism';
 import remarkGfm from 'remark-gfm';
 
 const ADDON_ID = 'readme';
@@ -48,6 +51,10 @@ const Readme = props => {
     });
   }, []);
 
+  const shouldUseDarkTheme = () => {
+    return window.matchMedia('(prefers-color-scheme: dark)');
+  };
+
   const renderReadme = () => (
     <ReactMarkdown
       children={markdown}
@@ -60,7 +67,7 @@ const Readme = props => {
               className="storybook-readme-syntax-highlighter"
               children={String(children).replace(/\n$/, '')}
               style={{
-                ...vs,
+                ...(shouldUseDarkTheme() ? vscDarkPlus : vs),
                 'pre[class*="language-"]': { display: 'none' },
               }}
               language={match[1]}
@@ -86,10 +93,6 @@ const Readme = props => {
   return (
     <div className="markdown-body" style={{ padding: '32px' }}>
       {markdown ? renderReadme() : renderNoReadme()}
-      <style>{overrideDarkThemeCSS}</style>
-      {/* TODO: This is a hack to prevent
-      the media query on prefer-color-scheme: 'dark'. A more elegant solution
-      should be found. */}
     </div>
   );
 };
@@ -105,51 +108,3 @@ addons.register(ADDON_ID, api => {
     ),
   });
 });
-
-const overrideDarkThemeCSS = `
-div.markdown-body {
-  color-scheme: light;
-  --color-prettylights-syntax-comment: #6e7781;
-  --color-prettylights-syntax-constant: #0550ae;
-  --color-prettylights-syntax-entity: #8250df;
-  --color-prettylights-syntax-storage-modifier-import: #24292f;
-  --color-prettylights-syntax-entity-tag: #116329;
-  --color-prettylights-syntax-keyword: #cf222e;
-  --color-prettylights-syntax-string: #0a3069;
-  --color-prettylights-syntax-variable: #953800;
-  --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
-  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
-  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
-  --color-prettylights-syntax-carriage-return-text: #f6f8fa;
-  --color-prettylights-syntax-carriage-return-bg: #cf222e;
-  --color-prettylights-syntax-string-regexp: #116329;
-  --color-prettylights-syntax-markup-list: #3b2300;
-  --color-prettylights-syntax-markup-heading: #0550ae;
-  --color-prettylights-syntax-markup-italic: #24292f;
-  --color-prettylights-syntax-markup-bold: #24292f;
-  --color-prettylights-syntax-markup-deleted-text: #82071e;
-  --color-prettylights-syntax-markup-deleted-bg: #FFEBE9;
-  --color-prettylights-syntax-markup-inserted-text: #116329;
-  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
-  --color-prettylights-syntax-markup-changed-text: #953800;
-  --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
-  --color-prettylights-syntax-markup-ignored-text: #eaeef2;
-  --color-prettylights-syntax-markup-ignored-bg: #0550ae;
-  --color-prettylights-syntax-meta-diff-range: #8250df;
-  --color-prettylights-syntax-brackethighlighter-angle: #57606a;
-  --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
-  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
-  --color-fg-default: #24292f;
-  --color-fg-muted: #57606a;
-  --color-fg-subtle: #6e7781;
-  --color-canvas-default: #ffffff;
-  --color-canvas-subtle: #f6f8fa;
-  --color-border-default: #d0d7de;
-  --color-border-muted: hsla(210,18%,87%,1);
-  --color-neutral-muted: rgba(175,184,193,0.2);
-  --color-accent-fg: #0969da;
-  --color-accent-emphasis: #0969da;
-  --color-attention-subtle: #fff8c5;
-  --color-danger-fg: #cf222e;
-}
-`;