feat(docs): switch hint-text color to less-contrast-text and adding t…

…he dark theme for code editor (#241)

packages/docs/src/app/components/footer/_footer-theme.scss

@@ -6,7 +6,7 @@
     $is-dark: map-get($theme, is-dark);
 
     $background-color: mc-color($background, background);
-    $hint-text: mc-color($foreground, hint-text);
+    $less-contrast-text: mc-color($foreground, less-contrast-text);
     $color: mc-color($primary);
     $color_hover: mc-color($primary, if($is-dark, lighter, darker));
     $border-color: mc-color($second, 300);
@@ -18,7 +18,7 @@
             border-top: 1px solid $border-color;
         }
 
-        &__text-wrapper { color: $hint-text; }
+        &__text-wrapper { color: $less-contrast-text; }
 
         &__link {
             color: $color;
@@ -29,7 +29,7 @@
             }
         }
 
-        &__icon { fill: $hint-text; }
+        &__icon { fill: $less-contrast-text; }
     }
 
 }

packages/docs/src/app/components/navbar/_navbar-theme.scss

@@ -1,9 +1,11 @@
 @mixin mc-navbar-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
+    $is-dark: map-get($theme, is-dark);
     $background-color: mc-color($background, background);
     $text: mc-color($foreground, text);
     $divider: mc-color($foreground, divider);
+    $less-contrast-text: mc-color($foreground, less-contrast-text);
     $hint-text: mc-color($foreground, hint-text);
 
     .docs-navbar-header {
@@ -18,8 +20,8 @@
     }
 
     .docs-navbar-version {
-        color: $hint-text;
+        color: if($is-dark, $text, $hint-text);
 
-        &__date { color: $hint-text; }
+        &__date { color: $less-contrast-text; }
     }
 }

packages/docs/src/highlightjs/material-dark.scss

@@ -1,122 +1,124 @@
 /*
 Orginal Style from https://github.com/Kelbster/highlightjs-material-dark-theme  (c) Kelby Gassmanl <[email protected]>
 */
-.hljs {
-    display: block;
-    overflow-x: auto;
-    padding: 1em;
-    background: #2B2B2D;
-    color: #CDD3D8;
-    -webkit-font-smoothing: antialiased;
-    text-size-adjust: 100%;
-    font: 300 100%/1 Roboto Mono, monospace;
-    font-size: 14px;
-}
-
-.hljs > *::selection {
-    background-color: #3e4451;
-}
-
-.hljs-comment {
-    color: #656565;
-    font-style: italic;
-}
-
-.hljs-selector-tag {
-    color: #C792EA;
-}
-
-.hljs-string,
-.hljs-subst {
-    color: #9ccc65;
-}
-
-.hljs-number,
-.hljs-regexp,
-.hljs-variable,
-.hljs-template-variable {
-    color: #F77669;
-}
-
-.hljs-keyword {
-    color: #C792EA;
-}
-
-.hljs-function > .hljs-title {
-    color: #75A5FF;
-}
-
-.hljs-tag {
-    color: #ce93d8;
-}
-
-.hljs-name {
-    color: #4dd0e1;
-}
-
-.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;
+@mixin material-dark(){
+    .hljs {
+        display: block;
+        overflow-x: auto;
+        padding: 1em;
+        background: #2B2B2D;
+        color: #CDD3D8;
+        -webkit-font-smoothing: antialiased;
+        text-size-adjust: 100%;
+        font: 300 100%/1 Roboto Mono, monospace;
+        font-size: 14px;
+    }
+
+    .hljs > *::selection {
+        background-color: #3e4451;
+    }
+
+    .hljs-comment {
+        color: #656565;
+        font-style: italic;
+    }
+
+    .hljs-selector-tag {
+        color: #C792EA;
+    }
+
+    .hljs-string,
+    .hljs-subst {
+        color: #9ccc65;
+    }
+
+    .hljs-number,
+    .hljs-regexp,
+    .hljs-variable,
+    .hljs-template-variable {
+        color: #F77669;
+    }
+
+    .hljs-keyword {
+        color: #C792EA;
+    }
+
+    .hljs-function > .hljs-title {
+        color: #75A5FF;
+    }
+
+    .hljs-tag {
+        color: #ce93d8;
+    }
+
+    .hljs-name {
+        color: #4dd0e1;
+    }
+
+    .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;
+    }
 }

packages/docs/src/main.scss

@@ -15,6 +15,7 @@
 @import 'app/components/component-viewer/component-overview-theme';
 @import 'app/shared/stackblitz/stackblitz-button-theme';
 @import 'app/shared/example-viewer/example-viewer-theme';
+@import 'highlightjs/material-dark';
 
 // Include all typography for the components.
 @include mc-core();
@@ -51,5 +52,6 @@ $typography: mc-typography-config();
 
 .theme-dark {
     @include docs-component-theme($dark-theme);
+    @include material-dark();
 }