Merge pull request #192 from ryanmogk/master

added-2-new-themes-used-for-jettwave.com

.changeset/tall-terms-press.md

@@ -0,0 +1,6 @@
+---
+"prism-react-renderer": minor
+---
+
+Added 2 new styles for the code viewer. light & dark mode themes using only
+colors found on tailwindCSS.

packages/prism-react-renderer/src/themes/index.ts

@@ -12,3 +12,5 @@ export { default as synthwave84 } from "./synthwave84"
 export { default as ultramin } from "./ultramin"
 export { default as vsDark } from "./vsDark"
 export { default as vsLight } from "./vsLight"
+export { default as jettwaveDark } from "./jettwaveDark"
+export { default as jettwaveLight } from "./jettwaveLight"

packages/prism-react-renderer/src/themes/jettwaveDark.ts

@@ -0,0 +1,107 @@
+//
+// dark version of code viewer styles built for https://jettwave.com
+// only uses colors found in default tailwindCSS => https://tailwindcss.com/docs/customizing-colors
+// designed by: https://github.com/ryanmogk
+//
+import type { PrismTheme } from "../types"
+const theme: PrismTheme = {
+  plain: {
+    color: "#f8fafc",
+    backgroundColor: "#011627",
+  },
+  styles: [
+    {
+      types: ["prolog"],
+      style: {
+        color: "#000080",
+      },
+    },
+    {
+      types: ["comment"],
+      style: {
+        color: "#6A9955",
+      },
+    },
+    {
+      types: ["builtin", "changed", "keyword", "interpolation-punctuation"],
+      style: {
+        color: "#569CD6",
+      },
+    },
+    {
+      types: ["number", "inserted"],
+      style: {
+        color: "#B5CEA8",
+      },
+    },
+    {
+      types: ["constant"],
+      style: {
+        color: "#f8fafc",
+      },
+    },
+    {
+      types: ["attr-name", "variable"],
+      style: {
+        color: "#9CDCFE",
+      },
+    },
+    {
+      types: ["deleted", "string", "attr-value", "template-punctuation"],
+      style: {
+        color: "#cbd5e1",
+      },
+    },
+    {
+      types: ["selector"],
+      style: {
+        color: "#D7BA7D",
+      },
+    },
+    {
+      types: ["tag"],
+      style: {
+        color: "#0ea5e9",
+      },
+    },
+    {
+      types: ["tag"],
+      languages: ["markup"],
+      style: {
+        color: "#0ea5e9",
+      },
+    },
+    {
+      types: ["punctuation", "operator"],
+      style: {
+        color: "#D4D4D4",
+      },
+    },
+    {
+      types: ["punctuation"],
+      languages: ["markup"],
+      style: {
+        color: "#808080",
+      },
+    },
+    {
+      types: ["function"],
+      style: {
+        color: "#7dd3fc",
+      },
+    },
+    {
+      types: ["class-name"],
+      style: {
+        color: "#0ea5e9",
+      },
+    },
+    {
+      types: ["char"],
+      style: {
+        color: "#D16969",
+      },
+    },
+  ],
+}
+export default theme

packages/prism-react-renderer/src/themes/jettwaveLight.ts

@@ -0,0 +1,105 @@
+// light version of code viewer styles built for https://jettwave.com
+// only uses colors found in default tailwindCSS => https://tailwindcss.com/docs/customizing-colors
+// designed by: https://github.com/ryanmogk
+import type { PrismTheme } from "../types"
+const theme: PrismTheme = {
+  plain: {
+    color: "#0f172a",
+    backgroundColor: "#f1f5f9",
+  },
+  styles: [
+    {
+      types: ["prolog"],
+      style: {
+        color: "#000080",
+      },
+    },
+    {
+      types: ["comment"],
+      style: {
+        color: "#6A9955",
+      },
+    },
+    {
+      types: ["builtin", "changed", "keyword", "interpolation-punctuation"],
+      style: {
+        color: "#0c4a6e",
+      },
+    },
+    {
+      types: ["number", "inserted"],
+      style: {
+        color: "#B5CEA8",
+      },
+    },
+    {
+      types: ["constant"],
+      style: {
+        color: "#0f172a",
+      },
+    },
+    {
+      types: ["attr-name", "variable"],
+      style: {
+        color: "#0c4a6e",
+      },
+    },
+    {
+      types: ["deleted", "string", "attr-value", "template-punctuation"],
+      style: {
+        color: "#64748b",
+      },
+    },
+    {
+      types: ["selector"],
+      style: {
+        color: "#D7BA7D",
+      },
+    },
+    {
+      types: ["tag"],
+      style: {
+        color: "#0ea5e9",
+      },
+    },
+    {
+      types: ["tag"],
+      languages: ["markup"],
+      style: {
+        color: "#0ea5e9",
+      },
+    },
+    {
+      types: ["punctuation", "operator"],
+      style: {
+        color: "#475569",
+      },
+    },
+    {
+      types: ["punctuation"],
+      languages: ["markup"],
+      style: {
+        color: "#808080",
+      },
+    },
+    {
+      types: ["function"],
+      style: {
+        color: "#0e7490",
+      },
+    },
+    {
+      types: ["class-name"],
+      style: {
+        color: "#0ea5e9",
+      },
+    },
+    {
+      types: ["char"],
+      style: {
+        color: "#D16969",
+      },
+    },
+  ],
+}
+export default theme