flex/static/stylesheet/dark-theme.less

//
// Dark Theme CSS.
//
// If you want to always use the dark theme, then you can use a <link> like the
// following:
//
// <link rel="stylesheet" type="text/css"
//       href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-detect-preferences.min.css">
//
// If you want to enable only when the prefers-color-scheme is set to dark (and
// potentially no-preference), make sure that you add the appropriate media
// query to the <link>. For example:
//
// <link media="(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)"
//       rel="stylesheet"
//       type="text/css"
//       href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-detect-preferences.min.css">
//
// or
//
// <link media="(prefers-color-scheme: dark)"
//       rel="stylesheet"
//       type="text/css"
//       href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-detect-preferences.min.css">
//
// depending on whether you want to default to dark mode or not when the user
// hasn't set a preference.
//

@import "variables.less";

html:not(.light-theme), html.dark-theme {
  body {
    background-color: @body-bg-dark-theme;
    color: @text-color-dark-theme;
  }

  hr {
    color: @solid-dark-grey;
    background-color: @solid-dark-grey;
  }

  aside {
    background-color: @sidebar-bg-dark-theme;
    color: @sidebar-text-color;

  }

  main {
    nav {
      border-bottom-color: @nav-border-color-dark-theme;
    }

    nav, .translations {
      a {
        border-color: @nav-border-color-dark-theme;
      }
    }

    article {
      kbd {
        background-color: #080808;
        color: @light-grey;
      }

      *:not(pre) > code {
        background-color: #080808;
        border-color: #000;
      }
    }

    footer {
      border-top-color: @footer-border-color-dark-theme;
    }
  }

  div.related-posts {
    border-color: @rel-post-border-color-dark-theme;
  }

  // Admonition
  div.admonition.attention {
    p, div {
      color: @admonition-attention-color-dark-theme;
      background-color: @admonition-attention-bg-color-dark-theme;
    }
  }

  div.admonition.caution {
    p, div {
      color: @admonition-caution-color-dark-theme;
      background-color: @admonition-caution-bg-color-dark-theme;
    }
  }

  div.admonition.danger {
    p, div {
      color: @admonition-danger-color-dark-theme;
      background-color: @admonition-danger-bg-color-dark-theme;
    }
  }

  div.admonition.error {
    p, div {
      color: @admonition-error-color-dark-theme;
      background-color: @admonition-error-bg-color-dark-theme;
    }
  }

  div.admonition.hint {
    p, div {
      color: @admonition-hint-color-dark-theme;
      background-color: @admonition-hint-bg-color-dark-theme;
    }
  }

  div.admonition.important {
    p, div {
      color: @admonition-important-color-dark-theme;
      background-color: @admonition-important-bg-color-dark-theme;
    }
  }

  div.admonition.note {
    p, div {
      color: @admonition-note-color-dark-theme;
      background-color: @admonition-note-bg-color-dark-theme;
    }
  }

  div.admonition.tip {
    p, div {
      color: @admonition-tip-color-dark-theme;
      background-color: @admonition-tip-bg-color-dark-theme;
    }
  }

  div.admonition.warning {
    p, div {
      color: @admonition-warning-color-dark-theme;
      background-color: @admonition-warning-bg-color-dark-theme;
    }
  }
}