_color-scheme.scss

// Light theme by default
:root {
  --background-color: #{$background-color-light}; // body
  --background-color1: #{$background-color1-light}; // blockquote, code block, border, table, hr
  --foreground-color: #{$foreground-color-light}; // text
  --foreground-color3: #{$foreground-color3-light}; // figcaption
  --accent-color: #{$accent-color-light}; // link, blockquote
}

// Override variables for dark theme
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #{$background-color-dark};
    --background-color1: #{$background-color1-dark};
    --foreground-color: #{$foreground-color-dark};
    --foreground-color3: #{$foreground-color3-dark}; // figcaption
    --accent-color: #{$accent-color-dark};
  }
}

// Set color
.body {
  background-color: var(--background-color);
  color: var(--foreground-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--foreground-color);
}

a {
  color: var(--accent-color);
}

.header {
  border-bottom: 1px solid var(--background-color1);
}

.footer {
  border-top: 1px solid var(--background-color1);
}

blockquote {
  background-color: var(--background-color1);

  [dir=rtl] & {
    border-right: 0.5rem solid var(--accent-color);
  }    

  [dir=ltr] & {
    border-left: 0.5rem solid var(--accent-color);
  }
}

// Don't apply inline code's style to code block
:not(pre)>code {
  background-color: var(--background-color1);
}

hr {
  background: var(--background-color1);
}

// Table
table {
  background-color: var(--background-color1);
}

td,
th {
  border: 1px solid var(--background-color);
}

// Figure
figcaption {
  color: var(--foreground-color3);
}