Unify dashboard page title styling

esphome/energymonitor.yaml

@@ -455,6 +455,10 @@ display:
       }
       it.printf(312, 8, id(font_icon), wifi_color, TextAlign::TOP_RIGHT, "%s", wifi_icon);
 
+      auto draw_page_title = [&](const char *title) {
+        it.print(12, 10, id(font_small), Color(143, 190, 223), title);
+      };
+
       // Round live gauges up to a 1/2/5 scale, with a unit-specific minimum.
       auto gauge_maximum = [](float value, float minimum) -> float {
         const float peak = fmaxf(value, minimum);
@@ -465,7 +469,7 @@ display:
       };
 
       if (id(page_index) == 0 && !id(page_one_gauge_view)) {
-        it.printf(12, 12, id(font_small), Color::WHITE, "Netzleistung");
+        draw_page_title("Netzleistung");
         if (id(grid_power).has_state()) {
           const Color grid_power_color = id(grid_power).state >= 0
               ? Color(143, 190, 223)  // #8FBEDF: positive grid power
@@ -507,7 +511,7 @@ display:
                     "-- W");
         }
       } else if (id(page_index) == 0) {
-        it.print(12, 10, id(font_small), Color::WHITE, "Energie");
+        draw_page_title("Energie");
         // One shared gauge with two parallel curved bars: grid on the outside, solar inside.
         const Color gauge_background = Color(42, 42, 42);
         const int gauge_center_x = 160;
@@ -594,7 +598,7 @@ display:
             Color(111, 167, 229), Color(190, 137, 226)};
 
         // The title uses the free area to the left of the status indicators.
-        it.printf(12, 10, id(font_device), Color::WHITE, "Geräteverbrauch");
+        draw_page_title("Geräteverbrauch");
         for (int display_index = 0; display_index < 9; display_index++) {
           const int index = page_start + display_index;
           const int column = display_index % 2;
@@ -643,7 +647,7 @@ display:
         const Color accent(143, 190, 223);
         const Color gold(255, 170, 40);
         const Color muted(55, 65, 80);
-        it.print(12, 10, id(font_device), accent, "Uhr · Berlin");
+        draw_page_title("Uhr · Berlin");
         if (!now.is_valid()) {
           it.print(160, 100, id(font_title), accent, TextAlign::TOP_CENTER, "--:--:--");
           it.print(160, 190, id(font_small), Color::WHITE, TextAlign::TOP_CENTER,
@@ -746,7 +750,7 @@ display:
         };
 
         if (id(internet_view) == 0) {
-          it.print(12, 10, id(font_small), Color::WHITE, "Internet");
+          draw_page_title("Internet");
           const int cx = 160, cy = 188;
           const float download_maximum = gauge_maximum(download_valid ? download : 0.0f, 0.001f);
           const float upload_maximum = gauge_maximum(upload_valid ? upload : 0.0f, 0.001f);
@@ -770,7 +774,7 @@ display:
                     download_valid ? format_rate(download_maximum).c_str() : "--",
                     upload_valid ? format_rate(upload_maximum).c_str() : "--");
         } else if (id(internet_view) == 1) {
-          it.print(12, 10, id(font_device), Color::WHITE, "Internet · 1 h");
+          draw_page_title("Internet · 1 h");
           const int left = 28, right = 308, top = 62, zero = 122, bottom = 182;
           const int count = id(internet_history_count);
           // A shared symmetric scale keeps upload/download magnitudes comparable.
@@ -837,7 +841,7 @@ display:
                      "Warte auf Messwerte");
           }
         } else {
-          it.print(12, 10, id(font_device), Color::WHITE, "Internet · Volumen");
+          draw_page_title("Internet · Volumen");
           auto format_volume = [&](sensor::Sensor *source) -> std::string {
             if (!connected || !source->has_state() || !std::isfinite(source->state)
                 || source->state < 0.0f) return "--";