{"id":5849,"date":"2019-11-06T10:56:41","date_gmt":"2019-11-06T10:56:41","guid":{"rendered":"https:\/\/www.rlogical.com\/?p=5849"},"modified":"2025-03-31T18:44:13","modified_gmt":"2025-03-31T13:14:13","slug":"how-to-support-dark-mode-for-ios-13-using-asset-catalog-colors","status":"publish","type":"post","link":"https:\/\/www.rlogical.com\/blog\/how-to-support-dark-mode-for-ios-13-using-asset-catalog-colors\/","title":{"rendered":"How to support Dark Mode for iOS 13 using asset catalog colors?"},"content":{"rendered":"<p>We are going to realize how to help dark mode effectively for existing and new tasks.<\/p>\n<p><strong>Apple will report framework wide dark mode support for <a href=\"https:\/\/www.apple.com\/in\/ios\/ios-13\/features\/\" target=\"_blank\" rel=\"noopener noreferrer\">iOS 13<\/a>. We&#8217;re not discussing the upset shading variation of dark mode, however increasingly about the Mojave style of a darker appearance.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2><strong>What is dark mode?<\/strong><\/h2>\n<p>Probably the greatest <a href=\"https:\/\/www.rlogical.com\/mobile-app-development\/iphone-app-development\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>mobile applications on iOS<\/strong><\/a> previously inherent help and show us precisely what dim mode could bring one applications begin to help it. It fundamentally implies a reversed shading subject of the application in which the primary foundation hues are dark.<\/p>\n<p>&nbsp;<br \/>\n<!-- \n\n<figure class=\"aentry-post__figure aentry-post__figure--text-width\" data-figure-type=\"image\" data-image-type=\"standart\">\n\n\n<div class=\"aentry-post__img--text-width\">\n\n\n<div class=\"aentry-post__img--text-width\">\n\n<a href=\"https:\/\/www.rlogical.com\/mobile-app-development\/\"><img decoding=\"async\" class=\"aligncenter\" style=\"max-width: 100%\" src=\"https:\/\/lh5.googleusercontent.com\/O8lPt-etn6Em76AsekPf-Sc0o5c4NY4Y6XbsSh0QTtfwy8oL9wdKOYGhMwAj7wwPByg0-w23h4V3dQVRb_k9wVAzBOflfY5yc7mFN88P0ump6lxekbDadaarPLXsYPxEu1kLG0Qv\" alt=\"dark mode for ios 13\" \/><\/a>\n\n<\/div>\n\n\n<\/div>\n\n\n\n \n<figcaption><\/figcaption>\n \n<\/figure>\n\n --><br \/>\n&nbsp;<\/p>\n<p><strong>Preparing my app for a darker theme<\/strong><\/p>\n<p>Almost certainly, dark mode is getting down to business equivalent to how it presently takes a shot at <strong>Mac applications in Mojave<\/strong>. Apple composed definite documentation on the best way to help the darker appearance utilizing <strong>AppKit<\/strong>. You can include bolster utilizing code by exchanging hues dependent on the present genuine or bogus incentive for the dark mode setting, however it&#8217;s significantly simpler to utilize a benefit list. Taking a gander at the Apple documentation we can perceive how simple this is. All pictures and hues in the benefit index have an alternative to modify for a particular appearance.<\/p>\n<p>&nbsp;<\/p>\n<figure class=\"aentry-post__figure aentry-post__figure--text-width\" data-figure-type=\"image\" data-image-type=\"standart\">\n<div class=\"aentry-post__img--text-width\">\n<div class=\"aentry-post__img--text-width\">\n<p><!-- <img decoding=\"async\" class=\"aligncenter\" style=\"max-width: 100%\" src=\"https:\/\/lh5.googleusercontent.com\/qgND9eHVaEKVfiFXqUPbCPnDoGRHsbWqWhb73N-iFISXLpNhQo34AfhoJhAUndUoj_o3XMhhlOJ8okHiilRQP0A9W--qBqW2Tjv5fvanAKEoF93az2yoFbK0poIcKjc0TKX6cth-\" \/> --><\/p>\n<\/div>\n<\/div><figcaption><\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p><strong>How to use asset catalog colors in Xcode?<\/strong><\/p>\n<p>By utilizing resource <strong>catalog colors in Xcode<\/strong> you&#8217;re likely going to have a simpler activity for supporting dark mode when it&#8217;s discharged. You&#8217;ll just need to characterize new hues for the new style of appearance. Similar means pictures for which you should as of now be utilizing resource indexes.<\/p>\n<p>Inside your benefit list, you can make another shading set.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<br \/>\n<!-- \n\n<figure class=\"aentry-post__figure aentry-post__figure--text-width\" data-figure-type=\"image\" data-image-type=\"standart\"><img decoding=\"async\" class=\"alignnone\" style=\"max-width: 100%\" src=\"https:\/\/lh3.googleusercontent.com\/6uMzhGQ7vQPeLInfJo8NomqOBTC0WD3JLAOLKCZ8lmhBSnNybrLzQuC1AVHh06w7G2dRh4etwT9L8DBjHON6bsf7JpSXymTr4ZuRq4e5rJfA4zJls8kMIvxGy3MetdfHd8kpUaIF\" \/>\n \n<figcaption><\/figcaption>\n \n<\/figure>\n\n\n&nbsp; --><\/p>\n<p>After giving your color a describing name like \u201c<strong>backgroundColor<\/strong>\u201d you can adjust the appearances setting and set a specific color for the darker appearance.<\/p>\n<p>&nbsp;<br \/>\n<!-- \n\n<figure class=\"aentry-post__figure aentry-post__figure--text-width\" data-figure-type=\"image\" data-image-type=\"standart\">\n\n\n<div class=\"aentry-post__img--text-width\">\n\n\n<div class=\"aentry-post__img--text-width\">\n\n<img decoding=\"async\" class=\"aligncenter\" style=\"max-width: 100%\" src=\"https:\/\/lh5.googleusercontent.com\/jOxBpqw8NqWniNERlO-AReY8M4fYaZlLhYE9KUcEz5ce7rqNIqv46onqmTOySzlCEMAY5TQZUZvE5_nYPBemtfDd_mZtt0CGgzMsr-G1eQ4Q0aGDxHYChxzp9B6DI_o4Ofu5mq2X\" \/>\n\n<\/div>\n\n\n<\/div>\n\n\n\n \n<figcaption><\/figcaption>\n \n<\/figure>\n\n --><br \/>\n&nbsp;<\/p>\n<p>You can now reference this color in your code as follows:<\/p>\n<p><strong>view.backgroundColor = UIColor(named: &#8220;backgroundColor&#8221;)<\/strong><\/p>\n<p>Or<\/p>\n<p>You can directly select it from attributes inspector like below:<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-5871 aligncenter\" src=\"https:\/\/www.rlogical.com\/wp-content\/uploads\/2023\/03\/da1.webp\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>this will probably permit your application to change to a darker appearance effectively. You can do precisely the equivalent for pictures by determining a particular picture for a specific appearance. Be that as it may, you can likewise decide to let your pictures change utilizing a tint shading and set an alternate tint shading for a particular appearance.<\/p>\n<p>&nbsp;<\/p>\n<h2><strong>Dark Mode Support For Images<\/strong><\/h2>\n<p>This will likely the same procedure as color. For images you have to<strong> specify dark mode images<\/strong> as below example and that will automatically change when dark mode is on in your device:<\/p>\n<p>&nbsp;<\/p>\n<figure class=\"aentry-post__figure aentry-post__figure--text-width\" data-figure-type=\"image\" data-image-type=\"standart\">\n<div class=\"aentry-post__img--text-width\">\n<div class=\"aentry-post__img--text-width\">\n<p><img decoding=\"async\" class=\"size-full wp-image-5872 aligncenter\" src=\"https:\/\/www.rlogical.com\/wp-content\/uploads\/2023\/03\/da2.webp\" \/><\/p>\n<\/div>\n<\/div><figcaption><\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>You just have to set the images for <strong>Dark Appearance<\/strong> and that will manage <strong>DARK MODE<\/strong> automatically.<\/p>\n<h2><\/h2>\n<h2><strong>Testing<\/strong><\/h2>\n<p>Unfortunately, its absolutely impossible yet to switch appearances and test your shading settings. Be that as it may, it&#8217;s as of now an incredible initial step to begin utilizing an advantage inventory for your colors.<\/p>\n<p>&nbsp;<\/p>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>Enjoy Dark Mode and iOS 13 features \ud83d\ude42<\/p>\n<p>Looking for iOS App development services? Rlogical offers comprehensive <a href=\"https:\/\/www.rlogical.com\/mobile-app-development\/iphone-app-development\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>iOS application development services<\/strong><\/a>, from consulting, iOS app development through to design, deployment and maintenance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are going to realize how to help dark mode effectively for existing and new tasks. Apple will report framework wide dark mode support for iOS 13. We&#8217;re not discussing the upset shading variation of dark mode, however increasingly about the Mojave style of a darker appearance. &nbsp; &nbsp; What is dark mode? Probably the [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":13890,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[39,38],"tags":[101,103,99,100,102,98,53],"class_list":["post-5849","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ios-app-development","category-mobile-app-development","tag-app-development","tag-apple-ios-13","tag-dark-mode-in-ios-13","tag-ios-13","tag-ios-13-dark-mode","tag-ios-app","tag-ios-development"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/posts\/5849","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/comments?post=5849"}],"version-history":[{"count":4,"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/posts\/5849\/revisions"}],"predecessor-version":[{"id":13895,"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/posts\/5849\/revisions\/13895"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/media\/13890"}],"wp:attachment":[{"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/media?parent=5849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/categories?post=5849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rlogical.com\/wp-json\/wp\/v2\/tags?post=5849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}