← Alle Beiträge

Leitfäden

Benutzerdefinierte Bildlaufleisten und Hochkontrast-Modi mit CSS

17 Mai 2026 · von JustZix Team

Die letzten Feinheiten eines benutzerdefinierten Themes sind die Teile, die man vergisst: die Bildlaufleiste, der Kontrast, die Option, Farbe vollständig abzulassen. Diese Anleitung sammelt die JustZix-CSS-Regeln, die eine Seite zu etwas polieren, das Sie wirklich gerne nutzen.

Die Bildlaufleiste gestalten

Eine Standard-Bildlaufleiste kann mit einem sorgfältig abgestimmten dunklen Theme kollidieren. Moderne Browser geben Ihnen zwei Wege, sie umzugestalten. Verwenden Sie beide für volle Abdeckung.

html {
  scrollbar-width: thin;
  scrollbar-color: #4b5263 #1f232a;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #1f232a;
}
::-webkit-scrollbar-thumb {
  background: #4b5263;
  border-radius: 8px;
  border: 3px solid #1f232a;
}
::-webkit-scrollbar-thumb:hover {
  background: #5c6370;
}

Die Eigenschaften scrollbar-width und scrollbar-color decken Firefox ab; die ::-webkit-scrollbar-Pseudoelemente decken Chrome, Edge und Opera ab. Beide einzuschließen bedeutet, dass Ihre Regel in jedem von JustZix unterstützten Browser richtig aussieht.

Ein echter Hochkontrast-Modus

Für sehbehinderte Nutzer, oder einfach für das Lesen in hellen Räumen, hilft roher Kontrast. Dieses Rezept erzwingt fast schwarze Hintergründe, fast weißen Text und einen kräftigen Akzent.

html, body {
  background: #000 !important;
  color: #fff !important;
}
p, li, span, div, h1, h2, h3, h4, td, th {
  color: #fff !important;
}
a, a:visited {
  color: #ffe066 !important;
  text-decoration: underline !important;
}
button, .btn {
  background: #ffe066 !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}

Gelb auf Schwarz ist eine der kontrastreichsten verfügbaren Paarungen und ein langjähriger Barrierefreiheitsstandard. Links zu unterstreichen garantiert, dass sie unterscheidbar sind, ohne sich auf Farbe zu verlassen.

Kontrast verstärken ohne Umfärben

Wenn Ihnen die Seitenpalette gefällt, sie aber ausgewaschen wirkt, verstärken Sie den Kontrast mit einem Filter, statt alles zu übermalen.

html {
  filter: contrast(1.15) brightness(0.97);
}

Das ist eine einzige Zeile und umkehrbar — schalten Sie die JustZix-Regel aus, und die Seite kehrt zum Normalzustand zurück. Halten Sie die Werte sanft; alles über 1,3 beginnt, Details zu zerquetschen.

Graustufen- und reduzierte Farbmodi

Farbe kann ablenkend sein. Eine Graustufenregel entfernt sie vollständig, was großartig für Konzentration oder zum Überprüfen des Layouts ohne Farbverzerrung ist.

html {
  filter: grayscale(1);
}

Möchten Sie Bilder in Farbe behalten, aber die Oberfläche dämpfen? Wenden Sie Graustufen auf alles an und stellen Sie dann die Medien wieder her.

html {
  filter: grayscale(0.85);
}
img, video, picture, canvas {
  filter: grayscale(0);
}

Bewegungseinstellungen respektieren

Ein vollständiges Barrierefreiheits-Theme beruhigt auch Animationen. Diese Regel beseitigt ablenkende Bewegung für jeden, der sein System gebeten hat, sie zu reduzieren.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

Es zusammensetzen

• Paaren Sie immer die Webkit- und Firefox-Bildlaufleisten-Eigenschaften, damit die Regel browserübergreifend ist.
• Filterbasierter Kontrast und Graustufen sind Einzeiler und vollständig umkehrbar — ideal zum schnellen Umschalten.
• Für ernsthafte Barrierefreiheit übermalen Sie mit echten Farben statt mit Filtern; unterstreichen Sie Links.
• Speichern Sie jeden Modus als eigene JustZix-Regel und aktivieren Sie, welcher zum Moment passt.

Das passt natürlich zu einem universellen Dunkelmodus und angenehmen Leseeinstellungen. Finden Sie mehr einsatzbereite Rezepte in unseren fertigen Beispielen oder laden Sie JustZix herunter und beginnen Sie, das Web nach Ihrer Art zu gestalten.