I figured it out eventually…
To style, I added a custom.css file to /config/www and added it as a Stylesheet Resource.
I had to set both :host and body to get it to work on mobile and web.
:host, body {
--honeycomb-menu-background-color: #0000008e;
--honeycomb-menu-active-background-color: #0000008e;
--honeycomb-menu-disabled: #312f178e;
--honeycomb-menu-icon-active-color: #eec33d;
--honeycomb-menu-icon-color: #ffffff;
}
Hi,
just a heads up. With the latest IOS version, honeycomb menu is working on iPhones 
Great extension and now also an excellent addition to ios phone GUIs!!
Buenas tardes, tenia funcionando el menu y post actualizacion del CORE me deja de andar. A alguien le paso?
Hambiente:
Home Assistant 2023.8.1
Supervisor 2023.08.1
Operating System 10.4
Frontend 20230802.0 - latest
Codigo:
type: custom:button-card
icon: mdi:home-assistant
name: + Info.
tap_action:
action: call-service
service: honeycomb
service_data:
active: true
buttons:
- icon: mdi:window-shutter-open
name: Subir persianas
tap_action:
action: call-service
service: script.subir_persiana_planta_baja
- icon: mdi:lightbulb-group-off
tap_action:
action: call-service
service: script.apagar_luces_planta_baja
aspect_ratio: 4/2
styles:
card:
- height: 100%
grid:
- position: relative
custom_fields:
notification:
- background-color: |
[[[
if (states[‘counter.luces_planta_baja’].state == 0)
return “green”;
return “red”;
]]]
- border-radius: 50%
- position: absolute
- left: 60%
- top: 0%
- height: 40px
- width: 40px
- font-size: 15px
- line-height: 40px
custom_fields:
notification: |
[[[ return Math.floor(states[‘counter.luces_planta_baja’].state) ]]]
state:
- value: 1
styles:
card:
- box shadow: 0px 0px 20px 3px green
icon:
- color: var(–paper-item-icon-active-color)
name:
- color: white
state:
- color: white
label:
- color: white- value: 0
styles:
label:
- color: rgba(0, 0, 0, 0.0)
Efecto:
Big change in button-card 4.0.0 breaks honeycomb-menu.
Temporary workaround is to downgrade button-card in HACS to 3.5.0.
I have the honeycomb menu working in general, but I’m looking to setup templating. I have followed the example shown here. It appears, however, that the template isn’t getting propogated through to the specific call. See below.
#### HONEYCOMB TEMPLATES
#honeycomb_menu_template: <<<- is this needed as a header???
timeout: # <<<- can this be any label, or are there pre-defined template names?
animation_speed: 10
variables:
timer: null
setpoint: null
buttons:
- entity: '[[[ return variables.timer ]]]'
show: '[[[ return variables.timer ]]]'
icon: mdi:auto-mode
tap_action:
action: toggle
- entity: '[[[ return variables.setpoint ]]]'
show: '[[[ return variables.setpoint ]]]'
icon: mdi:timer-edit-outline
tap_action:
action: more-info
Following on from that in the same yaml file is my actual call attempting to use the template defined above (I’m using ha-floorplan) - I’ve shortened the precursor config, but have left the main headings to show the indentation.
### Dashboard config using ha-floorplan
views:
- title: floorplan
cards:
- type: vertical-stack
cards:
- type: custom:floorplan-card
#-----
rules:
#-----
#### Honeycomb Popups configuration (WITH TEMPLATE)
- name: Honeycomb Popups
entity: sensor.timeout_floodlight
tap_action:
action: call-service
service: honeycomb
service_data:
template: light
variables:
timer: sensor.timeout_floodlight
setpoint: input_number.timeout_floodlight_sp
This is the call without using a template, and this works:
#### Honeycomb Popups configuration (NO TEMPLATE)
- name: Honeycomb Popups
entity: sensor.timeout_floodlight
tap_action:
action: call-service
service: honeycomb
service_data:
entity: sensor.timeout_floodlight
animation_speed: 10
buttons:
- entity: switch.enable_floodlight_timeout
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: entity
icon: mdi:auto-mode
- entity: sensor.timeout_floodlight_sp
tap_action:
action: more-info
icon: mdi:timer-edit-outline
Any thoughts would be appreciated.
it doesn’t work properly for me if I use template, I have it similar to you. floorplan in dashboard with button cards. I’m not developer, but I think in my case I have conflict with button cards template I use. On the other hand, since the last update it works fine everywhere including ios devices. 
Hi,
I have no luck trying to get the Honeycomb icons reflecting the state color.
Appreciate that you can show us where to input the Styles in the theme file.
thanks
Hi there,
Thanks for the tip.
Your solution works except the 2 “Active” colors aren’t working.
- name: Pool Menu
type: image
style:
transform: translate(0,0)
top: 77.5%
left: 50%
width: 50%
height: 22%
image: /local/1x1-00000000.png
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
animation_speed: 10
size: 225
active: true
buttons:
- show: false
- show: false
- icon: mdi:fence-electric
entity: switch.electric_fence
tap_action: more-info
- show: false
- icon: mdi:pool
entity: switch.pool_pump
tap_action: more-info
active: true
- show: false
hold_action: none
- name: Main Bedroom Menu
type: image
style:
transform: translate(0,0)
top: 53.5%
left: 16%
width: 18%
height: 11.5%
image: /local/1x1-00000000.png
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
animation_speed: 10
size: 225
buttons:
- icon: mdi:information-variant
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
animation_speed: 10
size: 225
active: true
buttons:
- entity: media_player.bedroom_speaker
- entity: sensor.bedroom_temperature
- entity: sensor.bedroom_humidity
- entity: sensor.bedroom_pressure
- icon: mdi:floor-plan
tap_action:
action: navigate
navigation_path: /lovelace/badroom
hold_action:
action: more-info
- icon: mdi:lamps
entity: light.bed_lamps
color: auto
tap_action:
action: toggle
hold_action:
action: more-info
- icon: mdi:lamp
entity: light.bed_lamp_right
color: auto
tap_action:
action: toggle
hold_action:
action: more-info
- icon: mdi:robot
entity: input_boolean.bedroom_routine
color: auto
tap_action:
action: call-service
service: honeycomb
service_data:
autoclose: false
animation_speed: 10
size: 225
active: true
buttons:
- icon: mdi:calendar-blank
entity: input_boolean.bedroom_routine
color: auto
tap_action:
action: toggle
- icon: mdi:motion-sensor
entity: input_boolean.bedroom_motion_lights
color: auto
tap_action:
action: toggle
- show: false
- icon: mdi:lamp
entity: light.bed_lamp_left
color: auto
tap_action:
action: toggle
hold_action:
action: more-info
hold_action: none