When I turned on comments, because the img tag was dynamically added, the invert did not take effect

[0xleizhang]

Without using JS, CSS can be solved perfectly?

If anyone else encounters similar problems, welcome to discuss together

[0xleizhang]

:root {
  --bg-color: white;
  --text-color: black;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-color: white;
    --text-color: black;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: black;
    --text-color: white;
  }

  a {
    color: yellow;
  }
}

// bg color is also needed in html in order to
// block body's background propagation
// see: https://stackoverflow.com/a/61265706
html,
body {
  background: var(--bg-color);
}

body {
  color: var(--text-color);
  font-family: monospace;
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
  min-height: 100%;
  overflow-wrap: break-word;
}

......

here is my new version without invert

[0xleizhang]

It can also solve the problem of YouTube videos being invented

[hanwenguo]

Sorry for the late response. Got inspired by your version and pushed a new commit to solve this issue. Thanks!