Export code pane themes object as part of Spectacle.

.changeset/tame-pugs-brake.md

@@ -0,0 +1,5 @@
+---
+'spectacle': minor
+---
+
+Export all code pane themes as part of the Spectacle package.

docs/api-reference.md

@@ -230,7 +230,7 @@ Appear is a thin wrapper around `useSteps`. It occupies a single step within the
 
 CodePane is a component for showing a syntax-highlighted block of source code. It will scroll for overflow amounts of code, trim whitespace and normalize indents. It will also wrap long lines of code and preserve the indent. CodePane uses the [React Syntax Highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) Component.
 
-The `theme` prop accepts a configurable object or pre-defined theme object from the available [Prism Themes](https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/src/styles/prism/index.js).
+The `theme` prop accepts a configurable object or pre-defined theme object from the available [Prism Themes](https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/src/styles/prism/index.js). These themes are conveniently exported from Spectacle as `codePaneThemes`.
 
 Additionally, the `highlightRanges` prop accepts an array that can be used to highlight certain ranges of code:
 

examples/typescript/index.tsx

@@ -19,7 +19,8 @@ import {
   MarkdownSlideSet,
   Notes,
   DefaultTemplate,
-  SlideLayout
+  SlideLayout,
+  codePaneThemes
 } from 'spectacle';
 import { createRoot } from 'react-dom/client';
 
@@ -167,7 +168,7 @@ const Presentation = () => (
     </Slide>
     <SlideFragments />
     <Slide>
-      <CodePane language="jsx">{`
+      <CodePane language="jsx" theme={codePaneThemes.a11yDark}>{`
         import { createClient, Provider } from 'urql';
 
         const client = createClient({ url: 'https://0ufyz.sse.codesandbox.io' });

packages/spectacle/src/components/code-pane.tsx

@@ -13,10 +13,15 @@ import indentNormalizer from '../utils/indent-normalizer';
 import styled, { ThemeContext } from 'styled-components';
 import { compose, layout, position } from 'styled-system';
 /**
- * The types for these theme files don't exist, so we need to ts-ignore it.
+ * We export all the themes from the index file and the VSCode Dark Theme.
+ * The default VSCode dark theme is not part of the index file, so we need
+ * to import it separately and re-export with the rest of the themes.
  */
 // @ts-ignore
-import defaultTheme from 'react-syntax-highlighter/dist/cjs/styles/prism/vs-dark.js';
+import vsDark from 'react-syntax-highlighter/dist/cjs/styles/prism/vs-dark.js';
+// @ts-ignore
+import * as allThemes from 'react-syntax-highlighter/dist/cjs/styles/prism/index.js';
+export const codePaneThemes = { vsDark: vsDark.default, ...allThemes };
 
 type Ranges = Array<number | number[]>;
 
@@ -78,7 +83,7 @@ const CodePane = forwardRef<HTMLDivElement, CodePaneProps>(
       showLineNumbers = true,
       children: rawCodeString,
       stepIndex,
-      theme: syntaxTheme = defaultTheme.default,
+      theme: syntaxTheme = codePaneThemes.vsDark,
       ...props
     },
     ref

packages/spectacle/src/index.ts

@@ -1,7 +1,7 @@
 export { default as Deck } from './components/deck';
 export { default as Slide, SlideContext } from './components/slide/slide';
 export { Appear, Stepper } from './components/appear';
-export { default as CodePane } from './components/code-pane';
+export { default as CodePane, codePaneThemes } from './components/code-pane';
 export {
   OrderedList,
   Quote,