Update code block styling and syntax theme colors

Modernise apperance of code blocks by updating font, tweaking sizing, and introducing light/dark variants (aligned with react.dev).

**Changes**

- Remove the custom Source Code Pro web font in favor of the default Docusaurus system monospace font stack.
- Add separate light and dark Prism syntax themes aligned to the react.dev Sandpack color palette, replacing the previous single dark-only custom theme.
- Reduce code block font size and increase line height.
- Update code block title backgrounds to match their code block, with a keyline separator.

Syntax colors source: https://github.com/reactjs/react.dev/blob/6ec61348646040795fdaa9de14a9bec603260f87/src/styles/sandpack.css#L38-L78

Author: huntie

website/core/PrismTheme.ts website/core/PrismThemeDark.tswebsite/core/PrismTheme.ts renamed to website/core/PrismThemeDark.ts

@@ -9,26 +9,20 @@ import type {ThemeConfig} from '@docusaurus/preset-classic';
 
 const theme: ThemeConfig['prism']['theme'] = {
   plain: {
-    color: '#FFFFFF',
-    backgroundColor: '#282C34',
+    color: '#ffffff',
+    backgroundColor: '#282c34',
   },
   styles: [
     {
-      types: ['property'],
+      types: ['comment', 'prolog', 'doctype', 'cdata'],
       style: {
-        color: '#2aa198',
-      },
-    },
-    {
-      types: ['attr-name', 'comment', 'prolog', 'doctype', 'cdata'],
-      style: {
-        color: '#93a1a1',
+        color: '#757575',
       },
     },
     {
       types: ['punctuation'],
       style: {
-        color: '#657b83',
+        color: '#ffffff',
       },
     },
     {
@@ -38,88 +32,69 @@ const theme: ThemeConfig['prism']['theme'] = {
       },
     },
     {
-      types: ['selector', 'char', 'builtin', 'url'],
+      types: ['keyword', 'attr-name'],
       style: {
-        color: '#2aa198',
+        color: '#77b7d7',
       },
     },
     {
-      types: ['entity'],
+      types: ['tag', 'operator'],
       style: {
-        color: '#2aa198',
+        color: '#dfab5c',
       },
     },
     {
-      types: ['atrule', 'inserted'],
+      types: ['function', 'class-name'],
       style: {
-        color: '#859900',
+        color: '#86d9ca',
       },
     },
     {
-      types: ['important', 'variable', 'deleted'],
+      types: ['property', 'selector', 'char', 'builtin', 'url', 'entity'],
       style: {
-        color: '#cb4b16',
+        color: '#77b7d7',
       },
     },
     {
-      types: ['important', 'bold'],
+      types: ['number', 'constant', 'symbol', 'boolean'],
       style: {
-        fontWeight: 'bold',
-      },
-    },
-    {
-      types: ['italic'],
-      style: {
-        fontStyle: 'italic',
-      },
-    },
-    {
-      types: ['entity'],
-      style: {
-        cursor: 'help',
-      },
-    },
-    // react-native theme
-    {
-      types: ['attr-name', 'keyword'],
-      style: {
-        color: '#c5a5c5',
+        color: '#c64640',
       },
     },
     {
       types: ['string', 'regex', 'attr-value'],
       style: {
-        color: '#8dc891',
+        color: '#977cdc',
       },
     },
     {
-      types: ['number', 'constant', 'symbol'],
+      types: ['atrule', 'inserted'],
       style: {
-        color: '#5a9bcf',
+        color: '#86d9ca',
       },
     },
     {
-      types: ['boolean'],
+      types: ['important', 'variable', 'deleted'],
       style: {
-        color: '#ff8b50',
+        color: '#c64640',
       },
     },
     {
-      types: ['class-name'],
+      types: ['important', 'bold'],
       style: {
-        color: '#fac863',
+        fontWeight: 'bold',
       },
     },
     {
-      types: ['function'],
+      types: ['italic'],
       style: {
-        color: '#79b6f2',
+        fontStyle: 'italic',
       },
     },
     {
-      types: ['operator', 'tag'],
+      types: ['entity'],
       style: {
-        color: '#fc929e',
+        cursor: 'help',
       },
     },
   ],

website/core/PrismThemeLight.ts

@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {ThemeConfig} from '@docusaurus/preset-classic';
+
+const theme: ThemeConfig['prism']['theme'] = {
+  plain: {
+    color: '#24292e',
+    backgroundColor: '#f6f8fa',
+  },
+  styles: [
+    {
+      types: ['comment', 'prolog', 'doctype', 'cdata'],
+      style: {
+        color: '#6a737d',
+      },
+    },
+    {
+      types: ['punctuation'],
+      style: {
+        color: '#24292e',
+      },
+    },
+    {
+      types: ['namespace'],
+      style: {
+        opacity: 0.7,
+      },
+    },
+    {
+      types: ['keyword', 'attr-name'],
+      style: {
+        color: '#d73a49',
+      },
+    },
+    {
+      types: ['tag', 'operator'],
+      style: {
+        color: '#22863a',
+      },
+    },
+    {
+      types: ['function', 'class-name'],
+      style: {
+        color: '#6f42c1',
+      },
+    },
+    {
+      types: ['property', 'selector', 'char', 'builtin', 'url', 'entity'],
+      style: {
+        color: '#005cc5',
+      },
+    },
+    {
+      types: ['number', 'constant', 'symbol', 'boolean'],
+      style: {
+        color: '#032f62',
+      },
+    },
+    {
+      types: ['string', 'regex', 'attr-value'],
+      style: {
+        color: '#032f62',
+      },
+    },
+    {
+      types: ['atrule', 'inserted'],
+      style: {
+        color: '#22863a',
+      },
+    },
+    {
+      types: ['important', 'variable', 'deleted'],
+      style: {
+        color: '#d73a49',
+      },
+    },
+    {
+      types: ['important', 'bold'],
+      style: {
+        fontWeight: 'bold',
+      },
+    },
+    {
+      types: ['italic'],
+      style: {
+        fontStyle: 'italic',
+      },
+    },
+    {
+      types: ['entity'],
+      style: {
+        cursor: 'help',
+      },
+    },
+  ],
+};
+
+export default theme;

website/docusaurus.config.ts

@@ -12,7 +12,8 @@ import path from 'path';
 
 import users from './showcase.json';
 import versions from './versions.json';
-import prismTheme from './core/PrismTheme';
+import prismThemeDark from './core/PrismThemeDark';
+import prismThemeLight from './core/PrismThemeLight';
 
 import remarkSnackPlayer from '@react-native-website/remark-snackplayer';
 import remarkCodeblockLanguageTitle from '@react-native-website/remark-codeblock-language-as-title';
@@ -381,7 +382,8 @@ const config: Config = {
     },
     prism: {
       defaultLanguage: 'tsx',
-      theme: prismTheme,
+      theme: prismThemeLight,
+      darkTheme: prismThemeDark,
       additionalLanguages: [
         'diff',
         'bash',

website/src/components/Home/Platforms/styles.module.css

@@ -50,9 +50,6 @@
 .codeEditorContentContainer code {
   background-color: var(--home-background);
   padding: 16px 48px 16px 24px;
-  font-family:
-    "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
   color: var(--home-text);
   font-size: 14px;
 }

website/src/css/customTheme.scss

@@ -45,16 +45,12 @@
 
   --ifm-font-family-base:
     "Optimistic Display", system-ui, -apple-system, sans-serif;
-  --ifm-font-family-monospace:
-    "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
-
   --ifm-background-color: white;
   --ifm-color-primary: #06bcee;
   --ifm-color-primary-75: #087ea4cc;
   --ifm-code-background: rgba(0, 0, 0, 0.06);
   --ifm-font-size-base: 17px;
-  --ifm-code-font-size: 90%;
+  --ifm-code-font-size: 85%;
   --ifm-code-padding-vertical: 0.05rem;
   --ifm-spacing-horizontal: 16px;
   --ifm-navbar-item-padding-horizontal: 18px;
@@ -69,7 +65,7 @@
   --ifm-table-head-color: var(--subtle);
   --ifm-link-hover-decoration: none;
   --ifm-navbar-background-color: var(--deepdark);
-  --ifm-pre-line-height: 1.4;
+  --ifm-pre-line-height: 1.6;
   --ifm-tabs-padding-vertical: 6px;
   --ifm-color-warning: #ffe564;
   --ifm-alert-color: var(--ifm-font-color-base);
@@ -247,20 +243,6 @@ html[data-theme="dark"] {
   font-style: normal;
 }
 
-@font-face {
-  font-family: "Source Code Pro";
-  src: url("/static/fonts/Source-Code-Pro-Regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Source Code Pro";
-  src: url("/static/fonts/Source-Code-Pro-Bold.woff2") format("woff2");
-  font-weight: 700;
-  font-style: normal;
-}
-
 /* Content */
 
 .main-wrapper {
@@ -527,15 +509,16 @@ hr {
   div[class*="codeBlockContainer"] {
     box-shadow: none;
     background: none;
+    border: 1px solid var(--ifm-color-emphasis-300);
     border-radius: var(--ifm-global-radius);
 
     pre {
       border-radius: 0 0 var(--ifm-global-radius) var(--ifm-global-radius);
     }
 
     button {
-      border-color: var(--light);
-      background: var(--deepdark);
+      border-color: var(--ifm-color-emphasis-300);
+      background: var(--ifm-background-color);
     }
   }
 
@@ -554,7 +537,8 @@ hr {
 
   div[class*="codeBlockTitle"] {
     color: var(--subtle);
-    background-color: var(--ifm-color-emphasis-300);
+    background-color: #f6f8fa;
+    border-bottom: 1px solid var(--ifm-color-emphasis-300);
   }
 
   .tabs {
@@ -604,9 +588,14 @@ html[data-theme="dark"] {
       }
     }
 
+    div[class*="codeBlockContainer"] {
+      border-color: rgba(225, 227, 230, 0.15);
+    }
+
     div[class*="codeBlockTitle"] {
       color: var(--docsearch-muted-color);
-      background-color: var(--deepdark);
+      background-color: #282c34;
+      border-bottom-color: rgba(225, 227, 230, 0.15);
     }
   }
 }