:root {
  --m-bg: #fff;
  --m-color: #000;
  --m-dark-bg: #202124;
  --m-dark-color: #bdc1c6;
}

html,
body {
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
    Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

@media (prefers-color-scheme: light) {
  html {
    background-color: #fff;
    background-color: var(--m-bg);
  }

  html body {
    background-color: #fff;
    background-color: var(--m-bg);
  }

  html body h1,
  html body h2,
  html body h3,
  html body h4,
  html body h5,
  html body h6,
  html body div,
  html body p,
  html body li,
  html body span,
  /* s1 s2 ... s100 */
  html body span[class^="s"] {
    color: #000;
    color: var(--m-color);
  }
}

@media (prefers-color-scheme: dark) {
  html {
    background-color: #202124;
    background-color: var(--m-dark-bg);
  }

  html body {
    background-color: #202124;
    background-color: var(--m-dark-bg);
  }

  html body h1,
  html body h2,
  html body h3,
  html body h4,
  html body h5,
  html body h6,
  html body div,
  html body p,
  html body li,
  html body span,
  /* s1 s2 ... s100 */
  html body span[class^="s"] {
    color: #bdc1c6;
    color: var(--m-dark-color);
  }

  html body a span,
  html body a span[class] {
    color: unset;
  }
}