Creating a custom dashboard, whats the best way?

Configuration Frontend
, ,
1

I currently working on a project that will combine two of my passions… DIY Electronics and Reef keeping.

I am designing a controller where i can connect various sensors via a ESP32. Im running HA on a raspberry pi with ESPhome. But here comes my question…

Whats the best way to create a custom dashboard? Ideally I would like to be able to make it visually appealing by changing the colours and fonts. Would I need to create my own theme or is there a easyier way?

The dashboard will have various graphs, buttons and other info.

For reference.

Website for the project: https://www.marine-assistant.com
My reeftank FB page: Lukes Saltwater Tank

2
  1. Create a dashboard using stock cards. Decide if it looks/works OK. Consider using custom cards if needed.
  2. Decide if you need a customized (not default) look: colors, icons, fonts, animations, paddings/margins, …
  3. If you need that styling:
  • some can be achieved by native options of a card (example: a Tile card supports colorizing of some elemnets natively);
  • some can be achieved by a custom theme (some CSS styles are covered by CSS variables which can be defined in a theme). Note that a custom theme can be selected per a card, per a view, globally;
  • some can be achieved by a card-mod-theme - this is a custom theme + card-mod code inside a theme file (should be discussed here);
  • some can be achieved just by a card-mod defined for particular cards (should be discussed here);
  • and finally some may be achieved by an external js file.