{"id":40829835,"url":"https://github.com/trashbytes/bonbon-strategy","last_synced_at":"2026-05-23T23:01:15.935Z","repository":{"id":333930163,"uuid":"1139291060","full_name":"trashbytes/bonbon-strategy","owner":"trashbytes","description":"A Home Assistant strategy which automatically generates a colorful dashboard.","archived":false,"fork":false,"pushed_at":"2026-05-06T12:23:36.000Z","size":6915,"stargazers_count":97,"open_issues_count":3,"forks_count":5,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-06T14:25:12.677Z","etag":null,"topics":["bubble-card","dashboard","home-assistant","strategy"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trashbytes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-21T19:13:32.000Z","updated_at":"2026-05-06T12:23:14.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/trashbytes/bonbon-strategy","commit_stats":null,"previous_names":["trashbytes/bonbon-strategy"],"tags_count":84,"template":false,"template_full_name":null,"purl":"pkg:github/trashbytes/bonbon-strategy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trashbytes%2Fbonbon-strategy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trashbytes%2Fbonbon-strategy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trashbytes%2Fbonbon-strategy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trashbytes%2Fbonbon-strategy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trashbytes","download_url":"https://codeload.github.com/trashbytes/bonbon-strategy/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trashbytes%2Fbonbon-strategy/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33415020,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T22:14:44.296Z","status":"ssl_error","status_checked_at":"2026-05-23T22:14:43.778Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bubble-card","dashboard","home-assistant","strategy"],"created_at":"2026-01-21T22:21:00.582Z","updated_at":"2026-05-23T23:01:15.912Z","avatar_url":"https://github.com/trashbytes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🍬 Bonbon Strategy\n\nBonbon Strategy is a Home Assistant strategy which automatically generates a colorful dashboard using Bubble Cards. It's fully featured right out of the gate but can be expanded and customized.\n\n\u003cimg width=\"4270\" alt=\"preview\" src=\"preview.png?v=3\" /\u003e\n\n- Left: Home View (with [Atmospheric Weather Card](https://github.com/shpongledsummer/atmospheric-weather-card))\n- Middle: Area View (with [Mini Graph Card](https://github.com/kalkih/mini-graph-card))\n- Right: Custom View (with `binary_sensor.*contact[device_class=door]` and `...[device_class=window]`)\n\n## Preparations\n\nBonbon Strategy works best with a well-organized Home Assistant setup:\n\n- **Floors and Areas**: Properly define your floors and areas with descriptive names and appropriate icons, order them appropriately\n- **Devices and Entities**: Assign devices and/or entities to their respective areas\n- **Organization**: Use the standard Home Assistant features like the Visibility toggle or the labels system to order your entities and control visibility\n\nBy default, disabled and hidden entities won't be displayed in Bonbon Strategy. However, you can override this behavior using attribute selectors in your custom sections and cards. For example, `[hidden=*]` includes all entities regardless of hidden status, and `[entity_category=*]` includes diagnostic entities that are typically hidden.\n\nSee the **Wildcards and attribute selectors** section for more details on how to include hidden and diagnostic entities.\n\n## Supported features\n\nThese features and domains are included by default and will \"just work\".\n\n- Weather\n- Persons\n- Favorites (add the label `favorite` to an entity)\n- Floors\n- Areas (add the label `hidden` to hide an area, or `color_XXXXXX` to set a custom color)\n- Vacuums and Lawn Mowers\n- Locks\n- Temperature, Humidity and CO2\n- Scenes and Scripts\n- Lights\n- Switches and Buttons\n- Media Players\n- Climate (HVAC), Fans and Humidifiers\n- Covers (Shutters \u0026 Shades)\n- Openings (Doors \u0026 Windows)\n- Valves and Water Heaters\n- Miscellaneous (almost everything that isn't part of the above)\n- Custom views, sections and cards (see configuration)\n\nYou can hide anything with the label `hidden` or by disabling the `Visible` setting.\n\nAll entities are ordered alphabetically by default but are grouped by device, if they are in the same section.\n\nYou can override the order of entities by adding labels like `order_\u003cnumber\u003e`. They will be sorted in ascending order.\n\nTo sort entities in several different views and/or sections independently and differently from each other, you can add more specific labels like `order_home_\u003cnumber\u003e`, `order_\u003carea_id\u003e_\u003cnumber\u003e`, `order_\u003cview_key\u003e_\u003cnumber\u003e`, `order_home_\u003csection_key\u003e_\u003cnumber\u003e`, `order_\u003carea_id\u003e_\u003csection_key\u003e_\u003cnumber\u003e` or `order_\u003cview_key\u003e_\u003csection_key\u003e_\u003cnumber\u003e` etc. A greater specificity gives it a higher priority and will thus override lower priority labels.\n\nYou can add the label `nightlight` to lights to exclude them from area and floor toggles.\n\nYou can add the label `graph` to render the entity using Mini Graph Card instead of Bubble Card (if installed).\n\nYou can add the prefix `bonbon_` to any of these labels in case it interferes with your setup.\n\n## Dependencies\n\nThis dashboard strategy needs [Bubble Card](https://github.com/Clooos/Bubble-Card).\n\n[Mini Graph Card](https://github.com/kalkih/mini-graph-card) and [Card Mod](https://github.com/thomasloven/lovelace-card-mod) are highly recommended, but optional.\n\nPlease check the respective repositories on how to install them and do that, before you proceed.\n\n## Installation\n\n### With HACS (recommended):\n\n1. Make sure Bubble Card is installed!\n2. Open HACS \u003e `⋮` \u003e `Custom repositories` type `https://github.com/trashbytes/bonbon-strategy` and select `Dashboard` then add\n3. Search for `Bonbon Strategy`, make sure that you have no filters set\n4. Click `Download` and install\n5. Go to `Settings` \u003e `Dashboards` \u003e `Add dashboard` \u003e `New empty dashboard` then create\n6. Go to the new `Dashboard` \u003e `✎` \u003e `Raw configuration`, paste the configuration from below, then save\n7. Clear your frontend cache!\n\n### Without HACS:\n\n1. Make sure Bubble Card is installed!\n2. Download `bonbon-strategy.js`\n3. Place `bonbon-strategy.js` in `\u003cconfig\u003e/www/bonbon-strategy.js` (restart HA if `/www` didn't exist!)\n4. Go to `Settings` \u003e `Dashboards` \u003e `⋮` \u003e `Resources` \u003e `Add resource` and enter `/local/bonbon-strategy.js` then add\n5. Go to `Settings` \u003e `Dashboards` \u003e `Add dashboard` \u003e `New empty dashboard` then create\n6. Go to the new `Dashboard` \u003e `✎` \u003e `Raw configuration`, paste the configuration from below, then save\n7. Clear your frontend cache!\n\nDone!\n\n## Configuration\n\nAdd this to your dashboard configuration. The strategy uses sensible defaults, so you only need to override the settings you want to change.\n\n### Minimum Config\n\nMinimum required configuration - everything else uses defaults:\n\n```yaml\nstrategy:\n  type: custom:bonbon-strategy\n```\n\n### Configuration Structure\n\nThe configuration is organized as follows:\n\n```yaml\nstrategy:\n  type: custom:bonbon-strategy\n  options:\n    # Global styling options\n    styles:\n      use_bonbon_colors: true # use auto-generated area colors (true) or use card background colors (false)\n      primary_accent_color: '#009ac7' # primary accent color used for \"on\" states (in HEX)\n      card_background_color_light: '#fff' # card background color for light mode (in HEX)\n      card_background_color_dark: '#222' # card background color for dark mode (in HEX)\n      card_text_color_light: '#111' # card text color for light mode (in HEX)\n      card_text_color_dark: '#eee' # card text color for dark mode (in HEX)\n      background_image_light: null # background image for light mode (null | path/to/image)\n      background_image_dark: null # background image for dark mode (null | path/to/image)\n\n    # Button actions\n    actions:\n      default: # the default config all domains, you can add overrides per domain (note: only applies to default Bubble Cards, doesn't apply to Graphs, Weather-Forecasts or custom cards)\n        icon: none # action on icon tap ('auto' | 'toggle' | 'more-info' | 'none')\n        button: auto # action on button tap ('none' | 'toggle' | 'more-info' | 'auto')\n\n    # View definitions\n    views:\n      view_key:\n        max_columns: 1 # max grid columns for this view\n        icon: mdi:icon-name # icon for this view\n        sections:\n          section_key:\n            # Common section properties\n            name: 'Display Name'\n            icon: 'mdi:icon-name'\n            column: auto # fixed view column (1..n) or auto, will be stacked on mobile\n            order: 1 # sort order, ascending, if a fixed column is assigned ordering is limited to that column\n            disabled: false # disable entire section\n            hide_separator: false # hide separator bar above section\n            min_columns: 1 # minimum columns when rendering\n            max_columns: 2 # maximum columns when rendering\n            separator_buttons: null # buttons to add to a separator\n            show_graphs: false # render `sensor` and `binary_sensor` cards as graphs, can be done with the label `graph` individually as well\n            show_forecast: false # render `weather` cards with forecast ('daily' | 'hourly' | false), can be done with the labels `forecast_daily` or `forecast_hourly` individually as well\n            prefix: false # name prefix, useful for \"Ceiling light\" etc., which you may have tons of ('area' | 'floor' | 'device' | false)\n            cards: # cards and entities\n              - entity_id\n              - light.*\n              - binary_sensor.*[device_class=door]\n              - etc.\n\n      # Feature-specific properties (depending on section type) that could use explaining\n\n      bonbon_home:\n        sections:\n          bonbon_areas:\n            separator_buttons: light.*:not([label=nightlight]) # lights to be included on floor separators, floor_id is implied if missing\n            separator_combine_lights: 'when-on' # smartly combine lights into a single toggle on floor separators ('when-on' | 'always' | false), will discard all entities that aren't lights\n            sub_buttons: light.*:not([label=nightlight]) # lights to be included on area cards, area_id is implied if missing\n            sub_comine_lights: 'when-on' # smartly combine lights into a single toggle on area cards ('when-on' | 'always' | false), will discard all entities that aren't lights\n\n      bonbon_area:\n        sections:\n          bonbon_lights:\n            separator_buttons: light.*:not([label=nightlight]) # lights to be included on separator, area_id is implied if missing\n            separator_combine_lights: 'always' # smartly combine lights into a single toggle on separator ('when-on' | 'always' | false), will discard all entities that aren't lights\n```\n\n### Translations\n\nOverride default English section names:\n\n```yaml\nstrategy:\n  type: custom:bonbon-strategy\n  options:\n    views:\n      bonbon_home:\n        sections:\n          bonbon_weather:\n            name: 'Wetter'\n          bonbon_persons:\n            name: 'Personen'\n          bonbon_favorites:\n            name: 'Favoriten'\n          bonbon_areas:\n            name: 'Bereiche'\n          bonbon_robots:\n            name: 'Roboter'\n          bonbon_security:\n            name: 'Sicherheit'\n      bonbon_area:\n        sections:\n          bonbon_environment:\n            name: 'Raumklima'\n          bonbon_scenes:\n            name: 'Szenen \u0026 Skripte'\n          bonbon_lights:\n            name: 'Beleuchtung'\n          bonbon_switches:\n            name: 'Schalter \u0026 Taster'\n          bonbon_media:\n            name: 'Media Player'\n          bonbon_climate:\n            name: 'Heizung \u0026 Klima'\n          bonbon_covers:\n            name: 'Rollläden \u0026 Beschattung'\n          bonbon_openings:\n            name: 'Fenster \u0026 Türen'\n          bonbon_valves:\n            name: 'Wasser'\n          bonbon_miscellaneous:\n            name: 'Sonstiges'\n```\n\n### Cards and Entities\n\nIn the `cards` arrays, you can specify cards and entities in two ways:\n\n**1. Classic YAML structure** - Use Home Assistant's built-in cards or custom cards you installed:\n\n**Example:**\n\n```yaml\ncards:\n  - type: weather-forecast\n    entity: weather.home\n```\n\n**2. Entity selectors** - Use strings or an array of strings with wildcards and filters to automatically match entities:\n\nEntity selectors use wildcards and CSS-like attribute filters to match entities precisely. You'll use this syntax throughout your configuration in `cards`, `separator_buttons`, `sub_buttons`, `inline_buttons`.\n\n**Wildcard syntax:**\n\n- `light.*` matches all lights\n- `sensor.*battery` matches sensors with entity IDs ending in \"battery\"\n- `*temperature*` matches any entity with \"temperature\" in the ID\n\n**Attribute selector syntax:**\n\n**Existence checks:**\n\n- `[attribute]` - Attribute exists **and has a truthy value** (excludes `null`, `false`, `0`, empty strings/arrays)\n- `[attribute=*]` - Attribute exists with **any value** including falsy ones\n\n**Value matching (supports pipe `|` for OR logic):**\n\n- `[attribute=value]` - Exact match (case-insensitive)\n- `[attribute*=substring]` - Contains substring\n- `[attribute^=prefix]` - Starts with prefix\n- `[attribute$=suffix]` - Ends with suffix\n\n**Multiple filters (AND logic):**\n\n- `[filter1][filter2][filter3]` - all must match\n\n**Pseudo functions:**\n\n- `:not(\u003cselector\u003e)` - excludes entities matching `\u003cselector\u003e` at startup\n- `:hide(\u003cselector\u003e)` - dynamically hides entities matching `\u003cselector\u003e` at runtime (only supported in `cards`)\n\nNote: While you can chain pseudo functions, you cannot nest them!\n\n**Default filtering behavior:**\n\nBy default, Bonbon Strategy:\n\n- Excludes hidden entities (use `[hidden=*]` to include)\n- Excludes diagnostic and config entities (use `[entity_category=*]` to include)\n\nTo explicitly and only select hidden or diagnostic and config entities:\n\n- `[hidden]` - Select only hidden entities\n- `[entity_category=diagnostic|config]` - Select only diagnostic and config entities\n\n**Examples:**\n\n```yaml\ncards:\n  - light.* # all lights\n  - light.*:not([label=nightlight|ambientlight]):hide([state=off]) # all lights, that are not marked as nightlight or ambient light, which are currently turned on\n  - sensor.*battery # sensors with entity IDs ending in \"battery\"\n  - sensor.*battery:hide([state\u003e10]) # sensors with entity IDs ending in \"battery\" and a battery level below 10\n  - light.*[brightness=*] # dimmable lights\n  - binary_sensor.*contact[device_class=door|window]:not([label=indoors]):hide([state=off]) # Doors or windows, excluding those marked as indoors, that are currently open\n  - \u003cdevice_id\u003e # all entities of a specific device\n```\n\nYou can also mix and match Home Assistant's built-in cards, installed custom cards as well as entity selectors.\n\n**Important note:** `:not()` will exclude entities matching the selector inside entirely and `:hide()` will include them, but hide them dynamically instead. While you can also use things like `[state=on]` directly in the selector, everything not inside `:hide()` will be evaluated only once and will not respond to changes without reloading the dashboard. It is more performant, however, and may be a sensible choice for entities which don't change their state often or if you never leave your dashboard open for long. Keep in mind, that entities hidden by `:hide()` are technically always on the dashboard, which means that the separator will also always be there (if enabled), even if no buttons are currently visible in that section. The `hide()` pseudo function also only works in `cards` and with standard Bubble Cards. For custom cards you can use [conditional cards](https://www.home-assistant.io/dashboards/conditional/), which should still get basic Bonbon styling. For more complex solutions you can use [auto-entities](https://github.com/thomasloven/lovelace-auto-entities), but because of how it's built, Bonbon styling will not be applied (yet?), so it's not recommended.\n\n### Styling and Colors\n\nBonbon Strategy offers flexible styling options to customize the appearance of your dashboard.\n\n#### Color Configuration\n\n**Primary Accent Color**\n\nThis is the primary color used for `on` states.\n\n```yaml\nstyles:\n  primary_accent_color: '#009ac7'\n```\n\n#### Card Background Colors\n\nConfigure background colors for light and dark modes:\n\n```yaml\nstyles:\n  card_background_color_light: '#ffffff' # light mode background\n  card_background_color_dark: '#222222' # dark mode background\n  card_text_color_light: '#111111' # light mode text color\n  card_text_color_dark: '#eeeeee' # dark mode text color\n```\n\n#### Background Images\n\nAdd background images for visual customization:\n\n```yaml\nstyles:\n  background_image_light: '/local/path/to/light-bg.jpg'\n  background_image_dark: '/local/path/to/dark-bg.jpg'\n```\n\n**Auto-generated Area Colors:**\n\nWhen `use_bonbon_colors` is `true`, Bonbon Strategy automatically generates distinct colors for each area.\nYou can override colors for specific areas by adding a label to your area with the format `color_XXXXXX` or `bonbon_color_XXXXXX` where `XXXXXX` is a hex color code.\nYou can use auto generated colors mixed with manual ones.\n\n```yaml\nstyles:\n  use_bonbon_colors: true\n```\n\n## Views and Sections\n\nBonbon Strategy uses a hierarchy: **Views** contain **Sections**, which contain **Cards**. Views are displayed as tabs at the top of your dashboard, sections organize related entities within a view.\n\n### Built-in Views\n\n#### bonbon_home\n\nThe main dashboard view with a fixed layout showing your home overview.\n\n**Built-in sections:**\n\n- `bonbon_weather` - Weather information, minified look by default, see example below on how to display a card (with forecast?) instead\n- `bonbon_persons` - Person entities, minified look by default, see example below on how to enable the separator\n- `bonbon_favorites` - Entities with the `favorite` label, can be changed and expanded by changing `cards` to include other entities or even things like currently open doors or turned on lights, etc.\n- `bonbon_areas` - Area cards for navigation to individual areas, this is a dynamic section, that will be replaced with a section for each floor containing cards for each area on that floor. Areas that are not on a floor will be grouped in a separate section with name and icon from `bonbon_areas`\n\n**Basic example:**\n\nThis will change the default minified look of `bonbon_weather` to a more generic section with a regular Title and a weather card with daily forecast and then enable the \"Persons\" separator, that's hidden by default, to separate these sections.\n\n```yaml\nviews:\n  bonbon_home:\n    max_columns: 1\n    sections:\n      bonbon_weather:\n        name: 'Weather'\n        separator_buttons: false\n        cards: 'weather.*'\n        show_forecast: 'daily' # ('daily' | 'hourly' | false)\n      bonbon_persons:\n        hide_separator: false\n```\n\n#### bonbon_area\n\nAutomatically created sub-views for each area in your Home Assistant setup. Each area gets its own view with the area's entities.\n\n**Built-in sections:**\n\n- `bonbon_environment` - Temperature, humidity, CO2 sensors\n- `bonbon_lights` - Light switches\n- `bonbon_switches` - Other switches and automations\n- `bonbon_media` - Media player devices\n- `bonbon_climate` - Thermostats and climate entities\n- `bonbon_covers` - Blinds, shutters and shades\n- `bonbon_openings` - Door and window sensors\n- `bonbon_miscellaneous` - Everything else\n\n### Section Properties\n\nAll sections share common properties. Use these to customize appearance and behavior:\n\n**Visual Properties:**\n\n- **name** - Display name shown in the UI\n- **icon** - Icon name (e.g., `mdi:lightbulb`)\n- **order** - Order number for sorting (ascending)\n- **disabled** - If `true`, section is not displayed\n\n**Layout Properties:**\n\n- **min_columns** - Minimum number of column\n- **max_columns** - Maximum number of columns\n- **column** - Column assignment for views with `max_columns \u003e 1` (`1..n` or `'auto'`, default mostly `'auto'`)\n- **hide_separator** - `true` hides the separator bar above section\n\n### Custom Sections\n\nAdd your own sections to any view to organize entities your way. You can also override what's included in built-in sections by changing `cards` for example.\n\n**Basic custom section:**\n\n```yaml\nviews:\n  bonbon_home:\n    sections:\n      open_doors:\n        name: Open doors\n        icon: mdi:door-open\n        order: 2.1\n        cards: binary_sensor.*[device_class=door|garage_door]:hide([state=off])\n      low_batteries:\n        name: Low batteries\n        icon: mdi:battery-low\n        order: 2.2\n        cards: sensor.*battery:hide([state\u003e10])\n```\n\nThese particular examples would work well when included in `bonbon_favorites` as well, as they will probably be empty most of the time anyway. Alternatively set `hide_separator` to `true`, but due to the nature of HA dashboards such a section will still take up some space, even when there is no separator and all cards are hidden.\n\n**Area-specific sections:**\n\nWhen adding custom sections under `bonbon_area`, they automatically show in areas with matching entities and won't show in areas without matching entities. To force entities to match, add `[area_id=area_id]` or `[area_id=*]` to the selector to override the restriction to the current area. This, in turn, will also mean that these will match in any area, so use `area_id: \u003carea_id\u003e` in the section properties to restrict them to a specific area.\n\nWhen using custom cards, which have an entity which belongs to a different area, you can add `area_id: area_id` or `bonbon_area_id: area_id` to the card options to assign that card to one or more different areas so that it will show up in those areas instead. This will override the auto-detected area from the entity.\n\nExample:\n\n```yaml\nviews:\n  bonbon_area:\n    sections:\n      my_pantry_section:\n        name: Pantry Controls\n        # manually restrict to kitchen, otherwise some selectors may cause it to show up in other areas as well, if they match there\n        # this would be the case for lights and switches in this example\n        area_id: kitchen\n        # force match even though we are in the kitchen and these belong the pantry\n        cards:\n          # without manually specifying either wildcard or kitchen, these would never match, as [area_id=kitchen] is implied by default\n          - light.*[area=*]\n          - switch.*[area=pantry]\n          # sensor.pantry_fridge belongs to pantry, so without specifying area_id: kitchen to override it this one would also not match\n          - type: custom:my-custom-fridge-card\n            entity_id: sensor.pantry_fridge\n            area_id: kitchen\n```\n\n### Custom Separator Buttons\n\nAdd buttons to the separator bar above a custom section using `separator_buttons`:\n\n```yaml\nviews:\n  bonbon_area:\n    sections:\n      my_server_section:\n        name: Server Status\n        icon: mdi:server\n        separator_buttons:\n          - binary_sensor.server*status\n        cards:\n          - sensor.server_storage\n          - sensor.server_cpu\n          - switch.server_restart\n```\n\n### Custom Views\n\nCreate entirely new views, which will be added as tabs:\n\n```yaml\nviews:\n  diagnostics:\n    title: Diagnostics\n    icon: mdi:bug\n    sections:\n      desktop_pc:\n        name: Desktop PC\n        icon: mdi:desktop-classic\n        show_graphs: true\n        cards:\n          - sensor.*cpu*\n          - sensor.*memory*\n          - sensor.*disk*\n\n      battery_status:\n        name: Batteries\n        icon: mdi:battery\n        cards:\n          - sensor.*battery[entity_category=diagnostic]\n```\n\n## Advanced Features\n\nBonbon Strategy provides a consistent visual design through CSS variables that you can use when adding your own cards.\nYou can use Bubble Cards to keep it consistent, but with `card-mod` you can make basically any card look like a Bonbon card.\nHome Assistant default cards will receive some light styling automatically, custom cards will need to be styled manually.\n\n#### Available CSS Variables\n\nIf you are attempting this you probably already know what you're doing.\nHere are some useful variables you can use to style custom cards with `card-mod`:\n\n**Card Styling:**\n\n- `--bonbon-box-shadow` - Standard shadow effect used throughout\n- `--bonbon-border-radius` - Border radius for buttons and card elements\n\n**Colors:**\n\n- `--bonbon-card-background` - Card background color\n- `--bonbon-primary-text-color` - Primary text color\n- `--bonbon-primary-accent-color` - Default accent color for active states (purple: #9373c9)\n\n#### Example Custom Card with Styling\n\n```yaml\nviews:\n  bonbon_area:\n    sections:\n      my_styled_section:\n        name: Styled Cards\n        cards:\n          - type: custom:my-custom-card\n            entity: light.example\n            card_mod:\n              style:\n                ha-card: |\n                  border-radius: var(--bonbon-border-radius);\n                  box-shadow: var(--bonbon-box-shadow);\n                  background: var(--bonbon-card-background);\n                  border: none;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrashbytes%2Fbonbon-strategy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrashbytes%2Fbonbon-strategy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrashbytes%2Fbonbon-strategy/lists"}