Blog

Screenshots von Dark-Mode-Apps, die lesbar bleiben

Veröffentlicht 25. Oktober 2026 · Dark Mode, Screenshots, Lesbarkeit, Anmerkungen

Dunkle Oberflächen bestrafen nachlässige Beschriftung: dünne Linien verschwinden, Farben beißen sich, Hinweise gehen unter. So bleiben Screenshots im dunklen Theme brauchbar.

Dunkle Oberflächen sehen auf dem Bildschirm knackig aus und werden in der Dokumentation zu Matsch. Dünne graue Ränder verschwinden auf einer weißen Seite, eine rote Anmerkung geht in einer dunkelroten UI unter, und ein in eine helle Präsentation geklebter Screenshot wirkt wie ein schwarzes Loch. Ein paar Entscheidungen beheben das meiste.

Anmerken für den Hintergrund, den du hast

Die Standard-Farbpalette für Anmerkungen ist auf helle Oberflächen abgestimmt. Auf einer dunklen UI drehst du die Logik um:

• Helle Farben für Striche verwenden: Weiß, das helle Blau oder ein kräftiges Grün. Dunkelrot und Dunkelblau verschwinden im dunklen Hintergrund.
• Den Textstil Kontur statt Standard verwenden. Kontur zeichnet einen kontrastierenden Rand um jeden Buchstaben, sodass ein weißes Label sowohl auf einer dunklen Karte als auch auf einer hellen Fläche überlebt.
• Die Stärke um eine Stufe erhöhen. Eine 2-px-Linie, die auf Weiß gut lesbar ist, wirkt vor #1c1c1e dünn.
• Keine halbtransparenten Hervorhebungen über dunklem Text. Ein Marker mit niedriger Deckkraft über hellem Text auf dunklem Grund senkt den Kontrast weiter; hebe stattdessen den Zeilenhintergrund hervor oder nimm eine Form.

Wenn du dieselbe App regelmäßig annotierst, speichere die Farben, auf die du dich festgelegt hast, in der Palette, damit jeder Screenshot zusammenpasst.

Den Rahmen mit dem Bild arbeiten lassen

Ein dunkler Screenshot auf einer weißen Dokumentseite braucht eine Grenze; sonst verschwinden die Ränder und das Bild wirkt wie ein schwebendes Rechteck aus Leere.

• Eng zuschneiden, damit der dunkle Bereich eindeutig das Motiv ist.
• Einen hellen Hintergrund hinzufügen im Bildeditor (Pro), wenn der Screenshot in ein Dokument oder eine Präsentation geht. Ein hellgrauer oder weißer Rahmen trennt das Bild von der Seite und stoppt den „Schwarzes Loch“-Effekt.
• Einen dezenten Eckenradius und Schatten hinzufügen im selben Panel; bei dunklen Screenshots leistet der Schatten mehr als bei hellen.
• Das Seitenverhältnis konsistent halten über eine Reihe von Screenshots, besonders für Präsentationen.

Den richtigen Moment zum Aufnehmen wählen

Dunkle UIs haben oft Übergangszustände, die den Kontrast verändern: Hover-Hervorhebungen, Fokusringe, Lade-Skelette. Nimm den Zustand auf, der die Information trägt, nicht den, der gerade zufällig unter dem Mauszeiger liegt.

• Bewege den Mauszeiger weg von dem Element, das du dokumentierst – es sei denn, der Cursor gehört zum Punkt.
• Warte, bis Animationen zur Ruhe kommen; ein Screenshot eines halb ausgeblendeten Toasts ist nutzlos.
• Wenn ein Tooltip das Motiv ist, nimm ihn auf, solange er offen ist; das eingefrorene Bild behält ihn.

Erst mit Formen markieren, dann mit Text

Auf dunklen Oberflächen konkurrieren Texthinweise mit den eigenen Labels der UI. Bevorzuge:

• Eine Formkontur in einer hellen Farbe um eine Karte oder eine Zeile.
• Eine Nummer neben dem Element, mit der Erklärung unter dem Bild.
• Einen Spotlight (Pro), um den Rest eines unruhigen dunklen Bildschirms abzudunkeln; er erhöht den Kontrast, ohne die Palette der App zu ändern.
• Eine Lupe (Pro) für ein winziges Statussymbol, das der Punkt des Screenshots ist.

Nutze Text, wenn wirklich ein Satz nötig ist, und halte ihn außerhalb des unruhigsten Teils des Bildes.

Das Ergebnis dort prüfen, wo es gelesen wird

Ein Screenshot, der in der Aufnahmeansicht gut aussieht, kann am Zielort scheitern:

• Im hellen Theme eines Chat-Programms braucht ein dunkler Screenshot vielleicht einen Rand, damit er nicht mit dem Nachrichtenhintergrund verschmilzt.
• In einem Wiki im dunklen Theme ist der helle Screenshot derjenige, der leuchtet; halte die Behandlung pro Dokument konsistent statt pro Screenshot.
• Im Druck verbrauchen dunkle Hintergründe Tinte und verstecken dünne Linien; nutze die Hintergrundbehandlung oder invertiere nur für den Druck.

Die sicherste Voreinstellung für gemischte Zielorte ist ein heller Hintergrund mit etwas Innenabstand, einem einheitlichen Radius und einem weichen Schatten.

Eine kurze Checkliste

Häufige Fragen

Warum verschwinden meine Anmerkungen auf dunklen Screenshots?

Dunkelrote, dunkelblaue und schwarze Striche haben fast keinen Kontrast gegen eine dunkle Oberfläche. Wechsle zu Weiß oder einem hellen Akzent, nutze den Textstil Kontur und erhöhe die Linienstärke um eine Stufe.

Sollte ich einen dunklen Screenshot für Dokumente invertieren?

Meistens nicht; eine invertierte UI wirkt fremd und die Farben passen nicht mehr zur App. Setze den Screenshot stattdessen mit Innenabstand und Rand auf einen hellen Hintergrund – das trennt ihn von der Seite, ohne die Farben zu ändern.

Brauche ich Pro für Hintergründe?

Ja, Bildhintergründe sind eine Pro-Funktion. Zuschneiden, Anmerken und Anheften des Screenshots sind kostenlos; Hintergrund und Rahmen gehören zu Pro.

Mehr aus dem Blog