Custom CSS for highlightjs styles to support nightmode

src/app/assets/stylesheets/_themes.scss

@@ -41,6 +41,8 @@ $themes: (
     modalBackgroundColor: $color-background-almost-white,
     modalTextColorPrimary: $color-text-dark,
     commentBodyHighlightBackgroundColor: $color-background-almost-white-darker,
+    htmlhtmlCodeColor: #333333,
+    htmlhtmlCodeBackgroundColor: #f4f4f4,
   ),
   light: (
     colorAccent: $color-hive-red,
@@ -85,6 +87,8 @@ $themes: (
     modalBackgroundColor: $color-white,
     modalTextColorPrimary: $color-text-dark,
     commentBodyHighlightBackgroundColor: $color-background-almost-white-darker,
+    htmlCodeColor: #333333,
+    htmlCodeBackgroundColor: #f4f4f4,
   ),
   dark: (
     colorAccent: $color-hive-red,
@@ -130,6 +134,8 @@ $themes: (
     modalBackgroundColor: $color-background-dark,
     modalTextColorPrimary: $color-text-white,
     commentBodyHighlightBackgroundColor: $color-background-dark-lighter,
+    htmlCodeColor: #c5c8c6,
+    htmlCodeBackgroundColor: #1d1f21,
   ),
 );
 

src/app/assets/stylesheets/markdown.scss

@@ -59,12 +59,16 @@
 
   code {
     padding: 0.2rem;
-    font-size: 85%;
+    font-size: 0.90rem;
+    line-height: 1.2rem;
     border-radius: 3px;
     border: none;
-    background-color: #F4F4F4;
     font-weight: inherit;
     overflow: scroll;
+    @include themify($themes) {
+      color: themed('htmlCodeColor');
+      background-color: themed('htmlCodeBackgroundColor');
+    }
   }
 
   pre > code {

src/app/components/all.scss

@@ -6,6 +6,7 @@
 @import "./cards/MarkdownViewer";
 @import "./cards/PostSummary";
 @import "./cards/PostFull";
+@import "./cards/PostFull-code";
 @import "./cards/PostsList";
 @import "./cards/NotificationsList";
 

src/app/components/cards/PostFull-code.scss

+.theme-light {
+    /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+    /* Tomorrow Comment */
+    .hljs-comment,
+    .hljs-quote {
+        color: #8e908c;
+    }
+
+    /* Tomorrow Red */
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-tag,
+    .hljs-name,
+    .hljs-selector-id,
+    .hljs-selector-class,
+    .hljs-regexp,
+    .hljs-deletion {
+        color: #c82829;
+    }
+
+    /* Tomorrow Orange */
+    .hljs-number,
+    .hljs-built_in,
+    .hljs-builtin-name,
+    .hljs-literal,
+    .hljs-type,
+    .hljs-params,
+    .hljs-meta,
+    .hljs-link {
+        color: #f5871f;
+    }
+
+    /* Tomorrow Yellow */
+    .hljs-attribute {
+        color: #eab700;
+    }
+
+    /* Tomorrow Green */
+    .hljs-string,
+    .hljs-symbol,
+    .hljs-bullet,
+    .hljs-addition {
+        color: #718c00;
+    }
+
+    /* Tomorrow Blue */
+    .hljs-title,
+    .hljs-section {
+        color: #4271ae;
+    }
+
+    /* Tomorrow Purple */
+    .hljs-keyword,
+    .hljs-selector-tag {
+        color: #8959a8;
+    }
+
+    .hljs {
+        display: block;
+        overflow-x: auto;
+        background: white;
+        color: #4d4d4c;
+        padding: 0.5em;
+    }
+
+    .hljs-emphasis {
+        font-style: italic;
+    }
+
+    .hljs-strong {
+        font-weight: bold;
+    }
+
+}
+
+.theme-dark {
+    /* Tomorrow Night Theme */
+    /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+    /* Original theme - https://github.com/chriskempson/tomorrow-theme */
+    /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+    /* Tomorrow Comment */
+    .hljs-comment,
+    .hljs-quote {
+        color: #969896;
+    }
+
+    /* Tomorrow Red */
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-tag,
+    .hljs-name,
+    .hljs-selector-id,
+    .hljs-selector-class,
+    .hljs-regexp,
+    .hljs-deletion {
+        color: #cc6666;
+    }
+
+    /* Tomorrow Orange */
+    .hljs-number,
+    .hljs-built_in,
+    .hljs-builtin-name,
+    .hljs-literal,
+    .hljs-type,
+    .hljs-params,
+    .hljs-meta,
+    .hljs-link {
+        color: #de935f;
+    }
+
+    /* Tomorrow Yellow */
+    .hljs-attribute {
+        color: #f0c674;
+    }
+
+    /* Tomorrow Green */
+    .hljs-string,
+    .hljs-symbol,
+    .hljs-bullet,
+    .hljs-addition {
+        color: #b5bd68;
+    }
+
+    /* Tomorrow Blue */
+    .hljs-title,
+    .hljs-section {
+        color: #81a2be;
+    }
+
+    /* Tomorrow Purple */
+    .hljs-keyword,
+    .hljs-selector-tag {
+        color: #b294bb;
+    }
+
+    .hljs {
+        display: block;
+        overflow-x: auto;
+        background: #1d1f21;
+        color: #c5c8c6;
+        padding: 0.5em;
+    }
+
+    .hljs-emphasis {
+        font-style: italic;
+    }
+
+    .hljs-strong {
+        font-weight: bold;
+    }
+}