Getting Larger Fonts On Small Tablet

Home Assistant Configuration

The tablet being used in the kitchen is a small 7″ one. The standard Mushroom card fonts we found a little small and on the timer card for the Alexa Timer we needed it to be really large.

To help with the first problem I created a new theme based on the Mushroom Square Theme from https://github.com/piitaya/lovelace-mushroom-themes

Kitchen:
    # HA variables
    ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
    ha-card-border-radius: 12px
    paper-font-body1_-_font-size: 18px
    # Mushroom layout
    mush-spacing: 12px
    # Title
    mush-title-padding: 24px 12px 16px
    mush-title-spacing: 12px
    mush-title-font-size: 24px
    mush-title-font-weight: normal
    mush-title-line-height: 1.2
    # Subtitle
    mush-subtitle-font-size: 24px
    mush-subtitle-font-weight: normal
    mush-subtitle-line-height: 1.2
    # Card
    mush-card-primary-font-size: 24px
    mush-card-secondary-font-size: 20px
    # Chip
    mush-chip-spacing: 8px
    mush-chip-padding: 0 0.25em
    mush-chip-height: 36px
    mush-chip-border-radius: 12px
    mush-chip-font-size: 0.5em

    # You must keep this to support light/dark theme
    modes:
        light: 
            mush-rgb-disabled: 189, 189, 189
        dark:
            mush-rgb-disabled: 111, 111, 111

Secondly I needed to show the remaining time on the timer in a very large font so we could easily see it when cooking. The card is conditional so only shows when the timer is active. Note you need to exclude the mush- from the start of the variables set above in the theme. This uses Card Mod from HACS.

type: conditional
conditions:
  - entity: sensor.kitchen_sonos_next_timer
    state_not: unavailable
card:
  type: custom:mushroom-entity-card
  entity: sensor.kitchen_sonos_next_timer
  primary_info: state
  secondary_info: name
  card_mod:
    style: |
      ha-card {
        --card-primary-font-size: 72px;
      }

Other interesting items on this dashboard is the Shopping List which is linked via Todoist the Alexa so we can add items while cooking, either by typing them or asking Alexa to add them. It also shows upcoming birthdays and anniversaries (Anniversaries from HACS), plus upcoming events from our shared calendars, using “Atomic Calendar Revive” from HACS.