Trick or Theme: Dark Mode in der SAP Analytics Cloud

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. 

NextCookie Cologne im Dark Mode auf Tablet und Smartphone

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.

Warum Dark Mode für Dashboards in SAP Analytics Cloud?

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.

Ein guter Dark Mode ist kein umgedrehter Light Mode

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:

• Kein Schwarz, sondern eine dunkle Markenfarbe. Reines Schwarz lässt jedes Element wie ein Loch wirken. Wir haben den Farbton unseres Corporate-Dunkelblaus genommen und nur die Helligkeit verändert: Seite #0B1018, Karten #131A25, erhöhte Flächen #1A2330
• Tiefe durch Helligkeit statt Rahmen. Je höher die Ebene, desto heller die Fläche. Schatten funktionieren nur noch weich und großzügig
• Leuchtend heißt gesättigt, nicht hell. Pastellfarben wirken auf dunklem Grund verwaschen. Ein kräftiges Violett leuchtet, ein helles Beige wirkt einfach nur grau
• Jede Farbe hat genau einen Job. Keine Farbe steht für zwei Dinge
• Keine harten Linien. Auf dunklem Hintergrund springt jede dünne helle Kante sofort ins Auge
• Text eine Stufe heller als gedacht. Graue Labels, die beim Bauen am eigenen Monitor gut lesbar sind, verschwinden oft am Beamer oder auf anderen Endgeräten, vor allem auf schwächeren Bildschirmen

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.

Dark Mode in der SAC - zwei Ebenen, ein Missverständnis

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.

Dunkle Oberfläche ist noch kein dunkles Dashboard

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.

Dashboarding with SAP Analytics Cloud - Laden Sie sich das exklusive Whitepaper herunter!

Welches SAC-Story-Theme eignet sich für den Dark Mode?

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.

Theme-Auswahl in der Story - „SAP Morning Horizon (Light)“ kommt von SAP, darunter folgen Community- und eigene Themes

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:

Süßes - was gut funktioniert

• 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
  

Saures - wo es gruselig wird

• 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.

Der Showcase: NextCookie Cologne

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.

Leserichtung: von heute rückwärts

1. 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

2. 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
   

3. Abweichung zum Ziel je Cookie, daneben ein Donut Cookies vs. Getränke

4. Stückzahlen je Produkt als Treemap (umschaltbar auf Kategorien), daneben die Stückzahlen je Kalenderwoche (umschaltbar auf Monate)

Farben mit genau einem Job

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“.

Licht statt Linien

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.

KPI-Kacheln – links aktiv mit rotem Highlight

Lösungen im Modell, nicht im Chart

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.

Ist ein dunkles Dashboard IBCS-konform?

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.

IBCS-konformes Dashboard in der SAP Analytics Cloud

Abweichungsanalyse nach IBCS in der SAC

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.

Checkliste: eine dunkle Story in SAP Analytics Cloud bauen

• 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
  

SAP Analytics Cloud Dark Mode: Unser Fazit - schaurig schön statt einfach nur dunkel

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!