Dark mode? Android fit a wave

preface

The first time I heard the dark mode, it was so cool, it sounded so good (I don’t know how I heard it). Apple has been talking about diablo for a few years now, I think it was announced in IOS11, IOS12, but it didn’t come out until IOS13. IOS13 has been launched for more than half a year now, and the system applications have no words to say, perfect fit, three applications have also supported the diablo mode, even wechat in the update of some time ago has also implemented the diablo mode, let’s enjoy the wechat diablo mode!

The body of the

Dark theme is now available in Android 10 (Q API level 29), but the official name is Dark Theme. Let’s look at the definition of Dark theme:

Instead of translating line by line, here are the benefits of Dark mode:

Most of the phones’ screens have been upgraded to OLED screens (and some are also LCD screens), which don’t glow when they’re black, reducing power consumption.
Improved visibility for amblyopia users and users sensitive to bright light.
Make it easier for anyone to use the device in a dim environment.

How to open the dark mode is not much to say, different mobile phone manufacturers, open the way is different, each major mobile phone manufacturers magic change system sometimes really can not find where to set, then baidu it.

Set a dark theme

To support Dark themes, you must set the theme of your application to inherit from the DayNight theme (res/values/styles.xml) :

<style name="AppTheme" parent="Theme.AppCompat.DayNight">
Copy the code

You can also use the MaterialComponents darker theme:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
Copy the code

This associates the application’s main theme with the system-controlled night mode flag and provides the application with a default dark theme (when enabled). When the system theme is changed, the application theme is also changed.

“That’s it?”

“Yes, the theme is set.”

“What if I want to customize the theme?”

There’s definitely a need for this in our daily development, and when the official theme doesn’t quite meet our needs, we need to customize the theme, and Google has figured this out for us. Create a values-night folder under RES and put your custom name in it. Name is the same as the theme name in styles.xml. Take a look:

And that’s it.

“No, it’s just the theme has changed. What about my Activity’s background, font color, image, etc.?”

“Don’t worry, this is about to happen.”

It is important to note here that themes and styles should avoid hard-coded colors or ICONS under light-colored themes and should use theme attributes (preferred) or night-qualified resources. Let’s learn about the two most important theme attributes:

? android:attr/textColorPrimaryThis is a universal text color. Light themes are near black and dark themes are near white. It contains the disabled state.
? attr/colorControlNormalUniversal icon color. It contains the disabled state.

Of course, it is not necessary to use the two theme attributes provided by the above official, if you want to customize ah! In the image above, values-night contains not only style. XML but also colories. XML. Yes, we just put the color information into colories. XML and write two colors according to the requirements.

However, it is recommended to use Material Design Components because of its color theme system (e.g. theme attributes? Attr/colorSurface and? Attr /colorOnSurface) allows easy access to appropriate colors.

“Brother, I know how to change the background color and font color, how about the picture? What about the pictures?”

“Come come, monkey nasty monkey nasty!”

For example, if you have an aaa. JPG image in your Drawable folder, and you want to weigh another image in Dark mode, you can create a new drawable night folder and put your other image in it. The image name must match that of drawable. Drawable night-xhdpi = drawable night-xxhdpi = drawable night-xxhdpi = drawable night-xxhdpi = drawable night-xxhdpi = drawable night-xxhdpi = drawable night-xxhdpi = drawable night-xxhdpi = drawable night-xxhdpi = drawable night-xxhdpi = drawable night-xxhdpi = drawable night-xxhdpi = drawable night-xxhdpi = drawable night-xxhdpi = drawable night-xxhdpi

“What? You want to see the effect? Well, then, as you wish, it really is you, and if I let no one else see it…”

How’s it going? Is it all right?

In-app change topics

“I also want to switch on my own initiative, rather than switch with the system.”

“Here, come here. What else do you want? Say it.

“I thought I’d take the initiative to switch themes with the system… I expect many apps to have this feature.”

Ah, since you asked from the heart, that I will be compassionate to tell you: of course you can yo!

There are usually a few options for you to choose from: normal mode, Dark mode, and follow system, right?

Google also gave us these options to set directly:

LightMODE_NIGHT_NO
The dark – MODE_NIGHT_YES
Set by power saving mode – MODE_NIGHT_AUTO_BATTERY
System presets – MODE_NIGHT_FOLLOW_SYSTEM

We are talking about Light, dark and system presets. We will not write the power saving mode here. We can experiment if necessary.

It is also easy to switch themes by calling the following methods:

AppCompatDelegate.setDefaultNightMode()
Copy the code

One line of code is all that is needed, and the argument needs to be passed in one of the above four modes.

Go ahead, write the code and write three buttons to implement normal mode, Dark mode and system mode respectively:

   override fun onClick(v: View) {
        when(v.id){
            R.id.btnLight ->{
                setDefaultNightMode(MODE_NIGHT_NO)
            }
            R.id.btnDark ->{
                setDefaultNightMode(MODE_NIGHT_YES)
            }
            R.id.btnDefault ->{
                setDefaultNightMode(MODE_NIGHT_FOLLOW_SYSTEM)
            }
        }
    }
Copy the code

I don’t think this code needs any explanation; I’ve explained enough above. Take a look at the implementation:

Configuration changes

“Brother, I think again, if some page is playing video, I want to delay the configuration change what to do?”

“Come, you come over little brother, teasing big brother to play? This day by day!”

Apps can handle the implementation of the Dark theme itself by declaring that each Activity can handle uiMode configuration changes:

<activity
    android:name=".MyActivity"
    android:configChanges="uiMode" />
Copy the code

When the Activity declares that it handles configuration changes, onConfigurationChanged() calls its methods when the topic changes.

To check what the current topic is, the application can run the following code:

val currentNightMode = configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
when (currentNightMode) {
    Configuration.UI_MODE_NIGHT_NO -> {} // Night mode is not enabled, we are using a light theme
    Configuration.UI_MODE_NIGHT_YES -> {} // Night mode is enabled, we are using a dark theme
}
Copy the code

conclusion

The article is basically over here, Google tells us to try not to hard code, out of the mix is to return, hard code for a while, hard code for a long time straight, ha ha ha. Like the likes + attention ah!

Dark mode? Android fit a wave