theme.scss

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700|Source+Code+Pro&display=swap');

$rmd-theme-dark-elevation: 'prefers-color-scheme';

@import '@react-md/divider/dist/scss/mixins';
@import '@react-md/link/dist/scss/mixins';
@import '@react-md/theme/dist/scss/mixins';
@import '@react-md/typography/dist/scss/mixins';
@import '@react-md/utils/dist/scss/mixins';

$solarized-base-03: #002b36;
$solarized-base-02: #073642;
$solarized-base-01: #586e75;
$solarized-base-00: #657b83;
$solarized-base-0: #839496;
$solarized-base-1: #93a1a1;
$solarized-base-2: #eee8d5;
$solarized-base-3: #fdf6e3;

$solarized-yellow: #b58900;
$solarized-orange: #cb4b16;
$solarized-red: #d30102;
$solarized-magenta: #d33682;
$solarized-violet: #6c71c4;
$solarized-blue: #268bd2;
$solarized-cyan: #2aa198;
$solarized-green: #859900;

@include react-md-theme;
@include rmd-utils-base;

.markdown-body {
  @include rmd-text-container-auto;

  max-width: rmd-typography-theme-var(line-width) !important;
  min-width: auto !important;
  padding: 0 !important;
}

@for $i from 1 to 6 {
  h#{$i} {
    @if $i == 5 {
      @include rmd-typography(subtitle-1);
    } @else if $i == 6 {
      @include rmd-typography(subtitle-2);
    } @else {
      @include rmd-typography(headline-#{$i + 2});
    }

    margin: 0.5em 0;
  }
}

ul {
  @include rmd-typography(subtitle-1);
}

p {
  @include rmd-typography(body-1);
}

code {
  @include rmd-typography(body-1);

  color: var(--code-color);
  font-family: 'Source Code Pro', Consolas, Monaco, monospace;
  white-space: pre-wrap;

  &::before,
  &::after {
    content: '`';
  }
}

pre {
  background: var(--code-bg) !important;

  > code {
    &::before,
    &::after {
      display: none;
    }

    &::selection,
    *::selection {
      background-color: $solarized-base-02;
    }
  }

  > code,
  .hljs {
    background-color: $solarized-base-03;
    color: $solarized-base-1;

    // always enforce ltr for blocked code
    direction: ltr;
    font-size: inherit;
    margin: 0.5em 0;
    overflow: auto;
    padding: 1em;
    white-space: pre;
  }

  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-subst {
    color: $solarized-green;
    font-weight: normal;
  }

  .hljs-built_in,
  .hljs-bultin-name {
    color: $solarized-yellow;
  }

  .hljs-tag,
  .hljs-name,
  .hljs-attribute,
  .hljs-number,
  .hljs-literal,
  .hljs-variable,
  .hljs-template-variable,
  .hljs-tag .hljs-attr {
    color: $solarized-blue;
  }

  .xml .hljs-tag .hljs-attr {
    color: $solarized-base-1;
  }

  .fu,
  .ex {
    color: $solarized-red;
  }
}

a {
  @include rmd-link;
}

blockquote {
  $border-style: 0.25em solid rmd-divider-theme-var(background-color);

  @include rmd-theme(color, text-secondary-on-background);
  @include rmd-typography(subtitle-1);
  @include rmd-utils-rtl-auto(border-left, $border-style);

  font-style: italic;
  margin: 1em 0;
  padding: 0.5em 1em;
  position: relative;

  p:only-child {
    margin: 0;
  }

  p:last-child {
    margin-bottom: 0;
  }
}

:root {
  #{--code-color}: #{$rmd-pink-600};
}

@media (prefers-color-scheme: dark) {
  :root {
    @include rmd-theme-dark;

    #{--code-color}: #{$rmd-pink-400};
  }
}