[Styling Module] Home Assistant default styling

[Clooos]

Home Assistant default styling

Version: v1.8
Creator: Clooos

This module applies Home Assistant’s default styling to Bubble Card. To set it as the default, move it under default: in the bubble-modules.yaml file.

Just toggle the "All cards" button in the module configuration to apply it to all cards.

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

home-assistant-default:
  name: Home Assistant default styling
  version: v1.8
  creator: Clooos
  supported:
    - button
    - calendar
    - climate
    - cover
    - horizontal-buttons-stack
    - media-player
    - pop-up
    - select
    - separator
  description: 'This module applies Home Assistant''s default styling to Bubble Card. Toggle "All cards" to enable it to all cards, or add <code>is_global: true</code> in that module in the <code>bubble-modules.yaml</code> file.'
  code: |-
    :host {
        --bubble-main-background-color: var(--ha-card-background, var(--card-background-color, #fff));
        --bubble-border-radius: var(--ha-card-border-radius, 12px);
        --bubble-icon-border-radius: 32px;
        --bubble-button-border-radius: var(--bubble-border-radius);
        --bubble-climate-button-background-color: var(--bubble-icon-background-color);
        --bubble-border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
        --bubble-secondary-background-color: transparent;
    }

    .bubble-container {
        -webkit-backdrop-filter: var(--ha-card-backdrop-filter, none);
        backdrop-filter: var(--ha-card-backdrop-filter, none);
        box-shadow: var(--ha-card-box-shadow, none);
        box-sizing: border-box;
    }

    .bubble-icon-container, 
    .large .bubble-icon-container {
        --mdc-icon-size: 22px;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    .large .bubble-cover-card-container > .bubble-buttons {
        --bubble-cover-main-background-color: none;
    }

    .bubble-range-fill {
        --bubble-accent-color: var(--bubble-button-accent-color);
    }

    .bubble-sub-button.background-on::before,
    .bubble-sub-button.background-off::before,
    .bubble-temperature-container::before,
    .bubble-icon-container::before {
        content: "";
        position: absolute;
        top: 0; 
        left: 0;
        width: 100%; 
        height: 100%;  
        opacity: var(--control-number-buttons-background-opacity, .2);
        border-radius: var(--bubble-border-radius);
        background: var(--control-number-buttons-background-color, var(--disabled-color));
    }

    .is-on {
        --bubble-icon-background-color: var(--view-background,var(--lovelace-background,var(--primary-background-color)));
        transition: all ease-in 0.3s !important;
    }

    .bubble-icon-container::before {
        background: var(--state-inactive-color);
        border-radius: var(--bubble-icon-border-radius);
    }

    .bubble-sub-button {
        border: 0px solid transparent !important;
    }

    .large .bubble-icon-container {
         margin-left: 9px;
    }

    .bubble-state {
        opacity: 1;
        font-weight: 400;
        font-size: 12px;
        letter-spacing: .4px;
    }

    :not(.bubble-separator) > .bubble-name {
        font-weight: 500;
        font-size: 14px;
        letter-spacing: 0.1px;
    }

    .bubble-pop-up-background { 
        filter: brightness(0.96); /* Improve pop-up background contrast */
        --bubble-pop-up-border-radius: calc(var(--ha-card-border-radius, 12px) * 1.4);
    }

    .bubble-header-container {
        --bubble-secondary-background-color: var(--background-color-2); 
    }

    ha-select {
        --bubble-list-item-accent-color: none !important;
        --mdc-theme-surface: var(--card-background-color);
    }

    mwc-list-item[selected] {
        color: inherit !important;
        --mdc-ripple-press-opacity: 0 !important;
    }

    mwc-list-item[selected]::before {
        content: "";
        position: absolute;
        top: 0; 
        left: 0;
        width: 100%; 
        height: 100%;  
        background-color: var(--primary-color);
        opacity: 0.24;
    }

    .bubble-range-slider,
    .bubble-button-container .bubble-background {
        border-radius: calc(var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2))) / 1.1);
    }

---

Screenshot:

[Clooos]

Updated to v1.1:

Improved the Home Assistant default styling module for better consistency across various themes.

[aubreyz]

I'm a bit confused by these modules altogether - I don't have any www/bubble folder
and also no bubble-modules.yaml file. (there is a www/Bubble-card folder though but not with this file).

[misterlyster]

As long as you have latest version there will be a bubble-modules.yaml in www\community\Bubble-Card. You will copy that file to www\bubble

[Clooos]

This is still in beta, here is the changelog if you're interested 🙂

https://github.com/Clooos/Bubble-Card/releases/tag/v2.5.0-beta.5

[Clooos]

Updated to v1.2:

Better compatibility with Bubble Card v3.0.0.

[octoTurnip]

Is there a difference between 2 spaces or 4 spaces in your yaml? I thought YAML was dependent on spaces and the default was 2. Any clarification?

[Clooos]

No difference, you could even add 20 spaces for the indentation, you just need to be consistent.

https://www.rudderstack.com/docs/profiles/dev-docs/yaml-refresher/#:~:text=In%20YAML%2C%20the%20indentation%20is,not%20mix%20spaces%20and%20tabs.

[Clooos]

Updated to v1.3:

Fixed an issue with the select card, need at least v3.0.0-beta.4 to fully work. #1382

[Peethiplatsch]

Is there a way to change the colours outside a theme? On your screenshot are you using multiple colours per entity.
I would like it if there is a colour selector like we have in the Title cards.
Additionally, you want to recreate those but the colours are completely muted when comparing to title cards, but I assume this is expected behaviour? 😅

Edit: sorry that I answered on this thread. Thought it would be in the general thread. Need to learn how to use the app on my phone ^^

[Clooos]

Hi! This color is brighter to improve contrast with the texts above it. In your case I would recommend to use mainly Bubble Cards, this way the colors will be more harmonious 🙂

But you can also add this to your default module:

* {
  --bubble-accent-color: var(--accent-color);
}

[Clooos]

Updated to v1.4:

Updated the description to match v3.0.0-beta.8 behavior.

[vednolacni]

i get this when i copy the code...

[octoTurnip]

i get this when i copy the code...

Does the module still work with the error in your editor?

[vednolacni]

It works, but it says I need to update the module.

[Clooos]

Do you see v1.4 or v1.3?

But I will update it again, the syntax is not the best (I haven't used my perfect export feature, it improves the syntax automatically 😄).

[Clooos]

Updated to v1.5:

Fixed some syntax issues.

[laurens362]

Whenever i use default styling module the IzeQubes Custom Colors module stops working

[Clooos]

Hi! This is indeed possible that some modules can be in conflict because they are modifying the same CSS classes. And there is nothing I can really do about that 😅

[Clooos]

Updated to v1.6:

Fixed a styling issue with the select card in v3.0.0-beta.9 and up.

[bigbeefyangus]

Hey @Clooos! With this module, am I able to alter it so that the icon container color and the icon color matches the default home assistant theme (as in, the icon itself matches the state color and the container is semi-transparent, as below)?

I was also trying to use this module with the "Customize container color module" #1231 , and maybe they are conflicting?

Example (Tile card on top, Bubble-Card on bottom):

[Clooos]

Hi! Everything can be modified with modules, so yes it's possible, just a bit more complicated. This would imply some custom templates, this is probably not possible with CSS only.

But if you get the same result, please share that! 😃

And yes some modules can be in conflict if they modify the same classes, and I probably can't do anything about that.

[Clooos]

Updated to v1.7:

Fixed the main color, and a styling issue with the button card.

[raidolo]

It seems that the module is not being applied in pop-up cards.

[Clooos]

Do you have any other modules on that pop-up?

[raidolo]

Do you have any other modules on that pop-up?

Nope, it's a brand new one, the first I've made. I managed to apply the default HA Theme to everything else. Also, I've noticed that if you create a button card, then you define it as a switch, but you put in the entity another kind of entity, so not a proper switch, the button goes blue, instead of the default HA Theme. I can't show you a pic right now, but it's easy to replicate. I don't remember if it happens also when you set the State definition and when you put a switch in it.

[raidolo]

Look at this, the first is a "Cover" card, the second is a "Slider" card for the same cover and it doesn't take the style. The button below is a "Switch" card with a sensor inside, it's a minor issue because you shoulkd choose "State" for that, but just to make you aware:

[giulianob]

This theme doesn't work well with a thermostat. When it turns on cooling/heat it's not possible to read the heat/cool temperatures:

I do notice there's a background color that is undefined:

component yaml

type: custom:bubble-card
card_type: climate
entity: climate.thermostat
show_state: false
show_attribute: true
attribute: current_temperature
sub_button: []
hide_target_temp_low: false
hide_target_temp_high: false
force_icon: false
show_name: true
show_last_changed: false
state_color: false
styles: ""
card_layout: large
modules:
  - "!home-assistant-default"

[Clooos]

Good to know! I will check that!

[robertofabrizi]

This theme doesn't work well with a thermostat. When it turns on cooling/heat it's not possible to read the heat/cool temperatures:

I do notice there's a background color that is undefined:

component yaml

type: custom:bubble-card
card_type: climate
entity: climate.thermostat
show_state: false
show_attribute: true
attribute: current_temperature
sub_button: []
hide_target_temp_low: false
hide_target_temp_high: false
force_icon: false
show_name: true
show_last_changed: false
state_color: false
styles: ""
card_layout: large
modules:
  - "!home-assistant-default"

I can confirm this issue.

[elliotcz97]

Just wanted to say thank you! ❤️

[Clooos]

You're welcome! 😄

[Clooos]

Updated to v1.8:

Fix the misalignment of the icon in select cards.

[Newborg]

Thanks for this module! It makes it a lot easier to mix and match stuff in the dashboards.

I think a tweak is needed for the clickable area around the icon when using this module. The Home Assistant style icon is smaller, so I often by mistake click on the card and not icon. I can see that the Tile card icon has a larger clickable frame:

I would like to fix it myself, but am still very much a beginner when it comes to CSS.

Thanks!