Add support for custom themes to use dark mode

[spacegaier]

Breaking change

Not breaking, since legacy theme (= implicit light mode only) format is still supported.

Proposed change

Backend PR: home-assistant/core#46532

Adds the option for custom themes to be based upon the dark mode. A theme can now specify support for both light and dark mode and the user can select which one to use (same behavior as for the "default" theme mode selection).

This PR also renames the local storage parameter "selectedTheme" to "selectedThemeSettings" (to underscore that it does not only contain a theme name, but all related user defined settings) including an automatic migration for the old key storage.

This change also allows the user to specify default color values for light and dark mode for primary_color and accent-color. If provided, the same color pickers currently used by the "default" theme will be shown and users can adjust as desired.
Reverted from MVP

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Below the different test themes used in the GIF above to go through the different scenarios.

themes:
    orange_dummy:
      primary-color: "#ff9800"
      primary-text-color: "#ff9800"
      secondary-color: "#ff9800" 
    green_dummy:
      modes:
        light:
          primary-color: "#00aa00"
          primary-text-color: "#00aa00"
          secondary-color: "#00aa00"
        dark:
          primary-color: "#44ff44"
          primary-text-color: "#44ff44"
          secondary-color: "#44ff44"     
          app-header-text-color: "#44ff44"     
    color_picker:
      primary-color: "#ff0000"
      accent-color: "#0000ff"
      modes:
        light:
          secondary-color: "#ffffff"
        dark:
          secondary-color: "#44ff44"     
          app-header-text-color: "#44ff44"     
    dark_only:
      modes:
        dark:  
          primary-color: "#ff00ff"
    light_only:
      modes:
        light:  
          primary-color: "#0000ff"
    blur:
      modes:
        light:
          dialog-backdrop-filter: blur(5px)
          iron-overlay-backdrop-opacity: 1
          iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)  
        dark:
          dialog-backdrop-filter: blur(5px)
          iron-overlay-backdrop-opacity: 1
          iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)  

Additional information

• This PR fixes or closes issue: fixes Allow custom themes to have light and dark variants #6588
• This PR is related to issue or discussion:
• Link to documentation pull request: Frontend docs for new dark mode themes home-assistant.io#17960

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[bramkragten]

Why is this no longer needed? We still init themes as null?

[spacegaier]

Should not have been needed before the PR either. Basically no usages of hass.themes do check via ? (e.g. none of the cards do).

[bramkragten]

Why did you rename this?

[bramkragten]

Shouldnt selectedTheme be removed if we are going to rename it?

[spacegaier]

selectedTheme is not in this structure init, therefore cannot be removed here. Or am I missing your point?

[bramkragten]

OK to merge when documentation is added