[Styling Module] Home Assistant default styling

[Clooos]

Home Assistant default styling

Version: v1.9
Creator: Clooos

This module applies Home Assistant’s default styling to Bubble Card. It supports all themes and is the best way to get consistency with other cards.

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.9
  creator: Clooos
  link: https://github.com/Clooos/Bubble-Card/discussions/1230
  supported:
    - button
    - calendar
    - climate
    - cover
    - horizontal-buttons-stack
    - media-player
    - pop-up
    - select
    - separator
    - sub-buttons
  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,
    .bubble-sub-button-slider::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.

[Skaronator]

@Clooos this is still an issue on v1.8 once you set state_color: true.

[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!

[Splinter7914]

I was curious if its intentional that this does not apply the accent colors of the theme? I created my own module to apply on top of this. Had to also add button accent color otherwise the sliders continued to have the blueish color. So wanted to check if this is expected.

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

[Inmused-Dev]

I really appreciate this module as it allows for compatability across card types.

I am curretnly working on adding slectors for border colour, background colour, and icon colour to the module.

[cjungBLN]

First of all thank you so much for the module!
I encountered an issue in combination with the 'cover‘ domain and the iOS theme.
https://github.com/basnijholt/lovelace-ios-themes

The icon of the entity becomes barely visible when the cover is open (see screenshot)
.
Any ideas how to fix that?

Best

[MoltenTesseract]

I am trying t use the Frosted theme but it doesn't seem to work well with it at all.

The background of cards seems to be a solid colour and not the frosted effect.

[silasmariusz]

Thats correct behavior if you applied also default HA styling mode.

[montybanse]

Why correct if the design is different? Correct for me would be also the frosted effect, or not? Can you explain?

[marcelomarshmallow]

Thank you for your work!🍻
I hope there are plans to make this module available for “sub-buttons only” as well without setting "enable unsupported modules"

[Clooos]

Hi! I just updated it, thank you for the feedback! 😄

[djkac71]

There seems to be a problem with this module.

When I apply the below yaml, the radius only applies when the subbutton is on. It does not apply when the button is off. The radius works in both states if I disable this module.

.bubble-sub-button {
border-radius: 50%;
}

[Clooos]

Hi! Have you tried with border-radius: 50% !important;?

[djkac71]

Yes. Both have the same outcome.

[Clooos]

Updated to v1.9

• Add support for the new "Sub-buttons only" card.

[jdukat]

Hi @Clooos , first of all, awesome and respectful job on all bubble card content.
Question re stylin, is transparency from themes expected to work?
I have the Frosted Glass Dark theme installed. Default cards, and also mushroom cards are nicely transparent, but Bubble cards are not.
I have all latest updates. Bubble cards and tools are installed, integration installed, default HA styling module added. In result, here's an example of how my bubble card differs from others:

Upper cards are mushroom. The one with text "odkurzacz" is the bubble card.

[jdukat]

Just to test that the default styling module is working (partially), here's how it looks without the styling module:

[Clooos]

The Frosted Glass theme isn't fully compatible with Bubble Card, this is a known issue. But there is a module for that in the module store 👌

[jdukat]

The frosted glass module isn't exactly the same as the HA theme. Look and feel is different.
For now I managed to get "close enough" by adding custom CSS style to my button:

.bubble-button-card-container {
background: rgba(28, 29, 33, 0.18) !important;
backdrop-filter: blur(10px) saturate(1.2);
}

Is there a way to apply this style globally to all bubble cards, so I don't need to add it manually to every single button?

[Clooos]

Hi! Yes you can, add these styles in your Default module by going on the pencil icon, the Default module is applied to all cards.

[pizzapi2012]

I want the popup it self use the Liquid Glass Theme. Not the cards inside it.
The popup has a black transparent background.

I want it to look like the navbar for the background of the pop up.

[pizzapi2012]

Here is my ymal config

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#nfl"
    button_type: name
    sub_button:
      main: []
      bottom: []
    bg_color: ""
    styles: ""
    modules:
      - home-assistant-default
    bg_blur: "0"
  - type: custom:teamtracker-card
    entity: sensor.green_bay_packers

[Clooos]

You can disable the module card by card for these cards in your pop-up, while keeping it enabled on "All cards".

[redi78]

Hi, how can i create this navbar on top?

[Gladbjerg]

@Clooos Nice module.
When I use it, I experience, that the icons also get's overwritten in the color.

Is this deleribate or am I doing something wrong? The entity I am using is a cover, where the color is applied, when the blind is closed (inverted slider direction).

The cards in the picture are identical, except that one has the mod enabled, the other one does not.