Night mode (aka Dark Theme) enables users to experience UI surfaces, rendered as Android views, in dark colors. All existing or new user-facing features on Chrome Android should implement a night mode variant of the relevant UI surfaces on Milestone M75+.
###Colors Colors defined in color_palette.xml are independent of night mode (i.e. will not change in night mode), and are used for color references defined in values/colors.xml and values-night/colors.xml.
Color references in values/colors.xml will be used for day mode (aka light theme), and also for night mode if the particular color reference is not defined in values-night/colors.xml. Color references in values-night/colors.xml will be used for night mode.
Example
In most cases, you should make use of the color references that are already defined in //src/ui/android/java/res/values/color_palette.xml and //src/ui/android/java/res/values/colors.xml for your new feature.
However as an example, suppose you got approval from snowflake-team@chromium.org to add a new background color.
In //src/ui/android/java/res/values/color_palette.xml, add
<color name="new_bg_color_light">some light background color</color> <color name="new_bg_color_dark">some dark background color</color>
In //src/ui/android/java/res/values/colors.xml, add
<color name="new_bg_color">@color/new_bg_color_light</color>
In //src/ui/android/java/res_night/values-night/colors.xml, add
<color name="new_bg_color">@color/new_bg_color_dark</color>
An example to use this color in XML:
<View ... android:background="new_bg_color" />
An example to use this color in Java:
mView.setBackgroundResource(R.color.new_bg_color); mView.setBackgroundColor( ApiCompatibilityUtils.getColor(mView.getResources(), R.color.new_bg_color));
Optionally, if the color is used exclusively for your feature, or if you want to easily update this color for your feature in the future, in the values/colors.xml that contains colors specifically for your feature, add
<color name="my_shiny_new_feature_bg_color">@color/new_bg_color</color>
If your feature needs colors that don't change based on day/night mode (e.g incognito mode UI), in the values/colors.xml that contains colors specifically for your feature, reference the colors defined in color_palette.xml. There is no need to define the color reference in values-night/colors.xml.
<!-- Dark background color for my shiny new feature regardless of day/night mode. --> <color name="my_shiny_new_feature_bg_color_dark">@color/new_bg_color_dark</color>
###Styles Colors used in styles can be either adaptcive or independent of night mode. When using existing or adding new styles, make sure the colors used in the styles fit your need.
Best practice of naming styles
<!-- OK --> <style name="TextAppearance.Headline"> <!-- default_text_color is dark grey in day mode, and white in night mode. --> <item name="android:textColor">@color/default_text_color</item> ... </style> <!-- NOT OK --> <style name="TextAppearance.DarkGreyHeadline"> <!-- default_text_color is dark grey in day mode, and white in night mode. --> <item name="android:textColor">@color/default_text_color</item> ... </style> <!-- OK --> <style name="TextAppearance.ButtonText.Blue"> <!-- some_blue_color is dark blue in day mode, and light blue in night mode. --> <item name="android:textColor">@color/some_blue_color</item> </style>
<!-- OK --> <style name="TextAppearance.Headline.White"> <item name="android:textColor">@android:color/white</item> ... </style> <!-- OK --> <style name="TextAppearance.Body.Incognito"> <item name="android:textColor">@android:color/white</item> ... </style>
###Themes If adding a new theme, make sure the parent (or any indirect ancestor) theme of the new theme is one of the AppCompat DayNight themes (prefixed with Theme.AppCompat.DayNight
), or alternatively, define the same theme in values-night/ with the desired parent theme for night mode. See dark theme in Android developer guide for more details.
###Troubleshooting
View
is inflated from Activity
context instead of Application
contextRemoteView
is an exception. See RemoteViewsWithNightModeInflater.java for details.Activity
or View
context instead of Application
contextConfiguration.uiMode & UI_MODE_NIGHT_MASK
gives the correct UI night modeRender tests are the recommended way to verify the appearance of night mode UI. If you are not familiar with render tests, please take a look at render test instructions to learn about how to write a new render test and upload golden images.
For tests using DummyUiActivity:
NightModeTestUtils.NightModeParams.class
NightModeTestUtils#setUpNightModeForDummyUiActivity()
and RenderTestRule#setNightModeEnabled()
tearDownTest()
, reset night mode state by calling NightModeTestUtils#tearDownNightModeForDummyUiActivity()
See this CL as an example
For tests using ChromeActivityTestRule:
@BeforeClass
, initialize states by calling NightModeTestUtils.setUpNightModeBeforeChromeActivityLaunched()
setupNightMode()
with annotation @ParameterAnnotations.UseMethodParameterBefore(NightModeTestUtils.NightModeParams.class)
setupNightMode()
, set up night mode state by calling NightModeTestUtils#setUpNightModeForChromeActivity()
and RenderTestRule#setNightModeEnabled()
@AfterClass
, reset night mode state by calling tearDownNightModeAfterChromeActivityDestroyed
See this CL as an example
###Manual Testing Different ways to turn on night mode:
Ways to turn on night mode on custom tab:
COLOR_SCHEME_DARK
on creating a CustomTabsIntent.Builder
Some tips:
compress_resources = false
in gn args to disable Lemon compression. See Issue 957286 for details.Most of the features will follow the app-wise night mode control, but some features might require introduction of an independent night mode control. For example, custom tab will not follow the app-wise night mode control, but instead, will respect the night mode settings from the host app. In such cases, you can
NightModeStateProvider
ChromeBaseAppCompatActivity#createNightModeStateProvier()
AppCompatDelegate#setLocalNightMode()
to update night mode in the Configuration
of the Activity