š I Built a PCF Control: Meet the MDA Dark Mode Detector!
Hey folks, Iām absolutely buzzing to share something Iāve been tinkering withāa brand-new Power Apps Component Framework (PCF) control called the MDA Dark Mode Detector! If youāre into Power Apps and Model-Driven Apps, this oneās for you. Let me tell you the story of how it came to be and why itās a handy little tool.
šµļøāāļø The Spark: A Sneaky Dark Mode Screenshot
Picture this: Iām sifting through my support inbox, and a user sends me a screenshot of a Model-Driven App. Bamāthereās Dark Mode staring me right in the face, with &flags=themeOptiondarkmode chilling in the URL. I was like, āHold up, what?!ā Microsoft doesnāt officially support Dark Mode in Model-Driven Apps, but itās out there in the wild, and users are finding it!
Hereās the kicker: if youāre building Custom Pages or embedded Canvas Apps, thereās no built-in way to check if the host app is rocking Dark Mode. That really bugged me. I wanted to make apps that could adapt their style or logic based on the themeāthink dynamic colors, icons, or even conditional logic. But how?
š” The Inspiration: A Push from David Rivard
Iād just read this ace article by David Rivard about prepping PCF controls for Dark Mode, and it got my gears turning. Davidās piece was all about making controls Dark Mode-ready, and I thought, āRight, can I pull this off in a Custom Page or Canvas App?ā I was hyped to give it a go.
First hurdle: the context.fluentDesignLanguage.isDarkTheme property, which is supposed to tell you if Dark Mode is on, is a complete no-show in Canvas Apps. Gutted! I couldāve thrown in the towel, but Iām stubborn like that. If the Power Apps context wasnāt going to play ball, maybe the browserās DOM could save the day.
š ļø The Solution: DOM Diving to the Rescue
I figured Iād poke around the DOM to find an element that flips when Dark Mode kicks in. After a bit of faffing about in Developer Tools (you know, the usual inspect-element chaos), I struck gold. The navigation barāspecifically the “āchanges its background color like clockwork:
- Dark Mode:
rgb(10,10,10)(proper moody black). - Light Mode:
rgb(240,240,240)(crisp, clean white).
I built the control to check this elementās background color and output true for Dark Mode or false for Light Mode. And guess what? It bloody works! š
āļø How the MDA Dark Mode Detector Works
The MDA Dark Mode Detector is dead simple but does exactly what it says on the tin:
- It looks at the nav barās background color via
document.querySelector("#id-30[data-id='navbar-container']"). - If itās
rgb(10,10,10), it outputstrue(Dark Mode). - If itās
rgb(240,240,240), it outputsfalse(Light Mode). - If it canāt find the element (or just to be future-proof), it tries
context.fluentDesignLanguage.isDarkThemefirst, but thatās more of a backup plan.
The control is super lightweightāno fancy UI, just a clean string output you can bind to a Label or use in your appās logic. It plays nice with Custom Pages, Canvas Apps, and Model-Driven App forms, so you can chuck it anywhere you need theme detection.
š Why Itās Useful
With users sneaking Dark Mode into Model-Driven Apps via that &flags=themeOptiondarkmode trick, itās a real-world problem-solver, the control allows you to adjust your Custom Page or Canvas based on the theme.
š Get It and Give It a Go!
Ready to try it? Head over to my GitHub repo, where youāll find the solution files and a straightforward README to get you started. Itās all there, ready to drop into your Power Apps environment:
