Skip to content

Commit 4a9a297

Browse files
satya164satya164
committed
Rework syntax themes
1 parent 8cf312b commit 4a9a297

File tree

4 files changed

+270
-4
lines changed

4 files changed

+270
-4
lines changed

‎docusaurus.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ export default {
2626
respectPrefersColorScheme: true,
2727
},
2828
prism: {
29-
theme: require('prism-react-renderer').themes.oneLight,
30-
darkTheme: require('prism-react-renderer').themes.oneDark,
29+
theme: require('./src/themes/react-navigation-light.js'),
30+
darkTheme: require('./src/themes/react-navigation-dark.js'),
3131
additionalLanguages: [
3232
'bash',
3333
'json',

‎src/css/custom.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@
178178

179179
--docusaurus-highlighted-code-line-bg: hsla(45, 97%, 72%, 0.3);
180180

181-
--codeblock-background-color: #fafafa;
181+
--codeblock-background-color: hsl(256, 12%, 98%);
182182
--codeblock-border-color: var(--ifm-color-emphasis-300);
183183
}
184184

@@ -318,7 +318,7 @@
318318

319319
--docusaurus-highlighted-code-line-bg: hsla(45, 77%, 25%, 0.3);
320320

321-
--codeblock-background-color: #292c33;
321+
--codeblock-background-color: hsl(240, 5%, 10%);
322322
--codeblock-border-color: var(--ifm-color-emphasis-200);
323323
}
324324

‎src/themes/react-navigation-dark.js‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
const theme = {
2+
plain: {
3+
color: 'hsl(212, 45%, 90%)',
4+
backgroundColor: 'hsl(240, 5%, 10%)',
5+
},
6+
styles: [
7+
{
8+
types: ['comment', 'prolog', 'doctype', 'cdata'],
9+
style: {
10+
color: 'hsl(212, 9%, 58%)',
11+
fontStyle: 'italic',
12+
},
13+
},
14+
{
15+
types: ['punctuation'],
16+
style: {
17+
color: 'hsl(212, 45%, 90%)',
18+
},
19+
},
20+
{
21+
types: ['namespace'],
22+
style: {
23+
opacity: 0.7,
24+
},
25+
},
26+
{
27+
types: ['tag', 'operator', 'number'],
28+
style: {
29+
color: 'hsl(212, 100%, 74%)',
30+
},
31+
},
32+
{
33+
types: ['property', 'function'],
34+
style: {
35+
color: 'hsl(256, 54%, 70%)',
36+
},
37+
},
38+
{
39+
types: ['tag-id', 'selector', 'atrule-id'],
40+
style: {
41+
color: 'hsl(29, 100%, 67%)',
42+
},
43+
},
44+
{
45+
types: ['attr-name'],
46+
style: {
47+
color: 'hsl(212, 100%, 74%)',
48+
},
49+
},
50+
{
51+
types: [
52+
'boolean',
53+
'entity',
54+
'url',
55+
'attr-value',
56+
'keyword',
57+
'control',
58+
'directive',
59+
'unit',
60+
'statement',
61+
'regex',
62+
'atrule',
63+
],
64+
style: {
65+
color: 'hsl(4, 100%, 72%)',
66+
},
67+
},
68+
{
69+
types: ['placeholder', 'variable'],
70+
style: {
71+
color: 'hsl(29, 100%, 67%)',
72+
},
73+
},
74+
{
75+
types: ['deleted'],
76+
style: {
77+
textDecorationLine: 'line-through',
78+
color: 'hsl(4, 100%, 72%)',
79+
},
80+
},
81+
{
82+
types: ['inserted'],
83+
style: {
84+
textDecorationLine: 'underline',
85+
color: 'hsl(139, 66%, 66%)',
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(4, 100%, 72%)',
104+
},
105+
},
106+
{
107+
types: ['class-name'],
108+
style: {
109+
color: 'hsl(29, 100%, 67%)',
110+
},
111+
},
112+
{
113+
types: ['builtin', 'char', 'constant'],
114+
style: {
115+
color: 'hsl(212, 100%, 74%)',
116+
},
117+
},
118+
{
119+
types: ['symbol'],
120+
style: {
121+
color: 'hsl(139, 66%, 66%)',
122+
},
123+
},
124+
{
125+
types: ['template-string', 'string'],
126+
style: {
127+
color: 'hsl(139, 66%, 66%)',
128+
},
129+
},
130+
],
131+
};
132+
133+
module.exports = theme;

‎src/themes/react-navigation-light.js‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
const theme = {
2+
plain: {
3+
color: 'hsl(212, 13%, 16%)',
4+
backgroundColor: 'hsl(256, 12%, 98%)',
5+
},
6+
styles: [
7+
{
8+
types: ['comment', 'prolog', 'doctype', 'cdata'],
9+
style: {
10+
color: 'hsl(212, 9%, 47%)',
11+
fontStyle: 'italic',
12+
},
13+
},
14+
{
15+
types: ['punctuation'],
16+
style: {
17+
color: 'hsl(212, 13%, 16%)',
18+
},
19+
},
20+
{
21+
types: ['namespace'],
22+
style: {
23+
opacity: 0.7,
24+
},
25+
},
26+
{
27+
types: ['tag', 'operator', 'number'],
28+
style: {
29+
color: 'hsl(212, 92%, 35%)',
30+
},
31+
},
32+
{
33+
types: ['property', 'function'],
34+
style: {
35+
color: 'hsl(256, 54%, 50%)',
36+
},
37+
},
38+
{
39+
types: ['tag-id', 'selector', 'atrule-id'],
40+
style: {
41+
color: 'hsl(26, 100%, 29%)',
42+
},
43+
},
44+
{
45+
types: ['attr-name'],
46+
style: {
47+
color: 'hsl(212, 92%, 35%)',
48+
},
49+
},
50+
{
51+
types: [
52+
'boolean',
53+
'entity',
54+
'url',
55+
'attr-value',
56+
'keyword',
57+
'control',
58+
'directive',
59+
'unit',
60+
'statement',
61+
'regex',
62+
'atrule',
63+
],
64+
style: {
65+
color: 'hsl(356, 75%, 47%)',
66+
},
67+
},
68+
{
69+
types: ['placeholder', 'variable'],
70+
style: {
71+
color: 'hsl(26, 100%, 29%)',
72+
},
73+
},
74+
{
75+
types: ['deleted'],
76+
style: {
77+
textDecorationLine: 'line-through',
78+
color: 'hsl(356, 75%, 47%)',
79+
},
80+
},
81+
{
82+
types: ['inserted'],
83+
style: {
84+
textDecorationLine: 'underline',
85+
color: 'hsl(139, 66%, 29%)',
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(356, 75%, 47%)',
104+
},
105+
},
106+
{
107+
types: ['class-name'],
108+
style: {
109+
color: 'hsl(26, 100%, 29%)',
110+
},
111+
},
112+
{
113+
types: ['builtin', 'char', 'constant'],
114+
style: {
115+
color: 'hsl(212, 92%, 35%)',
116+
},
117+
},
118+
{
119+
types: ['symbol'],
120+
style: {
121+
color: 'hsl(139, 66%, 29%)',
122+
},
123+
},
124+
{
125+
types: ['template-string', 'string'],
126+
style: {
127+
color: 'hsl(139, 66%, 32%)',
128+
},
129+
},
130+
],
131+
};
132+
133+
module.exports = theme;

0 commit comments

Comments
 (0)