Skip to content

Instantly share code, notes, and snippets.

@SagarDevAchar

SagarDevAchar/_material_3_dynamic_colour_theming.md

Last active March 17, 2024 12:17
Show Gist options
  • Save SagarDevAchar/65ca639e8ce8e2877aa5adcdd2ad553a to your computer and use it in GitHub Desktop.
Save SagarDevAchar/65ca639e8ce8e2877aa5adcdd2ad553a to your computer and use it in GitHub Desktop.
Download ZIP
How to achieve Material 3 Dynamic Colour Theming on your Android App (the complex way)
Raw
_material_3_dynamic_colour_theming.md

Material 3 Dynamic Colour Theming - Android Setup

Android 12 (API Level 31) introduced us to one of the best UI / UX featues to the Android world - Material You

Based out of the beautifully designed Material 3 Design System, Material You has enhanced the Android ecosystem by providing us users and developers with possibly one of the best UI design features - Dynamic Colour Theming

What is Dynamic Colour Theming?

As the name suggests, Dynamic Colour Theming changes the colour of your app components based on one of two sources:

  1. User-generated colour: The device wallpaper is used to generate system-wide colours which the user can customize
  2. Content-based colour: Colour is obtained from in-app content

In this gist we are focusing on User-generated colour which is expected to look something like this:

Source: M3 (https://m3.material.io/)

The Material Components Docs show the different colors available on the Material 3 SDK

Color Role Android Attribute Light Baseline Light Dynamic 31-33 Light Dynamic 34+ Dark Baseline Dark Dynamic 31-33 Dark Dynamic 34+
Primary colorPrimary primary40 system_accent1_600 system_primary_light primary80 system_accent1_200 system_primary_dark
On Primary colorOnPrimary white system_accent1_0 system_on_primary_light primary20 system_accent1_800 system_on_primary_dark
Primary Container colorPrimaryContainer primary90 system_accent1_100 system_primary_container_light primary30 system_accent1_700 system_primary_container_dark
On Primary Container colorOnPrimaryContainer primary10 system_accent1_900 system_on_primary_container_light primary90 system_accent1_100 system_on_primary_container_dark
Inverse Primary colorPrimaryInverse primary80 system_accent1_200 system_primary_dark primary40 system_accent1_600 system_primary_light
Primary Fixed colorPrimaryFixed primary90 system_accent1_100 system_primary_fixed primary90 system_accent1_100 system_primary_fixed
Primary Fixed Dim colorPrimaryFixedDim primary80 system_accent1_200 system_primary_fixed_dim primary80 system_accent1_200 system_primary_fixed_dim
On Primary Fixed colorOnPrimaryFixed primary10 system_accent1_900 system_on_primary_fixed primary10 system_accent1_900 system_on_primary_fixed
On Primary Fixed Variant colorOnPrimaryFixedVariant primary30 system_accent1_700 system_on_primary_fixed_variant primary30 system_accent1_700 system_on_primary_fixed_variant
Secondary colorSecondary secondary40 system_accent2_600 system_secondary_light secondary80 system_accent2_200 system_secondary_dark
On Secondary colorOnSecondary white system_accent2_0 system_on_secondary_light secondary20 system_accent2_800 system_on_secondary_dark
Secondary Container colorSecondaryContainer secondary90 system_accent2_100 system_secondary_container_light secondary30 system_accent2_700 system_secondary_container_dark
On Secondary Container colorOnSecondaryContainer secondary10 system_accent2_900 system_on_secondary_container_light secondary90 system_accent2_100 system_on_secondary_container_dark
Secondary Fixed colorSecondaryFixed secondary90 system_accent2_100 system_secondary_fixed secondary90 system_accent2_100 system_secondary_fixed
Secondary Fixed Dim colorSecondaryFixedDim secondary80 system_accent2_200 system_secondary_fixed_dim secondary80 system_accent2_200 system_secondary_fixed_dim
On Secondary Fixed colorOnSecondaryFixed secondary10 system_accent2_900 system_on_secondary_fixed secondary10 system_accent2_900 system_on_secondary_fixed
On Secondary Fixed Variant colorOnSecondaryFixedVariant secondary30 system_accent2_700 system_on_secondary_fixed_variant secondary30 system_accent2_700 system_on_secondary_fixed_variant
Tertiary colorTertiary tertiary40 system_accent3_600 system_tertiary_light tertiary80 system_accent3_200 system_tertiary_dark
On Tertiary colorOnTertiary white system_accent3_0 system_on_tertiary_light tertiary20 system_accent3_800 system_on_tertiary_dark
Tertiary Container colorTertiaryContainer tertiary90 system_accent3_100 system_tertiary_container_light tertiary30 system_accent3_700 system_tertiary_container_dark
On Tertiary Container colorOnTertiaryContainer tertiary10 system_accent3_900 system_on_tertiary_container_light tertiary90 system_accent3_100 system_on_tertiary_container_dark
Tertiary Fixed colorTertiaryFixed tertiary90 system_accent3_100 system_tertiary_fixed tertiary90 system_accent3_100 system_tertiary_fixed
Tertiary Fixed Dim colorTertiaryFixedDim tertiary80 system_accent3_200 system_tertiary_fixed_dim tertiary80 system_accent3_200 system_tertiary_fixed_dim
On Tertiary Fixed colorOnTertiaryFixed tertiary10 system_accent3_900 system_on_tertiary_fixed tertiary10 system_accent3_900 system_on_tertiary_fixed
On Tertiary Fixed Variant colorOnTertiaryFixedVariant tertiary30 system_accent3_700 system_on_tertiary_fixed_variant tertiary30 system_accent3_700 system_on_tertiary_fixed_variant

The Material Design color theming system provides additional colors which don't represent your brand, but define your UI and ensure accessible color combinations. These additional color attributes are as follows:

Color Role Android Attribute Light Baseline Light Dynamic 31-33 Light Dynamic 34+ Dark Baseline Dark Dynamic 31-33 Dark Dynamic 34+
Error colorError error40 error40 system_error_light error80 error80 system_error_dark
On Error colorOnError white white system_on_error_light error20 error20 system_on_error_dark
Error Container colorErrorContainer error90 error90 system_error_container_light error30 error30 system_error_container_dark
On Error Container colorOnErrorContainer error10 error10 system_on_error_container_light error90 error90 system_on_error_container_dark
Outline colorOutline neutral_variant50 system_neutral2_500 system_outline_light neutral_variant60 system_neutral2_400 system_outline_dark
Outline Variant colorOutlineVariant neutral_variant80 system_neutral2_200 system_outline_variant_light neutral_variant30 system_neutral2_700 system_outline_variant_dark
Background android:colorBackground neutral98 m3_ref_palette_dynamic_neutral_variant98 system_background_light neutral6 m3_ref_palette_dynamic_neutral_variant6 system_background_dark
On Background colorOnBackground neutral10 system_neutral1_900 system_on_background_light neutral90 system_neutral1_100 system_on_background_dark
Surface colorSurface neutral98 m3_ref_palette_dynamic_neutral_variant98 system_surface_light neutral6 m3_ref_palette_dynamic_neutral_variant6 system_surface_dark
On Surface colorOnSurface neutral10 system_neutral1_900 system_on_surface_light neutral90 system_neutral1_100 system_on_surface_dark
Surface Variant colorSurfaceVariant neutral_variant90 system_neutral2_100 system_surface_variant_light neutral_variant30 system_neutral2_700 system_surface_variant_dark
On Surface Variant colorOnSurfaceVariant neutral_variant30 system_neutral2_700 system_on_surface_variant_light neutral_variant80 system_neutral2_200 system_on_surface_variant_dark
Inverse Surface colorSurfaceInverse neutral20 system_neutral1_800 system_surface_dark neutral90 system_neutral1_100 system_surface_light
Inverse On Surface colorOnSurfaceInverse neutral95 system_neutral1_50 system_on_surface_dark neutral20 system_neutral1_800 system_on_surface_light
Surface Bright colorSurfaceBright neutral98 m3_ref_palette_dynamic_neutral_variant98 system_surface_bright_light neutral24 m3_ref_palette_dynamic_neutral_variant24 system_surface_bright_dark
Surface Dim colorSurfaceDim neutral87 m3_ref_palette_dynamic_neutral_variant87 system_surface_dim_light neutral6 m3_ref_palette_dynamic_neutral_variant6 system_surface_dim_dark
Surface Container colorSurfaceContainer neutral94 m3_ref_palette_dynamic_neutral_variant94 system_surface_container_light neutral12 m3_ref_palette_dynamic_neutral_variant12 system_surface_container_dark
Surface Container Low colorSurfaceContainerLow neutral96 m3_ref_palette_dynamic_neutral_variant96 system_surface_container_low_light neutral10 system_neutral2_900 system_surface_container_low_dark
Surface Container Lowest colorSurfaceContainerLowest white system_neutral2_0 system_surface_container_lowest_light neutral4 m3_ref_palette_dynamic_neutral_variant4 system_surface_container_lowest_dark
Surface Container High colorSurfaceContainerHigh neutral92 m3_ref_palette_dynamic_neutral_variant92 system_surface_container_high_light neutral17 m3_ref_palette_dynamic_neutral_variant17 system_surface_container_high_dark
Surface Container Highest colorSurfaceContainerHighest neutral90 system_neutral2_100 system_surface_container_highest_light neutral22 m3_ref_palette_dynamic_neutral_variant22 system_surface_container_highest_dark

It also suggests the usage of the following theme attributes for elevation overlays:

Attribute Name Description Default Value
elevationOverlayEnabled Whether the elevation overlay functionality is enabled. true
elevationOverlayColor The color used for the elevation overlays, applied at an alpha based on elevation. colorPrimary

How to implement it in your Android app?

  1. Create appropriate resource files: In your Android project resource directory, make the following file structure. In case you want to define different themes for Day (Light Mode) and Night (Dark Mode), retain the themes.xml in the values-night folder. The files required for the setup are attached to this gist.
    app\src\main\res
    │
    .
    .
    .
    |
    ├───values
    │       colors.xml
    │       themes.xml
    |       ...
    │
    ├───values-night
+   │       colors.xml
-   |       themes.xml
    │
+   ├───values-night-v34
+   │       colors.xml
    │
+   ├───values-v34
+   │       colors.xml
    .
    .
    .

  1. Customize your colours: Populate the colour files with the Material defined colours provided above. You can also add any additional colours or modify the material theme to your liking. Due to different resource values in Android 14 (API Level 34), we create seperate v34 resource files. Please note that due to the unavailability of few of these @android:color resource values (mostly in API Levels 31-33), they have been modified to the closest resource or converted to a static colour. The following colour resource files are provided in this gist:

    • colors.xml: Contents of values/colors.xml
    • colors-night.xml: Contents of values-night/colors.xml
    • colors-v34.xml: Optional (if you want to provide custom support for API 34), Contents of values-v34/colors.xml
    • colors-night-v34.xml: Optional (if you want to provide custom support for API 34), Contents of values-night-v34/colors.xml

  2. Create your theme: Update the themes.xml file, applying these colours to your theme. If you wish to use different Day and Night themes, please use Theme.Material3.DynamicColors.Day in values/themes.xml and Theme.Material3.DynamicColors.Night in values-night/themes.xml. The theme file for a unified theme is provided in this gist.

  3. All set! Go ahead and design your UI. You can refer to the M3 Components Guide to perfect the different elements of your app

Happy Coding!

Raw
colors-night-v34.xml
<!-- values-night-v34/colors.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<!-- Add any more colours you need here -->
<color name="colorPrimary">@android:color/system_primary_dark</color>
<color name="colorOnPrimary">@android:color/system_on_primary_dark</color>
<color name="colorPrimaryContainer">@android:color/system_primary_container_dark</color>
<color name="colorOnPrimaryContainer">@android:color/system_on_primary_container_dark</color>
<color name="colorPrimaryInverse">@android:color/system_primary_light</color>
<color name="colorPrimaryFixed">@android:color/system_primary_fixed</color>
<color name="colorPrimaryFixedDim">@android:color/system_primary_fixed_dim</color>
<color name="colorOnPrimaryFixed">@android:color/system_on_primary_fixed</color>
<color name="colorOnPrimaryFixedVariant">@android:color/system_on_primary_fixed_variant</color>
<color name="colorSecondary">@android:color/system_secondary_dark</color>
<color name="colorOnSecondary">@android:color/system_on_secondary_dark</color>
<color name="colorSecondaryContainer">@android:color/system_secondary_container_dark</color>
<color name="colorOnSecondaryContainer">@android:color/system_on_secondary_container_dark</color>
<color name="colorSecondaryFixed">@android:color/system_secondary_fixed</color>
<color name="colorSecondaryFixedDim">@android:color/system_secondary_fixed_dim</color>
<color name="colorOnSecondaryFixed">@android:color/system_on_secondary_fixed</color>
<color name="colorOnSecondaryFixedVariant">@android:color/system_on_secondary_fixed_variant</color>
<color name="colorTertiary">@android:color/system_tertiary_dark</color>
<color name="colorOnTertiary">@android:color/system_on_tertiary_dark</color>
<color name="colorTertiaryContainer">@android:color/system_tertiary_container_dark</color>
<color name="colorOnTertiaryContainer">@android:color/system_on_tertiary_container_dark</color>
<color name="colorTertiaryFixed">@android:color/system_tertiary_fixed</color>
<color name="colorTertiaryFixedDim">@android:color/system_tertiary_fixed_dim</color>
<color name="colorOnTertiaryFixed">@android:color/system_on_tertiary_fixed</color>
<color name="colorOnTertiaryFixedVariant">@android:color/system_on_tertiary_fixed_variant</color>
<color name="colorError">@android:color/system_error_dark</color>
<color name="colorOnError">@android:color/system_on_error_dark</color>
<color name="colorErrorContainer">@android:color/system_error_container_dark</color>
<color name="colorOnErrorContainer">@android:color/system_on_error_container_dark</color>
<color name="colorOutline">@android:color/system_outline_dark</color>
<color name="colorOutlineVariant">@android:color/system_outline_variant_dark</color>
<color name="colorBackground">@android:color/system_background_dark</color>
<color name="colorOnBackground">@android:color/system_on_background_dark</color>
<color name="colorSurface">@android:color/system_surface_dark</color>
<color name="colorOnSurface">@android:color/system_on_surface_dark</color>
<color name="colorSurfaceVariant">@android:color/system_surface_variant_dark</color>
<color name="colorOnSurfaceVariant">@android:color/system_on_surface_variant_dark</color>
<color name="colorSurfaceInverse">@android:color/system_surface_light</color>
<color name="colorOnSurfaceInverse">@android:color/system_on_surface_light</color>
<color name="colorSurfaceBright">@android:color/system_surface_bright_dark</color>
<color name="colorSurfaceDim">@android:color/system_surface_dim_dark</color>
<color name="colorSurfaceContainer">@android:color/system_surface_container_dark</color>
<color name="colorSurfaceContainerLow">@android:color/system_surface_container_low_dark</color>
<color name="colorSurfaceContainerLowest">@android:color/system_surface_container_lowest_dark</color>
<color name="colorSurfaceContainerHigh">@android:color/system_surface_container_high_dark</color>
<color name="colorSurfaceContainerHighest">@android:color/system_surface_container_highest_dark</color>
</resources>
Raw
colors-night.xml
<!-- values-night/colors.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<!-- Add any more colours you need here -->
<color name="colorPrimary">@android:color/system_accent1_200</color>
<color name="colorOnPrimary">@android:color/system_accent1_800</color>
<color name="colorPrimaryContainer">@android:color/system_accent1_700</color>
<color name="colorOnPrimaryContainer">@android:color/system_accent1_100</color>
<color name="colorPrimaryInverse">@android:color/system_accent1_600</color>
<color name="colorPrimaryFixed">@android:color/system_accent1_100</color>
<color name="colorPrimaryFixedDim">@android:color/system_accent1_200</color>
<color name="colorOnPrimaryFixed">@android:color/system_accent1_900</color>
<color name="colorOnPrimaryFixedVariant">@android:color/system_accent1_700</color>
<color name="colorSecondary">@android:color/system_accent2_200</color>
<color name="colorOnSecondary">@android:color/system_accent2_800</color>
<color name="colorSecondaryContainer">@android:color/system_accent2_700</color>
<color name="colorOnSecondaryContainer">@android:color/system_accent2_100</color>
<color name="colorSecondaryFixed">@android:color/system_accent2_100</color>
<color name="colorSecondaryFixedDim">@android:color/system_accent2_200</color>
<color name="colorOnSecondaryFixed">@android:color/system_accent2_900</color>
<color name="colorOnSecondaryFixedVariant">@android:color/system_accent2_700</color>
<color name="colorTertiary">@android:color/system_accent3_200</color>
<color name="colorOnTertiary">@android:color/system_accent3_800</color>
<color name="colorTertiaryContainer">@android:color/system_accent3_700</color>
<color name="colorOnTertiaryContainer">@android:color/system_accent3_100</color>
<color name="colorTertiaryFixed">@android:color/system_accent3_100</color>
<color name="colorTertiaryFixedDim">@android:color/system_accent3_200</color>
<color name="colorOnTertiaryFixed">@android:color/system_accent3_900</color>
<color name="colorOnTertiaryFixedVariant">@android:color/system_accent3_700</color>
<color name="colorError">#E69490</color>
<color name="colorOnError">#4C100D</color>
<color name="colorErrorContainer">#661511</color>
<color name="colorOnErrorContainer">#E6ACA9</color>
<color name="colorOutline">@android:color/system_neutral2_400</color>
<color name="colorOutlineVariant">@android:color/system_neutral2_700</color>
<color name="colorBackground">@android:color/system_neutral2_900</color>
<color name="colorOnBackground">@android:color/system_neutral1_100</color>
<color name="colorSurface">@android:color/system_neutral2_900</color>
<color name="colorOnSurface">@android:color/system_neutral1_100</color>
<color name="colorSurfaceVariant">@android:color/system_neutral2_700</color>
<color name="colorOnSurfaceVariant">@android:color/system_neutral2_200</color>
<color name="colorSurfaceInverse">@android:color/system_neutral1_100</color>
<color name="colorOnSurfaceInverse">@android:color/system_neutral1_800</color>
<color name="colorSurfaceBright">@android:color/system_neutral1_800</color>
<color name="colorSurfaceDim">@android:color/system_neutral2_900</color>
<color name="colorSurfaceContainer">@android:color/system_neutral1_900</color>
<color name="colorSurfaceContainerLow">@android:color/system_neutral2_900</color>
<color name="colorSurfaceContainerLowest">@android:color/system_neutral1_1000</color>
<color name="colorSurfaceContainerHigh">@android:color/system_neutral1_800</color>
<color name="colorSurfaceContainerHighest">@android:color/system_neutral2_800</color>
</resources>
Raw
colors-v34.xml
<!-- values-v34/colors.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<!-- Add any more colours you need here -->
<color name="colorPrimary">@android:color/system_primary_light</color>
<color name="colorOnPrimary">@android:color/system_on_primary_light</color>
<color name="colorPrimaryContainer">@android:color/system_primary_container_light</color>
<color name="colorOnPrimaryContainer">@android:color/system_on_primary_container_light</color>
<color name="colorPrimaryInverse">@android:color/system_primary_dark</color>
<color name="colorPrimaryFixed">@android:color/system_primary_fixed</color>
<color name="colorPrimaryFixedDim">@android:color/system_primary_fixed_dim</color>
<color name="colorOnPrimaryFixed">@android:color/system_on_primary_fixed</color>
<color name="colorOnPrimaryFixedVariant">@android:color/system_on_primary_fixed_variant</color>
<color name="colorSecondary">@android:color/system_secondary_light</color>
<color name="colorOnSecondary">@android:color/system_on_secondary_light</color>
<color name="colorSecondaryContainer">@android:color/system_secondary_container_light</color>
<color name="colorOnSecondaryContainer">@android:color/system_on_secondary_container_light</color>
<color name="colorSecondaryFixed">@android:color/system_secondary_fixed</color>
<color name="colorSecondaryFixedDim">@android:color/system_secondary_fixed_dim</color>
<color name="colorOnSecondaryFixed">@android:color/system_on_secondary_fixed</color>
<color name="colorOnSecondaryFixedVariant">@android:color/system_on_secondary_fixed_variant</color>
<color name="colorTertiary">@android:color/system_tertiary_light</color>
<color name="colorOnTertiary">@android:color/system_on_tertiary_light</color>
<color name="colorTertiaryContainer">@android:color/system_tertiary_container_light</color>
<color name="colorOnTertiaryContainer">@android:color/system_on_tertiary_container_light</color>
<color name="colorTertiaryFixed">@android:color/system_tertiary_fixed</color>
<color name="colorTertiaryFixedDim">@android:color/system_tertiary_fixed_dim</color>
<color name="colorOnTertiaryFixed">@android:color/system_on_tertiary_fixed</color>
<color name="colorOnTertiaryFixedVariant">@android:color/system_on_tertiary_fixed_variant</color>
<color name="colorError">@android:color/system_error_light</color>
<color name="colorOnError">@android:color/system_on_error_light</color>
<color name="colorErrorContainer">@android:color/system_error_container_light</color>
<color name="colorOnErrorContainer">@android:color/system_on_error_container_light</color>
<color name="colorOutline">@android:color/system_outline_light</color>
<color name="colorOutlineVariant">@android:color/system_outline_variant_light</color>
<color name="colorBackground">@android:color/system_background_light</color>
<color name="colorOnBackground">@android:color/system_on_background_light</color>
<color name="colorSurface">@android:color/system_surface_light</color>
<color name="colorOnSurface">@android:color/system_on_surface_light</color>
<color name="colorSurfaceVariant">@android:color/system_surface_variant_light</color>
<color name="colorOnSurfaceVariant">@android:color/system_on_surface_variant_light</color>
<color name="colorSurfaceInverse">@android:color/system_surface_dark</color>
<color name="colorOnSurfaceInverse">@android:color/system_on_surface_dark</color>
<color name="colorSurfaceBright">@android:color/system_surface_bright_light</color>
<color name="colorSurfaceDim">@android:color/system_surface_dim_light</color>
<color name="colorSurfaceContainer">@android:color/system_surface_container_light</color>
<color name="colorSurfaceContainerLow">@android:color/system_surface_container_low_light</color>
<color name="colorSurfaceContainerLowest">@android:color/system_surface_container_lowest_light</color>
<color name="colorSurfaceContainerHigh">@android:color/system_surface_container_high_light</color>
<color name="colorSurfaceContainerHighest">@android:color/system_surface_container_highest_light</color>
</resources>
Raw
colors.xml
<!-- values/colors.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<!-- Add any more colours you need here -->
<color name="colorPrimary">@android:color/system_accent1_600</color>
<color name="colorOnPrimary">@android:color/system_accent1_0</color>
<color name="colorPrimaryContainer">@android:color/system_accent1_100</color>
<color name="colorOnPrimaryContainer">@android:color/system_accent1_900</color>
<color name="colorPrimaryInverse">@android:color/system_accent1_200</color>
<color name="colorPrimaryFixed">@android:color/system_accent1_100</color>
<color name="colorPrimaryFixedDim">@android:color/system_accent1_200</color>
<color name="colorOnPrimaryFixed">@android:color/system_accent1_900</color>
<color name="colorOnPrimaryFixedVariant">@android:color/system_accent1_700</color>
<color name="colorSecondary">@android:color/system_accent2_600</color>
<color name="colorOnSecondary">@android:color/system_accent2_0</color>
<color name="colorSecondaryContainer">@android:color/system_accent2_100</color>
<color name="colorOnSecondaryContainer">@android:color/system_accent2_900</color>
<color name="colorSecondaryFixed">@android:color/system_accent2_100</color>
<color name="colorSecondaryFixedDim">@android:color/system_accent2_200</color>
<color name="colorOnSecondaryFixed">@android:color/system_accent2_900</color>
<color name="colorOnSecondaryFixedVariant">@android:color/system_accent2_700</color>
<color name="colorTertiary">@android:color/system_accent3_600</color>
<color name="colorOnTertiary">@android:color/system_accent3_0</color>
<color name="colorTertiaryContainer">@android:color/system_accent3_100</color>
<color name="colorOnTertiaryContainer">@android:color/system_accent3_900</color>
<color name="colorTertiaryFixed">@android:color/system_accent3_100</color>
<color name="colorTertiaryFixedDim">@android:color/system_accent3_200</color>
<color name="colorOnTertiaryFixed">@android:color/system_accent3_900</color>
<color name="colorOnTertiaryFixedVariant">@android:color/system_accent3_700</color>
<color name="colorError">#B3261E</color>
<color name="colorOnError">@android:color/white</color>
<color name="colorErrorContainer">#E6ACA9</color>
<color name="colorOnErrorContainer">#330B09</color>
<color name="colorOutline">@android:color/system_neutral2_500</color>
<color name="colorOutlineVariant">@android:color/system_neutral2_200</color>
<color name="colorBackground">@android:color/system_neutral2_50</color>
<color name="colorOnBackground">@android:color/system_neutral1_900</color>
<color name="colorSurface">@android:color/system_neutral2_50</color>
<color name="colorOnSurface">@android:color/system_neutral1_900</color>
<color name="colorSurfaceVariant">@android:color/system_neutral2_100</color>
<color name="colorOnSurfaceVariant">@android:color/system_neutral2_700</color>
<color name="colorSurfaceInverse">@android:color/system_neutral1_800</color>
<color name="colorOnSurfaceInverse">@android:color/system_neutral1_50</color>
<color name="colorSurfaceBright">@android:color/system_neutral2_10</color>
<color name="colorSurfaceDim">@android:color/system_neutral2_100</color>
<color name="colorSurfaceContainer">@android:color/system_neutral1_100</color>
<color name="colorSurfaceContainerLow">@android:color/system_neutral1_10</color>
<color name="colorSurfaceContainerLowest">@android:color/white</color>
<color name="colorSurfaceContainerHigh">@android:color/system_neutral1_100</color>
<color name="colorSurfaceContainerHighest">@android:color/system_neutral2_100</color>
</resources>
Raw
themes.xml
<!-- values/themes.xml -->
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="Base.Theme.MyApplication" parent="Theme.Material3.DynamicColors.DayNight">
<item name="elevationOverlayEnabled">true</item>
<item name="elevationOverlayColor">@color/colorPrimary</item>
<item name="android:statusBarColor">@color/colorBackground</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorOnPrimary">@color/colorOnPrimary</item>
<item name="colorPrimaryContainer">@color/colorPrimaryContainer</item>
<item name="colorOnPrimaryContainer">@color/colorOnPrimaryContainer</item>
<item name="colorPrimaryInverse">@color/colorPrimaryInverse</item>
<item name="colorPrimaryFixed">@color/colorPrimaryFixed</item>
<item name="colorPrimaryFixedDim">@color/colorPrimaryFixedDim</item>
<item name="colorOnPrimaryFixed">@color/colorOnPrimaryFixed</item>
<item name="colorOnPrimaryFixedVariant">@color/colorOnPrimaryFixedVariant</item>
<item name="colorSecondary">@color/colorSecondary</item>
<item name="colorOnSecondary">@color/colorOnSecondary</item>
<item name="colorSecondaryContainer">@color/colorSecondaryContainer</item>
<item name="colorOnSecondaryContainer">@color/colorOnSecondaryContainer</item>
<item name="colorSecondaryFixed">@color/colorSecondaryFixed</item>
<item name="colorSecondaryFixedDim">@color/colorSecondaryFixedDim</item>
<item name="colorOnSecondaryFixed">@color/colorOnSecondaryFixed</item>
<item name="colorOnSecondaryFixedVariant">@color/colorOnSecondaryFixedVariant</item>
<item name="colorTertiary">@color/colorTertiary</item>
<item name="colorOnTertiary">@color/colorOnTertiary</item>
<item name="colorTertiaryContainer">@color/colorTertiaryContainer</item>
<item name="colorOnTertiaryContainer">@color/colorOnTertiaryContainer</item>
<item name="colorTertiaryFixed">@color/colorTertiaryFixed</item>
<item name="colorTertiaryFixedDim">@color/colorTertiaryFixedDim</item>
<item name="colorOnTertiaryFixed">@color/colorOnTertiaryFixed</item>
<item name="colorOnTertiaryFixedVariant">@color/colorOnTertiaryFixedVariant</item>
<item name="colorError">@color/colorError</item>
<item name="colorOnError">@color/colorOnError</item>
<item name="colorErrorContainer">@color/colorErrorContainer</item>
<item name="colorOnErrorContainer">@color/colorOnErrorContainer</item>
<item name="colorOutline">@color/colorOutline</item>
<item name="colorOutlineVariant">@color/colorOutlineVariant</item>
<item name="android:colorBackground">@color/colorBackground</item>
<item name="colorOnBackground">@color/colorOnBackground</item>
<item name="colorSurface">@color/colorSurface</item>
<item name="colorOnSurface">@color/colorOnSurface</item>
<item name="colorSurfaceVariant">@color/colorSurfaceVariant</item>
<item name="colorOnSurfaceVariant">@color/colorOnSurfaceVariant</item>
<item name="colorSurfaceInverse">@color/colorSurfaceInverse</item>
<item name="colorOnSurfaceInverse">@color/colorOnSurfaceInverse</item>
<item name="colorSurfaceBright">@color/colorSurfaceBright</item>
<item name="colorSurfaceDim">@color/colorSurfaceDim</item>
<item name="colorSurfaceContainer">@color/colorSurfaceContainer</item>
<item name="colorSurfaceContainerLow">@color/colorSurfaceContainerLow</item>
<item name="colorSurfaceContainerLowest">@color/colorSurfaceContainerLowest</item>
<item name="colorSurfaceContainerHigh">@color/colorSurfaceContainerHigh</item>
<item name="colorSurfaceContainerHighest">@color/colorSurfaceContainerHighest</item>
</style>
<style name="Theme.MyApplication" parent="Base.Theme.MyApplication" />
</resources>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment