Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add support for custom themes to use dark mode #8347

Merged
merged 27 commits into from
May 25, 2021
Merged

Add support for custom themes to use dark mode #8347

merged 27 commits into from
May 25, 2021

Conversation

spacegaier
Copy link
Member

@spacegaier spacegaier commented Feb 7, 2021 •
edited

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

11A99702-3F01-4618-AD48-B9E5AEC8EE96

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

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:

@spacegaier spacegaier marked this pull request as draft February 7, 2021 23:17
@spacegaier spacegaier marked this pull request as ready for review February 7, 2021 23:17
@spacegaier spacegaier changed the title Support for custom themes to use dark mode Support for custom themes to use dark mode + default color picker values Feb 14, 2021
@spacegaier spacegaier mentioned this pull request Feb 14, 2021
Merged
21 tasks
bramkragten
bramkragten reviewed Mar 9, 2021
View reviewed changes
src/components/map/ha-location-editor.ts
@@ -109,7 +109,7 @@ class LocationEditor extends LitElement {

if (changedProps.has("hass")) {
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || oldHass.themes?.darkMode === this.hass.themes?.darkMode) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
bramkragten reviewed Mar 9, 2021
View reviewed changes
src/util/ha-pref-storage.ts
if (key in STORAGE) {
let value = JSON.parse(STORAGE[key]);
// selectedTheme went from string to object on 20200718
if (key === "selectedTheme" && typeof value === "string") {
value = { theme: value };
}
// selectedTheme was renamed to selectedThemeSettings on 20210207
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you rename this?

bramkragten
bramkragten reviewed Mar 9, 2021
View reviewed changes
src/state/connection-mixin.ts
@@ -34,6 +34,7 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
states: null as any,
config: null as any,
themes: null as any,
selectedThemeSettings: null,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

@spacegaier spacegaier Mar 9, 2021 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

spacegaier and others added 2 commits April 27, 2021 13:02
@spacegaier @bramkragten
Apply suggestions from code review
89ef813 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
@spacegaier
Cleanup
f461e52
@spacegaier spacegaier changed the title Support for custom themes to use dark mode + default color picker values Support for custom themes to use dark mode Apr 28, 2021
@spacegaier spacegaier changed the title Support for custom themes to use dark mode Add support for custom themes to use dark mode May 24, 2021
spacegaier and others added 2 commits May 25, 2021 00:30
@spacegaier @bramkragten
Apply suggestions from code review
1535178 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
@spacegaier
Cleanup
b7146e7
bramkragten
bramkragten approved these changes May 25, 2021
View reviewed changes
Copy link
Member

@bramkragten bramkragten left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK to merge when documentation is added

@spacegaier spacegaier mentioned this pull request May 25, 2021
Merged
8 tasks
@spacegaier spacegaier merged commit 7f75ca8 into home-assistant:dev May 25, 2021
@spacegaier spacegaier deleted the custom-dark-themes branch May 25, 2021 11:26
@github-actions github-actions bot locked and limited conversation to collaborators May 26, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@bramkragten bramkragten bramkragten approved these changes

Assignees
No one assigned
Labels
cla-signed Documentation Needed wait for backend
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Allow custom themes to have light and dark variants
3 participants
@spacegaier @bramkragten @homeassistant