Hallo zusammen,

@foxit.opensync.info hat sich in #my-it-brain:matrix.org gewünscht, dass dieser Blog in Abhängigkeit der lokalen Systemeinstellungen hell oder dunkel dargestellt wird. Dazu habe ich folgendes CSS von Gemini generieren lassen und in mein Twenty-Twelve-Child-Theme eingebaut:

/* Dark Mode für Twenty Twelve basierend auf Systemeinstellungen */
@media (prefers-color-scheme: dark) {
  /* Seitenhintergrund & Textfarbe */
  body, 
  body.custom-background {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
  }

  /* Der weiße Inhaltscontainer von Twenty Twelve */
  #page {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
  }

  /* Links */
  a {
    color: #64b5f6 !important;
  }

  a:hover {
    color: #90caf9 !important;
  }

  /* Überschriften */
  h1, h2, h3, h4, h5, h6,
  .entry-title a {
    color: #ffffff !important;
  }

  /* Navigation & Menü */
  .main-navigation a {
    color: #e0e0e0 !important;
  }

  .main-navigation li:hover > a,
  .main-navigation li.focus > a {
    color: #64b5f6 !important;
  }

  /* Sidebar, Widgets & Footer */
  .widget-area .widget a,
  footer[role="contentinfo"] a {
    color: #b0bec5 !important;
  }

  /* Formulare & Eingabefelder */
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  textarea {
    background-color: #2c2c2c !important;
    color: #ffffff !important;
    border-color: #444444 !important;
  }

  /* Bilder leicht abdunkeln (für angenehmeren Kontrast) */
  img {
    opacity: 0.88;
    transition: opacity 0.3s ease;
  }
  img:hover {
    opacity: 1;
  }
}

Falls ihr Darstellungsprobleme oder weitere Anpassungswünsche habt, hinterlasst mir gerne einen Kommentar unter diesem Beitrag oder schreibt an webmaster (at) my-it-brain (dot) de.