chore(styles): apply material light / dark styles to highlightjs

angular-cli.json

@@ -19,7 +19,7 @@
       "mobile": false,
       "styles": [
         "main.scss",
-        "highlightjs/solarized-light.css",
+        "highlightjs/material-light.css",
         {"input": "assets/pink-bluegrey.css", "lazy": true},
         {"input": "assets/deeppurple-amber.css", "lazy": true},
         {"input": "assets/indigo-pink.css", "lazy": true},

src/assets/custom-themes/pink-bluegrey.scss

@@ -1,4 +1,5 @@
 @import '../../app-theme';
+@import '../../highlightjs/material-dark';
 
 // Define the dark theme.
 $primary: mat-palette($mat-pink);

src/assets/custom-themes/purple-green.scss

@@ -1,4 +1,5 @@
 @import '../../app-theme';
+@import '../../highlightjs/material-dark';
 
 // Define the dark theme.
 $primary: mat-palette($mat-purple);

src/highlightjs/material-dark.css

@@ -0,0 +1,114 @@
+/** From https://github.com/Kelbster/highlightjs-material-dark-theme */
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+  background: #2B2B2D;
+  color: #CDD3D8;
+  font-family: "Fira Mono", monospace;
+  font-size: 1em;
+}
+
+.hljs > *::selection {
+  background-color: #3e4451;
+}
+
+.hljs-comment {
+  color: #656565;
+  font-style: italic;
+}
+
+.hljs-selector-tag {
+  color: #C792EA;
+}
+
+.hljs-string,
+.hljs-subst {
+  color: #C3E88D;
+}
+
+.hljs-number,
+.hljs-regexp,
+.hljs-variable,
+.hljs-template-variable {
+  color: #F77669;
+}
+
+.hljs-keyword {
+  color: #C792EA;
+}
+.hljs-function > .hljs-title {
+  color: #75A5FF;
+}
+.hljs-tag {
+  color: #abb2bf;
+}
+.hljs-name {
+  color: #e06c75;
+}
+.hljs-type {
+  color: #da4939;
+}
+
+.hljs-attribute {
+  color: #80CBBF;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-link {
+  color: #C792EA;
+}
+
+.hljs-params {
+  color: #EEFFF7;
+}
+
+
+.hljs-meta {
+  color: #75A5FF;
+}
+
+.hljs-title {
+  color: #75A5FF;
+}
+
+.hljs-section {
+  color: #ffc66d;
+}
+
+.hljs-addition {
+  background-color: #144212;
+  color: #e6e1dc;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #600;
+  color: #e6e1dc;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-selector-class {
+  color: #FFCB68;
+}
+
+.hljs-selector-id {
+  color: #F77669;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}

src/highlightjs/material-light.css

@@ -0,0 +1,88 @@
+/** Adapted from https://github.com/atom-material/atom-material-syntax-light */
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+  background: #FAFAFA;
+  color: #607D8B;
+  font-family: "Fira Mono", monospace;
+  font-size: 1em;
+}
+
+.hljs > *::selection,
+.hljs-section {
+  background-color: #D6EDEA;
+}
+
+.hljs-comment {
+  color: #B0BEC5;
+  font-style: italic;
+}
+
+.hljs-tag,
+.hljs-selector-tag,
+.hljs-regexp,
+.hljs-meta {
+  color: #39ADB5;
+}
+
+.hljs-string,
+.hljs-subst {
+  color: #91B859;
+}
+
+.hljs-number,
+.hljs-variable,
+.hljs-template-variable {
+  color: #80CBC4;
+}
+
+.hljs-name,
+.hljs-keyword,
+.hljs-type,
+.hljs-attribute {
+  color: #7C4DFF;
+}
+
+.hljs-title,
+.hljs-function > .hljs-title,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-link {
+  color: #6182B8;
+}
+
+.hljs-params {
+  color: #F76D47;
+}
+
+.hljs-addition {
+  color: #7C4DFF;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  color: #E53935;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #8796B0;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}