use custom Shiki themes based on default GitHub ones (#2100)

Author: Simek

components/Package/ReadmeBox.tsx

@@ -2,6 +2,7 @@ import { Md } from '@m2d/react-markdown/client';
 import { capitalize } from 'es-toolkit';
 import { useEffect, useState } from 'react';
 import { View } from 'react-native';
+import { type Theme } from 'react-shiki';
 import rehypeRaw from 'rehype-raw';
 import rehypeSanitize from 'rehype-sanitize';
 import remarkEmoji from 'remark-emoji';
@@ -11,6 +12,8 @@ import { A, P } from '~/common/styleguide';
 import { ReadmeFile } from '~/components/Icons';
 import ReadmeCodeBlock from '~/components/Package/ReadmeCodeBlock';
 import { ThreeDotsLoader } from '~/components/Package/ThreeDotsLoader';
+import rndDark from '~/styles/shiki/rnd-dark.json';
+import rndLight from '~/styles/shiki/rnd-light.json';
 import { extractAndStripBlockquoteType } from '~/util/extractAndStripBlockquoteType';
 import { getReadmeAssetURL } from '~/util/getReadmeAssetUrl';
 import tw from '~/util/tailwind';
@@ -156,6 +159,7 @@ export default function ReadmeBox({ packageName, githubUrl, isTemplate, loader =
                   return (
                     <ReadmeCodeBlock
                       code={children.props.children}
+                      theme={(tw.prefixMatch('dark') ? rndDark : rndLight) as Theme}
                       lang={langClass ? (langClass.split('-')[1] ?? 'sh').toLowerCase() : 'sh'}
                     />
                   );

components/Package/ReadmeCodeBlock.tsx

@@ -1,4 +1,4 @@
-import { useShikiHighlighter } from 'react-shiki';
+import { type Theme, useShikiHighlighter } from 'react-shiki';
 
 import { Button } from '~/components/Button';
 import { Copy } from '~/components/Icons';
@@ -8,17 +8,13 @@ import tw from '~/util/tailwind';
 type Props = {
   code: string;
   lang: string;
+  theme: Theme;
 };
 
-export default function ReadmeCodeBlock({ code, lang }: Props) {
-  const highlighter = useShikiHighlighter(
-    code,
-    lang,
-    tw.prefixMatch('dark') ? 'github-dark-default' : 'github-light-default',
-    {
-      langAlias: { gradle: 'groovy' },
-    }
-  );
+export default function ReadmeCodeBlock({ code, theme, lang }: Props) {
+  const highlighter = useShikiHighlighter(code, lang, theme, {
+    langAlias: { gradle: 'groovy' },
+  });
 
   const copyButton = (
     <Tooltip

next.config.ts

@@ -9,6 +9,7 @@ const PACKAGES_TO_OPTIMIZE = [
   '@expo/html-elements',
   '@react-native-picker/picker',
   '@sentry/*',
+  '@shikijs/*',
   'node-emoji',
   'react-native',
   'react-native-safe-area-context',