(themes) Add tokyo-night-dark

CHANGES.md

@@ -1,5 +1,8 @@
 ## Version 11.4.1
 
+Themes:
+- `tokyionight-dark` has been added and feedback/changes are welcome
+
 Grammars:
 
 - enh(php) named arguments [Wojciech Kania][]
@@ -10,6 +13,7 @@ Grammars:
 [Wojciech Kania]: https://github.com/wkania
 [Melissa Geels]: https://github.com/codecat
 [anydonym]: https://github.com/anydonym
+[henri Vandersleyen]: https://github.com/Vanderscycle
 
 ## Version 11.4.0
 
@@ -24,6 +28,7 @@ Themes:
 - `Dark` now meets WCAG AA (contrast) (#3402) [Josh Goebel]
 - Added `intellij-light` theme [Pegasis]
 - Added `felipec` theme [Felipe Contreras]
+- Added `TokyoNight-dark` them [Henri Vandersleyen] 
 
 These changes should be for the better and should not be super noticeable but if you're super picky about your colors you may want to intervene here or copy over the older themes from 11.3 or prior.
 

src/styles/tokyonight-dark.css

@@ -0,0 +1,112 @@
+/* Tokyo Night Blue Theme */
+/* Original theme https://github.com/enkia/tokyo-night-vscode-theme*/
+
+/*  Comment */
+.hljs-meta,
+.hljs-comment {
+  color: #565f89;
+}
+
+/* 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: #f7768e;
+}
+
+/*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: #ff9e64;
+}
+
+
+/*  Yellow */
+/* INFO:  	Function parameters, Regex character sets, Terminal Yellow */
+.hljs-built_in, 
+.hljs-attribute {
+  color: #e0af68;
+}
+/* cyan */
+/* INFO: Language support functions, CSS HTML elements */
+.hljs-selector-tag {
+  color: #2ac3de;
+}
+
+/* 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: #7dcfff;}
+
+/*Green*/
+/* INFO: Object literal keys, Markdown links, Terminal Green */
+.hljs-selector-tag { color: #73daca;}
+
+
+/*Green(er) */
+/* INFO: Strings, CSS class names */
+.hljs-quote,
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #9ece6a;
+}
+
+/* Blue */
+/* INFO:  	Function names, CSS property names, Terminal Blue */
+.hljs-code,
+.hljs-formula,
+.hljs-section {
+  color: #7aa2f7;
+}
+
+
+
+/* Purple */
+/*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: #bb9af7;
+}
+
+/* white*/
+/* INFO: Variables, Class names, Terminal White */
+.hljs-punctuation {color: #c0caf5}
+
+.hljs {
+  /* background: #002451; */
+  background: #1a1b26;
+  color: #9aa5ce;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}

tools/developer.html

@@ -71,6 +71,7 @@ <h3>Code</h3>
         Language: <select class="languages"><option value="">(Auto)</option></select>
         Theme: <select class="theme">
           <option>stackoverflow-light.css</option>
+          <option>tokyonight-dark.css</option>
           <option>qtcreator-light.css</option>
           <option>codepen-embed.css</option>
           <option>docco.css</option>