Skip to content

Commit bb2d7b3

Browse files
gksandergksander
authored
Merge pull request #224 from mrousavy/feat/one-themes
feat: Add One Light and One Dark Themes
2 parents 30a01dc + ca6e269 commit bb2d7b3

File tree

5 files changed

+229
-1
lines changed

5 files changed

+229
-1
lines changed

‎.changeset/khaki-frogs-behave.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"prism-react-renderer": minor
3+
---
4+
5+
Added oneDark and oneLight themes

‎packages/demo/src/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ type ThemeType = keyof typeof themes
1717
function App() {
1818
const [activeSampleCodeType, setActiveSampleCodeType] =
1919
useState<SampleCodeType>("TypeScript with React")
20-
const [activeThemeName, setActiveThemeName] = useState<ThemeType>("nightOwl")
20+
const [activeThemeName, setActiveThemeName] = useState<ThemeType>("oneDark")
2121

2222
const activeSampleCode = sampleCode[activeSampleCodeType]
2323
const activeTheme = themes[activeThemeName]

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

+2
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,5 @@ export { default as vsDark } from "./vsDark"
1414
export { default as vsLight } from "./vsLight"
1515
export { default as jettwaveDark } from "./jettwaveDark"
1616
export { default as jettwaveLight } from "./jettwaveLight"
17+
export { default as oneDark } from "./oneDark"
18+
export { default as oneLight } from "./oneLight"

‎packages/prism-react-renderer/src/themes/oneDark.ts

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/*
2+
Adapted from the Prism One Dark Theme
3+
https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-dark.css
4+
Created by Marc Rousavy (@mrousavy) on 26.9.2023
5+
*/
6+
import type { PrismTheme } from "../types"
7+
8+
const theme: PrismTheme = {
9+
plain: {
10+
backgroundColor: "hsl(220, 13%, 18%)",
11+
color: "hsl(220, 14%, 71%)",
12+
textShadow: "0 1px rgba(0, 0, 0, 0.3)",
13+
},
14+
styles: [
15+
{
16+
types: ["comment", "prolog", "cdata"],
17+
style: {
18+
color: "hsl(220, 10%, 40%)",
19+
},
20+
},
21+
{
22+
types: ["doctype", "punctuation", "entity"],
23+
style: {
24+
color: "hsl(220, 14%, 71%)",
25+
},
26+
},
27+
{
28+
types: [
29+
"attr-name",
30+
"class-name",
31+
"maybe-class-name",
32+
"boolean",
33+
"constant",
34+
"number",
35+
"atrule",
36+
],
37+
style: { color: "hsl(29, 54%, 61%)" },
38+
},
39+
{
40+
types: ["keyword"],
41+
style: { color: "hsl(286, 60%, 67%)" },
42+
},
43+
{
44+
types: ["property", "tag", "symbol", "deleted", "important"],
45+
style: {
46+
color: "hsl(355, 65%, 65%)",
47+
},
48+
},
49+
50+
{
51+
types: [
52+
"selector",
53+
"string",
54+
"char",
55+
"builtin",
56+
"inserted",
57+
"regex",
58+
"attr-value",
59+
],
60+
style: {
61+
color: "hsl(95, 38%, 62%)",
62+
},
63+
},
64+
{
65+
types: ["variable", "operator", "function"],
66+
style: {
67+
color: "hsl(207, 82%, 66%)",
68+
},
69+
},
70+
{
71+
types: ["url"],
72+
style: {
73+
color: "hsl(187, 47%, 55%)",
74+
},
75+
},
76+
{
77+
types: ["deleted"],
78+
style: {
79+
textDecorationLine: "line-through",
80+
},
81+
},
82+
{
83+
types: ["inserted"],
84+
style: {
85+
textDecorationLine: "underline",
86+
},
87+
},
88+
{
89+
types: ["italic"],
90+
style: {
91+
fontStyle: "italic",
92+
},
93+
},
94+
{
95+
types: ["important", "bold"],
96+
style: {
97+
fontWeight: "bold",
98+
},
99+
},
100+
{
101+
types: ["important"],
102+
style: {
103+
color: "hsl(220, 14%, 71%)",
104+
},
105+
},
106+
],
107+
}
108+
109+
export default theme

‎packages/prism-react-renderer/src/themes/oneLight.ts

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
/*
2+
Adapted from the Prism One Light Theme
3+
https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-light.css
4+
Created by Marc Rousavy (@mrousavy) on 26.9.2023
5+
*/
6+
import type { PrismTheme } from "../types"
7+
8+
const theme: PrismTheme = {
9+
plain: {
10+
backgroundColor: "hsl(230, 1%, 98%)",
11+
color: "hsl(230, 8%, 24%)",
12+
},
13+
styles: [
14+
{
15+
types: ["comment", "prolog", "cdata"],
16+
style: {
17+
color: "hsl(230, 4%, 64%)",
18+
},
19+
},
20+
{
21+
types: ["doctype", "punctuation", "entity"],
22+
style: {
23+
color: "hsl(230, 8%, 24%)",
24+
},
25+
},
26+
{
27+
types: [
28+
"attr-name",
29+
"class-name",
30+
"boolean",
31+
"constant",
32+
"number",
33+
"atrule",
34+
],
35+
style: {
36+
color: "hsl(35, 99%, 36%)",
37+
},
38+
},
39+
{
40+
types: ["keyword"],
41+
style: {
42+
color: "hsl(301, 63%, 40%)",
43+
},
44+
},
45+
46+
{
47+
types: ["property", "tag", "symbol", "deleted", "important"],
48+
style: {
49+
color: "hsl(5, 74%, 59%)",
50+
},
51+
},
52+
{
53+
types: [
54+
"selector",
55+
"string",
56+
"char",
57+
"builtin",
58+
"inserted",
59+
"regex",
60+
"attr-value",
61+
"punctuation",
62+
],
63+
style: {
64+
color: "hsl(119, 34%, 47%)",
65+
},
66+
},
67+
{
68+
types: ["variable", "operator", "function"],
69+
style: {
70+
color: "hsl(221, 87%, 60%)",
71+
},
72+
},
73+
{
74+
types: ["url"],
75+
style: {
76+
color: "hsl(198, 99%, 37%)",
77+
},
78+
},
79+
{
80+
types: ["deleted"],
81+
style: {
82+
textDecorationLine: "line-through",
83+
},
84+
},
85+
{
86+
types: ["inserted"],
87+
style: {
88+
textDecorationLine: "underline",
89+
},
90+
},
91+
{
92+
types: ["italic"],
93+
style: {
94+
fontStyle: "italic",
95+
},
96+
},
97+
{
98+
types: ["important", "bold"],
99+
style: {
100+
fontWeight: "bold",
101+
},
102+
},
103+
{
104+
types: ["important"],
105+
style: {
106+
color: "hsl(230, 8%, 24%)",
107+
},
108+
},
109+
],
110+
}
111+
112+
export default theme

0 commit comments

Comments
 (0)