Draußen wird es früher dunkel, auf den Fensterbänken stehen die ersten Kürbisse - nur in der SAP Analytics Cloud ist es nach wie vor taghell. Dabei kann die SAC durchaus auch anders. Man muss nur wissen, wo der Lichtschalter sitzt. Kleiner Spoiler: Es gibt einen, er schaltet aber nur die halbe Wohnung dunkel. Ein dunkles Dashboard ist ein eigenes Theme, ein paar hundert Zeilen CSS und eine ganze Menge kleiner Entscheidungen rund um das Thema Licht.
Pünktlich zu Halloween haben wir deshalb ein Dashboard ins Dunkle geschickt: das Tagesgeschäft einer fiktiven Kölner Cookie-Bäckerei, zwei Nächte vor dem großen Ansturm. Kürbisorange, Neonviolett, Mitternachtsblau - schaurig schön, aber trotzdem ein Dashboard, mit dem man arbeiten kann.
Wir schauen uns an, was einen guten Dark Mode ausmacht, was die SAC mitbringt und wo es gruselig wird. Dazu gibt es eine Checkliste und einen kurzen Abstecher zu IBCS.
In abgedunkelten Räumen schont ein Dark Mode die Augen, auf Wandbildschirmen und in Leitständen wirkt er ruhig, und die Daten stehen wie auf einer Bühne im Scheinwerferlicht. Gerade bei Dashboards sendet ein dunkles Design außerdem ein klares Signal: Das hier ist eine operative Live-Sicht und kein gedruckter Monatsbericht.
Doch wie verbreitet ist der Dark Mode eigentlich? In Umfragen unter Technik-Fans nutzen über 80 % den Dark Mode, gemessen am tatsächlichen Web-Traffic war es Anfang der 2020er eher jeder fünfte Seitenaufruf. Unsere Einschätzung: Heute dürfte ein Viertel bis ein Drittel der Nutzer dunkel bevorzugen – am Smartphone und abends mehr, am Büroschreibtisch weniger. Ob sich ein Dark Mode lohnt, zeigt sich aber erst, wenn ihn auch jemand nutzt. Sonst fristet er sein Dasein wie ein unsichtbarer Geist im Theme-Ordner und setzt langsam Spinnweben an.
Wo dunkel nicht hilft: Lange Texte, ausgedruckte Dashboards und Screenshots für Präsentationen funktionieren hell nach wie vor besser. Ein Dark Mode ist also eine Option für den passenden Kontext und kein Ersatz.
Der wohl häufigste Fehler: Farben einfach invertieren. Licht verhält sich auf dunklem Untergrund anders, daher braucht ein Dark Mode eigene Regeln. Die Design-Systeme von Google (Material Design) und Apple sind sich in den Grundlagen erstaunlich einig. Für unseren Showcase haben wir daraus folgende Regeln abgeleitet:
Allgemein gilt: Die WCAG (Web Content Accessibility Guidelines), also die internationalen Richtlinien für barrierefreie Webinhalte, verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5 : 1. Übersetzt: Die Schrift muss deutlich heller sein als die Fläche dahinter. Ein mittleres Grau auf Dunkelblau fällt da schnell durch, ein kostenloser Contrast-Checker zeigt es in Sekunden.
Wichtig, weil es gern verwechselt wird: Dark Mode ist nicht High Contrast. Dark Mode ist eine Frage von Komfort und Atmosphäre, High-Contrast-Modi sind ein Barrierefreiheits-Feature für Menschen mit eingeschränktem Sehvermögen. Ein dunkles Dashboard mit sanftem Leuchten und abgestuften Grautönen ist fast das Gegenteil von hohem Kontrast und sollte daher nicht als Maßnahme zur Barrierefreiheit verkauft werden.
Ja, die SAC hat einen Dark Mode, und zwar out of the box. Seit dem Horizon-Redesign wählt jeder Nutzer in seinem Profil zwischen Morning Horizon (hell), Evening Horizon (dunkel) und den beiden High-Contrast-Varianten. Der Haken: Das gilt nur für die SAC-Oberfläche, also Startseite, Menüs, Toolbars und Dialoge. Wer auf Evening Horizon umschaltet, sitzt in einer dunklen SAC vor einem hellen Dashboard. Das Aussehen der Dashboards steuert ausschließlich das Story-Theme. Hell und Dunkel bedeutet in der SAC also immer: zwei Themes, zum Beispiel Company_Light und Company_Dark.
Und genau hier wird es etwas unheimlich. Naheliegend wäre, dass sich die Story nach der Oberfläche richtet: Nutzer A arbeitet mit Morning Horizon und bekommt das helle Firmen-Theme, Nutzer B mit Evening Horizon automatisch das dunkle. Stand QRC3.2026 geht das nicht, denn die Story kann nicht abfragen, welches Oberflächen-Theme der Nutzer eingestellt hat. Das Scripting kennt nur das Theme der Story selbst (Application.getTheme()), und Application.getUserInfo() liefert lediglich ID und Anzeigenamen. Die Story weiß also schlicht nicht, ob es draußen hell oder dunkel ist.
Bleibt ein Schalter in der Story, mit dem der Nutzer selbst zwischen Hell und Dunkel wechselt (Application.setTheme()). Für einen festen Einstieg, etwa am Wandbildschirm, lässt sich das Theme zusätzlich als URL-Parameter mitgeben. Wünschenswert wäre ein Befehl, der das Oberflächen-Theme des Nutzers ausliest. Dann könnte die Story beim Öffnen automatisch das passende Theme laden. Wir bleiben gespannt…
Und die mobile App? Die bleibt hell, ob man will oder nicht. Die SAP Analytics Cloud App für Smartphone und Tablet kennt keinen Dark Mode und ist weder Morning noch Evening Horizon, sondern steckt noch im alten Design fest. Neben dem Browser im neuen Horizon-Look wirkt sie ein bisschen wie der Gast, der die Einladung zur Kostümparty verpasst hat. Ein Update wäre dringend nötig.
Wer kein eigenes Theme wählt, bekommt inzwischen automatisch einen Morning-Horizon-Look. SAP liefert dafür das Story-Theme „SAP Morning Horizon (Light)“ standardmäßig aus - ein solider, heller Startpunkt ohne viel Komplexität. Ein dunkles Gegenstück gibt es bisher nicht, aber der Zusatz „(Light)“ verrät schon, wohin die Reise geht: SAP arbeitet daran, die Horizon-Themes aus der Community in den Standard zu übernehmen.
Alles unterhalb des Trenners ist selbst importiert oder selbst gebaut, auch „Fiori Morning Horizon“ und „Fiori Evening Horizon“. Die stammen aus der SAP Community, wurden im April 2024 samt Story-Templates auf GitHub veröffentlicht und seitdem weiterentwickelt. Fiori Evening Horizon ist damit der naheliegendste Startpunkt für ein dunkles Dashboard und bringt bereits CSS-Klassen für Karten, Buttons und Texte mit. Unser Theme NL_DARK hat genau so angefangen: als Kopie, bei der wir jede SAP-Farbe auf eine Markenfarbe gemappt haben.
Neben dem Theme gibt es noch weitere Stellschrauben:
| Wo | Was man steuert | Gut zu wissen |
| Theme | Farbpaletten, Canvas-Hintergrund, Widget-Defaults, Eckenradius | Die Basis, hier entsteht der Großteil des Looks |
| Theme CSS | Styling ganzer Widget-Klassen, inkl. SAC-interner Elemente | Großzügiger als Story CSS: Verläufe, Hover-Schatten, overflow und outline funktionieren |
| Story CSS | Styling über eigene Klassen | Strenge Allow-List: keine Verläufe, kein Padding/Margin, keine Animationen |
| Layout | Panels, Flow Layout Panels, Breiten in %, Breakpoints | Der einzige Weg, Abstände zu steuern |
| Scripting | CSS-Klassen, Größen und Filter zur Laufzeit | Macht Kacheln klickbar und Fortschrittsbalken beweglich |
Ein komplettes dunkles Theme, das bestehende Stories umfärbt, ohne ein einziges Widget anzufassen
Weiches Leuchten mit radial-gradient und box-shadow im Theme CSS
Feste Farben pro Merkmalsausprägung und Kennzahl sowie Muster pro Version (Ist gefüllt, Ziel schraffiert)
Responsive Layouts mit Flow Layout Panels und Breakpoint
Keine eigenen Schriftarten, keine Animationen, keine Abstände per CSS
Panels haben weder einen Hover-Zustand noch ein Klick-Event. Wir haben daher transparente Buttons über die Kacheln gelegt
Zeitachsen mit Hierarchie zeigen immer ihre übergeordneten Ebenen (Okt / Q4 / 2026) unter den Labels an, und flache Zeitattribute sortieren als Text (1, 10, 11 … 2)
Theme CSS will gepflegt werden. Eine einzige ungültige Regel, zum Beispiel :hover auf einem Panel, und das komplette Stylesheet wird verworfen. Zudem behalten Stories ihre eigene Kopie des Theme CSS
Viel Eye-Candy kostet Performance
Ganz neu ist die dunkle Seite der SAC übrigens nicht. Schon 2021 wurde in der SAP Community ein Hell/Dunkel-Umschalter für den Analytics Designer gezeigt, und auch in SAP Lumira Designer ließen sich dunkle Dashboards umsetzen. So richtig durchgesetzt hat sich das Ganze aber nie. Was wir ergänzt haben, ist Licht - Verläufe, Leuchteffekte und Hover-Zustände im Theme CSS.
Das Dashboard zeigt Donnerstag, den 29. Oktober 2026, zwei Nächte vor Halloween. Eine fiktive Bäckereikette mit zwei Filialen und einem Lieferdienst will vor allem eine Frage beantwortet haben: Liegen wir heute im Ziel? Alles Weitere auf der Seite erklärt das Warum.
Vier KPI-Kacheln - Gesamt sowie je eine für die beiden Filialen und den Lieferdienst, jeweils mit verkauften Stück, Tagesziel, Fortschrittsbalken und den Top 4 Cookies. Ein Klick auf eine Kachel filtert alle Charts darunter
Tagesverlauf im Oktober - Cookies Ist, Cookie-Ziel und Getränke. Die Ziellinie läuft bis zum 31. Oktober weiter, so sieht man den Halloween-Peak, der noch bevorsteht
Abweichung zum Ziel je Cookie, daneben ein Donut Cookies vs. Getränke
Stückzahlen je Produkt als Treemap (umschaltbar auf Kategorien), daneben die Stückzahlen je Kalenderwoche (umschaltbar auf Monate)
| Farbe | Hex | Bedeutung |
| Neonviolett | #9D4BFF | Ist (Cookies) |
| Kürbisorange, schraffiert | #F28C28 | Ziel (erkennbar an der Schraffur) |
| Hellblau | #1EA7FF | Getränke |
| Rot | #EF4135 | Highlight der aktiven Kachel |
| Ampel: Rot / Orange / Grün | #E5533D / #F28C28 / #6CC08B | Fortschritt zum Tagesziel: unter 75 %, 75–95 %, darüber |
Legenden sucht man vergeblich. Stattdessen hat jede Karte einen kurzen Untertitel in Großbuchstaben, der sagt, was zu sehen ist, zum Beispiel „ALL STORES · COOKIES VS. TARGET · DRINKS“.
Die Kacheln haben keinen sichtbaren Rahmen, ein weicher Schatten hebt sie von der Seite ab. Beim Hover leuchtet eine Kachel von oben links auf, die aktive Kachel bekommt ein dezentes rotes Highlight von unten rechts. Bis dahin hat es ein gutes Dutzend Runden gebraucht.
Zwei Details ließen sich nur im Datenmodell lösen. Für Cookies vs. Getränke haben die Produkte eine Kategorie-Hierarchie bekommen. Und für saubere, richtig sortierte Zeitachsen gab es zwei kleine Hilfsdimensionen: Tag des Monats (01-31) und Kalenderwoche (KW 1-53). Manchmal ist der kürzeste Weg zum schönen Chart eben ein Umweg übers Modell.
Wer viel mit Finanzreporting zu tun hat, stellt sich spätestens jetzt die Frage. Die kurze Antwort: nichts. Die IBCS Standards kennen keine eigene Regel zum Dark Mode. Am nächsten kommt die Empfehlung, farbige oder gefüllte Hintergründe zu vermeiden - und streng genommen ist eine dunkle Seite genau das.
Dazu kommt, dass die IBCS-Notation von einer hellen Seite ausgeht: Ist in Dunkelgrau, Vorjahr in Hellgrau, Plan als leerer Rahmen. Auf dunklem Grund müssen die Grautöne getauscht werden und der leere Rahmen verliert seine Bedeutung - die SAC füllt ihn im dunklen Theme sogar weiß. Deshalb ist das Ziel in unserem Showcase schraffiert, ein Muster, das IBCS eigentlich für Forecasts vorsieht. Unser Dashboard leiht sich also IBCS-Ideen, ist aber bewusst kein IBCS-Bericht.
Damit kein falscher Eindruck entsteht: Die SAC kann IBCS, und zwar ziemlich gut. Sie ist von der IBCS Association zertifiziert und bringt die nötigen Bausteine mit, etwa Varianz-Charts, eine einheitliche Skalierung über mehrere Charts hinweg und Muster für Versionen wie Ist, Plan und Forecast.
Unsere Empfehlung: Für das operative Tagesgeschäft auf dem Wandbildschirm darf es gern dunkel sein. Für den IBCS-konformen Management-Bericht bleibt man besser im Hellen.
Für Hell reicht oft der Standard „SAP Morning Horizon (Light)“, für Dunkel mit Fiori Evening Horizon starten und die Farben auf die eigene Marke mappen
Dunkle Markenfarbe statt Schwarz, Ebenen über die Helligkeit trennen
Gesättigte Datenfarben, jede mit genau einer Bedeutung
Effekte ins Theme CSS, in einer Datei pflegen und nach jeder Änderung testen
Legenden durch klare Untertitel ersetzen
Die Seite von heute rückwärts aufbauen: KPIs, Trend, Aufschlüsselung, Historie
Toggles statt nahezu identischer Charts
Wenn ein Chart sich wehrt, zuerst ins Modell schauen
Hell und Dunkel über zwei Themes und einen Schalter lösen - der Dark Mode der Oberfläche färbt die Story nicht mit
Dark Mode nicht als Barrierefreiheit verkaufen, dafür gibt es die High-Contrast-Themes
Die SAC kann deutlich dunkler - und deutlich schöner - aussehen, als ihre Standardeinstellungen vermuten lassen. Das Theme übernimmt den Großteil der Arbeit, Layout und etwas Scripting erledigen den Rest. Die eigentliche Herausforderung ist dabei nicht die Technik, sondern Zurückhaltung: weniger Farben, keine harten Linien und ein klarer Einstiegspunkt. Oder um im Halloween-Bild zu bleiben: Ein paar gut platzierte Kürbisse wirken mehr als ein komplett verkleideter Vorgarten.
Einen schaurigen Gedanken wollen wir noch loswerden. Diese Story, das Datenmodell und das Theme wurden von Geisterhand gebaut… was es genau damit auf sich hat, lüften wir aber erst nächste Woche.
Sie möchten Ihre SAC Stories ebenfalls ins rechte - oder dunkle - Licht rücken? Ob Dark Mode, Corporate Theme oder das Redesign eines bestehenden Dashboards: Nehmen Sie einfach Kontakt zu uns auf - wir freuen uns auf den Austausch mit Ihnen!
Happy Halloween!