Ein eigenes WordPress-Theme zu erstellen klingt aufwändiger als es ist. Mit modernen CSS Custom Properties (Variablen) und etwas PHP-Template-Kenntnis hat man in wenigen Stunden ein funktionsfähiges Dark-Mode-Theme.

Minimale Theme-Struktur

mein-theme/
├── style.css       ← Pflicht: Theme-Header + CSS
├── functions.php   ← Theme-Setup, Scripts einbinden
├── index.php       ← Blog-Übersicht / Fallback-Template
├── single.php      ← Einzelner Beitrag
├── header.php      ← get_header() Ziel
├── footer.php      ← get_footer() Ziel
└── page.php        ← Statische Seiten

CSS Custom Properties — der Schlüssel zum Dark Mode

Statt hartcodierten Farben überall nutzt man CSS-Variablen auf dem :root-Selektor. Das ermöglicht einfaches Theming und spätere Anpassungen an einer Stelle:

:root {
  --bg:       #0b0b0b;
  --bg-card:  #111111;
  --accent:   #06b6d4;   /* Cyan */
  --green:    #22c55e;
  --text:     #e2e8f0;
  --muted:    #64748b;
  --border:   #1f1f1f;
  --radius:   8px;
}

/* Nutzung */
body        { background: var(--bg); color: var(--text); }
.card       { background: var(--bg-card); border: 1px solid var(--border); }
a           { color: var(--accent); }
.tag        { background: rgba(6,182,212,.1); color: var(--accent); }

functions.php Grundgerüst

<?php
function theme_setup() {
    add_theme_support("title-tag");
    add_theme_support("post-thumbnails");
    add_theme_support("html5", ["search-form","comment-form"]);
    register_nav_menus(["primary" => "Hauptmenü"]);
}
add_action("after_setup_theme", "theme_setup");

function theme_scripts() {
    wp_enqueue_style("theme-style", get_stylesheet_uri(), [], "1.0");
}
add_action("wp_enqueue_scripts", "theme_scripts");

Post-Card-Template

<?php while (have_posts()): the_post(); ?>
<article class="post-card">
  <div class="card-cats">
    <?php foreach(get_the_category() as $c): ?>
    <a class="cat-badge" href="<?php echo get_category_link($c); ?>">
      <?php echo esc_html($c->name); ?>
    </a>
    <?php endforeach; ?>
  </div>
  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  <p class="excerpt"><?php the_excerpt(); ?></p>
  <span class="meta"><?php echo get_the_date("d.m.Y"); ?></span>
</article>
<?php endwhile; ?>

Das vollständige Theme dieses Blogs — Natural Dark — basiert auf diesen Prinzipien und ist für AMD-Homelab-Blogs optimiert.