Share via

Themes and accent colors

  • Article

Partners can set the default theme, including the background color (light or dark) and the accent color. The accent color is used for the background of the start tiles, the alphabetical tiles in the People Hub, some text, the progress indicator, the user’s My Phone web site, and so on.

Partners can add up to four (4) custom accent colors. For each accent color, partners must specify a value for light and dark background colors. Microsoft recommends that partners set these two values to be the same.

Limitations and restrictions:

  • The names of the additional accent colors must be localized for all display languages that ship on the phone.

  • The themes included by Microsoft shall not be moved, altered, or removed.

Sample: ThemesAndAccentColors
Use the customization samples

Constraints: FirstVariationOnly

Instructions:

To add a custom accent color

The following steps describe how to add a custom accent color for phones with a single SIM. For dual SIM phones, partners can specify a complementary custom accent color to distinguish the second phone line and second messaging line. For more information, see Complementary color for dual SIM differentiation.

  1. Create a .dll that contains the custom accent color(s) display name(s). For more information on how to do this, see Create a resource-only .dll for localized strings.

  2. Create a customization answer file using the contents shown in the following sample or use the sample ThemesAndAccentColors.xml file.

    <?xml version="1.0" encoding="utf-8" ?>  
<ImageCustomizations xmlns="https://schemas.microsoft.com/embedded/2004/10/ImageUpdate"  
                      Name="ThemesAndAccentColors"  
                      Description="Use to add custom accent colors."  
                      Owner=""  
                      OwnerType="OEM"> 

  <Static>  

    <Settings Path="Localization/MUI">  

      <!-- Use to add your base MUI DLL file -->
      <Asset Name="BaseDll" Source="" />

      <!-- Use to specify the language MUI packages (*.dll.mui) for the languages you are supporting and have localized strings for -->
      <Asset Name="LanguageDll/$(langid)" Source="" />
      <Asset Name="LanguageDll/$(langid)" Source="" />
      <Asset Name="LanguageDll/$(langid)" Source="" />
      <!-- Add as many as you need -->  

    </Settings>  

    <Settings Path="Theme">  

      <!-- Use to add custom accent color 1 -->
      <Setting Name="CustomAccentColor1DisplayName" Value="@DisplayStrings.dll,-Offset" /> 
      <Setting Name="CustomAccentColor1LightThemeColor" Value="" />
      <Setting Name="CustomAccentColor1DarkThemeColor" Value="" />

      <!-- Use to add custom accent color 2 -->
      <Setting Name="CustomAccentColor2DisplayName" Value="@DisplayStrings.dll,-Offset" /> 
      <Setting Name="CustomAccentColor2LightThemeColor" Value="" />
      <Setting Name="CustomAccentColor2DarkThemeColor" Value="" />

      <!-- Use to add custom accent color 3 -->
      <Setting Name="CustomAccentColor3DisplayName" Value="@DisplayStrings.dll,-Offset" /> 
      <Setting Name="CustomAccentColor3LightThemeColor" Value="" />
      <Setting Name="CustomAccentColor3DarkThemeColor" Value="" />

      <!-- Use to add custom accent color 4 -->
      <Setting Name="CustomAccentColor4DisplayName" Value="@DisplayStrings.dll,-Offset" /> 
      <Setting Name="CustomAccentColor4LightThemeColor" Value="" />
      <Setting Name="CustomAccentColor4DarkThemeColor" Value="" />

    </Settings>  

  </Static>

</ImageCustomizations>

  3. Specify an Owner.

  4. Add the resource-only .dll that contains the custom accent color display name by setting the BaseDll asset to point to the location of your base MUI DLL file. For example: C:\Path\DisplayStrings.dll.

  5. Add the language MUI packages (*.dll.mui) for all the languages you are supporting and have localized strings for. To do this:

    • Set the asset's Name to LanguageDll/$(langid) where $(langid) corresponds to the language. For example: LanguageDll/en-US.

    • Set the asset's Source to the location of the .dll.mui file for that language. For example: C:\Path\en-us\DisplayStrings.dll.mui.

    • Repeat the previous steps for the other languages.

      The following example shows the customization answer file entries for en-US, fr-CA, and es-MX languages:

      <Asset Name="LanguageDll/en-US" Source="C:\Path\en-us\DisplayStrings.dll.mui" />
<Asset Name="LanguageDll/fr-CA" Source="C:\Path\fr-CA\DisplayStrings.dll.mui" />
<Asset Name="LanguageDll/es-MX" Source="C:\Path\es-MX\DisplayStrings.dll.mui" />

  6. For each custom accent color that you are adding, do the following steps to configure the settings for each custom accent color:

    1. Set the CustomAccentColorXDisplayName value to the name of the resource-only .dll file and specify the string offset. Replace DisplayStrings.dll with the name of your .dll file and replace Offset with the correct offset for the localized string. For example: @DisplayStrings.dll,-101

    2. Specify the CustomAccentColorXLightThemeColor value. The theme colors are in ARGB so the color value must be specified in the format 0xFFxxxxxx.

    3. Specify the CustomAccentColorXDarkThemeColor value. The theme colors are in ARGB so the color value must be specified in the format 0xFFxxxxxx.

    Replace X in the setting names with 1, 2, 3, or 4 depending on the number of custom accent colors that you want to add.

    For example, if you are adding two custom accent colors, gold (0xFFFFD700) and steel blue (0xFF4682B4), you will set the values for CustomAccentColor1 and CustomAccentColor2as follows:

    Custom accent color Display Name (REG_SZ) Light theme color (REG_DWORD) Dark theme color (REG_DWORD)

    CustomAccentColor1

    @DisplayStrings.dll,-101

    0xFFFFD700

    0xFFFFD700

    CustomAccentColor2

    @DisplayStrings.dll,-104

    0xFF4682B4

    0xFF4682B4

     

You can use any of the custom accent colors that you add as the default accent color. For more information, see the next section.

To set a default theme or accent color

  1. Create an XML customization answer file using the contents shown in the following code sample or use the sample ThemesAndAccentColors.xml file.

    <?xml version="1.0" encoding="utf-8" ?>  
<ImageCustomizations xmlns="https://schemas.microsoft.com/embedded/2004/10/ImageUpdate"  
                      Name="ThemesAndAccentColors"  
                      Description="Use to set a new default theme and accent color."  
                      Owner=""  
                      OwnerType="OEM"> 

  <Static>  

    <Settings Path="Theme">  
      <Setting Name="DefaultBackgroundColor" Value="" /> 
      <Setting Name="DefaultAccentColor" Value="" />
    </Settings>  

  </Static>
</ImageCustomizations>

  2. Specify an Owner.

  3. Set DefaultBackgroundColor to specify a theme. The possible values are:

    • 0 for light

    • 1 for dark

  4. Set DefaultAccentColor to specify an accent color ID. These index values are shown in both hexadecimal and decimal. When you set the value for DefaultAccentColor, you can use either the hexadecimal value (with the 0x prefix) or the decimal value. Partners using Phone Image Designer can select the custom accent color using the color name, such as Lime. Custom accent colors, start at decimal index 101 (or hexadecimal value 0x65) for custom accent color 1. Custom accent color 2 uses decimal index 102 (or hexadecimal value 0x66), and so on.

    Note  

    For phones that support dual SIM, the complementary color for the second SIM will be automatically selected based on the chosen default accent color. For example, for a dual SIM phone, if the OEM selects Lime as the default accent color, Lime will be accent color for the start tiles, some UI text, and other UI elements, as well as the color for the phone and messaging apps that correspond to the first SIM. The colors for the phone and messaging apps for the second SIM will be Green.

     

    The supported colors, their corresponding accent color IDs, and complementary colors (for dual SIM) are shown in the following table. The color values (non-ARGB format) for the primary accent color and the complementary accent color (for dual SIM phones) are also shown for reference.

    Accent color ID (in hexadecimal) Accent color ID (in decimal) Color name Complementary color name (dual SIM phones only)

    0x0

    0

    Lime (A4C400)

    Green (60A917)

    0x1

    1

    Green (60A917)

    Emerald (008A00)

    0x2

    2

    Emerald (008A00)

    Teal (00ABA9)

    0x3

    3

    Teal (00ABA9)

    Cyan (1BA1E2)

    0x4

    4

    Cyan (1BA1E2)

    Cobalt (3E65FF)

    0x5

    5

    Cobalt (3E65FF)

    Indigo (6A00FF)

    0x6

    6

    Indigo (6A00FF)

    Violet (AA00FF)

    0x7

    7

    Violet (AA00FF)

    Pink (F472D0)

    0x8

    8

    Pink (F472D0)

    Magenta (D80073)

    0x9

    9

    Magenta (D80073)

    Crimson (A20025)

    0xA

    10

    Crimson (A20025)

    Red (E51400)

    0xB

    11

    Red (E51400)

    Orange (FA6800)

    0xC

    12

    Orange (FA6800)

    Amber (F0A30A)

    0xD

    13

    Amber (F0A30A)

    Yellow (E3C800)

    0xE

    14

    Yellow (E3C800)

    Amber (F0A30A)

    0xF

    15

    Brown (825A2C)

    Taupe (87794E)

    0x10

    16

    Olive (6D8764)

    Taupe (87794E)

    0x11

    17

    Steel (647687)

    Mauve (76608A)

    0x12

    18

    Mauve (76608A)

    Steel (647687)

    0x13

    19

    Taupe (87794E)

    Brown (825A2C)

    0x65

    101

    CustomAccentColor1 (partner-defined)

    CustomComplementaryAccentColor1 (partner-defined)

    0x66

    102

    CustomAccentColor2 (partner-defined)

    CustomComplementaryAccentColor2 (partner-defined)

    0x67

    103

    CustomAccentColor3 (partner-defined)

    CustomComplementaryAccentColor3 (partner-defined)

    0x68

    104

    CustomAccentColor4 (partner-defined)

    CustomComplementaryAccentColor4 (partner-defined)

     

    The following diagram shows the accent colors and their complementary colors against a dark background and a light background.

    Customization_Theme_AccentColors

Testing:

  1. Flash the build containing this customization to a phone.

  2. To check your default theme and accent color, go to Start and examine the background color (light or dark) and the accent color (the background color of most tiles in Start) to ensure they match the defaults you set in the registry.

  3. To check your custom theme:

    • Go to the Start+Theme screen in Settings. Tap the Accent color, and verify that the accent color(s) you added appear in the chooser.

    • Tap the custom color to select it as the current accent. Change the background color (light or dark), and verify that the color still appears as expected.

    • Verify the localization of the color names. In the Start+Theme screen, verify that the name of the accent color matches the correct localized string for that language. Then for each display language on the phone, go to the language screen in Settings, and select a new display language. After the phone restarts, go to the Start+Theme screen and verify that the name of the custom accent color is correctly localized. Repeat until you have tested the color name for every display language on the phone.