{"id":840,"date":"2025-05-08T01:58:17","date_gmt":"2025-05-08T01:58:17","guid":{"rendered":"https:\/\/pensplace.co.uk\/?p=840"},"modified":"2025-05-08T02:35:00","modified_gmt":"2025-05-08T02:35:00","slug":"model-driven-apps-dark-mode-ready-icons-in-icons-25","status":"publish","type":"post","link":"https:\/\/pensplace.co.uk\/index.php\/2025\/05\/08\/model-driven-apps-dark-mode-ready-icons-in-icons-25\/","title":{"rendered":"Model Driven Apps Dark Mode Ready Icons in Icons 25"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div>\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>One of the most useful new features in <strong>Icons 25<\/strong> is the ability to generate <strong>dark mode\u2013ready SVG icons<\/strong>\u2014perfect for use in <strong>Model-Driven Power Apps<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83c\udf13 Why Dark Mode?<\/h3>\n\n\n\n<p>While <strong>dark mode isn&#8217;t officially supported in Model-Driven Apps by Microsoft<\/strong>, it&#8217;s something many developers and makers are enabling through clever use of <strong>URL parameters<\/strong> and custom themes. If you\u2019re customizing your app to support dark mode, having the right icons is a crucial part of making the UI feel polished and consistent.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u2699\ufe0f What Icons 25 Does<\/h3>\n\n\n\n<p>When you select the <strong>\u201cMDA Dark Mode Ready\u201d<\/strong> option in Icons 25:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The app automatically adds <code class=\"\" data-line=\"\">fill=&quot;currentColor&quot;<\/code> to the <code class=\"\" data-line=\"\">&lt;svg&gt;<\/code> tag.<\/li>\n\n\n\n<li>It removes any hard-coded <code class=\"\" data-line=\"\">fill<\/code> colors within the icon paths.<\/li>\n<\/ul>\n\n\n\n<p>This allows your icon to inherit the current text color\u2014so it will display properly whether you&#8217;re in light or dark mode, adapting seamlessly to whatever theme your app is using.<\/p>\n\n\n\n<p>The Icons &#8216;icon&#8217; in the picture below was downloaded from Icons 25 using the <strong>Dark Mode Ready<\/strong> option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/pensplace.co.uk\/wp-content\/uploads\/2025\/05\/image-24.png\" alt=\"\" class=\"wp-image-841\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udce5 How to Use It<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the icon you want in Icons 25.<\/li>\n\n\n\n<li>Enable the <strong>MDA Dark Mode Ready<\/strong> option.<\/li>\n\n\n\n<li>Download the icon.<\/li>\n\n\n\n<li>Add it to your Model-Driven App as a web resource.<\/li>\n\n\n\n<li>If you haven\u2019t already, enable dark mode in your app by adding <code class=\"\" data-line=\"\">&amp;flags=themeOption%3Ddarkmode<\/code> to your app\u2019s URL.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"563\" src=\"https:\/\/pensplace.co.uk\/wp-content\/uploads\/2025\/05\/image-26-1024x563.png\" alt=\"\" class=\"wp-image-854\" srcset=\"https:\/\/pensplace.co.uk\/wp-content\/uploads\/2025\/05\/image-26-1024x563.png 1024w, https:\/\/pensplace.co.uk\/wp-content\/uploads\/2025\/05\/image-26-300x165.png 300w, https:\/\/pensplace.co.uk\/wp-content\/uploads\/2025\/05\/image-26-768x422.png 768w, https:\/\/pensplace.co.uk\/wp-content\/uploads\/2025\/05\/image-26-1536x844.png 1536w, https:\/\/pensplace.co.uk\/wp-content\/uploads\/2025\/05\/image-26.png 1814w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>That\u2019s it\u2014your icon is now ready to shine in both light and dark modes \u2728<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udcda Learn More<\/h3>\n\n\n\n<p>If you&#8217;re new to Icons 25 or need help getting started, check out the full <strong><a href=\"https:\/\/pensplace.co.uk\/index.php\/docs\/getting-started\/\">Getting Started Guide<\/a><\/strong>.<\/p>\n\n\n\n<p>Let me know what you think of this feature or if you\u2019d like to see support for additional theming options!<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the most useful new features in Icons 25 is the ability to generate dark mode\u2013ready SVG&hellip;<\/p>\n","protected":false},"author":1,"featured_media":841,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[30,31],"tags":[],"class_list":["post-840","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamics-365","category-power-apps"],"featured_image_src":"https:\/\/pensplace.co.uk\/wp-content\/uploads\/2025\/05\/image-24-e1746669486544.png","author_info":{"display_name":"Pen","author_link":"https:\/\/pensplace.co.uk\/index.php\/author\/pen\/"},"_links":{"self":[{"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/840","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/comments?post=840"}],"version-history":[{"count":5,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/840\/revisions"}],"predecessor-version":[{"id":856,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/840\/revisions\/856"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/media\/841"}],"wp:attachment":[{"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/categories?post=840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/tags?post=840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}