{"id":871,"date":"2025-05-08T19:03:27","date_gmt":"2025-05-08T19:03:27","guid":{"rendered":"https:\/\/pensplace.co.uk\/?p=871"},"modified":"2025-05-08T19:17:13","modified_gmt":"2025-05-08T19:17:13","slug":"mda-dark-mode-detector-pcf-for-custom-pages-and-embedded-canvas-apps","status":"publish","type":"post","link":"https:\/\/pensplace.co.uk\/index.php\/2025\/05\/08\/mda-dark-mode-detector-pcf-for-custom-pages-and-embedded-canvas-apps\/","title":{"rendered":"MDA Dark Mode detector PCF for Custom Pages and Embedded Canvas Apps"},"content":{"rendered":"
<\/div>\n

\ud83c\udf89 I Built a PCF Control: Meet the MDA Dark Mode Detector!<\/h2>\n\n\n\n

Hey folks, I\u2019m absolutely buzzing to share something I\u2019ve been tinkering with\u2014a brand-new Power Apps Component Framework (PCF) control called the MDA Dark Mode Detector<\/strong>! If you\u2019re into Power Apps and Model-Driven Apps, this one\u2019s for you. Let me tell you the story of how it came to be and why it\u2019s a handy little tool.<\/p>\n\n\n\n

\ud83d\udd75\ufe0f\u200d\u2642\ufe0f The Spark: A Sneaky Dark Mode Screenshot<\/h2>\n\n\n\n

Picture this: I\u2019m sifting through my support inbox, and a user sends me a screenshot of a Model-Driven App. Bam\u2014there\u2019s Dark Mode staring me right in the face, with &flags=themeOptiondarkmode<\/code> chilling in the URL. I was like, \u201cHold up, what?!\u201d Microsoft doesn\u2019t officially support Dark Mode in Model-Driven Apps, but it\u2019s out there in the wild, and users are finding it!<\/p>\n\n\n\n

Here\u2019s the kicker: if you\u2019re building Custom Pages or embedded Canvas Apps, there\u2019s 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\u2014think dynamic colors, icons, or even conditional logic. But how?<\/p>\n\n\n\n

\ud83d\udca1 The Inspiration: A Push from David Rivard<\/a><\/h2>\n\n\n\n

I\u2019d just read this ace article by David Rivard about prepping PCF controls for Dark Mode, and it got my gears turning. David\u2019s piece was all about making controls Dark Mode-ready, and I thought, \u201cRight, can I pull this off in a Custom Page or Canvas App?\u201d I was hyped to give it a go.<\/p>\n\n\n\n

First hurdle: the context.fluentDesignLanguage.isDarkTheme<\/code> property, which is supposed to tell you if Dark Mode is on, is a complete no-show in Canvas Apps. Gutted! I could\u2019ve thrown in the towel, but I\u2019m stubborn like that. If the Power Apps context wasn\u2019t going to play ball, maybe the browser\u2019s DOM could save the day.<\/p>\n\n\n\n

\ud83d\udee0\ufe0f The Solution: DOM Diving to the Rescue<\/h2>\n\n\n\n

I figured I\u2019d 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\u2014specifically the “\u2014changes its background color like clockwork:<\/p>\n\n\n\n