diff --git a/.changeset/khaki-frogs-behave.md b/.changeset/khaki-frogs-behave.md new file mode 100644 index 0000000..f1f3bc7 --- /dev/null +++ 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 index 28e9aec..957fb9e 100644 --- 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("TypeScript with React") - const [activeThemeName, setActiveThemeName] = useState("nightOwl") + const [activeThemeName, setActiveThemeName] = useState("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 index 0f9908f..827549e 100644 --- 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 new file mode 100644 index 0000000..68c55ae --- /dev/null +++ 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 new file mode 100644 index 0000000..66c4627 --- /dev/null +++ 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