Skip to content

Commit 78f3b1c

Browse files
wilkinson4wilkinson4
authored
feat: Add Rose Pine themes (#4046)
* feat: Add Rose Pine themes * Add Rosé Pine theme to CHANGES.md
1 parent eddcfb3 commit 78f3b1c

File tree

5 files changed

+342
-4
lines changed

5 files changed

+342
-4
lines changed

‎CHANGES.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,14 @@ Developer Tools:
2020

2121
Themes:
2222

23-
- Nothing yet.
23+
- Added `Rosé Pine` theme [William Wilkinson][]
2424

2525
CONTRIBUTORS
2626

2727
[Josh Goebel]: https://github.com/joshgoebel
2828
[aneesh98]: https://github.com/aneesh98
2929
[BaliBalo]: https://github.com/BaliBalo
30+
[William Wilkinson]: https://github.com/wilkinson4
3031

3132

3233
## Version 11.10.0
@@ -103,7 +104,7 @@ Themes:
103104
[Melkor-1]: https://github.com/Melkor-1
104105
[PeteLomax]: https://github.com/petelomax
105106
[gnysek]: https://github.com/gnysek
106-
[Eisenwave]: https://github.com/Eisenwave
107+
[Eisenwave]: https://github.com/Eisenwave
107108
[Aral Balkan]: https://github.com/aral
108109
[Lê Duy Quang]: https://github.com/leduyquang753
109110
[Mohamed Ali]: https://github.com/MohamedAli00949

‎src/styles/rose-pine-dawn.css

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/*!
2+
Theme: Rose Pine
3+
Origin: https://rosepinetheme.com/
4+
*/
5+
6+
/* Comment */
7+
.hljs-meta,
8+
.hljs-comment {
9+
color: #9893a5;
10+
}
11+
12+
/* Red */
13+
/*INFO: This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red */
14+
.hljs-tag,
15+
.hljs-doctag,
16+
.hljs-selector-id,
17+
.hljs-selector-class,
18+
.hljs-regexp,
19+
.hljs-template-tag,
20+
.hljs-selector-pseudo,
21+
.hljs-selector-attr,
22+
.hljs-variable.language_,
23+
.hljs-deletion {
24+
color: #b4637a;
25+
}
26+
27+
/*Orange */
28+
/*INFO: Number and Boolean constants, Language support constants */
29+
.hljs-variable,
30+
.hljs-template-variable,
31+
.hljs-number,
32+
.hljs-literal,
33+
.hljs-type,
34+
.hljs-params,
35+
.hljs-link {
36+
color: #d7827e;
37+
}
38+
39+
40+
/* Yellow */
41+
/* INFO: Function parameters, Regex character sets, Terminal Yellow */
42+
.hljs-built_in,
43+
.hljs-attribute {
44+
color: #ea9d34;
45+
}
46+
/* cyan */
47+
/* INFO: Language support functions, CSS HTML elements */
48+
.hljs-selector-tag {
49+
color: #286983;
50+
}
51+
52+
/* light blue */
53+
/* INFO: Object properties, Regex quantifiers and flags, Markdown headings, Terminal Cyan, Markdown code, Import/export keywords */
54+
.hljs-keyword,
55+
.hljs-title.function_,
56+
.hljs-title,
57+
.hljs-title.class_,
58+
.hljs-title.class_.inherited__,
59+
.hljs-subst,
60+
.hljs-property {color: #56949f;}
61+
62+
/*Green*/
63+
/* INFO: Object literal keys, Markdown links, Terminal Green */
64+
.hljs-selector-tag { color: #56949f;}
65+
66+
67+
/*Green(er) */
68+
/* INFO: Strings, CSS class names */
69+
.hljs-quote,
70+
.hljs-string,
71+
.hljs-symbol,
72+
.hljs-bullet,
73+
.hljs-addition {
74+
color: #286983;
75+
}
76+
77+
/* INFO: Function names, CSS property names, Terminal Blue */
78+
.hljs-code,
79+
.hljs-formula,
80+
.hljs-section {
81+
color: #d7827e;
82+
}
83+
84+
85+
86+
/* Magenta */
87+
/*INFO: Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta */
88+
.hljs-name,
89+
.hljs-keyword,
90+
.hljs-operator,
91+
.hljs-keyword,
92+
.hljs-char.escape_,
93+
.hljs-attr {
94+
color: #907aa9;
95+
}
96+
97+
.hljs-punctuation {color: #575279}
98+
99+
.hljs {
100+
background: #faf4ed;
101+
color: #575279;
102+
}
103+
104+
.hljs-emphasis {
105+
font-style: italic;
106+
}
107+
108+
.hljs-strong {
109+
font-weight: bold;
110+
}

‎src/styles/rose-pine-moon.css

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
/*!
2+
Theme: Rose Pine
3+
Origin: https://rosepinetheme.com/
4+
*/
5+
6+
/* Comment */
7+
.hljs-meta,
8+
.hljs-comment {
9+
color: #6e6a86;
10+
}
11+
12+
/* Red */
13+
/*INFO: This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red */
14+
.hljs-tag,
15+
.hljs-doctag,
16+
.hljs-selector-id,
17+
.hljs-selector-class,
18+
.hljs-regexp,
19+
.hljs-template-tag,
20+
.hljs-selector-pseudo,
21+
.hljs-selector-attr,
22+
.hljs-variable.language_,
23+
.hljs-deletion {
24+
color: #eb6f92;
25+
}
26+
27+
/*Orange */
28+
/*INFO: Number and Boolean constants, Language support constants */
29+
.hljs-variable,
30+
.hljs-template-variable,
31+
.hljs-number,
32+
.hljs-literal,
33+
.hljs-type,
34+
.hljs-params,
35+
.hljs-link {
36+
color: #ea9a97;
37+
}
38+
39+
40+
/* Yellow */
41+
/* INFO: Function parameters, Regex character sets, Terminal Yellow */
42+
.hljs-built_in,
43+
.hljs-attribute {
44+
color: #f6c177;
45+
}
46+
/* cyan */
47+
/* INFO: Language support functions, CSS HTML elements */
48+
.hljs-selector-tag {
49+
color: #3e8fb0;
50+
}
51+
52+
/* light blue */
53+
/* INFO: Object properties, Regex quantifiers and flags, Markdown headings, Terminal Cyan, Markdown code, Import/export keywords */
54+
.hljs-keyword,
55+
.hljs-title.function_,
56+
.hljs-title,
57+
.hljs-title.class_,
58+
.hljs-title.class_.inherited__,
59+
.hljs-subst,
60+
.hljs-property {color: #9ccfd8;}
61+
62+
/*Green*/
63+
/* INFO: Object literal keys, Markdown links, Terminal Green */
64+
.hljs-selector-tag { color: #9ccfd8;}
65+
66+
67+
/*Green(er) */
68+
/* INFO: Strings, CSS class names */
69+
.hljs-quote,
70+
.hljs-string,
71+
.hljs-symbol,
72+
.hljs-bullet,
73+
.hljs-addition {
74+
color: #3e8fb0;
75+
}
76+
77+
/* INFO: Function names, CSS property names, Terminal Blue */
78+
.hljs-code,
79+
.hljs-formula,
80+
.hljs-section {
81+
color: #ea9a97;
82+
}
83+
84+
85+
86+
/* Magenta */
87+
/*INFO: Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta */
88+
.hljs-name,
89+
.hljs-keyword,
90+
.hljs-operator,
91+
.hljs-keyword,
92+
.hljs-char.escape_,
93+
.hljs-attr {
94+
color: #c4a7e7;
95+
}
96+
97+
/* white*/
98+
/* INFO: Variables, Class names, Terminal White */
99+
.hljs-punctuation {color: #e0def4}
100+
101+
.hljs {
102+
background: #232136;
103+
color: #6e6a86;
104+
}
105+
106+
.hljs-emphasis {
107+
font-style: italic;
108+
}
109+
110+
.hljs-strong {
111+
font-weight: bold;
112+
}

‎src/styles/rose-pine.css

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
/*!
2+
Theme: Rose Pine
3+
Origin: https://rosepinetheme.com/
4+
*/
5+
6+
/* Comment */
7+
.hljs-meta,
8+
.hljs-comment {
9+
color: #6e6a86;
10+
}
11+
12+
/* Red */
13+
/*INFO: This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red */
14+
.hljs-tag,
15+
.hljs-doctag,
16+
.hljs-selector-id,
17+
.hljs-selector-class,
18+
.hljs-regexp,
19+
.hljs-template-tag,
20+
.hljs-selector-pseudo,
21+
.hljs-selector-attr,
22+
.hljs-variable.language_,
23+
.hljs-deletion {
24+
color: #eb6f92;
25+
}
26+
27+
/*Orange */
28+
/*INFO: Number and Boolean constants, Language support constants */
29+
.hljs-variable,
30+
.hljs-template-variable,
31+
.hljs-number,
32+
.hljs-literal,
33+
.hljs-type,
34+
.hljs-params,
35+
.hljs-link {
36+
color: #ebbcba;
37+
}
38+
39+
40+
/* Yellow */
41+
/* INFO: Function parameters, Regex character sets, Terminal Yellow */
42+
.hljs-built_in,
43+
.hljs-attribute {
44+
color: #f6c177;
45+
}
46+
/* cyan */
47+
/* INFO: Language support functions, CSS HTML elements */
48+
.hljs-selector-tag {
49+
color: #31748f;
50+
}
51+
52+
/* light blue */
53+
/* INFO: Object properties, Regex quantifiers and flags, Markdown headings, Terminal Cyan, Markdown code, Import/export keywords */
54+
.hljs-keyword,
55+
.hljs-title.function_,
56+
.hljs-title,
57+
.hljs-title.class_,
58+
.hljs-title.class_.inherited__,
59+
.hljs-subst,
60+
.hljs-property {color: #9ccfd8;}
61+
62+
/*Green*/
63+
/* INFO: Object literal keys, Markdown links, Terminal Green */
64+
.hljs-selector-tag { color: #9ccfd8;}
65+
66+
67+
/*Green(er) */
68+
/* INFO: Strings, CSS class names */
69+
.hljs-quote,
70+
.hljs-string,
71+
.hljs-symbol,
72+
.hljs-bullet,
73+
.hljs-addition {
74+
color: #31748f;
75+
}
76+
77+
/* INFO: Function names, CSS property names, Terminal Blue */
78+
.hljs-code,
79+
.hljs-formula,
80+
.hljs-section {
81+
color: #ebbcba;
82+
}
83+
84+
85+
86+
/* Magenta */
87+
/*INFO: Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta */
88+
.hljs-name,
89+
.hljs-keyword,
90+
.hljs-operator,
91+
.hljs-keyword,
92+
.hljs-char.escape_,
93+
.hljs-attr {
94+
color: #c4a7e7;
95+
}
96+
97+
/* white*/
98+
/* INFO: Variables, Class names, Terminal White */
99+
.hljs-punctuation {color: #e0def4}
100+
101+
.hljs {
102+
background: #191724;
103+
color: #6e6a86;
104+
}
105+
106+
.hljs-emphasis {
107+
font-style: italic;
108+
}
109+
110+
.hljs-strong {
111+
font-weight: bold;
112+
}

‎tools/developer.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ <h3>Code</h3>
7070
<button id="show-structure">Show/hide structure</button>
7171
Language: <select class="languages"><option value="">(Auto)</option></select>
7272
Theme: <select class="theme">
73-
<option>1c-light.css</option>
73+
<option>1c-light.css</option>
7474
<option>a11y-dark.css</option>
7575
<option>a11y-light.css</option>
7676
<option>agate.css</option>
@@ -305,6 +305,9 @@ <h3>Code</h3>
305305
<option>qtcreator-dark.css</option>
306306
<option>qtcreator-light.css</option>
307307
<option>rainbow.css</option>
308+
<option>rose-pine.css</option>
309+
<option>rose-pine-dawn.css</option>
310+
<option>rose-pine-moon.css</option>
308311
<option>routeros.css</option>
309312
<option>school-book.css</option>
310313
<option>shades-of-purple.css</option>
@@ -380,7 +383,7 @@ <h3>Markup</h3>
380383
editor.find('.rendering_time').text(rendering_time);
381384
editor.find('output').text(result.value);
382385
saveSettings();
383-
386+
384387
};
385388

386389
$('.editor button#update-highlighting').click(update);

0 commit comments

Comments
 (0)