From 078b15da555eefa813285dea3eecfae13f10d9ec Mon Sep 17 00:00:00 2001 From: Gabor Kiss-Vamosi Date: Tue, 20 Apr 2021 21:36:24 +0200 Subject: [PATCH] feat(theme) add experimental dark mode to the default theme --- src/extra/themes/default/lv_theme_default.c | 134 +++++++++++--------- src/extra/themes/default/lv_theme_default.h | 2 +- src/hal/lv_hal_disp.c | 2 +- 3 files changed, 76 insertions(+), 62 deletions(-) diff --git a/src/extra/themes/default/lv_theme_default.c b/src/extra/themes/default/lv_theme_default.c index 6b38d4169..9aa018d40 100644 --- a/src/extra/themes/default/lv_theme_default.c +++ b/src/extra/themes/default/lv_theme_default.c @@ -16,19 +16,18 @@ /********************* * DEFINES *********************/ - -static lv_color_t color_primary_accent; -static lv_color_t color_secondary_accent; -static lv_color_t color_primary_muted; -static lv_color_t color_secondary_muted; - -#define COLOR_GREY lv_color_grey_lighten_2() - +#define MODE_DARK 1 #define RADIUS_DEFAULT (disp_size == DISP_LARGE ? LV_DPX(12) : LV_DPX(8)) /*SCREEN*/ -#define COLOR_SCR lv_color_grey_lighten_4() -#define COLOR_SCR_TEXT lv_color_grey_darken_4() +#define LIGHT_COLOR_SCR lv_color_grey_lighten_4() +#define LIGHT_COLOR_CARD lv_color_white() +#define LIGHT_COLOR_TEXT lv_color_grey_darken_4() +#define LIGHT_COLOR_GREY lv_color_grey_lighten_2() +#define DARK_COLOR_SCR lv_color_grey_darken_4() +#define DARK_COLOR_CARD lv_color_grey_darken_3() +#define DARK_COLOR_TEXT lv_color_grey_lighten_5() +#define DARK_COLOR_GREY lv_color_grey_darken_1() #define TRANSITION_TIME LV_THEME_DEFAULT_TRANSITON_TIME #define BORDER_WIDTH LV_DPX(2) @@ -166,6 +165,13 @@ static my_theme_styles_t * styles; static lv_theme_t theme; static disp_size_t disp_size; static bool inited; +static lv_color_t color_primary; +static lv_color_t color_secondary; +static lv_color_t color_scr; +static lv_color_t color_text; +static lv_color_t color_card; +static lv_color_t color_grey; + /********************** * MACROS @@ -185,27 +191,31 @@ static lv_color_t dark_color_filter_cb(const lv_color_filter_dsc_t * f, lv_color static lv_color_t grey_filter_cb(const lv_color_filter_dsc_t * f, lv_color_t color, lv_opa_t opa) { LV_UNUSED(f); - return lv_color_mix(lv_color_grey_lighten_2(), color, opa); + if(theme.flags & MODE_DARK) return lv_color_mix(lv_color_grey_darken_2(), color, opa); + else return lv_color_mix(lv_color_grey_lighten_2(), color, opa); } static void style_init(void) { static const lv_style_prop_t trans_props[] = { LV_STYLE_BG_OPA, LV_STYLE_BG_COLOR, - LV_STYLE_TRANSFORM_WIDTH, LV_STYLE_TRANSFORM_HEIGHT, - LV_STYLE_TRANSFORM_Y, LV_STYLE_TRANSFORM_X, - LV_STYLE_TRANSFORM_ZOOM, LV_STYLE_TRANSFORM_ANGLE, + LV_STYLE_TRANSLATE_WIDTH, LV_STYLE_TRANSLATE_HEIGHT, + LV_STYLE_TRANSLATE_Y, LV_STYLE_TRANSLATE_X, + LV_STYLE_TRANSLATE_ZOOM, LV_STYLE_TRANSLATE_ANGLE, LV_STYLE_COLOR_FILTER_OPA, LV_STYLE_COLOR_FILTER_DSC, 0 }; - color_primary_accent = lv_color_get_palette_main(theme.palette_primary); - color_secondary_accent = lv_color_get_palette_main(theme.palette_secondary); - color_primary_muted = lv_color_get_palette_lighten_5(theme.palette_primary); - color_secondary_muted = lv_color_get_palette_lighten_5(theme.palette_secondary); + color_primary = lv_color_get_palette_main(theme.palette_primary); + color_secondary = lv_color_get_palette_main(theme.palette_secondary); - theme.color_primary = color_primary_accent; - theme.color_secondary = color_secondary_accent; + color_scr = theme.flags & MODE_DARK ? DARK_COLOR_SCR : LIGHT_COLOR_SCR; + color_text = theme.flags & MODE_DARK ? DARK_COLOR_TEXT : LIGHT_COLOR_TEXT; + color_card = theme.flags & MODE_DARK ? DARK_COLOR_CARD : LIGHT_COLOR_CARD; + color_grey = theme.flags & MODE_DARK ? DARK_COLOR_GREY : LIGHT_COLOR_GREY; + + theme.color_primary = color_primary; + theme.color_secondary = color_secondary; static lv_style_transition_dsc_t trans_delayed; lv_style_transition_dsc_init(&trans_delayed, trans_props, lv_anim_path_linear, TRANSITION_TIME, 70); @@ -234,19 +244,19 @@ static void style_init(void) style_init_reset(&styles->scr); lv_style_set_bg_opa(&styles->scr, LV_OPA_COVER); - lv_style_set_bg_color(&styles->scr, COLOR_SCR); - lv_style_set_text_color(&styles->scr, COLOR_SCR_TEXT); + lv_style_set_bg_color(&styles->scr, color_scr); + lv_style_set_text_color(&styles->scr, color_text); lv_style_set_pad_row(&styles->scr, PAD_SMALL); lv_style_set_pad_column(&styles->scr, PAD_SMALL); style_init_reset(&styles->card); lv_style_set_radius(&styles->card, RADIUS_DEFAULT); lv_style_set_bg_opa(&styles->card, LV_OPA_COVER); - lv_style_set_bg_color(&styles->card, lv_color_white()); - lv_style_set_border_color(&styles->card, COLOR_GREY); + lv_style_set_bg_color(&styles->card, color_card); + lv_style_set_border_color(&styles->card, color_grey); lv_style_set_border_width(&styles->card, BORDER_WIDTH); lv_style_set_border_post(&styles->card, true); - lv_style_set_text_color(&styles->card, lv_color_grey_darken_4()); + lv_style_set_text_color(&styles->card, color_text); lv_style_set_pad_all(&styles->card, PAD_DEF); lv_style_set_pad_row(&styles->card, PAD_SMALL); lv_style_set_pad_column(&styles->card, PAD_SMALL); @@ -254,24 +264,26 @@ static void style_init(void) lv_style_set_line_width(&styles->card, LV_DPX(1)); style_init_reset(&styles->outline_primary); - lv_style_set_outline_color(&styles->outline_primary, color_primary_accent); + lv_style_set_outline_color(&styles->outline_primary, color_primary); lv_style_set_outline_width(&styles->outline_primary, OUTLINE_WIDTH); lv_style_set_outline_pad(&styles->outline_primary, OUTLINE_WIDTH); lv_style_set_outline_opa(&styles->outline_primary, LV_OPA_50); style_init_reset(&styles->outline_secondary); - lv_style_set_outline_color(&styles->outline_secondary, color_secondary_accent); + lv_style_set_outline_color(&styles->outline_secondary, color_secondary); lv_style_set_outline_width(&styles->outline_secondary, OUTLINE_WIDTH); lv_style_set_outline_opa(&styles->outline_secondary, LV_OPA_50); style_init_reset(&styles->btn); lv_style_set_radius(&styles->btn, (disp_size == DISP_LARGE ? LV_DPX(16) : disp_size == DISP_MEDIUM ? LV_DPX(12) : LV_DPX(8))); lv_style_set_bg_opa(&styles->btn, LV_OPA_COVER); - lv_style_set_bg_color(&styles->btn, COLOR_GREY); - lv_style_set_shadow_color(&styles->btn, lv_color_grey_lighten_3()); - lv_style_set_shadow_width(&styles->btn, 1); - lv_style_set_shadow_ofs_y(&styles->btn, LV_DPX(4)); - lv_style_set_text_color(&styles->btn, lv_color_grey_darken_4()); + lv_style_set_bg_color(&styles->btn, color_grey); + if(!(theme.flags & MODE_DARK)) { + lv_style_set_shadow_color(&styles->btn, lv_color_grey_lighten_3()); + lv_style_set_shadow_width(&styles->btn, 1); + lv_style_set_shadow_ofs_y(&styles->btn, LV_DPX(4)); + } + lv_style_set_text_color(&styles->btn, color_text); lv_style_set_pad_hor(&styles->btn, PAD_DEF); lv_style_set_pad_ver(&styles->btn, PAD_SMALL); lv_style_set_pad_column(&styles->btn, LV_DPX(5)); @@ -327,34 +339,34 @@ static void style_init(void) lv_style_set_pad_column(&styles->pad_tiny, PAD_TINY); style_init_reset(&styles->bg_color_primary); - lv_style_set_bg_color(&styles->bg_color_primary, color_primary_accent); + lv_style_set_bg_color(&styles->bg_color_primary, color_primary); lv_style_set_text_color(&styles->bg_color_primary, lv_color_white()); lv_style_set_bg_opa(&styles->bg_color_primary, LV_OPA_COVER); style_init_reset(&styles->bg_color_primary_muted); - lv_style_set_bg_color(&styles->bg_color_primary_muted, color_primary_muted); - lv_style_set_text_color(&styles->bg_color_primary_muted, color_primary_accent); - lv_style_set_bg_opa(&styles->bg_color_primary_muted, LV_OPA_COVER); + lv_style_set_bg_color(&styles->bg_color_primary_muted, color_primary); + lv_style_set_text_color(&styles->bg_color_primary_muted, color_primary); + lv_style_set_bg_opa(&styles->bg_color_primary_muted, LV_OPA_20); style_init_reset(&styles->bg_color_secondary); - lv_style_set_bg_color(&styles->bg_color_secondary, color_secondary_accent); + lv_style_set_bg_color(&styles->bg_color_secondary, color_secondary); lv_style_set_text_color(&styles->bg_color_secondary, lv_color_white()); lv_style_set_bg_opa(&styles->bg_color_secondary, LV_OPA_COVER); style_init_reset(&styles->bg_color_secondary_muted); - lv_style_set_bg_color(&styles->bg_color_secondary_muted, color_secondary_muted); - lv_style_set_text_color(&styles->bg_color_secondary_muted, color_secondary_accent); - lv_style_set_bg_opa(&styles->bg_color_secondary_muted, LV_OPA_COVER); + lv_style_set_bg_color(&styles->bg_color_secondary_muted, color_secondary); + lv_style_set_text_color(&styles->bg_color_secondary_muted, color_secondary); + lv_style_set_bg_opa(&styles->bg_color_secondary_muted, LV_OPA_20); style_init_reset(&styles->bg_color_grey); - lv_style_set_bg_color(&styles->bg_color_grey, COLOR_GREY); + lv_style_set_bg_color(&styles->bg_color_grey, color_grey); lv_style_set_bg_opa(&styles->bg_color_grey, LV_OPA_COVER); - lv_style_set_text_color(&styles->bg_color_grey, lv_color_grey_darken_4()); + lv_style_set_text_color(&styles->bg_color_grey, color_text); style_init_reset(&styles->bg_color_white); - lv_style_set_bg_color(&styles->bg_color_white, lv_color_white()); + lv_style_set_bg_color(&styles->bg_color_white, color_card); lv_style_set_bg_opa(&styles->bg_color_white, LV_OPA_COVER); - lv_style_set_text_color(&styles->bg_color_white, lv_color_grey_darken_4()); + lv_style_set_text_color(&styles->bg_color_white, color_text); style_init_reset(&styles->circle); lv_style_set_radius(&styles->circle, LV_RADIUS_CIRCLE); @@ -369,7 +381,7 @@ static void style_init(void) #endif style_init_reset(&styles->knob); - lv_style_set_bg_color(&styles->knob, color_primary_accent); + lv_style_set_bg_color(&styles->knob, color_primary); lv_style_set_bg_opa(&styles->knob, LV_OPA_COVER); lv_style_set_pad_all(&styles->knob, LV_DPX(6)); lv_style_set_radius(&styles->knob, LV_RADIUS_CIRCLE); @@ -379,19 +391,19 @@ static void style_init(void) #if LV_USE_ARC style_init_reset(&styles->arc_indic); - lv_style_set_arc_color(&styles->arc_indic, COLOR_GREY); + lv_style_set_arc_color(&styles->arc_indic, color_grey); lv_style_set_arc_width(&styles->arc_indic, LV_DPX(15)); lv_style_set_arc_rounded(&styles->arc_indic, true); style_init_reset(&styles->arc_indic_primary); - lv_style_set_arc_color(&styles->arc_indic_primary, color_primary_accent); + lv_style_set_arc_color(&styles->arc_indic_primary, color_primary); #endif #if LV_USE_CHECKBOX style_init_reset(&styles->cb_marker); lv_style_set_pad_all(&styles->cb_marker, LV_DPX(3)); lv_style_set_border_width(&styles->cb_marker, BORDER_WIDTH); - lv_style_set_border_color(&styles->cb_marker, color_primary_accent); + lv_style_set_border_color(&styles->cb_marker, color_primary); lv_style_set_bg_color(&styles->cb_marker, lv_color_white()); lv_style_set_bg_opa(&styles->cb_marker, LV_OPA_COVER); lv_style_set_radius(&styles->cb_marker, RADIUS_DEFAULT / 2); @@ -405,19 +417,20 @@ static void style_init(void) #if LV_USE_SWITCH style_init_reset(&styles->switch_knob); lv_style_set_pad_all(&styles->switch_knob, - LV_DPX(4)); + lv_style_set_bg_color(&styles->switch_knob, lv_color_white()); #endif #if LV_USE_LINE style_init_reset(&styles->line); lv_style_set_line_width(&styles->line, 1); - lv_style_set_line_color(&styles->line, COLOR_SCR_TEXT); + lv_style_set_line_color(&styles->line, color_text); #endif #if LV_USE_CHART style_init_reset(&styles->chart_bg); lv_style_set_border_post(&styles->chart_bg, false); lv_style_set_pad_column(&styles->chart_bg, LV_DPX(10)); - lv_style_set_line_color(&styles->chart_bg, COLOR_GREY); + lv_style_set_line_color(&styles->chart_bg, color_grey); style_init_reset(&styles->chart_series); lv_style_set_line_width(&styles->chart_series, LV_DPX(3)); @@ -433,7 +446,7 @@ static void style_init(void) style_init_reset(&styles->chart_ticks); lv_style_set_line_width(&styles->chart_ticks, LV_DPX(1)); - lv_style_set_line_color(&styles->chart_ticks, COLOR_SCR_TEXT); + lv_style_set_line_color(&styles->chart_ticks, color_text); lv_style_set_pad_all(&styles->chart_ticks, LV_DPX(2)); lv_style_set_text_color(&styles->chart_ticks, lv_color_grey()); #endif @@ -441,13 +454,13 @@ static void style_init(void) #if LV_USE_METER style_init_reset(&styles->meter_marker); lv_style_set_line_width(&styles->meter_marker, LV_DPX(5)); - lv_style_set_line_color(&styles->meter_marker, lv_color_grey_darken_4()); + lv_style_set_line_color(&styles->meter_marker, color_text); lv_style_set_size(&styles->meter_marker, LV_DPX(20)); lv_style_set_pad_left(&styles->meter_marker, LV_DPX(15)); style_init_reset(&styles->meter_indic); lv_style_set_radius(&styles->meter_indic, LV_RADIUS_CIRCLE); - lv_style_set_bg_color(&styles->meter_indic, lv_color_grey_darken_4()); + lv_style_set_bg_color(&styles->meter_indic, color_text); lv_style_set_bg_opa(&styles->meter_indic, LV_OPA_COVER); lv_style_set_size(&styles->meter_indic, LV_DPX(15)); #endif @@ -455,13 +468,13 @@ static void style_init(void) #if LV_USE_TABLE style_init_reset(&styles->table_cell); lv_style_set_border_width(&styles->table_cell, LV_DPX(1)); - lv_style_set_border_color(&styles->table_cell, color_primary_muted); + lv_style_set_border_color(&styles->table_cell, color_grey); lv_style_set_border_side(&styles->table_cell, LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_BOTTOM ); #endif #if LV_USE_TEXTAREA style_init_reset(&styles->ta_cursor); - lv_style_set_border_color(&styles->ta_cursor, COLOR_SCR_TEXT); + lv_style_set_border_color(&styles->ta_cursor, color_text); lv_style_set_border_width(&styles->ta_cursor, LV_DPX(2)); lv_style_set_pad_left(&styles->ta_cursor, LV_DPX(1)); lv_style_set_border_side(&styles->ta_cursor, LV_BORDER_SIDE_LEFT); @@ -479,8 +492,8 @@ static void style_init(void) style_init_reset(&styles->calendar_day); lv_style_set_border_width(&styles->calendar_day, LV_DPX(1)); - lv_style_set_border_color(&styles->calendar_day, color_primary_muted); - lv_style_set_bg_opa(&styles->calendar_day, LV_OPA_COVER); + lv_style_set_border_color(&styles->calendar_day, color_grey); + lv_style_set_bg_opa(&styles->calendar_day, LV_OPA_20); #endif #if LV_USE_COLORWHEEL @@ -501,7 +514,7 @@ static void style_init(void) #if LV_USE_TABVIEW style_init_reset(&styles->tab_btn); - lv_style_set_border_color(&styles->tab_btn, color_primary_accent); + lv_style_set_border_color(&styles->tab_btn, color_primary); lv_style_set_border_width(&styles->tab_btn, BORDER_WIDTH * 2); lv_style_set_border_side(&styles->tab_btn, LV_BORDER_SIDE_BOTTOM); #endif @@ -515,7 +528,7 @@ static void style_init(void) style_init_reset(&styles->list_btn); lv_style_set_border_width(&styles->list_btn, LV_DPX(1)); - lv_style_set_border_color(&styles->list_btn, color_primary_muted); + lv_style_set_border_color(&styles->list_btn, color_grey); lv_style_set_border_side(&styles->list_btn, LV_BORDER_SIDE_BOTTOM); lv_style_set_pad_all(&styles->list_btn, PAD_SMALL); lv_style_set_pad_column(&styles->list_btn, PAD_SMALL); @@ -544,7 +557,7 @@ static void style_init(void) * GLOBAL FUNCTIONS **********************/ -lv_theme_t * lv_theme_default_init(lv_disp_t * disp, lv_color_palette_t palette_primary, lv_color_palette_t palette_secondary, +lv_theme_t * lv_theme_default_init(lv_disp_t * disp, lv_color_palette_t palette_primary, lv_color_palette_t palette_secondary, bool dark, const lv_font_t * font_small, const lv_font_t * font_normal, const lv_font_t * font_large) { @@ -567,6 +580,7 @@ lv_theme_t * lv_theme_default_init(lv_disp_t * disp, lv_color_palette_t palette_ theme.font_normal = font_normal; theme.font_large = font_large; theme.apply_cb = theme_apply; + theme.flags = dark ? MODE_DARK : 0; style_init(); diff --git a/src/extra/themes/default/lv_theme_default.h b/src/extra/themes/default/lv_theme_default.h index 02d010d17..0d5140b30 100644 --- a/src/extra/themes/default/lv_theme_default.h +++ b/src/extra/themes/default/lv_theme_default.h @@ -37,7 +37,7 @@ extern "C" { * @return a pointer to reference this theme later */ lv_theme_t * lv_theme_default_init(lv_disp_t * disp, lv_color_palette_t palette_primary, lv_color_palette_t palette_secondary, - const lv_font_t * font_small, const lv_font_t * font_normal, const lv_font_t * font_large); + bool dark, const lv_font_t * font_small, const lv_font_t * font_normal, const lv_font_t * font_large); bool lv_theme_default_is_inited(void); diff --git a/src/hal/lv_hal_disp.c b/src/hal/lv_hal_disp.c index f2b39920b..9f7fe5573 100644 --- a/src/hal/lv_hal_disp.c +++ b/src/hal/lv_hal_disp.c @@ -132,7 +132,7 @@ lv_disp_t * lv_disp_drv_register(lv_disp_drv_t * driver) #if LV_USE_THEME_DEFAULT if(lv_theme_default_is_inited() == false) { - disp->theme = lv_theme_default_init(disp, LV_COLOR_PALETTE_BLUE, LV_COLOR_PALETTE_CYAN, LV_FONT_DEFAULT, LV_FONT_DEFAULT, LV_FONT_DEFAULT); + disp->theme = lv_theme_default_init(disp, LV_COLOR_PALETTE_BLUE, LV_COLOR_PALETTE_CYAN, false, LV_FONT_DEFAULT, LV_FONT_DEFAULT, LV_FONT_DEFAULT); } #endif