feat: Add Rose Pine themes (#4046)

* feat: Add Rose Pine themes * Add Rosé Pine theme to CHANGES.md
highlightjs · Jul 9, 2024 · 78f3b1c · 78f3b1c
1 parent eddcfb3
commit 78f3b1c
Show file tree

Hide file tree

Showing 5 changed files with 342 additions and 4 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -20,13 +20,14 @@ Developer Tools:
 
 Themes:
 
-- Nothing yet.
+- Added `Rosé Pine` theme [William Wilkinson][]
 
 CONTRIBUTORS
 
 [Josh Goebel]: https://github.com/joshgoebel
 [aneesh98]: https://github.com/aneesh98
 [BaliBalo]: https://github.com/BaliBalo
+[William Wilkinson]: https://github.com/wilkinson4
 
 
 ## Version 11.10.0
@@ -103,7 +104,7 @@ Themes:
 [Melkor-1]: https://github.com/Melkor-1
 [PeteLomax]: https://github.com/petelomax
 [gnysek]: https://github.com/gnysek
-[Eisenwave]: https://github.com/Eisenwave 
+[Eisenwave]: https://github.com/Eisenwave
 [Aral Balkan]: https://github.com/aral
 [Lê Duy Quang]: https://github.com/leduyquang753
 [Mohamed Ali]: https://github.com/MohamedAli00949

diff --git a/src/styles/rose-pine-dawn.css b/src/styles/rose-pine-dawn.css
@@ -0,0 +1,110 @@
+/*!
+  Theme: Rose Pine
+  Origin: https://rosepinetheme.com/
+*/
+
+/*  Comment */
+.hljs-meta,
+.hljs-comment {
+  color: #9893a5;
+}
+
+/* Red */
+/*INFO: This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red */
+.hljs-tag,
+.hljs-doctag,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-template-tag,
+.hljs-selector-pseudo,
+.hljs-selector-attr,
+.hljs-variable.language_,
+.hljs-deletion {
+  color: #b4637a;
+}
+
+/*Orange */
+/*INFO: Number and Boolean constants, Language support constants */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-number,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-link {
+  color: #d7827e;
+}
+
+
+/*  Yellow */
+/* INFO:  	Function parameters, Regex character sets, Terminal Yellow */
+.hljs-built_in,
+.hljs-attribute {
+  color: #ea9d34;
+}
+/* cyan */
+/* INFO: Language support functions, CSS HTML elements */
+.hljs-selector-tag {
+  color: #286983;
+}
+
+/* light blue */
+/* INFO: Object properties, Regex quantifiers and flags, Markdown headings, Terminal Cyan, Markdown code, Import/export keywords */
+.hljs-keyword,
+  .hljs-title.function_,
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-subst,
+.hljs-property {color: #56949f;}
+
+/*Green*/
+/* INFO: Object literal keys, Markdown links, Terminal Green */
+.hljs-selector-tag { color: #56949f;}
+
+
+/*Green(er) */
+/* INFO: Strings, CSS class names */
+.hljs-quote,
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #286983;
+}
+
+/* INFO:  	Function names, CSS property names, Terminal Blue */
+.hljs-code,
+.hljs-formula,
+.hljs-section {
+  color: #d7827e;
+}
+
+
+
+/* Magenta */
+/*INFO: Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta */
+.hljs-name,
+.hljs-keyword,
+.hljs-operator,
+.hljs-keyword,
+.hljs-char.escape_,
+.hljs-attr {
+  color: #907aa9;
+}
+
+.hljs-punctuation {color: #575279}
+
+.hljs {
+  background: #faf4ed;
+  color: #575279;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/styles/rose-pine-moon.css b/src/styles/rose-pine-moon.css
@@ -0,0 +1,112 @@
+/*!
+  Theme: Rose Pine
+  Origin: https://rosepinetheme.com/
+*/
+
+/*  Comment */
+.hljs-meta,
+.hljs-comment {
+  color: #6e6a86;
+}
+
+/* Red */
+/*INFO: This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red */
+.hljs-tag,
+.hljs-doctag,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-template-tag,
+.hljs-selector-pseudo,
+.hljs-selector-attr,
+.hljs-variable.language_,
+.hljs-deletion {
+  color: #eb6f92;
+}
+
+/*Orange */
+/*INFO: Number and Boolean constants, Language support constants */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-number,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-link {
+  color: #ea9a97;
+}
+
+
+/*  Yellow */
+/* INFO:  	Function parameters, Regex character sets, Terminal Yellow */
+.hljs-built_in,
+.hljs-attribute {
+  color: #f6c177;
+}
+/* cyan */
+/* INFO: Language support functions, CSS HTML elements */
+.hljs-selector-tag {
+  color: #3e8fb0;
+}
+
+/* light blue */
+/* INFO: Object properties, Regex quantifiers and flags, Markdown headings, Terminal Cyan, Markdown code, Import/export keywords */
+.hljs-keyword,
+  .hljs-title.function_,
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-subst,
+.hljs-property {color: #9ccfd8;}
+
+/*Green*/
+/* INFO: Object literal keys, Markdown links, Terminal Green */
+.hljs-selector-tag { color: #9ccfd8;}
+
+
+/*Green(er) */
+/* INFO: Strings, CSS class names */
+.hljs-quote,
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #3e8fb0;
+}
+
+/* INFO:  	Function names, CSS property names, Terminal Blue */
+.hljs-code,
+.hljs-formula,
+.hljs-section {
+  color: #ea9a97;
+}
+
+
+
+/* Magenta */
+/*INFO: Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta */
+.hljs-name,
+.hljs-keyword,
+.hljs-operator,
+.hljs-keyword,
+.hljs-char.escape_,
+.hljs-attr {
+  color: #c4a7e7;
+}
+
+/* white*/
+/* INFO: Variables, Class names, Terminal White */
+.hljs-punctuation {color: #e0def4}
+
+.hljs {
+  background: #232136;
+  color: #6e6a86;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/styles/rose-pine.css b/src/styles/rose-pine.css
@@ -0,0 +1,112 @@
+/*!
+  Theme: Rose Pine
+  Origin: https://rosepinetheme.com/
+*/
+
+/*  Comment */
+.hljs-meta,
+.hljs-comment {
+  color: #6e6a86;
+}
+
+/* Red */
+/*INFO: This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red */
+.hljs-tag,
+.hljs-doctag,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-template-tag,
+.hljs-selector-pseudo,
+.hljs-selector-attr,
+.hljs-variable.language_,
+.hljs-deletion {
+  color: #eb6f92;
+}
+
+/*Orange */
+/*INFO: Number and Boolean constants, Language support constants */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-number,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-link {
+  color: #ebbcba;
+}
+
+
+/*  Yellow */
+/* INFO:  	Function parameters, Regex character sets, Terminal Yellow */
+.hljs-built_in,
+.hljs-attribute {
+  color: #f6c177;
+}
+/* cyan */
+/* INFO: Language support functions, CSS HTML elements */
+.hljs-selector-tag {
+  color: #31748f;
+}
+
+/* light blue */
+/* INFO: Object properties, Regex quantifiers and flags, Markdown headings, Terminal Cyan, Markdown code, Import/export keywords */
+.hljs-keyword,
+  .hljs-title.function_,
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-subst,
+.hljs-property {color: #9ccfd8;}
+
+/*Green*/
+/* INFO: Object literal keys, Markdown links, Terminal Green */
+.hljs-selector-tag { color: #9ccfd8;}
+
+
+/*Green(er) */
+/* INFO: Strings, CSS class names */
+.hljs-quote,
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #31748f;
+}
+
+/* INFO:  	Function names, CSS property names, Terminal Blue */
+.hljs-code,
+.hljs-formula,
+.hljs-section {
+  color: #ebbcba;
+}
+
+
+
+/* Magenta */
+/*INFO: Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta */
+.hljs-name,
+.hljs-keyword,
+.hljs-operator,
+.hljs-keyword,
+.hljs-char.escape_,
+.hljs-attr {
+  color: #c4a7e7;
+}
+
+/* white*/
+/* INFO: Variables, Class names, Terminal White */
+.hljs-punctuation {color: #e0def4}
+
+.hljs {
+  background: #191724;
+  color: #6e6a86;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/tools/developer.html b/tools/developer.html
@@ -70,7 +70,7 @@ <h3>Code</h3>
         <button id="show-structure">Show/hide structure</button>
         Language: <select class="languages"><option value="">(Auto)</option></select>
         Theme: <select class="theme">
-          <option>1c-light.css</option>          
+          <option>1c-light.css</option>
           <option>a11y-dark.css</option>
           <option>a11y-light.css</option>
           <option>agate.css</option>
@@ -305,6 +305,9 @@ <h3>Code</h3>
           <option>qtcreator-dark.css</option>
           <option>qtcreator-light.css</option>
           <option>rainbow.css</option>
+          <option>rose-pine.css</option>
+          <option>rose-pine-dawn.css</option>
+          <option>rose-pine-moon.css</option>
           <option>routeros.css</option>
           <option>school-book.css</option>
           <option>shades-of-purple.css</option>
@@ -380,7 +383,7 @@ <h3>Markup</h3>
         editor.find('.rendering_time').text(rendering_time);
         editor.find('output').text(result.value);
         saveSettings();
-      
+
       };
 
       $('.editor button#update-highlighting').click(update);