Added support for custom prism themes in source addon (#619)

* Added support for custom prism themes in source addon

* added changeset

* updated website docs for source addon

---------

Co-authored-by: Matthew Carr <[email protected]>

Author: Matthematic

.changeset/swift-rivers-buy.md

@@ -0,0 +1,5 @@
+---
+"@ladle/react": minor
+---
+
+Added support for custom prism themes in the source addon

packages/example/.ladle/config.mjs

@@ -11,12 +11,30 @@
  *
  *  */
 
+const customLightTheme = {
+  plain: {
+    color: "black",
+    backgroundColor: "hsl(180deg 75.96% 77.9%)",
+  },
+};
+
+const customDarkTheme = {
+  plain: {
+    color: "salmon",
+    backgroundColor: "#1E1E1E",
+  },
+};
+/** @type {import('@ladle/react').UserConfig} */
 export default {
   appendToHead: `<style>.append {}</style>`,
   addons: {
     a11y: {
       enabled: true,
     },
+    source: {
+      themeLight: customLightTheme,
+      themeDark: customDarkTheme,
+    },
   },
   expandStoryTree: true,
 };

packages/ladle/lib/app/src/addons/source.tsx

@@ -1,17 +1,17 @@
-import * as React from "react";
-import queryString from "query-string";
-import { Highlight, themes } from "prism-react-renderer";
 import type { Language } from "prism-react-renderer";
+import { Highlight } from "prism-react-renderer";
+import queryString from "query-string";
+import * as React from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import {
-  storySource,
   stories,
+  storySource,
   StorySourceHeader,
 } from "virtual:generated-list";
-import { AddonProps, GlobalState, ActionType } from "../../../shared/types";
+import { ActionType, AddonProps, GlobalState } from "../../../shared/types";
+import config from "../get-config";
 import { Source } from "../icons";
 import { Modal } from "../ui";
-import config from "../get-config";
 
 export const getQuery = (locationSearch: string) => {
   const urlVal = queryString.parse(locationSearch).source;
@@ -41,17 +41,16 @@ export const CodeHighlight = ({
 
   if (match) {
     language = match[1] as Language;
+
     return (
       <Highlight
         code={children.trim()}
         language={language}
-        theme={{
-          ...(theme === "dark" ? themes.nightOwl : themes.github),
-          plain: {
-            ...(theme === "dark" ? themes.nightOwl : themes.github).plain,
-            backgroundColor: "var(--ladle-bg-color-secondary)",
-          },
-        }}
+        theme={
+          theme === "dark"
+            ? config.addons.source.themeDark
+            : config.addons.source.themeLight
+        }
       >
         {({ className, style, tokens, getTokenProps }) => (
           <div
@@ -81,13 +80,11 @@ export const CodeHighlight = ({
       <Highlight
         code={children.trim()}
         language={language}
-        theme={{
-          ...(theme === "dark" ? themes.nightOwl : themes.github),
-          plain: {
-            ...(theme === "dark" ? themes.nightOwl : themes.github).plain,
-            backgroundColor: "var(--ladle-bg-color-secondary)",
-          },
-        }}
+        theme={
+          theme === "dark"
+            ? config.addons.source.themeDark
+            : config.addons.source.themeLight
+        }
       >
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
           <pre

packages/ladle/lib/shared/default-config.js

@@ -1,3 +1,5 @@
+import { themes } from "prism-react-renderer";
+
 /**
  * @type {import('../shared/types').Config}
  */
@@ -59,6 +61,20 @@ export default {
     source: {
       enabled: true,
       defaultState: false,
+      themeDark: {
+        ...themes.nightOwl,
+        plain: {
+          ...themes.nightOwl.plain,
+          backgroundColor: "var(--ladle-bg-color-secondary)",
+        },
+      },
+      themeLight: {
+        ...themes.github,
+        plain: {
+          ...themes.github.plain,
+          backgroundColor: "var(--ladle-bg-color-secondary)",
+        },
+      },
     },
     a11y: {
       enabled: false,

packages/ladle/lib/shared/types.ts

@@ -1,3 +1,4 @@
+import { PrismTheme } from "prism-react-renderer";
 import type { UserConfig as ViteUserConfig } from "vite";
 
 type RecursivePartial<T> = {
@@ -231,6 +232,8 @@ export type Config = {
     source: {
       enabled: boolean;
       defaultState: boolean;
+      themeLight: PrismTheme;
+      themeDark: PrismTheme;
     };
     a11y: {
       enabled: boolean;