// Color of the background
$global-background-color: #fff !default;
$global-background-color-dark: #292a2d !default;

// Color of the text
$global-font-color: #161209 !default;
$global-font-color-dark: #a9a9b3 !default;

// Color of the border
$global-border-color: #dcdcdc !default;
$global-border-color-dark: #4a4b50 !default;

// Color of the single link
$single-link-color: #2d96bd !default;
$single-link-color-dark: #55bde2 !default;

// Color of the code background
$code-background-color: #f5f5f5 !default;
$code-background-color-dark: #272C34 !default;

.dark {
  // copied from https://github.com/xCss/Valine/issues/221
  .v *,
  .v .vwrap .vheader .vinput,
  .v .vlist .vcard .vh,
  .v .vlist .vcard .vquote {
    border-color: $global-border-color-dark;
  }
  .v blockquote {
    border-left: .25rem solid #00bfa5;
  }
  .v *,
  .v .vwrap input,
  .v .vwrap input::placeholder,
  .v .veditor,
  .v .veditor::placeholder,
  .v a,
  .v a:hover {
    color: $global-font-color-dark;
  }
  .v .vbtn {
    color: $global-font-color-dark;
    background: darken($global-background-color-dark, 3%);
    border-color: $global-background-color-dark;
  }
  .v .vbtn:hover {
    color: $single-link-color-dark;
    border-color: $single-link-color-dark;
  }
  .v .vlist .vcard .vhead .vsys {
    background: darken($code-background-color-dark, 3%);
  }
  .v code, .v pre {
    background: $code-background-color-dark;
  }
  .v .vmark .vinput {
    color: darken($global-background-color-dark, 3%);
  }
}

.v blockquote {
  border-left: .25rem solid #00bfa5;
}

.v code, .v pre {
  text-align: left;
}