Merge remote-tracking branch 'upstream/develop' into pts-options

29 files changed, 171 insertions, 241 deletions

diff --git a/src/displayapp/screens/Alarm.cpp b/src/displayapp/screens/Alarm.cpp
index 427650c6..d6371ce6 100644
--- a/src/displayapp/screens/Alarm.cpp
+++ b/src/displayapp/screens/Alarm.cpp
@@ -18,6 +18,7 @@
 #include "displayapp/screens/Alarm.h"
 #include "displayapp/screens/Screen.h"
 #include "displayapp/screens/Symbols.h"
+#include "displayapp/InfiniTimeTheme.h"
 
 using namespace Pinetime::Applications::Screens;
 using Pinetime::Controllers::AlarmController;
@@ -79,7 +80,7 @@ Alarm::Alarm(DisplayApp* app,
   lv_label_set_text_static(txtStop, Symbols::stop);
   lv_obj_set_hidden(btnStop, true);
 
-  static constexpr lv_color_t bgColor = LV_COLOR_MAKE(0x38, 0x38, 0x38);
+  static constexpr lv_color_t bgColor = Colors::bgAlt;
 
   btnRecur = lv_btn_create(lv_scr_act(), nullptr);
   btnRecur->user_data = this;
diff --git a/src/displayapp/screens/BatteryInfo.cpp b/src/displayapp/screens/BatteryInfo.cpp
index d9d479f8..9febda61 100644
--- a/src/displayapp/screens/BatteryInfo.cpp
+++ b/src/displayapp/screens/BatteryInfo.cpp
@@ -1,6 +1,7 @@
 #include "displayapp/screens/BatteryInfo.h"
 #include "displayapp/DisplayApp.h"
 #include "components/battery/BatteryController.h"
+#include "displayapp/InfiniTimeTheme.h"
 
 using namespace Pinetime::Applications::Screens;
 
@@ -16,9 +17,9 @@ BatteryInfo::BatteryInfo(Pinetime::Applications::DisplayApp* app, Pinetime::Cont
   lv_obj_align(charging_bar, nullptr, LV_ALIGN_CENTER, 0, 10);
   lv_bar_set_anim_time(charging_bar, 1000);
   lv_obj_set_style_local_radius(charging_bar, LV_BAR_PART_BG, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE);
-  lv_obj_set_style_local_bg_color(charging_bar, LV_BAR_PART_BG, LV_STATE_DEFAULT, lv_color_hex(0x222222));
+  lv_obj_set_style_local_bg_color(charging_bar, LV_BAR_PART_BG, LV_STATE_DEFAULT, Colors::bgAlt);
   lv_obj_set_style_local_bg_opa(charging_bar, LV_BAR_PART_BG, LV_STATE_DEFAULT, LV_OPA_100);
-  lv_obj_set_style_local_bg_color(charging_bar, LV_BAR_PART_INDIC, LV_STATE_DEFAULT, lv_color_hex(0xFF0000));
+  lv_obj_set_style_local_bg_color(charging_bar, LV_BAR_PART_INDIC, LV_STATE_DEFAULT, LV_COLOR_RED);
   lv_bar_set_value(charging_bar, batteryPercent, LV_ANIM_ON);
 
   status = lv_label_create(lv_scr_act(), nullptr);
@@ -33,7 +34,7 @@ BatteryInfo::BatteryInfo(Pinetime::Applications::DisplayApp* app, Pinetime::Cont
   lv_obj_align(percent, nullptr, LV_ALIGN_CENTER, 0, -60);
 
   voltage = lv_label_create(lv_scr_act(), nullptr);
-  lv_obj_set_style_local_text_color(voltage, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xff, 0xb0, 0x0));
+  lv_obj_set_style_local_text_color(voltage, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, Colors::orange);
   lv_label_set_text_fmt(voltage, "%1i.%02i volts", batteryVoltage / 1000, batteryVoltage % 1000 / 10);
   lv_label_set_align(voltage, LV_LABEL_ALIGN_CENTER);
   lv_obj_align(voltage, nullptr, LV_ALIGN_CENTER, 0, 95);
@@ -62,7 +63,7 @@ void BatteryInfo::Refresh() {
     lv_obj_set_style_local_bg_color(charging_bar, LV_BAR_PART_INDIC, LV_STATE_DEFAULT, LV_COLOR_YELLOW);
     lv_label_set_text_static(status, "Battery low");
   } else {
-    lv_obj_set_style_local_bg_color(charging_bar, LV_BAR_PART_INDIC, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x0, 0xb0, 0x0));
+    lv_obj_set_style_local_bg_color(charging_bar, LV_BAR_PART_INDIC, LV_STATE_DEFAULT, Colors::highlight);
     lv_label_set_text_static(status, "Discharging");
   }
 
diff --git a/src/displayapp/screens/FirmwareValidation.cpp b/src/displayapp/screens/FirmwareValidation.cpp
index a3c97616..a2314690 100644
--- a/src/displayapp/screens/FirmwareValidation.cpp
+++ b/src/displayapp/screens/FirmwareValidation.cpp
@@ -3,6 +3,7 @@
 #include "Version.h"
 #include "components/firmwarevalidator/FirmwareValidator.h"
 #include "displayapp/DisplayApp.h"
+#include "displayapp/InfiniTimeTheme.h"
 
 using namespace Pinetime::Applications::Screens;
 
@@ -42,7 +43,7 @@ FirmwareValidation::FirmwareValidation(Pinetime::Applications::DisplayApp* app,
     lv_obj_set_size(buttonValidate, 115, 50);
     lv_obj_align(buttonValidate, NULL, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0);
     lv_obj_set_event_cb(buttonValidate, ButtonEventHandler);
-    lv_obj_set_style_local_bg_color(buttonValidate, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x0, 0xb0, 0x0));
+    lv_obj_set_style_local_bg_color(buttonValidate, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, Colors::highlight);
 
     labelButtonValidate = lv_label_create(buttonValidate, nullptr);
     lv_label_set_text_static(labelButtonValidate, "Validate");
@@ -51,7 +52,7 @@ FirmwareValidation::FirmwareValidation(Pinetime::Applications::DisplayApp* app,
     buttonReset->user_data = this;
     lv_obj_set_size(buttonReset, 115, 50);
     lv_obj_align(buttonReset, nullptr, LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0);
-    lv_obj_set_style_local_bg_color(buttonReset, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xb0, 0x0, 0x0));
+    lv_obj_set_style_local_bg_color(buttonReset, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_RED);
     lv_obj_set_event_cb(buttonReset, ButtonEventHandler);
 
     labelButtonReset = lv_label_create(buttonReset, nullptr);
diff --git a/src/displayapp/screens/FlashLight.cpp b/src/displayapp/screens/FlashLight.cpp
index b00bb0fa..e06b59b5 100644
--- a/src/displayapp/screens/FlashLight.cpp
+++ b/src/displayapp/screens/FlashLight.cpp
@@ -1,6 +1,7 @@
 #include "displayapp/screens/FlashLight.h"
 #include "displayapp/DisplayApp.h"
 #include "displayapp/screens/Symbols.h"
+#include "displayapp/InfiniTimeTheme.h"
 
 using namespace Pinetime::Applications::Screens;
 
@@ -58,7 +59,7 @@ FlashLight::~FlashLight() {
 
 void FlashLight::SetColors() {
   lv_color_t bgColor = isOn ? LV_COLOR_WHITE : LV_COLOR_BLACK;
-  lv_color_t fgColor = isOn ? LV_COLOR_MAKE(0xb0, 0xb0, 0xb0) : LV_COLOR_WHITE;
+  lv_color_t fgColor = isOn ? Colors::lightGray : LV_COLOR_WHITE;
 
   lv_obj_set_style_local_bg_color(lv_scr_act(), LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, bgColor);
   lv_obj_set_style_local_text_color(flashLight, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, fgColor);
diff --git a/src/displayapp/screens/HeartRate.cpp b/src/displayapp/screens/HeartRate.cpp
index 35e06bbc..305e0c4b 100644
--- a/src/displayapp/screens/HeartRate.cpp
+++ b/src/displayapp/screens/HeartRate.cpp
@@ -3,6 +3,7 @@
 #include <components/heartrate/HeartRateController.h>
 
 #include "displayapp/DisplayApp.h"
+#include "displayapp/InfiniTimeTheme.h"
 
 using namespace Pinetime::Applications::Screens;
 
@@ -36,10 +37,11 @@ HeartRate::HeartRate(Pinetime::Applications::DisplayApp* app,
 
   lv_obj_set_style_local_text_font(label_hr, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &jetbrains_mono_76);
 
-  if (isHrRunning)
-    lv_obj_set_style_local_text_color(label_hr, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x0, 0xb0, 0x0));
-  else
-    lv_obj_set_style_local_text_color(label_hr, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xb0, 0xb0, 0xb0));
+  if (isHrRunning) {
+    lv_obj_set_style_local_text_color(label_hr, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, Colors::highlight);
+  } else {
+    lv_obj_set_style_local_text_color(label_hr, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, Colors::lightGray);
+  }
 
   lv_label_set_text_static(label_hr, "000");
   lv_obj_align(label_hr, nullptr, LV_ALIGN_CENTER, 0, -40);
@@ -97,12 +99,12 @@ void HeartRate::OnStartStopEvent(lv_event_t event) {
       heartRateController.Start();
       UpdateStartStopButton(heartRateController.State() != Controllers::HeartRateController::States::Stopped);
       systemTask.PushMessage(Pinetime::System::Messages::DisableSleeping);
-      lv_obj_set_style_local_text_color(label_hr, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x0, 0xb0, 0x0));
+      lv_obj_set_style_local_text_color(label_hr, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, Colors::highlight);
     } else {
       heartRateController.Stop();
       UpdateStartStopButton(heartRateController.State() != Controllers::HeartRateController::States::Stopped);
       systemTask.PushMessage(Pinetime::System::Messages::EnableSleeping);
-      lv_obj_set_style_local_text_color(label_hr, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xb0, 0xb0, 0xb0));
+      lv_obj_set_style_local_text_color(label_hr, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, Colors::lightGray);
     }
   }
 }
diff --git a/src/displayapp/screens/InfiniPaint.cpp b/src/displayapp/screens/InfiniPaint.cpp
index 733b4e27..0b6864e8 100644
--- a/src/displayapp/screens/InfiniPaint.cpp
+++ b/src/displayapp/screens/InfiniPaint.cpp
@@ -1,6 +1,7 @@
 #include "displayapp/screens/InfiniPaint.h"
 #include "displayapp/DisplayApp.h"
 #include "displayapp/LittleVgl.h"
+#include "displayapp/InfiniTimeTheme.h"
 
 #include <algorithm> // std::fill
 
@@ -26,7 +27,7 @@ bool InfiniPaint::OnTouchEvent(Pinetime::Applications::TouchEvents event) {
           selectColor = LV_COLOR_MAGENTA;
           break;
         case 1:
-          selectColor = LV_COLOR_MAKE(0x0, 0xb0, 0x0);
+          selectColor = Colors::green;
           break;
         case 2:
           selectColor = LV_COLOR_WHITE;
diff --git a/src/displayapp/screens/Metronome.cpp b/src/displayapp/screens/Metronome.cpp
index 2ffc52dd..174ac1b6 100644
--- a/src/displayapp/screens/Metronome.cpp
+++ b/src/displayapp/screens/Metronome.cpp
@@ -1,5 +1,6 @@
 #include "displayapp/screens/Metronome.h"
 #include "displayapp/screens/Symbols.h"
+#include "displayapp/InfiniTimeTheme.h"
 
 using namespace Pinetime::Applications::Screens;
 
@@ -12,7 +13,7 @@ namespace {
   lv_obj_t* createLabel(const char* name, lv_obj_t* reference, lv_align_t align, lv_font_t* font, uint8_t x, uint8_t y) {
     lv_obj_t* label = lv_label_create(lv_scr_act(), nullptr);
     lv_obj_set_style_local_text_font(label, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, font);
-    lv_obj_set_style_local_text_color(label, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xb0, 0xb0, 0xb0));
+    lv_obj_set_style_local_text_color(label, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, Colors::lightGray);
     lv_label_set_text(label, name);
     lv_obj_align(label, reference, align, x, y);
 
diff --git a/src/displayapp/screens/Motion.cpp b/src/displayapp/screens/Motion.cpp
index f7ffcc7c..c2dc4dac 100644
--- a/src/displayapp/screens/Motion.cpp
+++ b/src/displayapp/screens/Motion.cpp
@@ -1,6 +1,7 @@
 #include "displayapp/screens/Motion.h"
 #include <lvgl/lvgl.h>
 #include "displayapp/DisplayApp.h"
+#include "displayapp/InfiniTimeTheme.h"
 
 using namespace Pinetime::Applications::Screens;
 
@@ -19,7 +20,7 @@ Motion::Motion(Pinetime::Applications::DisplayApp* app, Controllers::MotionContr
 
   /*Add 3 data series*/
   ser1 = lv_chart_add_series(chart, LV_COLOR_RED);
-  ser2 = lv_chart_add_series(chart, LV_COLOR_MAKE(0x0, 0xb0, 0x0));
+  ser2 = lv_chart_add_series(chart, Colors::green);
   ser3 = lv_chart_add_series(chart, LV_COLOR_YELLOW);
 
   lv_chart_init_points(chart, ser1, 0);
diff --git a/src/displayapp/screens/Navigation.cpp b/src/displayapp/screens/Navigation.cpp
index 5779df3a..f6389734 100644
--- a/src/displayapp/screens/Navigation.cpp
+++ b/src/displayapp/screens/Navigation.cpp
@@ -19,6 +19,7 @@
 #include <cstdint>
 #include "displayapp/DisplayApp.h"
 #include "components/ble/NavigationService.h"
+#include "displayapp/InfiniTimeTheme.h"
 
 using namespace Pinetime::Applications::Screens;
 
@@ -192,7 +193,7 @@ void Navigation::Refresh() {
     if (progress > 90) {
       lv_obj_set_style_local_bg_color(barProgress, LV_BAR_PART_INDIC, LV_STATE_DEFAULT, LV_COLOR_RED);
     } else {
-      lv_obj_set_style_local_bg_color(barProgress, LV_BAR_PART_INDIC, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xff, 0xb0, 0x0));
+      lv_obj_set_style_local_bg_color(barProgress, LV_BAR_PART_INDIC, LV_STATE_DEFAULT, Colors::orange);
     }
   }
 }
diff --git a/src/displayapp/screens/Notifications.cpp b/src/displayapp/screens/Notifications.cpp
index 1479cf5d..90a010f5 100644
--- a/src/displayapp/screens/Notifications.cpp
+++ b/src/displayapp/screens/Notifications.cpp
@@ -4,6 +4,7 @@
 #include "components/ble/AlertNotificationService.h"
 #include "displayapp/screens/Symbols.h"
 #include <algorithm>
+#include "displayapp/InfiniTimeTheme.h"
 
 using namespace Pinetime::Applications::Screens;
 extern lv_font_t jetbrains_mono_extrabold_compressed;
@@ -257,7 +258,7 @@ Notifications::NotificationItem::NotificationItem(const char* title,
   lv_obj_set_style_local_border_width(container, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 0);
 
   subject_container = lv_cont_create(container, nullptr);
-  lv_obj_set_style_local_bg_color(subject_container, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x38, 0x38, 0x38));
+  lv_obj_set_style_local_bg_color(subject_container, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, Colors::bgAlt);
   lv_obj_set_style_local_pad_all(subject_container, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 10);
   lv_obj_set_style_local_pad_inner(subject_container, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 5);
   lv_obj_set_style_local_border_width(subject_container, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 0);
@@ -272,7 +273,7 @@ Notifications::NotificationItem::NotificationItem(const char* title,
   lv_obj_align(alert_count, NULL, LV_ALIGN_IN_TOP_RIGHT, 0, 16);
 
   lv_obj_t* alert_type = lv_label_create(container, nullptr);
-  lv_obj_set_style_local_text_color(alert_type, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xb0, 0xb0, 0xb0));
+  lv_obj_set_style_local_text_color(alert_type, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, Colors::orange);
   if (title == nullptr) {
     lv_label_set_text_static(alert_type, "Notification");
   } else {
@@ -289,21 +290,16 @@ Notifications::NotificationItem::NotificationItem(const char* title,
   lv_obj_set_width(alert_type, 180);
   lv_obj_align(alert_type, NULL, LV_ALIGN_IN_TOP_LEFT, 0, 16);
 
-  /////////
+  lv_obj_t* alert_subject = lv_label_create(subject_container, nullptr);
+  lv_label_set_long_mode(alert_subject, LV_LABEL_LONG_BREAK);
+  lv_obj_set_width(alert_subject, LV_HOR_RES - 20);
+
   switch (category) {
-    default: {
-      lv_obj_t* alert_subject = lv_label_create(subject_container, nullptr);
-      lv_obj_set_style_local_text_color(alert_subject, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xff, 0xb0, 0x0));
-      lv_label_set_long_mode(alert_subject, LV_LABEL_LONG_BREAK);
-      lv_obj_set_width(alert_subject, LV_HOR_RES - 20);
+    default:
       lv_label_set_text(alert_subject, msg);
-    } break;
+      break;
     case Controllers::NotificationManager::Categories::IncomingCall: {
       lv_obj_set_height(subject_container, 108);
-      lv_obj_t* alert_subject = lv_label_create(subject_container, nullptr);
-      lv_obj_set_style_local_text_color(alert_subject, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xff, 0xb0, 0x0));
-      lv_label_set_long_mode(alert_subject, LV_LABEL_LONG_BREAK);
-      lv_obj_set_width(alert_subject, LV_HOR_RES - 20);
       lv_label_set_text_static(alert_subject, "Incoming call from");
 
       lv_obj_t* alert_caller = lv_label_create(subject_container, nullptr);
@@ -319,7 +315,7 @@ Notifications::NotificationItem::NotificationItem(const char* title,
       lv_obj_align(bt_accept, NULL, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0);
       label_accept = lv_label_create(bt_accept, nullptr);
       lv_label_set_text_static(label_accept, Symbols::phone);
-      lv_obj_set_style_local_bg_color(bt_accept, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x0, 0xb0, 0x0));
+      lv_obj_set_style_local_bg_color(bt_accept, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, Colors::highlight);
 
       bt_reject = lv_btn_create(container, nullptr);
       bt_reject->user_data = this;
@@ -337,7 +333,7 @@ Notifications::NotificationItem::NotificationItem(const char* title,
       lv_obj_align(bt_mute, NULL, LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0);
       label_mute = lv_label_create(bt_mute, nullptr);
       lv_label_set_text_static(label_mute, Symbols::volumMute);
-      lv_obj_set_style_local_bg_color(bt_mute, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xb0, 0xb0, 0xb0));
+      lv_obj_set_style_local_bg_color(bt_mute, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, Colors::lightGray);
     } break;
   }
 }
diff --git a/src/displayapp/screens/PassKey.cpp b/src/displayapp/screens/PassKey.cpp
index 4057a7eb..5d255e44 100644
--- a/src/displayapp/screens/PassKey.cpp
+++ b/src/displayapp/screens/PassKey.cpp
@@ -5,7 +5,7 @@ using namespace Pinetime::Applications::Screens;
 
 PassKey::PassKey(Pinetime::Applications::DisplayApp* app, uint32_t key) : Screen(app) {
   passkeyLabel = lv_label_create(lv_scr_act(), nullptr);
-  lv_obj_set_style_local_text_color(passkeyLabel, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0xFFFF00));
+  lv_obj_set_style_local_text_color(passkeyLabel, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_YELLOW);
   lv_obj_set_style_local_text_font(passkeyLabel, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &jetbrains_mono_42);
   lv_label_set_text_fmt(passkeyLabel, "%06u", key);
   lv_obj_align(passkeyLabel, nullptr, LV_ALIGN_CENTER, 0, -20);
diff --git a/src/displayapp/screens/Steps.cpp b/src/displayapp/screens/Steps.cpp
index 0dcdcf59..10ccf1aa 100644
--- a/src/displayapp/screens/Steps.cpp
+++ b/src/displayapp/screens/Steps.cpp
@@ -20,7 +20,7 @@ Steps::Steps(Pinetime::Applications::DisplayApp* app,
   lv_obj_set_style_local_bg_opa(stepsArc, LV_ARC_PART_BG, LV_STATE_DEFAULT, LV_OPA_0);
   lv_obj_set_style_local_border_width(stepsArc, LV_ARC_PART_BG, LV_STATE_DEFAULT, 2);
   lv_obj_set_style_local_radius(stepsArc, LV_ARC_PART_BG, LV_STATE_DEFAULT, 0);
-  lv_obj_set_style_local_line_color(stepsArc, LV_ARC_PART_INDIC, LV_STATE_DEFAULT, lv_color_hex(0x0000FF));
+  lv_obj_set_style_local_line_color(stepsArc, LV_ARC_PART_INDIC, LV_STATE_DEFAULT, LV_COLOR_BLUE);
   lv_arc_set_end_angle(stepsArc, 200);
   lv_obj_set_size(stepsArc, 240, 240);
   lv_arc_set_range(stepsArc, 0, 500);
@@ -32,7 +32,7 @@ Steps::Steps(Pinetime::Applications::DisplayApp* app,
   lv_arc_set_value(stepsArc, int16_t(500 * stepsCount / settingsController.GetStepsGoal()));
 
   lSteps = lv_label_create(lv_scr_act(), nullptr);
-  lv_obj_set_style_local_text_color(lSteps, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x00FF00));
+  lv_obj_set_style_local_text_color(lSteps, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_LIME);
   lv_obj_set_style_local_text_font(lSteps, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &jetbrains_mono_42);
   lv_label_set_text_fmt(lSteps, "%li", stepsCount);
   lv_obj_align(lSteps, nullptr, LV_ALIGN_CENTER, 0, -40);
diff --git a/src/displayapp/screens/StopWatch.cpp b/src/displayapp/screens/StopWatch.cpp
index e705fcb0..c68cd854 100644
--- a/src/displayapp/screens/StopWatch.cpp
+++ b/src/displayapp/screens/StopWatch.cpp
@@ -1,6 +1,7 @@
 #include "displayapp/screens/StopWatch.h"
 
 #include "displayapp/screens/Symbols.h"
+#include "displayapp/InfiniTimeTheme.h"
 
 using namespace Pinetime::Applications::Screens;
 
@@ -30,13 +31,13 @@ StopWatch::StopWatch(DisplayApp* app, System::SystemTask& systemTask) : Screen(a
 
   time = lv_label_create(lv_scr_act(), nullptr);
   lv_obj_set_style_local_text_font(time, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &jetbrains_mono_76);
-  lv_obj_set_style_local_text_color(time, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xb0, 0xb0, 0xb0));
+  lv_obj_set_style_local_text_color(time, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, Colors::lightGray);
   lv_label_set_text_static(time, "00:00");
   lv_obj_align(time, lv_scr_act(), LV_ALIGN_CENTER, 0, -45);
 
   msecTime = lv_label_create(lv_scr_act(), nullptr);
   // lv_obj_set_style_local_text_font(msecTime, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &jetbrains_mono_bold_20);
-  lv_obj_set_style_local_text_color(msecTime, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xb0, 0xb0, 0xb0));
+  lv_obj_set_style_local_text_color(msecTime, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, Colors::lightGray);
   lv_label_set_text_static(msecTime, "00");
   lv_obj_align(msecTime, lv_scr_act(), LV_ALIGN_CENTER, 0, 3);
 
@@ -75,8 +76,8 @@ StopWatch::~StopWatch() {
 void StopWatch::Reset() {
   currentState = States::Init;
   oldTimeElapsed = 0;
-  lv_obj_set_style_local_text_color(time, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xb0, 0xb0, 0xb0));
-  lv_obj_set_style_local_text_color(msecTime, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xb0, 0xb0, 0xb0));
+  lv_obj_set_style_local_text_color(time, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, Colors::lightGray);
+  lv_obj_set_style_local_text_color(msecTime, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, Colors::lightGray);
 
   lv_label_set_text_static(time, "00:00");
   lv_label_set_text_static(msecTime, "00");
@@ -90,8 +91,8 @@ void StopWatch::Reset() {
 void StopWatch::Start() {
   lv_obj_set_state(btnStopLap, LV_STATE_DEFAULT);
   lv_obj_set_state(txtStopLap, LV_STATE_DEFAULT);
-  lv_obj_set_style_local_text_color(time, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x0, 0xb0, 0x0));
-  lv_obj_set_style_local_text_color(msecTime, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x0, 0xb0, 0x0));
+  lv_obj_set_style_local_text_color(time, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, Colors::highlight);
+  lv_obj_set_style_local_text_color(msecTime, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, Colors::highlight);
   lv_label_set_text_static(txtPlayPause, Symbols::pause);
   lv_label_set_text_static(txtStopLap, Symbols::lapsFlag);
   startTime = xTaskGetTickCount();
diff --git a/src/displayapp/screens/Styles.cpp b/src/displayapp/screens/Styles.cpp
index bcfd584f..cebdc70c 100644
--- a/src/displayapp/screens/Styles.cpp
+++ b/src/displayapp/screens/Styles.cpp
@@ -1,8 +1,9 @@
 #include "Styles.h"
+#include "displayapp/InfiniTimeTheme.h"
 
 void Pinetime::Applications::Screens::SetRadioButtonStyle(lv_obj_t* checkbox) {
   lv_obj_set_style_local_radius(checkbox, LV_CHECKBOX_PART_BULLET, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE);
   lv_obj_set_style_local_border_width(checkbox, LV_CHECKBOX_PART_BULLET, LV_STATE_CHECKED, 9);
-  lv_obj_set_style_local_border_color(checkbox, LV_CHECKBOX_PART_BULLET, LV_STATE_CHECKED, LV_COLOR_MAKE(0x0, 0xb0, 0x0));
+  lv_obj_set_style_local_border_color(checkbox, LV_CHECKBOX_PART_BULLET, LV_STATE_CHECKED, Colors::highlight);
   lv_obj_set_style_local_bg_color(checkbox, LV_CHECKBOX_PART_BULLET, LV_STATE_CHECKED, LV_COLOR_WHITE);
 }
diff --git a/src/displayapp/screens/Symbols.h b/src/displayapp/screens/Symbols.h
index b21e9366..47177942 100644
--- a/src/displayapp/screens/Symbols.h
+++ b/src/displayapp/screens/Symbols.h
@@ -37,6 +37,7 @@ namespace Pinetime {
         static constexpr const char* chartLine = "\xEF\x88\x81";
         static constexpr const char* eye = "\xEF\x81\xAE";
         static constexpr const char* home = "\xEF\x80\x95";
+        static constexpr const char* sleep = "\xEE\xBD\x84";
 
         // lv_font_sys_48.c
         static constexpr const char* settings = "\xEE\xA2\xB8";
diff --git a/src/displayapp/screens/SystemInfo.cpp b/src/displayapp/screens/SystemInfo.cpp
index 54059796..01c35195 100644
--- a/src/displayapp/screens/SystemInfo.cpp
+++ b/src/displayapp/screens/SystemInfo.cpp
@@ -12,6 +12,7 @@
 #include "components/datetime/DateTimeController.h"
 #include "components/motion/MotionController.h"
 #include "drivers/Watchdog.h"
+#include "displayapp/InfiniTimeTheme.h"
 
 using namespace Pinetime::Applications::Screens;
 
@@ -218,7 +219,7 @@ std::unique_ptr<Screen> SystemInfo::CreateScreen4() {
   lv_table_set_col_cnt(infoTask, 4);
   lv_table_set_row_cnt(infoTask, maxTaskCount + 1);
   lv_obj_set_style_local_pad_all(infoTask, LV_TABLE_PART_CELL1, LV_STATE_DEFAULT, 0);
-  lv_obj_set_style_local_border_color(infoTask, LV_TABLE_PART_CELL1, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xb0, 0xb0, 0xb0));
+  lv_obj_set_style_local_border_color(infoTask, LV_TABLE_PART_CELL1, LV_STATE_DEFAULT, Colors::lightGray);
 
   lv_table_set_cell_value(infoTask, 0, 0, "#");
   lv_table_set_col_width(infoTask, 0, 30);
diff --git a/src/displayapp/screens/Tile.cpp b/src/displayapp/screens/Tile.cpp
index bf0780f1..a60076ed 100644
--- a/src/displayapp/screens/Tile.cpp
+++ b/src/displayapp/screens/Tile.cpp
@@ -2,6 +2,7 @@
 #include "displayapp/DisplayApp.h"
 #include "displayapp/screens/BatteryIcon.h"
 #include "components/ble/BleController.h"
+#include "displayapp/InfiniTimeTheme.h"
 
 using namespace Pinetime::Applications::Screens;
 
@@ -71,7 +72,7 @@ Tile::Tile(uint8_t screenID,
   lv_obj_set_style_local_bg_opa(btnm1, LV_BTNMATRIX_PART_BTN, LV_STATE_DEFAULT, LV_OPA_50);
   lv_obj_set_style_local_bg_color(btnm1, LV_BTNMATRIX_PART_BTN, LV_STATE_DEFAULT, LV_COLOR_AQUA);
   lv_obj_set_style_local_bg_opa(btnm1, LV_BTNMATRIX_PART_BTN, LV_STATE_DISABLED, LV_OPA_50);
-  lv_obj_set_style_local_bg_color(btnm1, LV_BTNMATRIX_PART_BTN, LV_STATE_DISABLED, lv_color_hex(0x111111));
+  lv_obj_set_style_local_bg_color(btnm1, LV_BTNMATRIX_PART_BTN, LV_STATE_DISABLED, Colors::bgDark);
   lv_obj_set_style_local_pad_all(btnm1, LV_BTNMATRIX_PART_BG, LV_STATE_DEFAULT, 0);
   lv_obj_set_style_local_pad_inner(btnm1, LV_BTNMATRIX_PART_BG, LV_STATE_DEFAULT, 10);
 
diff --git a/src/displayapp/screens/Timer.cpp b/src/displayapp/screens/Timer.cpp
index a25be1c4..136d6b52 100644
--- a/src/displayapp/screens/Timer.cpp
+++ b/src/displayapp/screens/Timer.cpp
@@ -1,6 +1,7 @@
 #include "displayapp/screens/Timer.h"
 #include "displayapp/screens/Screen.h"
 #include "displayapp/screens/Symbols.h"
+#include "displayapp/InfiniTimeTheme.h"
 #include <lvgl/lvgl.h>
 
 using namespace Pinetime::Applications::Screens;
@@ -54,7 +55,7 @@ Timer::Timer(DisplayApp* app, Controllers::TimerController& timerController) : S
   btnPlayPause = lv_btn_create(btnObjectMask, nullptr);
   btnPlayPause->user_data = this;
   lv_obj_set_style_local_radius(btnPlayPause, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE);
-  lv_obj_set_style_local_bg_color(btnPlayPause, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x38, 0x38, 0x38));
+  lv_obj_set_style_local_bg_color(btnPlayPause, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, Colors::bgAlt);
   lv_obj_set_event_cb(btnPlayPause, btnEventHandler);
   lv_obj_set_size(btnPlayPause, LV_HOR_RES, 50);
 
diff --git a/src/displayapp/screens/WatchFaceAnalog.cpp b/src/displayapp/screens/WatchFaceAnalog.cpp
index 251a560f..5ebb3304 100644
--- a/src/displayapp/screens/WatchFaceAnalog.cpp
+++ b/src/displayapp/screens/WatchFaceAnalog.cpp
@@ -6,6 +6,7 @@
 #include "displayapp/screens/Symbols.h"
 #include "displayapp/screens/NotificationIcon.h"
 #include "components/settings/Settings.h"
+#include "displayapp/InfiniTimeTheme.h"
 
 LV_IMG_DECLARE(bg_clock);
 
@@ -73,14 +74,14 @@ WatchFaceAnalog::WatchFaceAnalog(Pinetime::Applications::DisplayApp* app,
   lv_obj_align(plugIcon, nullptr, LV_ALIGN_IN_TOP_RIGHT, 0, 0);
 
   notificationIcon = lv_label_create(lv_scr_act(), NULL);
-  lv_obj_set_style_local_text_color(notificationIcon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x00FF00));
+  lv_obj_set_style_local_text_color(notificationIcon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_LIME);
   lv_label_set_text_static(notificationIcon, NotificationIcon::GetIcon(false));
   lv_obj_align(notificationIcon, NULL, LV_ALIGN_IN_TOP_LEFT, 0, 0);
 
   // Date - Day / Week day
 
   label_date_day = lv_label_create(lv_scr_act(), NULL);
-  lv_obj_set_style_local_text_color(label_date_day, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xff, 0xb0, 0x0));
+  lv_obj_set_style_local_text_color(label_date_day, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, Colors::orange);
   lv_label_set_text_fmt(label_date_day, "%s\n%02i", dateTimeController.DayOfWeekShortToString(), dateTimeController.Day());
   lv_label_set_align(label_date_day, LV_LABEL_ALIGN_CENTER);
   lv_obj_align(label_date_day, NULL, LV_ALIGN_CENTER, 50, 0);
diff --git a/src/displayapp/screens/WatchFaceDigital.cpp b/src/displayapp/screens/WatchFaceDigital.cpp
index 7e876d8f..705272f7 100644
--- a/src/displayapp/screens/WatchFaceDigital.cpp
+++ b/src/displayapp/screens/WatchFaceDigital.cpp
@@ -34,7 +34,7 @@ WatchFaceDigital::WatchFaceDigital(DisplayApp* app,
   statusIcons.Create();
 
   notificationIcon = lv_label_create(lv_scr_act(), nullptr);
-  lv_obj_set_style_local_text_color(notificationIcon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x00FF00));
+  lv_obj_set_style_local_text_color(notificationIcon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_LIME);
   lv_label_set_text_static(notificationIcon, NotificationIcon::GetIcon(false));
   lv_obj_align(notificationIcon, nullptr, LV_ALIGN_IN_TOP_LEFT, 0, 0);
 
diff --git a/src/displayapp/screens/WatchFacePineTimeStyle.cpp b/src/displayapp/screens/WatchFacePineTimeStyle.cpp
index 835e8737..a387246b 100644
--- a/src/displayapp/screens/WatchFacePineTimeStyle.cpp
+++ b/src/displayapp/screens/WatchFacePineTimeStyle.cpp
@@ -104,11 +104,11 @@ WatchFacePineTimeStyle::WatchFacePineTimeStyle(DisplayApp* app,
   lv_obj_align(plugIcon, sidebar, LV_ALIGN_IN_TOP_MID, 0, 2);
 
   bleIcon = lv_label_create(lv_scr_act(), nullptr);
-  lv_obj_set_style_local_text_color(bleIcon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x000000));
+  lv_obj_set_style_local_text_color(bleIcon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_BLACK);
   lv_label_set_text_static(bleIcon, "");
 
   notificationIcon = lv_label_create(lv_scr_act(), nullptr);
-  lv_obj_set_style_local_text_color(notificationIcon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x000000));
+  lv_obj_set_style_local_text_color(notificationIcon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_BLACK);
   lv_label_set_text_static(notificationIcon, "");
 
   // Calendar icon
diff --git a/src/displayapp/screens/settings/QuickSettings.cpp b/src/displayapp/screens/settings/QuickSettings.cpp
index f7560066..b76affc9 100644
--- a/src/displayapp/screens/settings/QuickSettings.cpp
+++ b/src/displayapp/screens/settings/QuickSettings.cpp
@@ -2,20 +2,29 @@
 #include "displayapp/DisplayApp.h"
 #include "displayapp/screens/Symbols.h"
 #include "displayapp/screens/BatteryIcon.h"
-#include <components/ble/BleController.h>
+#include "components/ble/BleController.h"
+#include "displayapp/InfiniTimeTheme.h"
 
 using namespace Pinetime::Applications::Screens;
 
 namespace {
   void ButtonEventHandler(lv_obj_t* obj, lv_event_t event) {
     auto* screen = static_cast<QuickSettings*>(obj->user_data);
-    screen->OnButtonEvent(obj, event);
+    if (event == LV_EVENT_CLICKED) {
+      screen->OnButtonEvent(obj);
+    }
   }
 
   void lv_update_task(struct _lv_task_t* task) {
     auto* user_data = static_cast<QuickSettings*>(task->user_data);
     user_data->UpdateScreen();
   }
+
+  enum class ButtonState : lv_state_t {
+    NotificationsOn = LV_STATE_CHECKED,
+    NotificationsOff = LV_STATE_DEFAULT,
+    Sleep = 0x40,
+  };
 }
 
 QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app,
@@ -50,7 +59,7 @@ QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app,
 
   lv_style_init(&btn_style);
   lv_style_set_radius(&btn_style, LV_STATE_DEFAULT, buttonHeight / 4);
-  lv_style_set_bg_color(&btn_style, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x38, 0x38, 0x38));
+  lv_style_set_bg_color(&btn_style, LV_STATE_DEFAULT, Colors::bgAlt);
 
   btn1 = lv_btn_create(lv_scr_act(), nullptr);
   btn1->user_data = this;
@@ -78,19 +87,24 @@ QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app,
   btn3 = lv_btn_create(lv_scr_act(), nullptr);
   btn3->user_data = this;
   lv_obj_set_event_cb(btn3, ButtonEventHandler);
-  lv_btn_set_checkable(btn3, true);
   lv_obj_add_style(btn3, LV_BTN_PART_MAIN, &btn_style);
+  lv_obj_set_style_local_bg_color(btn3, LV_BTN_PART_MAIN, static_cast<lv_state_t>(ButtonState::NotificationsOff), LV_COLOR_RED);
+  static constexpr lv_color_t violet = LV_COLOR_MAKE(0x60, 0x00, 0xff);
+  lv_obj_set_style_local_bg_color(btn3, LV_BTN_PART_MAIN, static_cast<lv_state_t>(ButtonState::Sleep), violet);
   lv_obj_set_size(btn3, buttonWidth, buttonHeight);
   lv_obj_align(btn3, nullptr, LV_ALIGN_IN_BOTTOM_LEFT, buttonXOffset, 0);
 
   btn3_lvl = lv_label_create(btn3, nullptr);
   lv_obj_set_style_local_text_font(btn3_lvl, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &lv_font_sys_48);
 
-  if (settingsController.GetNotificationStatus() == Controllers::Settings::Notification::ON) {
-    lv_obj_add_state(btn3, LV_STATE_CHECKED);
+  if (settingsController.GetNotificationStatus() == Controllers::Settings::Notification::On) {
     lv_label_set_text_static(btn3_lvl, Symbols::notificationsOn);
-  } else {
+    lv_obj_set_state(btn3, static_cast<lv_state_t>(ButtonState::NotificationsOn));
+  } else if (settingsController.GetNotificationStatus() == Controllers::Settings::Notification::Off) {
     lv_label_set_text_static(btn3_lvl, Symbols::notificationsOff);
+  } else {
+    lv_label_set_text_static(btn3_lvl, Symbols::sleep);
+    lv_obj_set_state(btn3, static_cast<lv_state_t>(ButtonState::Sleep));
   }
 
   btn4 = lv_btn_create(lv_scr_act(), nullptr);
@@ -121,31 +135,33 @@ void QuickSettings::UpdateScreen() {
   statusIcons.Update();
 }
 
-void QuickSettings::OnButtonEvent(lv_obj_t* object, lv_event_t event) {
-  if (object == btn2 && event == LV_EVENT_CLICKED) {
-
-    running = false;
+void QuickSettings::OnButtonEvent(lv_obj_t* object) {
+  if (object == btn2) {
     app->StartApp(Apps::FlashLight, DisplayApp::FullRefreshDirections::Up);
-
-  } else if (object == btn1 && event == LV_EVENT_CLICKED) {
+  } else if (object == btn1) {
 
     brightness.Step();
     lv_label_set_text_static(btn1_lvl, brightness.GetIcon());
     settingsController.SetBrightness(brightness.Level());
 
-  } else if (object == btn3 && event == LV_EVENT_VALUE_CHANGED) {
+  } else if (object == btn3) {
 
-    if (lv_obj_get_state(btn3, LV_BTN_PART_MAIN) & LV_STATE_CHECKED) {
-      settingsController.SetNotificationStatus(Controllers::Settings::Notification::ON);
-      motorController.RunForDuration(35);
-      lv_label_set_text_static(btn3_lvl, Symbols::notificationsOn);
-    } else {
-      settingsController.SetNotificationStatus(Controllers::Settings::Notification::OFF);
+    if (settingsController.GetNotificationStatus() == Controllers::Settings::Notification::On) {
+      settingsController.SetNotificationStatus(Controllers::Settings::Notification::Off);
       lv_label_set_text_static(btn3_lvl, Symbols::notificationsOff);
+      lv_obj_set_state(btn3, static_cast<lv_state_t>(ButtonState::NotificationsOff));
+    } else if (settingsController.GetNotificationStatus() == Controllers::Settings::Notification::Off) {
+      settingsController.SetNotificationStatus(Controllers::Settings::Notification::Sleep);
+      lv_label_set_text_static(btn3_lvl, Symbols::sleep);
+      lv_obj_set_state(btn3, static_cast<lv_state_t>(ButtonState::Sleep));
+    } else {
+      settingsController.SetNotificationStatus(Controllers::Settings::Notification::On);
+      lv_label_set_text_static(btn3_lvl, Symbols::notificationsOn);
+      lv_obj_set_state(btn3, static_cast<lv_state_t>(ButtonState::NotificationsOn));
+      motorController.RunForDuration(35);
     }
 
-  } else if (object == btn4 && event == LV_EVENT_CLICKED) {
-    running = false;
+  } else if (object == btn4) {
     settingsController.SetSettingsMenu(0);
     app->StartApp(Apps::Settings, DisplayApp::FullRefreshDirections::Up);
   }
diff --git a/src/displayapp/screens/settings/QuickSettings.h b/src/displayapp/screens/settings/QuickSettings.h
index cd342b0c..f555d034 100644
--- a/src/displayapp/screens/settings/QuickSettings.h
+++ b/src/displayapp/screens/settings/QuickSettings.h
@@ -27,7 +27,7 @@ namespace Pinetime {
 
         ~QuickSettings() override;
 
-        void OnButtonEvent(lv_obj_t* object, lv_event_t event);
+        void OnButtonEvent(lv_obj_t* object);
 
         void UpdateScreen();
 
diff --git a/src/displayapp/screens/settings/SettingSetDate.cpp b/src/displayapp/screens/settings/SettingSetDate.cpp
index 7acf0c19..1407a98f 100644
--- a/src/displayapp/screens/settings/SettingSetDate.cpp
+++ b/src/displayapp/screens/settings/SettingSetDate.cpp
@@ -11,13 +11,36 @@ namespace {
   constexpr int16_t POS_X_DAY = -72;
   constexpr int16_t POS_X_MONTH = 0;
   constexpr int16_t POS_X_YEAR = 72;
-  constexpr int16_t POS_Y_PLUS = -50;
   constexpr int16_t POS_Y_TEXT = -6;
-  constexpr int16_t POS_Y_MINUS = 40;
 
   void event_handler(lv_obj_t* obj, lv_event_t event) {
     auto* screen = static_cast<SettingSetDate*>(obj->user_data);
-    screen->HandleButtonPress(obj, event);
+    if (event == LV_EVENT_CLICKED) {
+      screen->HandleButtonPress();
+    }
+  }
+
+  void ValueChangedHandler(void* userData) {
+    auto* screen = static_cast<SettingSetDate*>(userData);
+    screen->CheckDay();
+  }
+
+  int MaximumDayOfMonth(uint8_t month, uint16_t year) {
+    switch (month) {
+      case 2: {
+        if ((((year % 4) == 0) && ((year % 100) != 0)) || ((year % 400) == 0)) {
+          return 29;
+        }
+        return 28;
+      }
+      case 4:
+      case 6:
+      case 9:
+      case 11:
+        return 30;
+      default:
+        return 31;
+    }
   }
 }
 
@@ -35,164 +58,54 @@ SettingSetDate::SettingSetDate(Pinetime::Applications::DisplayApp* app, Pinetime
   lv_label_set_align(icon, LV_LABEL_ALIGN_CENTER);
   lv_obj_align(icon, title, LV_ALIGN_OUT_LEFT_MID, -10, 0);
 
-  dayValue = static_cast<int>(dateTimeController.Day());
-  lblDay = lv_label_create(lv_scr_act(), nullptr);
-  lv_label_set_text_fmt(lblDay, "%d", dayValue);
-  lv_label_set_align(lblDay, LV_LABEL_ALIGN_CENTER);
-  lv_obj_align(lblDay, lv_scr_act(), LV_ALIGN_CENTER, POS_X_DAY, POS_Y_TEXT);
-  lv_obj_set_auto_realign(lblDay, true);
-
-  monthValue = static_cast<int>(dateTimeController.Month());
-  lblMonth = lv_label_create(lv_scr_act(), nullptr);
-  UpdateMonthLabel();
-  lv_label_set_align(lblMonth, LV_LABEL_ALIGN_CENTER);
-  lv_obj_align(lblMonth, lv_scr_act(), LV_ALIGN_CENTER, POS_X_MONTH, POS_Y_TEXT);
-  lv_obj_set_auto_realign(lblMonth, true);
-
-  yearValue = static_cast<int>(dateTimeController.Year());
-  if (yearValue < 2021)
-    yearValue = 2021;
-  lblYear = lv_label_create(lv_scr_act(), nullptr);
-  lv_label_set_text_fmt(lblYear, "%d", yearValue);
-  lv_label_set_align(lblYear, LV_LABEL_ALIGN_CENTER);
-  lv_obj_align(lblYear, lv_scr_act(), LV_ALIGN_CENTER, POS_X_YEAR, POS_Y_TEXT);
-  lv_obj_set_auto_realign(lblYear, true);
-
-  btnDayPlus = lv_btn_create(lv_scr_act(), nullptr);
-  btnDayPlus->user_data = this;
-  lv_obj_set_size(btnDayPlus, 50, 40);
-  lv_obj_align(btnDayPlus, lv_scr_act(), LV_ALIGN_CENTER, POS_X_DAY, POS_Y_PLUS);
-  lv_obj_set_style_local_value_str(btnDayPlus, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "+");
-  lv_obj_set_event_cb(btnDayPlus, event_handler);
-
-  btnDayMinus = lv_btn_create(lv_scr_act(), nullptr);
-  btnDayMinus->user_data = this;
-  lv_obj_set_size(btnDayMinus, 50, 40);
-  lv_obj_align(btnDayMinus, lv_scr_act(), LV_ALIGN_CENTER, POS_X_DAY, POS_Y_MINUS);
-  lv_obj_set_style_local_value_str(btnDayMinus, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "-");
-  lv_obj_set_event_cb(btnDayMinus, event_handler);
-
-  btnMonthPlus = lv_btn_create(lv_scr_act(), nullptr);
-  btnMonthPlus->user_data = this;
-  lv_obj_set_size(btnMonthPlus, 50, 40);
-  lv_obj_align(btnMonthPlus, lv_scr_act(), LV_ALIGN_CENTER, POS_X_MONTH, POS_Y_PLUS);
-  lv_obj_set_style_local_value_str(btnMonthPlus, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "+");
-  lv_obj_set_event_cb(btnMonthPlus, event_handler);
+  dayCounter.SetValueChangedEventCallback(this, ValueChangedHandler);
+  dayCounter.Create();
+  dayCounter.SetValue(dateTimeController.Day());
+  lv_obj_align(dayCounter.GetObject(), nullptr, LV_ALIGN_CENTER, POS_X_DAY, POS_Y_TEXT);
 
-  btnMonthMinus = lv_btn_create(lv_scr_act(), nullptr);
-  btnMonthMinus->user_data = this;
-  lv_obj_set_size(btnMonthMinus, 50, 40);
-  lv_obj_align(btnMonthMinus, lv_scr_act(), LV_ALIGN_CENTER, POS_X_MONTH, POS_Y_MINUS);
-  lv_obj_set_style_local_value_str(btnMonthMinus, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "-");
-  lv_obj_set_event_cb(btnMonthMinus, event_handler);
+  monthCounter.EnableMonthMode();
+  monthCounter.SetValueChangedEventCallback(this, ValueChangedHandler);
+  monthCounter.Create();
+  monthCounter.SetValue(static_cast<int>(dateTimeController.Month()));
+  lv_obj_align(monthCounter.GetObject(), nullptr, LV_ALIGN_CENTER, POS_X_MONTH, POS_Y_TEXT);
 
-  btnYearPlus = lv_btn_create(lv_scr_act(), nullptr);
-  btnYearPlus->user_data = this;
-  lv_obj_set_size(btnYearPlus, 50, 40);
-  lv_obj_align(btnYearPlus, lv_scr_act(), LV_ALIGN_CENTER, POS_X_YEAR, POS_Y_PLUS);
-  lv_obj_set_style_local_value_str(btnYearPlus, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "+");
-  lv_obj_set_event_cb(btnYearPlus, event_handler);
-
-  btnYearMinus = lv_btn_create(lv_scr_act(), nullptr);
-  btnYearMinus->user_data = this;
-  lv_obj_set_size(btnYearMinus, 50, 40);
-  lv_obj_align(btnYearMinus, lv_scr_act(), LV_ALIGN_CENTER, POS_X_YEAR, POS_Y_MINUS);
-  lv_obj_set_style_local_value_str(btnYearMinus, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "-");
-  lv_obj_set_event_cb(btnYearMinus, event_handler);
+  yearCounter.SetValueChangedEventCallback(this, ValueChangedHandler);
+  yearCounter.Create();
+  yearCounter.SetValue(dateTimeController.Year());
+  lv_obj_align(yearCounter.GetObject(), nullptr, LV_ALIGN_CENTER, POS_X_YEAR, POS_Y_TEXT);
 
   btnSetTime = lv_btn_create(lv_scr_act(), nullptr);
   btnSetTime->user_data = this;
   lv_obj_set_size(btnSetTime, 120, 48);
   lv_obj_align(btnSetTime, lv_scr_act(), LV_ALIGN_IN_BOTTOM_MID, 0, 0);
+  lv_obj_set_style_local_bg_color(btnSetTime, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x38, 0x38, 0x38));
   lv_obj_set_style_local_value_str(btnSetTime, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "Set");
   lv_obj_set_event_cb(btnSetTime, event_handler);
+  lv_btn_set_state(btnSetTime, LV_BTN_STATE_DISABLED);
 }
 
 SettingSetDate::~SettingSetDate() {
   lv_obj_clean(lv_scr_act());
 }
 
-void SettingSetDate::HandleButtonPress(lv_obj_t* object, lv_event_t event) {
-  if (event != LV_EVENT_CLICKED)
-    return;
-
-  if (object == btnDayPlus) {
-    dayValue++;
-    if (dayValue > MaximumDayOfMonth())
-      dayValue = 1;
-    lv_label_set_text_fmt(lblDay, "%d", dayValue);
-    lv_btn_set_state(btnSetTime, LV_BTN_STATE_RELEASED);
-  } else if (object == btnDayMinus) {
-    dayValue--;
-    if (dayValue < 1)
-      dayValue = MaximumDayOfMonth();
-    lv_label_set_text_fmt(lblDay, "%d", dayValue);
-    lv_btn_set_state(btnSetTime, LV_BTN_STATE_RELEASED);
-  } else if (object == btnMonthPlus) {
-    monthValue++;
-    if (monthValue > 12)
-      monthValue = 1;
-    UpdateMonthLabel();
-    lv_btn_set_state(btnSetTime, LV_BTN_STATE_RELEASED);
-    CheckDay();
-  } else if (object == btnMonthMinus) {
-    monthValue--;
-    if (monthValue < 1)
-      monthValue = 12;
-    UpdateMonthLabel();
-    lv_btn_set_state(btnSetTime, LV_BTN_STATE_RELEASED);
-    CheckDay();
-  } else if (object == btnYearPlus) {
-    yearValue++;
-    lv_label_set_text_fmt(lblYear, "%d", yearValue);
-    lv_btn_set_state(btnSetTime, LV_BTN_STATE_RELEASED);
-    CheckDay();
-  } else if (object == btnYearMinus) {
-    yearValue--;
-    lv_label_set_text_fmt(lblYear, "%d", yearValue);
-    lv_btn_set_state(btnSetTime, LV_BTN_STATE_RELEASED);
-    CheckDay();
-  } else if (object == btnSetTime) {
-    NRF_LOG_INFO("Setting date (manually) to %04d-%02d-%02d", yearValue, monthValue, dayValue);
-    dateTimeController.SetTime(static_cast<uint16_t>(yearValue),
-                               static_cast<uint8_t>(monthValue),
-                               static_cast<uint8_t>(dayValue),
-                               0,
-                               dateTimeController.Hours(),
-                               dateTimeController.Minutes(),
-                               dateTimeController.Seconds(),
-                               nrf_rtc_counter_get(portNRF_RTC_REG));
-    lv_btn_set_state(btnSetTime, LV_BTN_STATE_DISABLED);
-  }
-}
-
-int SettingSetDate::MaximumDayOfMonth() const {
-  switch (monthValue) {
-    case 2:
-      if ((((yearValue % 4) == 0) && ((yearValue % 100) != 0)) || ((yearValue % 400) == 0))
-        return 29;
-      return 28;
-    case 4:
-    case 6:
-    case 9:
-    case 11:
-      return 30;
-    default:
-      return 31;
-  }
+void SettingSetDate::HandleButtonPress() {
+  const uint16_t yearValue = yearCounter.GetValue();
+  const uint8_t monthValue = monthCounter.GetValue();
+  const uint8_t dayValue = dayCounter.GetValue();
+  NRF_LOG_INFO("Setting date (manually) to %04d-%02d-%02d", yearValue, monthValue, dayValue);
+  dateTimeController.SetTime(yearValue,
+                             monthValue,
+                             dayValue,
+                             0,
+                             dateTimeController.Hours(),
+                             dateTimeController.Minutes(),
+                             dateTimeController.Seconds(),
+                             nrf_rtc_counter_get(portNRF_RTC_REG));
+  lv_btn_set_state(btnSetTime, LV_BTN_STATE_DISABLED);
 }
 
 void SettingSetDate::CheckDay() {
-  int maxDay = MaximumDayOfMonth();
-  if (dayValue > maxDay) {
-    dayValue = maxDay;
-    lv_label_set_text_fmt(lblDay, "%d", dayValue);
-    lv_obj_align(lblDay, lv_scr_act(), LV_ALIGN_CENTER, POS_X_DAY, POS_Y_TEXT);
-  }
-}
-
-void SettingSetDate::UpdateMonthLabel() {
-  lv_label_set_text_static(
-    lblMonth,
-    Pinetime::Controllers::DateTime::MonthShortToStringLow(static_cast<Pinetime::Controllers::DateTime::Months>(monthValue)));
+  const int maxDay = MaximumDayOfMonth(monthCounter.GetValue(), yearCounter.GetValue());
+  dayCounter.SetMax(maxDay);
+  lv_btn_set_state(btnSetTime, LV_BTN_STATE_RELEASED);
 }
diff --git a/src/displayapp/screens/settings/SettingSetDate.h b/src/displayapp/screens/settings/SettingSetDate.h
index a1795942..af0d654e 100644
--- a/src/displayapp/screens/settings/SettingSetDate.h
+++ b/src/displayapp/screens/settings/SettingSetDate.h
@@ -4,6 +4,7 @@
 #include <lvgl/lvgl.h>
 #include "components/datetime/DateTimeController.h"
 #include "displayapp/screens/Screen.h"
+#include "displayapp/widgets/Counter.h"
 
 namespace Pinetime {
   namespace Applications {
@@ -13,28 +14,17 @@ namespace Pinetime {
         SettingSetDate(DisplayApp* app, Pinetime::Controllers::DateTime& dateTimeController);
         ~SettingSetDate() override;
 
-        void HandleButtonPress(lv_obj_t* object, lv_event_t event);
+        void HandleButtonPress();
+        void CheckDay();
 
       private:
         Controllers::DateTime& dateTimeController;
 
-        int dayValue;
-        int monthValue;
-        int yearValue;
-        lv_obj_t* lblDay;
-        lv_obj_t* lblMonth;
-        lv_obj_t* lblYear;
-        lv_obj_t* btnDayPlus;
-        lv_obj_t* btnDayMinus;
-        lv_obj_t* btnMonthPlus;
-        lv_obj_t* btnMonthMinus;
-        lv_obj_t* btnYearPlus;
-        lv_obj_t* btnYearMinus;
         lv_obj_t* btnSetTime;
 
-        int MaximumDayOfMonth() const;
-        void CheckDay();
-        void UpdateMonthLabel();
+        Widgets::Counter dayCounter = Widgets::Counter(1, 31, jetbrains_mono_bold_20);
+        Widgets::Counter monthCounter = Widgets::Counter(1, 12, jetbrains_mono_bold_20);
+        Widgets::Counter yearCounter = Widgets::Counter(1970, 9999, jetbrains_mono_bold_20);
       };
     }
   }
diff --git a/src/displayapp/screens/settings/SettingSetTime.cpp b/src/displayapp/screens/settings/SettingSetTime.cpp
index 7581f184..47b786e4 100644
--- a/src/displayapp/screens/settings/SettingSetTime.cpp
+++ b/src/displayapp/screens/settings/SettingSetTime.cpp
@@ -5,6 +5,7 @@
 #include "displayapp/DisplayApp.h"
 #include "displayapp/screens/Symbols.h"
 #include "components/settings/Settings.h"
+#include "displayapp/InfiniTimeTheme.h"
 
 using namespace Pinetime::Applications::Screens;
 
@@ -67,8 +68,7 @@ SettingSetTime::SettingSetTime(Pinetime::Applications::DisplayApp* app,
   lv_obj_set_size(btnSetTime, 120, 50);
   lv_obj_align(btnSetTime, lv_scr_act(), LV_ALIGN_IN_BOTTOM_MID, 0, 0);
   lv_obj_set_style_local_value_str(btnSetTime, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "Set");
-  lv_obj_set_style_local_bg_color(btnSetTime, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x38, 0x38, 0x38));
-  lv_obj_set_style_local_bg_color(btnSetTime, LV_BTN_PART_MAIN, LV_STATE_DISABLED, LV_COLOR_MAKE(0x18, 0x18, 0x18));
+  lv_obj_set_style_local_bg_color(btnSetTime, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, Colors::bgAlt);
   lv_obj_set_style_local_value_color(btnSetTime, LV_BTN_PART_MAIN, LV_STATE_DISABLED, LV_COLOR_GRAY);
   lv_obj_set_event_cb(btnSetTime, SetTimeEventHandler);
 
diff --git a/src/displayapp/screens/settings/SettingShakeThreshold.cpp b/src/displayapp/screens/settings/SettingShakeThreshold.cpp
index aac1eaff..de46f7de 100644
--- a/src/displayapp/screens/settings/SettingShakeThreshold.cpp
+++ b/src/displayapp/screens/settings/SettingShakeThreshold.cpp
@@ -3,6 +3,7 @@
 #include "displayapp/DisplayApp.h"
 #include "displayapp/screens/Screen.h"
 #include "displayapp/screens/Symbols.h"
+#include "displayapp/InfiniTimeTheme.h"
 
 using namespace Pinetime::Applications::Screens;
 
@@ -123,8 +124,7 @@ void SettingShakeThreshold::UpdateSelected(lv_obj_t* object, lv_event_t event) {
           vCalTime = xTaskGetTickCount();
           lv_label_set_text_static(calLabel, "Ready!");
           lv_obj_set_click(positionArc, false);
-          lv_obj_set_style_local_bg_color(calButton, LV_BTN_PART_MAIN, LV_STATE_CHECKED, LV_COLOR_MAKE(0x0, 0xb0, 0x0));
-          lv_obj_set_style_local_bg_color(calButton, LV_BTN_PART_MAIN, LV_STATE_CHECKED, LV_COLOR_MAKE(0x0, 0xb0, 0x0));
+          lv_obj_set_style_local_bg_color(calButton, LV_BTN_PART_MAIN, LV_STATE_CHECKED, Colors::highlight);
         } else if (lv_btn_get_state(calButton) == LV_BTN_STATE_RELEASED) {
           calibrating = 0;
           lv_obj_set_click(positionArc, true);
diff --git a/src/displayapp/screens/settings/SettingSteps.cpp b/src/displayapp/screens/settings/SettingSteps.cpp
index e92600c2..af5bd6e9 100644
--- a/src/displayapp/screens/settings/SettingSteps.cpp
+++ b/src/displayapp/screens/settings/SettingSteps.cpp
@@ -17,7 +17,6 @@ SettingSteps::SettingSteps(Pinetime::Applications::DisplayApp* app, Pinetime::Co
 
   lv_obj_t* container1 = lv_cont_create(lv_scr_act(), nullptr);
 
-  // lv_obj_set_style_local_bg_color(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x111111));
   lv_obj_set_style_local_bg_opa(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_TRANSP);
   lv_obj_set_style_local_pad_all(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 10);
   lv_obj_set_style_local_pad_inner(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 5);
diff --git a/src/displayapp/screens/settings/SettingWatchFace.cpp b/src/displayapp/screens/settings/SettingWatchFace.cpp
index 3cb2a364..be595a74 100644
--- a/src/displayapp/screens/settings/SettingWatchFace.cpp
+++ b/src/displayapp/screens/settings/SettingWatchFace.cpp
@@ -21,7 +21,6 @@ SettingWatchFace::SettingWatchFace(Pinetime::Applications::DisplayApp* app, Pine
 
   lv_obj_t* container1 = lv_cont_create(lv_scr_act(), nullptr);
 
-  // lv_obj_set_style_local_bg_color(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x111111));
   lv_obj_set_style_local_bg_opa(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_TRANSP);
   lv_obj_set_style_local_pad_all(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 10);
   lv_obj_set_style_local_pad_inner(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 5);