Ergründe!

Ich mag das Yellow-Theme Wittstock ganz gern, weil es sowohl im Light-Mode als auch im Dark-Mode gut funktiuoniert, funktional und minimalistisch ist.

Aber für manche Anwendungsfälle ist es ungeeignet, weil es nur eine begrenzte Seitenbreite ausnutzt, die etwas umständlich ist, wenn man lange Seiten hat oder solche, die viel Block-Code enthalten. Klar könnte ich hier auch das Wittstock-Theme anpassen, aber das möchte ich nicht, weil es mir so, wie es ist, gut gefällt.

Für diese speziellen Anwendungsfälle eignet sich das Theme karlskrona sehr gut, denn es nutzt – auch auf großen Bildschirmen – nahezu die volle Breite aus. Ansonsten ist das Theme farblich ebenfalls recht ansprechend, auch im Darkmode, bietet ansonsten die gleichen Eigenschaften wie das Wittstock-Theme.

Ergänzt habe ich das CSS für Infoboxen, denn hier hat sich das Schema der Einbindung geändert, was auch auf die Styles Auswirkungen hat.

Was am YellowCMS übrigens wirklich nützlich ist, auch in dieser Hinsicht, dass man pro Seite ein Theme wählen kann.

Hier bei e.rgruen.de nutze ich das Karlskrona-Theme im Bereich Dokumentation.

CSS für Infoboxen

Hier das CSS für die Infoboxen, das einfach an die CSS-Datei im Karlskrona-Theme angehängt wird:

/* === Yellow related (Light + Dark Mode) =============================== */

/* 1) Basisfarben für Light Mode (lassen deine aktuellen Werte intakt) */
:root {
  /* Falls noch nicht vorhanden – hier nur zur Vollständigkeit */
  --important-bg: #f0f8fe;
  --important-accent: #0088ee;

  --info-bg: #f0f8fe;
  --info-accent: #0088ee;

  --warning-bg: #fffbf0;
  --warning-accent: #ffbb00;

  --error-bg: #fdf0f0;
  --error-accent: #dd0000;

  /* Lesefarbe in Boxen */
  --notice-fg: var(--pico-color);
  /* feine Rahmenlinie (optional) */
  --notice-border: color-mix(in srgb, var(--pico-color) 10%, transparent);
}

/* 2) Dark-Mode-Overrides – deckend genug, aber nicht grell */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  [data-theme="dark"] {
    /* Wichtig/Hinweis (blau) */
    --important-bg: #0f2433;   /* tiefes Blau-Grau für guten Kontrast */
    --important-accent: #4fb3ff;

    /* Info (blau) – identisch zu important, wenn du magst */
    --info-bg: #0f2433;
    --info-accent: #4fb3ff;

    /* Warning (gelb) */
    --warning-bg: #2a2405;     /* sehr dunkles Gelb-Braun */
    --warning-accent: #ffd257;

    /* Error (rot) */
    --error-bg: #2a0f11;       /* dunkles Rotbraun */
    --error-accent: #ff6b6b;

    /* Lesefarbe in Boxen – etwas heller als normaler Text */
    --notice-fg: #e6eaf1;      /* gut lesbar auf allen obigen BGs */
    /* feine Rahmenlinie */
    --notice-border: rgba(255,255,255,0.08);
  }
}

/* 3) Gemeinsames Styling für alle Boxen */
.important,
.info,
.warning,
.error {
  margin: 1em 0;
  padding: 22px 1em 16px 1em;
  border-left: 6px solid;
  border-radius: 6px;
  background-clip: padding-box; /* verhindert Durchscheinen der Border */
  color: var(--notice-fg);
  /* zarte Outline für bessere Abgrenzung in Dark Mode */
  box-shadow: inset 0 0 0 1px var(--notice-border);
}

/* Einzeleinstellungen je Typ */
.important {
  background-color: var(--important-bg);
  border-left-color: var(--important-accent);
}
.info {
  background-color: var(--info-bg);
  border-left-color: var(--info-accent);
}
.warning {
  background-color: var(--warning-bg);
  border-left-color: var(--warning-accent);
}
.error {
  background-color: var(--error-bg);
  border-left-color: var(--error-accent);
}

/* 4) Typografie innerhalb der Boxen – Kontrast sichern */
.important a,
.info a,
.warning a,
.error a {
  color: inherit; /* übernimmt die helle Schriftfarbe im Dark Mode */
  text-decoration-color: currentColor;
}
.important code,
.info code,
.warning code,
.error code {
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit;
}

/* 5) Print bleibt sauber */
@media print {
  .important, .info, .warning, .error {
    box-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}