How to Build a Light/Dark Mode Theme Switch in Power BI 🌓 (No DAX, With Accessibility in Mind)
- Elena Drakulevska
- 11 hours ago
- 3 min read
Alright, dark-mode fans, this one’s for you!
We learned in the last post that while dark UI feels sleek, it’s not automatically accessible and it shouldn’t be your default strategy (hello, contrast + glare). In most cases, light mode is the more accessible baseline (just imagine trying to work on a sunny beach or on your balcony with dark mode… nightmare).
But UX is also about choice. Some users love light, some swear by dark. So let’s give them control.
Let’s build a Light/Dark Mode switch in Power BI without DAX, without fancy scripts, and without crying. AND we’ll do it responsibly, with accessibility checks baked in.
Approach | Limitation | UX Level |
JSON Theme (static) | Developer decides. Users can't change it at runtime. | ❌ One size fits all. Not user-friendly. |
Helper Table + Slicer (dynamic) | User selects Light or Dark → report instantly restyles | ✅ Happy users. UX-driven. |
We’re going with user-controlled dynamic styling, using Field value formatting and a tiny Theme Switch Table (this can be expanded later as much as you want).
What We’re Building
A Theme Switch table with two rows for the Mode: Light and Dark
Columns hold your design tokens (Background, Text, Accent, etc.)
Design Token Moment 💡 In proper UI/UX design systems (think Google Material, Adobe, etc.), colors, spacing, and typography values are stored as tokens—named values that act as a single source of truth. You’re doing the exact same thing here in Power BI: naming values so you don’t manually reapply hex codes everywhere.
A single-select slicer to choose mode
Conditional formatting using fx → Format by → Field value
No measures needed
💡 Accessibility Reminder # 1: When filling hex codes, test contrast immediately—don’t wait until the end.
⚠️ Before You Get Too Excited: Know the Limitations
This works only for properties that support fx → Format by → Field value. Not all visuals in Power BI do.
Background images, page-level wallpapers, and some old visuals won’t react to this method.
Custom visuals behave inconsistently.
Advanced UX Note:
If you also want data-driven conditional formatting like Min/Max, Status colors, KPI heatmaps alongside the Light/Dark theme switch, that requires a hybrid approach using measures that check both the slicer and your logic.
👉 This tutorial keeps it clean with no DAX, but we can level it up in a follow-up.
Step-by-Step: Build the Power BI Dark Mode Switch
Step 1: Create your Theme Switch Table
Enter Data → Call it 'Theme Switcher' or 'UI Mode'
Add desired columns, e.g. Background, Text, Color 1, Color 2...
Step 2: Add your colors (hex codes)
💡 Accessibility Reminder # 2: Avoid pure black backgrounds. Use deep gray (e.g., #1C2237) to reduce text glow.
.Step 3: Add a Slicer
Bind slicer to the Mode Column in your table
Set to Single Select
Sync slicer across report pages for global behavior
💡 Accessibility Reminder # 3: Make sure focus/hover states on the slicer are visible in both themes.
Step 4: Apply Dynamic Colors (Conditional Formatting)
On any visual → Title Color / Background Color / Lines etc → fx button → Format by: Field value → Based on field: pick your desired column
Because the slicer filters the table to a single row (Light or Dark), the colors update in real time. Magic. ✨
Step 5: Speed Run Formatting
Format one visual beautifully → Select the visual → Copy format (see screenshot below)→ Click on your next visual. Thank me later.
Optional: Build a cute toggle button (coming up when the stars align).
Quick Dark Mode Accessibility Checklist for Power BI
Before you unleash your dashboard on your team, run this:
✅ Check | Why it Matters |
Contrast ratio ≥ 4.5:1 for body text, 3:1 for large text and icons | Dark UI makes perception tricky. |
Use charcoal, not pure black (#000000) | Reduces white-text halo-ing. |
Don’t rely on color alone for emphasis | Add icon, markers, etc. for color-blind accessibility. |
Hover/focus states visible in both modes | Keyboard + low-vision users rely on these cues. |
Test in different lighting conditions | Dark mode at noon on a MacBook screen ≠ dark mode at midnight on a gaming monitor. |
👉 Get my full Accessibility Checklist ✅.
Closing Vibes
Voilà! A Light/Dark Mode switch in Power BI, no DAX sacrifice required, with proper UX responsibility baked in. Give your users control, but guide them safely through the galaxy of contrast and theme joy.
Happy designing! And may your hex values always pass contrast testing. 🚀
P.S. Yes, my demo uses Star Wars battle timelines. I had to organize my chaos. UX meets nerd joy. 🤓