Merge pull request #224 from mrousavy/feat/one-themes

feat: Add One Light and One Dark Themes
FormidableLabs · Sep 26, 2023 · bb2d7b3 · bb2d7b3
2 parents 30a01dc + ca6e269
commit bb2d7b3
Show file tree

Hide file tree

Showing 5 changed files with 229 additions and 1 deletion.
diff --git a/.changeset/khaki-frogs-behave.md b/.changeset/khaki-frogs-behave.md
@@ -0,0 +1,5 @@
+---
+"prism-react-renderer": minor
+---
+
+Added oneDark and oneLight themes
diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx
@@ -17,7 +17,7 @@ type ThemeType = keyof typeof themes
 function App() {
   const [activeSampleCodeType, setActiveSampleCodeType] =
     useState<SampleCodeType>("TypeScript with React")
-  const [activeThemeName, setActiveThemeName] = useState<ThemeType>("nightOwl")
+  const [activeThemeName, setActiveThemeName] = useState<ThemeType>("oneDark")
 
   const activeSampleCode = sampleCode[activeSampleCodeType]
   const activeTheme = themes[activeThemeName]

diff --git a/packages/prism-react-renderer/src/themes/index.ts b/packages/prism-react-renderer/src/themes/index.ts
@@ -14,3 +14,5 @@ export { default as vsDark } from "./vsDark"
 export { default as vsLight } from "./vsLight"
 export { default as jettwaveDark } from "./jettwaveDark"
 export { default as jettwaveLight } from "./jettwaveLight"
+export { default as oneDark } from "./oneDark"
+export { default as oneLight } from "./oneLight"
diff --git a/packages/prism-react-renderer/src/themes/oneDark.ts b/packages/prism-react-renderer/src/themes/oneDark.ts
@@ -0,0 +1,109 @@
+/*
+    Adapted from the Prism One Dark Theme
+    https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-dark.css
+    Created by Marc Rousavy (@mrousavy) on 26.9.2023
+*/
+import type { PrismTheme } from "../types"
+
+const theme: PrismTheme = {
+  plain: {
+    backgroundColor: "hsl(220, 13%, 18%)",
+    color: "hsl(220, 14%, 71%)",
+    textShadow: "0 1px rgba(0, 0, 0, 0.3)",
+  },
+  styles: [
+    {
+      types: ["comment", "prolog", "cdata"],
+      style: {
+        color: "hsl(220, 10%, 40%)",
+      },
+    },
+    {
+      types: ["doctype", "punctuation", "entity"],
+      style: {
+        color: "hsl(220, 14%, 71%)",
+      },
+    },
+    {
+      types: [
+        "attr-name",
+        "class-name",
+        "maybe-class-name",
+        "boolean",
+        "constant",
+        "number",
+        "atrule",
+      ],
+      style: { color: "hsl(29, 54%, 61%)" },
+    },
+    {
+      types: ["keyword"],
+      style: { color: "hsl(286, 60%, 67%)" },
+    },
+    {
+      types: ["property", "tag", "symbol", "deleted", "important"],
+      style: {
+        color: "hsl(355, 65%, 65%)",
+      },
+    },
+
+    {
+      types: [
+        "selector",
+        "string",
+        "char",
+        "builtin",
+        "inserted",
+        "regex",
+        "attr-value",
+      ],
+      style: {
+        color: "hsl(95, 38%, 62%)",
+      },
+    },
+    {
+      types: ["variable", "operator", "function"],
+      style: {
+        color: "hsl(207, 82%, 66%)",
+      },
+    },
+    {
+      types: ["url"],
+      style: {
+        color: "hsl(187, 47%, 55%)",
+      },
+    },
+    {
+      types: ["deleted"],
+      style: {
+        textDecorationLine: "line-through",
+      },
+    },
+    {
+      types: ["inserted"],
+      style: {
+        textDecorationLine: "underline",
+      },
+    },
+    {
+      types: ["italic"],
+      style: {
+        fontStyle: "italic",
+      },
+    },
+    {
+      types: ["important", "bold"],
+      style: {
+        fontWeight: "bold",
+      },
+    },
+    {
+      types: ["important"],
+      style: {
+        color: "hsl(220, 14%, 71%)",
+      },
+    },
+  ],
+}
+
+export default theme
diff --git a/packages/prism-react-renderer/src/themes/oneLight.ts b/packages/prism-react-renderer/src/themes/oneLight.ts
@@ -0,0 +1,112 @@
+/*
+    Adapted from the Prism One Light Theme
+    https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-light.css
+    Created by Marc Rousavy (@mrousavy) on 26.9.2023
+*/
+import type { PrismTheme } from "../types"
+
+const theme: PrismTheme = {
+  plain: {
+    backgroundColor: "hsl(230, 1%, 98%)",
+    color: "hsl(230, 8%, 24%)",
+  },
+  styles: [
+    {
+      types: ["comment", "prolog", "cdata"],
+      style: {
+        color: "hsl(230, 4%, 64%)",
+      },
+    },
+    {
+      types: ["doctype", "punctuation", "entity"],
+      style: {
+        color: "hsl(230, 8%, 24%)",
+      },
+    },
+    {
+      types: [
+        "attr-name",
+        "class-name",
+        "boolean",
+        "constant",
+        "number",
+        "atrule",
+      ],
+      style: {
+        color: "hsl(35, 99%, 36%)",
+      },
+    },
+    {
+      types: ["keyword"],
+      style: {
+        color: "hsl(301, 63%, 40%)",
+      },
+    },
+
+    {
+      types: ["property", "tag", "symbol", "deleted", "important"],
+      style: {
+        color: "hsl(5, 74%, 59%)",
+      },
+    },
+    {
+      types: [
+        "selector",
+        "string",
+        "char",
+        "builtin",
+        "inserted",
+        "regex",
+        "attr-value",
+        "punctuation",
+      ],
+      style: {
+        color: "hsl(119, 34%, 47%)",
+      },
+    },
+    {
+      types: ["variable", "operator", "function"],
+      style: {
+        color: "hsl(221, 87%, 60%)",
+      },
+    },
+    {
+      types: ["url"],
+      style: {
+        color: "hsl(198, 99%, 37%)",
+      },
+    },
+    {
+      types: ["deleted"],
+      style: {
+        textDecorationLine: "line-through",
+      },
+    },
+    {
+      types: ["inserted"],
+      style: {
+        textDecorationLine: "underline",
+      },
+    },
+    {
+      types: ["italic"],
+      style: {
+        fontStyle: "italic",
+      },
+    },
+    {
+      types: ["important", "bold"],
+      style: {
+        fontWeight: "bold",
+      },
+    },
+    {
+      types: ["important"],
+      style: {
+        color: "hsl(230, 8%, 24%)",
+      },
+    },
+  ],
+}
+
+export default theme