fw/apps/system/settings: Apply dark mode to settings and add toggle

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

Author: amcolash

src/fw/apps/system/settings/activity_tracker.c

@@ -240,9 +240,6 @@ static Window *prv_init(void) {
   option_menu_init(&data->option_menu);
   // Not using option_menu_configure because prv_reload_menu_data already sets
   // icons_enabled and chosen row index
-  option_menu_set_status_colors(&data->option_menu, GColorWhite, GColorBlack);
-  GColor highlight_bg = shell_prefs_get_theme_highlight_color();
-  option_menu_set_highlight_colors(&data->option_menu, highlight_bg, gcolor_legible_over(highlight_bg));
   option_menu_set_title(&data->option_menu, i18n_get("Background App", data));
   option_menu_set_content_type(&data->option_menu, OptionMenuContentType_SingleLine);
   option_menu_set_callbacks(&data->option_menu, &option_menu_callbacks, data);

src/fw/apps/system/settings/display.c

@@ -455,6 +455,9 @@ enum SettingsDisplayItem {
 #endif
 #if CAPABILITY_HAS_APP_SCALING
   SettingsDisplayLegacyAppMode,
+#endif
+#if !CAPABILITY_HAS_THEMING
+  SettingsDisplayDarkMode,
 #endif
   NumSettingsDisplayItems
 };
@@ -486,6 +489,11 @@ static void prv_display_select_click_cb(SettingsCallbacks *context, uint16_t row
     case SettingsDisplayLegacyAppMode:
       prv_legacy_app_mode_menu_push((SettingsDisplayData*)context);
       break;
+#endif
+#if !CAPABILITY_HAS_THEMING
+    case SettingsDisplayDarkMode:
+      shell_prefs_set_dark_mode((shell_prefs_get_dark_mode() + 1) % DarkModeCount);
+      break;
 #endif
     default:
       WTF;
@@ -530,6 +538,20 @@ static void prv_display_draw_row_cb(SettingsCallbacks *context, GContext *ctx,
       subtitle = (shell_prefs_get_legacy_app_render_mode() >= LegacyAppRenderMode_ScalingNearest) ?
                  i18n_noop("Scaled") : i18n_noop("Centered");
       break;
+#endif
+#if !CAPABILITY_HAS_THEMING
+    case SettingsDisplayDarkMode: {
+      title = i18n_noop("Dark Mode");
+      static const char * const s_dark_mode_labels[] = {
+        [DarkModeOff] = i18n_noop("Off"),
+        [DarkModeOn] = i18n_noop("On"),
+        #if CAPABILITY_HAS_AMBIENT_LIGHT_SENSOR
+        [DarkModeAuto] = i18n_noop("Auto"),
+        #endif
+      };
+      subtitle = s_dark_mode_labels[shell_prefs_get_dark_mode()];
+      break;
+    }
 #endif
     default:
       WTF;

src/fw/apps/system/settings/option_menu.c

@@ -42,7 +42,7 @@ OptionMenu *settings_option_menu_create(
     .title = i18n_get(i18n_title_key, option_menu),
     .content_type = content_type,
     .choice = choice,
-    .status_colors = { GColorWhite, GColorBlack },
+    .status_colors = { system_theme_get_bg_color(), system_theme_get_fg_color() },
     .highlight_colors = { highlight_bg, gcolor_legible_over(highlight_bg) },
     .icons_enabled = icons_enabled,
   };

src/fw/apps/system/settings/quick_launch_app_menu.c

@@ -158,7 +158,7 @@ void quick_launch_app_menu_window_push(ButtonId button, bool is_tap) {
   const OptionMenuConfig config = {
     .title = i18n_get(i18n_noop("Quick Launch"), data),
     .choice = (install_id == INSTALL_ID_INVALID) ? 0 : (app_index + NUM_CUSTOM_CELLS),
-    .status_colors = { GColorWhite, GColorBlack, },
+    .status_colors = { system_theme_get_bg_color(), system_theme_get_fg_color() },
     .highlight_colors = { highlight_bg, gcolor_legible_over(highlight_bg) },
     .icons_enabled = true,
   };

src/fw/apps/system/settings/quick_launch_setup_menu.c

@@ -56,8 +56,8 @@ static void prv_push_first_use_dialog(void) {
   const char *text = i18n_get("Open favorite apps quickly with a long button press from your "
                               "watchface.", i18n_owner);
   ExpandableDialog *expandable_dialog = expandable_dialog_create_with_params(
-      WINDOW_NAME("Quick Launch First Use"), RESOURCE_ID_SUNNY_DAY_TINY, text, GColorBlack,
-      GColorWhite, NULL, RESOURCE_ID_ACTION_BAR_ICON_CHECK, prv_handle_quick_launch_confirm);
+      WINDOW_NAME("Quick Launch First Use"), RESOURCE_ID_SUNNY_DAY_TINY, text, system_theme_get_fg_color(),
+      system_theme_get_bg_color(), NULL, RESOURCE_ID_ACTION_BAR_ICON_CHECK, prv_handle_quick_launch_confirm);
   expandable_dialog_set_header(expandable_dialog, header);
 #if PBL_ROUND
   expandable_dialog_set_header_font(expandable_dialog,

src/fw/apps/system/settings/settings.c

@@ -13,6 +13,7 @@
 #include "pbl/services/i18n/i18n.h"
 #include "system/passert.h"
 #include "shell/prefs.h"
+#include "shell/system_theme.h"
 #include "util/size.h"
 
 #define SETTINGS_CATEGORY_MENU_CELL_UNFOCUSED_ROUND_VERTICAL_PADDING 14
@@ -135,13 +136,6 @@ static void prv_window_load(Window *window) {
     .select_click = prv_select_callback,
     .get_separator_height = prv_get_separator_height_callback
   });
-  GColor highlight_bg = shell_prefs_get_theme_highlight_color();
-  menu_layer_set_normal_colors(menu_layer,
-                               PBL_IF_COLOR_ELSE(GColorBlack, GColorWhite),
-                               PBL_IF_COLOR_ELSE(GColorWhite, GColorBlack));
-  menu_layer_set_highlight_colors(menu_layer,
-                                  highlight_bg,
-                                  gcolor_legible_over(highlight_bg));
   menu_layer_set_click_config_onto_window(menu_layer, &data->window);
   menu_layer_set_scroll_wrap_around(menu_layer, shell_prefs_get_menu_scroll_wrap_around_enable());
   menu_layer_set_scroll_vibe_on_wrap(menu_layer, shell_prefs_get_menu_scroll_vibe_behavior() == MenuScrollVibeOnWrapAround);
@@ -150,6 +144,15 @@ static void prv_window_load(Window *window) {
   layer_add_child(&data->window.layer, menu_layer_get_layer(menu_layer));
 }
 
+static void prv_window_appear(Window *window) {
+  SettingsAppData *data = window_get_user_data(window);
+  // Refresh background and menu colors in case dark mode changed while away
+  window_set_background_color(window, system_theme_get_bg_color());
+  menu_layer_set_normal_colors(&data->menu_layer, system_theme_get_bg_color(),
+                               system_theme_get_fg_color());
+  layer_mark_dirty(menu_layer_get_layer(&data->menu_layer));
+}
+
 static void prv_window_unload(Window *window) {
   SettingsAppData *data = window_get_user_data(window);
 
@@ -174,9 +177,10 @@ static void handle_init(void) {
   window_set_user_data(window, data);
   window_set_window_handlers(window, &(WindowHandlers){
     .load = prv_window_load,
+    .appear = prv_window_appear,
     .unload = prv_window_unload,
   });
-  window_set_background_color(window, PBL_IF_COLOR_ELSE(GColorBlack, GColorWhite));
+  window_set_background_color(window, system_theme_get_bg_color());
   app_window_stack_push(window, true);
 }
 

src/fw/apps/system/settings/system.c

@@ -176,7 +176,6 @@ static void prv_init_status_bar(StatusBarLayer *status_layer, Window *window, co
   status_bar_layer_init(status_layer);
   status_bar_layer_set_title(status_layer, text, false, false);
   status_bar_layer_set_separator_mode(status_layer, OPTION_MENU_STATUS_SEPARATOR_MODE);
-  status_bar_layer_set_colors(status_layer, GColorWhite, GColorBlack);
   layer_add_child(&window->layer, status_bar_layer_get_layer(status_layer));
 }
 
@@ -881,7 +880,9 @@ static void prv_draw_fcc_cell_round(
   const uint8_t fcc_number_subtitle_height = fonts_get_font_height(fcc_number_subtitle_font);
   const GTextOverflowMode text_overflow_mode = GTextOverflowModeFill;
 
-  graphics_context_set_text_color(ctx, cell_is_highlighted ? GColorWhite : GColorBlack);
+  graphics_context_set_text_color(ctx, cell_is_highlighted ?
+    system_theme_get_bg_color() :
+    system_theme_get_fg_color());
 
   // Calculate the container of the FCC cell content and center it within the cell
   const int16_t title_and_icon_width = 50;
@@ -1324,15 +1325,15 @@ static void prv_kcc_window_load(Window *window) {
                                 - title_text_internal_padding;
   text_layer_init_with_parameters(&data->title_text, &title_text_frame,
                                   title, title_text_font,
-                                  GColorBlack, GColorClear, GTextAlignmentCenter,
+                                  system_theme_get_fg_color(), GColorClear, GTextAlignmentCenter,
                                   GTextOverflowModeTrailingEllipsis);
   layer_add_child(window_layer, text_layer_get_layer(&data->title_text));
 
   GRect info_text_frame = (GRect) { .size = info_text_size };
   info_text_frame.origin.y = title_text_frame.origin.y + title_text_size.h + vertical_spacing;
   text_layer_init_with_parameters(&data->info_text, &info_text_frame,
                                   prv_get_korea_kcc_id(), info_text_font,
-                                  GColorBlack, GColorClear, GTextAlignmentCenter,
+                                  system_theme_get_fg_color(), GColorClear, GTextAlignmentCenter,
                                   GTextOverflowModeTrailingEllipsis);
   layer_add_child(window_layer, text_layer_get_layer(&data->info_text));
 }

src/fw/apps/system/settings/themes.c

@@ -117,7 +117,7 @@ static OptionMenu *prv_push_color_menu(void) {
     PBL_LOG_WRN("Invalid menu color, using default");
     selected = 0;
   }
-  OptionMenu * const option_menu = settings_option_menu_create(
+  OptionMenu * const option_menu = settings_option_menu_push(
       title, OptionMenuContentType_SingleLine, selected, &callbacks,
       ARRAY_LENGTH(s_color_definitions), true /* icons_enabled */, color_names, NULL);
 
@@ -133,12 +133,52 @@ static OptionMenu *prv_push_color_menu(void) {
 
   return option_menu;
 }
+
+static const char * const s_dark_mode_labels[] = {
+  i18n_noop("Off"), i18n_noop("On"), i18n_noop("Auto"),
+};
+
+static void prv_select_click_cb(SettingsCallbacks *context, uint16_t row) {
+  if (row == 0) shell_prefs_set_dark_mode((shell_prefs_get_dark_mode() + 1) % DarkModeCount);
+  else prv_push_color_menu();
+  settings_menu_reload_data(SettingsMenuItemThemes);
+  settings_menu_mark_dirty(SettingsMenuItemThemes);
+}
+
+static void prv_draw_row_cb(SettingsCallbacks *context, GContext *ctx,
+                             const Layer *cell_layer, uint16_t row, bool selected) {
+  const char *title, *subtitle;
+  if (row == 0) {
+    title = i18n_noop("Dark Mode");
+    subtitle = s_dark_mode_labels[shell_prefs_get_dark_mode()];
+  } else {
+    int idx = prv_color_to_index(shell_prefs_get_theme_highlight_color(),
+                                  DEFAULT_THEME_HIGHLIGHT_COLOR);
+    title = i18n_noop("Accent Color");
+    subtitle = s_color_definitions[idx < 0 ? 0 : idx].name;
+  }
+  menu_cell_basic_draw(ctx, cell_layer, i18n_get(title, context),
+                       i18n_get(subtitle, context), NULL);
+}
+
+static uint16_t prv_num_rows_cb(SettingsCallbacks *context) { return 2; }
+static void prv_deinit_cb(SettingsCallbacks *context) {
+  i18n_free_all(context);
+  app_free(context);
+}
+
 #endif // CAPABILITY_HAS_THEMING
 
 static Window *prv_create_color_menu(void) {
 #if CAPABILITY_HAS_THEMING
-  OptionMenu *option_menu = prv_push_color_menu();
-  return option_menu ? &option_menu->window : NULL;
+  SettingsCallbacks *callbacks = app_malloc_check(sizeof(*callbacks));
+  *callbacks = (SettingsCallbacks){
+    .deinit = prv_deinit_cb,
+    .draw_row = prv_draw_row_cb,
+    .select_click = prv_select_click_cb,
+    .num_rows = prv_num_rows_cb,
+  };
+  return settings_window_create(SettingsMenuItemThemes, callbacks);
 #else
   WTF;
   return NULL;

src/fw/apps/system/settings/window.c

@@ -29,6 +29,7 @@
 #include "pbl/services/i18n/i18n.h"
 #include "pbl/services/system_task.h"
 #include "system/bootbits.h"
+#include "shell/system_theme.h"
 #include "system/passert.h"
 #include "shell/prefs.h"
 
@@ -62,10 +63,18 @@ typedef struct SettingsData {
 // Pref change handler
 ///////////////////////
 
+static void prv_refresh_theme_colors(SettingsData *data) {
+  const GColor bg = system_theme_get_bg_color();
+  const GColor fg = system_theme_get_fg_color();
+  window_set_background_color(&data->window, bg);
+  status_bar_layer_set_colors(&data->status_layer, bg, fg);
+  menu_layer_set_normal_colors(&data->menu_layer, bg, fg);
+  layer_mark_dirty(menu_layer_get_layer(&data->menu_layer));
+}
+
 static void prv_pref_change_handler(PebbleEvent *event, void *context) {
   SettingsData *data = context;
-  // Refresh the menu when any pref changes
-  layer_mark_dirty(menu_layer_get_layer(&data->menu_layer));
+  prv_refresh_theme_colors(data);
 }
 
 // Filter category helpers
@@ -85,8 +94,8 @@ static void prv_set_sub_menu_colors(GContext *ctx, const Layer *cell_layer, bool
     graphics_context_set_fill_color(ctx, highlight_bg);
     graphics_context_set_text_color(ctx, gcolor_legible_over(highlight_bg));
   } else {
-    graphics_context_set_fill_color(ctx, GColorWhite);
-    graphics_context_set_text_color(ctx, GColorBlack);
+    graphics_context_set_fill_color(ctx, system_theme_get_bg_color());
+    graphics_context_set_text_color(ctx, system_theme_get_fg_color());
   }
   graphics_fill_rect(ctx, &cell_layer->bounds);
 }
@@ -183,7 +192,7 @@ static void prv_settings_window_load(Window *window) {
       ? data->title_override
       : settings_menu_get_status_name(data->current_category);
   status_bar_layer_set_title(status_layer, i18n_get(title, data), false, false);
-  status_bar_layer_set_colors(status_layer, GColorWhite, GColorBlack);
+  status_bar_layer_set_colors(status_layer, system_theme_get_bg_color(), system_theme_get_fg_color());
   status_bar_layer_set_separator_mode(status_layer, OPTION_MENU_STATUS_SEPARATOR_MODE);
   layer_add_child(&data->window.layer, status_bar_layer_get_layer(status_layer));
 
@@ -203,9 +212,6 @@ static void prv_settings_window_load(Window *window) {
     .selection_changed = prv_selection_changed_callback,
     .selection_will_change = prv_selection_will_change_callback,
   });
-  menu_layer_set_normal_colors(menu_layer, GColorWhite, GColorBlack);
-  GColor highlight_bg = shell_prefs_get_theme_highlight_color();
-  menu_layer_set_highlight_colors(menu_layer, highlight_bg, gcolor_legible_over(highlight_bg));
   menu_layer_set_click_config_onto_window(menu_layer, &data->window);
   menu_layer_set_scroll_wrap_around(menu_layer, shell_prefs_get_menu_scroll_wrap_around_enable());
   menu_layer_set_scroll_vibe_on_wrap(menu_layer, shell_prefs_get_menu_scroll_vibe_behavior() == MenuScrollVibeOnWrapAround);
@@ -234,6 +240,8 @@ static void prv_settings_window_load(Window *window) {
 
 static void prv_settings_window_appear(Window *window) {
   SettingsData *data = window_get_user_data(window);
+  // Refresh colors in case the theme changed while this window was hidden
+  prv_refresh_theme_colors(data);
   SettingsCallbacks *callbacks = prv_get_current_callbacks(data);
   if (callbacks->appear) {
     callbacks->appear(data->callbacks);
@@ -312,7 +320,7 @@ void settings_window_destroy(Window *window) {
 void settings_menu_mark_dirty(SettingsMenuItem category) {
   SettingsData *data = app_state_get_user_data();
   if (data->current_category == category) {
-    layer_mark_dirty(menu_layer_get_layer(&data->menu_layer));
+    prv_refresh_theme_colors(data);
   }
 }