<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/">
	<channel>
		<title>Implementing Dark Theme in Android | Infinum</title>
		<atom:link href="https://infinum.com/blog/implementing-dark-theme-in-android/feed/" rel="self" type="application/rss+xml" />
		<link>https://infinum.com/blog/implementing-dark-theme-in-android/</link>
		<description>Building digital products</description>
		<lastBuildDate>Thu, 30 Apr 2026 13:44:05 +0000</lastBuildDate>
		<sy:updatePeriod>hourly</sy:updatePeriod>
		<sy:updateFrequency>1</sy:updateFrequency>

					<item>
				<image>
					<url>8078https://infinum.com/uploads/2020/05/implementing-dark-theme-in-android-0.webp</url>
				</image>
				<title>Implementing Dark Theme in Android</title>
				<link>https://infinum.com/blog/implementing-dark-theme-in-android/</link>
				<pubDate>Thu, 07 May 2020 13:16:00 +0000</pubDate>
				<dc:creator>Petra Završki</dc:creator>
				<guid isPermaLink="false">https://infinum.com/the-capsized-eight/implementing-dark-theme-in-android/</guid>
				<description>
					<![CDATA[<p>As Android&#8217;s system-wide dark mode update affects all apps that support dark theme, here are two ways to implement dark theme in Android apps.</p>
<p>The post <a href="https://infinum.com/blog/implementing-dark-theme-in-android/">Implementing Dark Theme in Android</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</description>
				<content:encoded>
					<![CDATA[<div
	class="wrapper"
	data-id="es-197"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-92">
	</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-95"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-93">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-94'
	>
	In today’s connected world, millions of different applications are competing for the attention of users with new and innovative features every day. One of the crazy popular features in the last couple of years has definitely been <em>Dark theme</em>.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-98"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-96">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-97'
	>
	More than meets the eye</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-101"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-99">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-100'
	>
	Besides its sophisticated looks, dark theme offers much more. One of the biggest benefits is <strong>power reduction</strong>. When running in dark, you light up less pixels and the result is significant power usage reduction – <a href="https://www.youtube.com/watch?v=OCHEjeLC_UY&amp;t=66s">up to 60 percent</a>. It also makes your app easier to use in low-light environments and helps people sensitive to bright light get a better user experience.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-104"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-102">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-103'
	>
	Last year, Google introduced a new feature on Android 10 called <em>System theme change</em>. It enables switching between the light and dark theme in the system but also affects all apps which support the dark theme. That’s why developers are highly encouraged to start implementing dark theme in their apps.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-107"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-105">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-106'
	>
	Easy dark mode with Force dark</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-110"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-108">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-109'
	>
	With Android 10 came one more interesting feature called <em>Force dark</em>. It’s convenient for developers who don’t want to invest a lot of time into dark theme implementation. If you enable <em>Force dark</em> by setting <em>android:forceDarkAllowed=”true”</em> in your activity’s theme, it will analyze the views in runtime and automatically convert them to dark before they are drawn on the screen.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-112"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-code">
	<pre class="phiki language-kotlin github-light" data-language="kotlin" style="background-color: #fff;color: #24292e;"><code><span class="line"><span class="token">
</span></span><span class="line"><span class="token" style="color: #d73a49;">&lt;</span><span class="token">style name</span><span class="token" style="color: #d73a49;">=</span><span class="token">”Theme.AppCompat” parent</span><span class="token" style="color: #d73a49;">=</span><span class="token">”Theme.AppCompat.Light”</span><span class="token" style="color: #d73a49;">&gt;</span><span class="token">
</span></span><span class="line"><span class="token">    </span><span class="token" style="color: #d73a49;">..</span><span class="token">.
</span></span><span class="line"><span class="token" style="color: #d73a49;">&lt;</span><span class="token">item name</span><span class="token" style="color: #d73a49;">=</span><span class="token">”android</span><span class="token">:</span><span class="token" style="color: #6f42c1;">forceDarkAllowed</span><span class="token">”&gt;</span><span class="token" style="color: #005cc5;">true</span><span class="token" style="color: #d73a49;">&lt;</span><span class="token" style="color: #d73a49;">/</span><span class="token">item</span><span class="token" style="color: #d73a49;">&gt;</span><span class="token">
</span></span><span class="line"><span class="token">    </span><span class="token" style="color: #d73a49;">..</span><span class="token">.
</span></span><span class="line"><span class="token" style="color: #d73a49;">&lt;</span><span class="token" style="color: #d73a49;">/</span><span class="token">style</span><span class="token" style="color: #d73a49;">&gt;</span><span class="token">
</span></span><span class="line"><span class="token">
</span></span></code></pre></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-115"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-113">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-114'
	>
	In most cases, if layouts are not too complicated, it does a solid job.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-118"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-116"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-auto" data-id="es-117">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2020/05/implementing-dark-theme-in-android-1.webp"
					class="image__img block-media__image-img"
					alt=""
										height="752"
															width="416"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-121"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-119"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-auto" data-id="es-120">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2020/05/implementing-dark-theme-in-android-2.webp"
					class="image__img block-media__image-img"
					alt=""
										height="759"
															width="416"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-124"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-122">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-123'
	>
	That being said, some slightly more complicated layouts can end up looking funny, so make sure to test your app well before settling with <em>Force dark</em>.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-127"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-125"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-auto" data-id="es-126">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2020/05/implementing-dark-theme-in-android-3.webp"
					class="image__img block-media__image-img"
					alt=""
										height="757"
															width="416"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-130"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-128"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-auto" data-id="es-129">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2020/05/implementing-dark-theme-in-android-4.webp"
					class="image__img block-media__image-img"
					alt=""
										height="757"
															width="416"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-133"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-131">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-132'
	>
	Another disadvantage of this approach is the lack of control over the app’s appearance in the dark version. That’s why <em>custom implementation</em> is highly recommended.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-136"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-134">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-135'
	>
	Laying the groundwork is half the success</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-139"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-137">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-138'
	>
	Before digging in the dark theme implementation you need to ensure <em>using themes and styles when defining your layouts</em>. Removing all hard coded colors or direct referencing to color resources out of your app and instead using theme attributes will make the process of dark theme implementation faster and much easier.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-142"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-140">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-141'
	>
	The biggest challenge is adjusting your custom views. <a href="https://infinum.com/blog/how-to-support-themes-in-custom-views-for-android-apps/">This article</a> describes well how to achieve this without much difficulty. Once you’ve done spring cleaning, you are ready for implementation.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-145"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-143">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-144'
	>
	Custom dark theme implementation</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-148"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-146">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-147'
	>
	First step is to make your app’s theme inherit one of the <em>DayNight</em> variants:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-150"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-code">
	<pre class="phiki language-kotlin github-light" data-language="kotlin" style="background-color: #fff;color: #24292e;"><code><span class="line"><span class="token">
</span></span><span class="line"><span class="token" style="color: #d73a49;">&lt;</span><span class="token">style name</span><span class="token" style="color: #d73a49;">=</span><span class="token">”AppTheme” parent</span><span class="token" style="color: #d73a49;">=</span><span class="token">”Theme.AppCompat.DayNight”</span><span class="token" style="color: #d73a49;">&gt;</span><span class="token">
</span></span><span class="line"><span class="token">
</span></span></code></pre></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-153"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-151">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-152'
	>
	Or if you prefer <em>MaterialComponents theming</em> (recommended option):</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-155"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-code">
	<pre class="phiki language-kotlin github-light" data-language="kotlin" style="background-color: #fff;color: #24292e;"><code><span class="line"><span class="token">
</span></span><span class="line"><span class="token" style="color: #d73a49;">&lt;</span><span class="token">style name</span><span class="token" style="color: #d73a49;">=</span><span class="token">”AppTheme” parent</span><span class="token" style="color: #d73a49;">=</span><span class="token">”Theme.MaterialComponents.DayNight”</span><span class="token" style="color: #d73a49;">&gt;</span><span class="token">
</span></span><span class="line"><span class="token">
</span></span></code></pre></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-158"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-156">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-157'
	>
	What really happens then is it enables the -night resource qualifier when in dark theme.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-161"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-159">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-160'
	>
	values/themes.xml</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-163"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-code">
	<pre class="phiki language-kotlin github-light" data-language="kotlin" style="background-color: #fff;color: #24292e;"><code><span class="line"><span class="token">
</span></span><span class="line"><span class="token" style="color: #d73a49;">&lt;</span><span class="token">style name</span><span class="token" style="color: #d73a49;">=</span><span class="token">”Theme.AppCompat.DayNight” parent</span><span class="token" style="color: #d73a49;">=</span><span class="token">”Theme.AppCompat.Light”</span><span class="token" style="color: #d73a49;">&gt;</span><span class="token">
</span></span><span class="line"><span class="token">
</span></span></code></pre></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-166"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-164">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-165'
	>
	values-night/themes.xml</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-168"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-code">
	<pre class="phiki language-kotlin github-light" data-language="kotlin" style="background-color: #fff;color: #24292e;"><code><span class="line"><span class="token">
</span></span><span class="line"><span class="token" style="color: #d73a49;">&lt;</span><span class="token">style name</span><span class="token" style="color: #d73a49;">=</span><span class="token">”Theme.AppCompat.DayNight” parent</span><span class="token" style="color: #d73a49;">=</span><span class="token">”Theme.AppCompat”</span><span class="token" style="color: #d73a49;">&gt;</span><span class="token">
</span></span><span class="line"><span class="token">
</span></span></code></pre></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-171"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-169">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-170'
	>
	First theme is being used when your app is running in <em>Light mode</em> and the second one in the <em>Dark mode</em>. That’s how you need to define your light and dark variants of BaseApp theme.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-174"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-172">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-173'
	>
	Once you have properly defined all attributes in your theme that are relevant for defining your App’s looks, all you have to do is modify those values in the dark version of your theme. You can define all required values in night variant of resources such as <em>drawables-night, styles-night, colors-night</em> etc.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-177"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-175">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-176'
	>
	Change themes in app</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-180"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-178">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-179'
	>
	The idea for theme changing is to let the users choose. There are 4 recommended theme options and compatible <em>AppCompat.DayNight</em> modes:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-183"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-181">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-182'
	>
	<li>Light &#8211; <em>MODE_NIGHT_NO</em></li><li>Dark &#8211; <em>MODE_NIGHT_YES</em></li><li>Set by Battery Saver (for Android 9 and earlier) &#8211; <em>MODE_NIGHT_AUTO_BATTERY</em></li><li>Set by System default (for Android 10) &#8211; <em>MODE_NIGHT_FOLLOW_SYSTEM</em></li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-186"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-184">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-185'
	>
	The last two are recommended options depending on the Android version of your App. To switch between day and night theme call <em>AppCompatDelegate.setDefaultNightMode(int mode)</em> with one of the modes.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-189"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-187">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-188'
	>
	Starting with AppCompat v1.1.0, calling this method automatically recreates all started activities and you can see instant theme change. The only problem is that change is not persisted once the process is dead. You have to remember and retrieve user selection and call the appropriate method every time your app process is started.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-192"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-190">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-191'
	>
	Let there be dark or light – it’s up to you</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-195"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-193">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-194'
	>
	Even though <em>DayNight</em> has been available for a while now, the improvement over the course of the last year has been the most significant, the result of which is an uncomplicated procedure of dark theming which will, once implemented, enrich any app with an attractive and useful feature that will light your users’ day up.</p></div>	</div>
</div>
</div>		</div>
	</div><p>The post <a href="https://infinum.com/blog/implementing-dark-theme-in-android/">Implementing Dark Theme in Android</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</content:encoded>
			</item>
		
	</channel>
</rss>