feat(themes): dracula 🧛 (#551)

codesandbox · Aug 11, 2022 · 88cbc83 · 88cbc83
1 parent 09fe902
commit 88cbc83
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 12 deletions.
diff --git a/sandpack-react/src/themes/ExternalThemes.stories.tsx b/sandpack-react/src/themes/ExternalThemes.stories.tsx
@@ -2,16 +2,38 @@ import * as allThemes from "@codesandbox/sandpack-themes";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Sandpack } from "../";
+import {
+  Sandpack,
+  SandpackCodeEditor,
+  SandpackFileExplorer,
+  SandpackPreview,
+  SandpackProvider,
+  SandpackLayout,
+} from "../";
 
 const stories = storiesOf("presets/Themes (external)", module);
 
 Object.entries(allThemes).forEach(([themeName, value]) =>
   stories.add(themeName, () => (
-    <Sandpack
-      options={{ showInlineErrors: true }}
-      template="react"
-      theme={value}
-    />
+    <>
+      <Sandpack
+        options={{
+          showLineNumbers: true,
+          showInlineErrors: true,
+          showNavigator: true,
+          showTabs: true,
+        }}
+        template="react"
+        theme={value}
+      />
+
+      <SandpackProvider template="react" theme={value}>
+        <SandpackLayout>
+          <SandpackFileExplorer />
+          <SandpackCodeEditor showLineNumbers showTabs />
+          <SandpackPreview showNavigator />
+        </SandpackLayout>
+      </SandpackProvider>
+    </>
   ))
 );
diff --git a/sandpack-react/src/themes/Theme.stories.tsx b/sandpack-react/src/themes/Theme.stories.tsx
@@ -9,6 +9,14 @@ const stories = storiesOf("presets/Themes", module);
 
 Object.keys(SANDPACK_THEMES).forEach((themeName) =>
   stories.add(themeName, () => (
-    <Sandpack theme={themeName as keyof typeof SANDPACK_THEMES} />
+    <Sandpack
+      options={{
+        showLineNumbers: true,
+        showInlineErrors: true,
+        showNavigator: true,
+        showTabs: true,
+      }}
+      theme={themeName as keyof typeof SANDPACK_THEMES}
+    />
   ))
 );
diff --git a/sandpack-themes/src/dracula.ts b/sandpack-themes/src/dracula.ts
@@ -0,0 +1,36 @@
+import type { SandpackTheme } from "./types";
+
+export const dracula: SandpackTheme = {
+  colors: {
+    surface1: "#282a36",
+    surface2: "#44475a",
+    surface3: "#44475a",
+    clickable: "#6272a4",
+    base: "#f8f8f2",
+    disabled: "#6272a4",
+    hover: "#f8f8f2",
+    accent: "#bd93f9",
+    error: "#f8f8f2",
+    errorSurface: "#44475a",
+  },
+  syntax: {
+    plain: "#f8f8f2",
+    comment: {
+      color: "#6272a4",
+      fontStyle: "italic",
+    },
+    keyword: "#ff79c6",
+    tag: "#ff79c6",
+    punctuation: "#ff79c6",
+    definition: "#f8f8f2",
+    property: "#50fa7b",
+    static: "#bd93f9",
+    string: "#f1fa8c",
+  },
+  font: {
+    body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    mono: '"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
+    size: "13px",
+    lineHeight: "20px",
+  },
+};
diff --git a/sandpack-themes/src/index.ts b/sandpack-themes/src/index.ts
@@ -3,3 +3,4 @@ export { githubLight } from "./githubLight";
 export { monokaiPro } from "./monokaiPro";
 export { nightOwl } from "./nightOwl";
 export { sandpackDark } from "./sandpackDark";
+export { dracula } from "./dracula";
diff --git a/website/docs/docs/getting-started/themes.md → website/docs/docs/getting-started/themes.mdx b/website/docs/docs/getting-started/themes.md → website/docs/docs/getting-started/themes.mdx
@@ -3,6 +3,8 @@ sidebar_position: 4
 title: Themes
 ---
 
+import AllThemes  from "../../src/examples/AllThemes"
+
 <img style={{width:"100%"}} src="https://user-images.githubusercontent.com/4838076/165913019-2903e055-0399-4b2a-ba10-db9ae9ded1e2.jpg" alt="Component toolkit for live running code editing experiences" />
 
 import { Sandpack } from "../../src/CustomSandpack";
@@ -34,11 +36,7 @@ Sandpack comes with some predefined themes:
 
 Besides the included themes, you can also consume a set of themes from `@codesandbox/sandpack-themes`, an open-source package that contains many other themes compatible with Sandpack. You can find a list of all themes available on [@codesandbox/sandpack-themes](/docs/api/themes). To use a custom theme, you need to import and reference it in your code.
 
-```jsx
-import { githubLight } from "@codesandbox/sandpack-themes";
-
-<Sandpack theme={githubLight} />;
-```
+<AllThemes />
 
 ## Custom Theme
 

diff --git a/website/docs/src/examples/AllThemes.js b/website/docs/src/examples/AllThemes.js
@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import * as themes from "@codesandbox/sandpack-themes";
+import { Sandpack } from "@codesandbox/sandpack-react";
+import CodeBlock from "@codesandbox/sandpack-docusaurus/src/theme/CodeBlock";
+
+export default () => {
+  const [current, setCurrent] = useState("githubLight");
+
+  const codeBlock = `import { ${current} } from "@codesandbox/sandpack-themes";
+
+<Sandpack theme={${current}} />;`;
+
+  return (
+    <div>
+      <label>
+        Try out:
+        <select
+          style={{ marginLeft: ".5em" }}
+          defaultValue="githubLight"
+          onChange={({ target }) => setCurrent(target.value)}
+        >
+          {Object.keys(themes).map((themeName) => (
+            <option>{themeName}</option>
+          ))}
+        </select>
+      </label>
+
+      <br />
+      <br />
+
+      <CodeBlock>{codeBlock}</CodeBlock>
+
+      <Sandpack
+        options={{
+          showLineNumbers: true,
+          showInlineErrors: true,
+          showNavigator: true,
+          showTabs: true,
+          closableTabs: true,
+          visibleFiles: [
+            "/App.js",
+            "/index.js",
+            "/public/index.html",
+            "/styles.css",
+          ],
+        }}
+        template="react"
+        theme={themes[current]}
+      />
+    </div>
+  );
+};