Configuring a blog to react automatically to the system's appearance mode relies on CSS media queries keyed to prefers-color-scheme. This mechanism lets you specify distinct style rulseets for light and dark environments without any JavaScript intervention.

Core CSS Mechanism

Separate the visual definitions using media queries that target each scheme. The browser applies the corresponding block based on the active OS or browser theme.

@media (prefers-color-scheme: light) {
  /* Styles visible when the system is in light mode */
}

@media (prefers-color-scheme: dark) {
  /* Styles visible when the system is in dark mode */
}

Structural Styling Example

Below is a restructured approach that organizes properties differently while achieving a comaprable adaptive experience. It modifies backgroundds, text colors, link treatments, and inline code formatting depending on the detected scheme.

/* Shared base styles outside any query */
.article-content {
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
}

.code-block,
.code-block span,
.markdown-body .hljs {
  font-size: 14px !important;
}

/* Light theme adjustments */
@media (prefers-color-scheme: light) {
  .inline-code,
  .article-body :not(pre, div, td) > code {
    font-family: "Consolas", monospace;
    font-size: 14px;
    padding: 3px;
    line-height: 1.5;
    margin: 0 5px;
    display: inline-block;
    overflow-x: auto;
    vertical-align: middle;
    border-radius: 3px;
    background-color: #ededed;
    color: #09308b;
  }

  .article-body a:link,
  .article-body a:visited,
  .article-body a:active {
    text-decoration: underline;
    color: #21759b;
  }

  .main-container {
    width: 70%;
  }
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
  .article-content,
  .article-body {
    color: #e0e0e0;
    background-color: #1e1f22;
  }

  .main-container {
    background-color: #1e1f22;
    box-shadow: none;
    width: 70%;
  }

  body {
    background-color: #1e1f22;
    color: #e0e0e0;
  }

  .sidebar .module,
  .sidebar .list-item {
    background: #1e1f22;
  }

  .pagination a {
    color: #f0f0f0;
  }

  .post-title a:link,
  .post-title a:visited,
  .post-title a:active {
    color: #54a0d4;
  }

  .vote-up,
  .vote-down {
    opacity: 70%;
  }

  .comment-input {
    background-color: #1e1f22;
  }

  .comment-tab,
  .comment-tab.active {
    color: #cfcfcf;
  }

  .comment-form textarea {
    color: #e0e0e0;
    background: #252526;
  }

  .category-tag,
  .post-tags {
    color: #e0e0e0;
  }

  a:link {
    color: #6abf69;
    text-decoration: none;
  }

  .blog-title h1 a {
    color: #54a0d4;
  }

  .article-body a:link,
  .article-body a:visited,
  .article-body a:active {
    text-decoration: underline;
    color: #6abf69;
  }

  .markdown-table th,
  .article-body th {
    background-color: #623c3c;
  }

  .transparent-image {
    opacity: 40%;
  }

  a,
  a:visited {
    color: #449f45;
    text-decoration: none;
  }

  .inline-code,
  .article-body :not(pre, div, td) > code {
    font-family: "Consolas", monospace;
    font-size: 14px;
    padding: 3px;
    line-height: 1.5;
    margin: 0 5px;
    display: inline-block;
    overflow-x: auto;
    vertical-align: middle;
    border-radius: 3px;
    background-color: #4e4e4e;
    color: #d1cf3a;
  }
}

.promotional-card {
  display: none !important;
}