fw: Apply dark mode to timeline and notifications

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: Andrew McOlash <amcolash@gmail.com>

Author: amcolash

src/fw/apps/system/timeline/layer.c

@@ -613,15 +613,15 @@ static void prv_update_proc(struct Layer *layer, GContext* ctx) {
   TimelineLayer *timeline_layer = (TimelineLayer *)layer;
   const GRect *bounds = &layer->bounds;
 
-  graphics_context_set_fill_color(ctx, GColorWhite);
+  graphics_context_set_fill_color(ctx, system_theme_get_bg_color());
   graphics_fill_rect(ctx, &(GRect) { .size = bounds->size });
 
   AnimationProgress progress;
   if (timeline_layer->animating_intro_or_exit &&
       animation_get_progress(timeline_layer->animation, &progress)) {
     const GPoint offset = { PEEK_ANIMATIONS_SPEED_LINES_OFFSET_X,
                             interpolate_int64_linear(progress, 0, -DISP_ROWS) };
-    graphics_context_set_fill_color(ctx, GColorBlack);
+    graphics_context_set_fill_color(ctx, system_theme_get_fg_color());
     peek_animations_draw_timeline_speed_lines(ctx, offset);
   }
 
@@ -934,6 +934,7 @@ void timeline_layer_init(TimelineLayer *layer, const GRect *frame_ref,
   };
   peek_layer_set_icon(&layer->day_separator, &timeline_res);
   peek_layer_set_background_color(&layer->day_separator, GColorClear);
+  peek_layer_set_text_color(&layer->day_separator, system_theme_get_fg_color());
   peek_layer_set_dot_diameter(&layer->day_separator, style->day_sep_dot_diameter);
   layer_set_hidden((Layer *)&layer->day_separator, true);
   layer_add_child((Layer *)layer, (Layer *)&layer->day_separator);

src/fw/apps/system/timeline/peek_layer.c

@@ -46,7 +46,7 @@ static void prv_update_proc(Layer *layer, GContext *ctx) {
   }
 
   if (peek_layer->show_dot) {
-    graphics_context_set_fill_color(ctx, GColorBlack);
+    graphics_context_set_fill_color(ctx, system_theme_get_fg_color());
     GRect dot_rect = { .size = { peek_layer->dot_diameter, peek_layer->dot_diameter } };
     grect_align(&dot_rect, &peek_layer->layer.bounds, GAlignCenter, false /* clip */);
     graphics_fill_radial(ctx, dot_rect, GOvalScaleModeFitCircle, peek_layer->dot_diameter, 0,
@@ -168,6 +168,12 @@ void peek_layer_set_background_color(PeekLayer *peek_layer, GColor color) {
   peek_layer->bg_color = color;
 }
 
+void peek_layer_set_text_color(PeekLayer *peek_layer, GColor color) {
+  text_layer_set_text_color(&peek_layer->number.text_layer, color);
+  text_layer_set_text_color(&peek_layer->title.text_layer, color);
+  text_layer_set_text_color(&peek_layer->subtitle.text_layer, color);
+}
+
 static bool prv_is_dot_size(GSize size) {
   return (size.w <= UNFOLD_DOT_SIZE_PX && size.h <= UNFOLD_DOT_SIZE_PX);
 }

src/fw/apps/system/timeline/peek_layer.h

@@ -99,6 +99,9 @@ ImmutableAnimation *peek_layer_create_play_section_animation(PeekLayer *peek_lay
 //! Set the background color of the peek layer.
 void peek_layer_set_background_color(PeekLayer *peek_layer, GColor color);
 
+//! Set the text color of all peek layer text fields.
+void peek_layer_set_text_color(PeekLayer *peek_layer, GColor color);
+
 //! Sets the text of the peek layer text fields. The text is copied over.
 //! See the individual text field setters for more information about each field.
 void peek_layer_set_fields(PeekLayer *peek_layer, const char *number, const char *title,

src/fw/popups/notifications/notification_window.c

@@ -51,6 +51,7 @@
 #include "pbl/services/timeline/timeline_resources.h"
 #include "system/logging.h"
 #include "system/passert.h"
+#include "shell/system_theme.h"
 #include "util/math.h"
 #include "util/trig.h"
 
@@ -1167,7 +1168,7 @@ static void prv_layout_did_appear_handler(SwapLayer *swap_layer, LayoutLayer *la
 static void prv_update_colors_handler(SwapLayer *swap_layer, GColor bg_color,
                                       bool status_bar_filled, void *context) {
   NotificationWindowData *data = context;
-  GColor status_color = (status_bar_filled) ? bg_color : GColorWhite;
+  GColor status_color = (status_bar_filled) ? bg_color : system_theme_get_bg_color();
   // Status bar is clear on round, because the banner is rendered under it
   status_bar_layer_set_colors(&data->status_layer, PBL_IF_ROUND_ELSE(GColorClear, status_color),
                               gcolor_legible_over(status_color));

src/fw/popups/timeline/peek.c

@@ -47,7 +47,7 @@ static void prv_draw_background(GContext *ctx, const GRect *frame_orig,
   // Fill all the way to the bottom of the screen
   frame.size.h = DISP_ROWS - frame.origin.y;
 #endif
-  const GColor background_color = GColorWhite;
+  const GColor background_color = system_theme_get_bg_color();
   graphics_context_set_fill_color(ctx, background_color);
   graphics_fill_rect(ctx, &frame);
 
@@ -59,7 +59,7 @@ static void prv_draw_background(GContext *ctx, const GRect *frame_orig,
 
   // Draw the top border and concurrent event indicators
   frame = *frame_orig;
-  const GColor border_color = GColorBlack;
+  const GColor border_color = system_theme_is_dark_mode() ? GColorDarkGray : GColorBlack;
   for (unsigned int i = 0; i <= num_concurrent; i++) {
     const bool has_content = (i < num_concurrent);
     for (unsigned int type = 0; type < (has_content ? 2 : 1); type++) {
@@ -421,7 +421,7 @@ static void prv_push_timeline_peek(void *unused) {
 void timeline_peek_init(void) {
   TimelinePeek *peek = &s_peek;
   *peek = (TimelinePeek) {
-#if CAPABILITY_HAS_TIMELINE_PEEK && !SHELL_SDK && !TARGET_QEMU
+#if CAPABILITY_HAS_TIMELINE_PEEK && !SHELL_SDK
     .enabled = timeline_peek_prefs_get_enabled(),
 #endif
   };
@@ -458,7 +458,7 @@ static bool prv_can_animate(void) {
 
 void timeline_peek_set_visible(bool visible, bool animated) {
   TimelinePeek *peek = &s_peek;
-#if !SHELL_SDK && !TARGET_QEMU
+#if !SHELL_SDK
   if (!peek->exists) {
     visible = false;
   }

src/fw/services/timeline/notification_layout.c

@@ -483,7 +483,7 @@ static NOINLINE void prv_card_render_internal(NotificationLayout *layout, GConte
     .text_flow = PBL_IF_ROUND_ELSE(true, false),
     .paging = PBL_IF_ROUND_ELSE(true, false),
   };
-  graphics_context_set_text_color(ctx, GColorBlack);
+  graphics_context_set_text_color(ctx, system_theme_get_fg_color());
   (text_visible ? graphics_text_node_draw :
                   graphics_text_node_get_size)(layout->view_node, ctx, &box, &config,
                                                &layout->view_size);

src/fw/services/timeline/swap_layer.c

@@ -14,6 +14,7 @@
 #include "pbl/services/timeline/layout_layer.h"
 #include "pbl/services/timeline/notification_layout.h"
 #include "pbl/services/notifications/alerts_preferences_private.h"
+#include "shell/system_theme.h"
 #include "kernel/ui/kernel_ui.h"
 #include "process_state/app_state/app_state.h"
 #include "system/logging.h"
@@ -243,7 +244,7 @@ static void prv_arrow_layer_update_proc(Layer *layer, GContext* ctx) {
   const GRect *layer_bounds = &layer->bounds;
 
 #if PBL_RECT
-  graphics_context_set_fill_color(ctx, GColorWhite);
+  graphics_context_set_fill_color(ctx, system_theme_get_bg_color());
   graphics_fill_rect(ctx, layer_bounds);
 #endif
 
@@ -261,7 +262,11 @@ static void prv_arrow_layer_update_proc(Layer *layer, GContext* ctx) {
 #if UNITTEST
   const GCompOp compositing_mode = GCompOpSet;
 #else
-  const GCompOp compositing_mode = PBL_IF_COLOR_ELSE(GCompOpSet, GCompOpAssign);
+  // Arrow color is inverted in dark mode
+  const GCompOp compositing_mode = PBL_IF_COLOR_ELSE(
+    system_theme_is_dark_mode() ? GCompOpTint : GCompOpSet,
+    GCompOpAssign
+  );
 #endif
   graphics_context_set_compositing_mode(ctx, compositing_mode);
 

src/fw/services/timeline/timeline_layout.c

@@ -659,7 +659,8 @@ static void prv_render_view(TimelineLayout *layout, GContext *ctx, bool render,
   GRect box;
   (is_card ? prv_get_card_view_bounds : prv_get_pin_view_bounds)(layout, &box);
   graphics_context_set_text_color(
-      ctx, (is_card ? layout_get_colors((LayoutLayer *)layout)->primary_color : GColorBlack));
+      ctx, (is_card ? layout_get_colors((LayoutLayer *)layout)->primary_color :
+                     system_theme_get_fg_color()));
   static const GRect page_frame_on_screen =
      { { 0, STATUS_BAR_LAYER_HEIGHT }, { DISP_COLS, DISP_ROWS - STATUS_BAR_LAYER_HEIGHT } };
   const GTextNodeDrawConfig config = {

tests/fw/ui/test_jumboji.c

@@ -26,6 +26,7 @@
 #include "stubs_pin_db.h"
 #include "stubs_resources.h"
 #include "stubs_shell_prefs.h"
+#include "stubs_system_theme.h"
 #include "stubs_text_node.h"
 #include "stubs_timeline_item.h"
 #include "stubs_timeline_resources.h"