From e8735c32037c571c8bcab7d2ad569a5c66ec9ba5 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 12 Jun 2025 19:09:23 +0200 Subject: [PATCH] UI: Theme: Use tab widget colors for sidebar tabs Make sidebar tabs use the `wcol_tab` widget colors, instead per editor settings. Simplifying theme tweaking and the following benefits: * Set colors in one place, affect all tabs. * Support for text colors for inactive and active tabs. * Support for the new `Outline Selected` property. * In the future sidebar tabs could support `Shaded` style. The tabs region background color remains per-editor, to be able to customize it in a way that fits the surrounding colors (sidebar region, header, or navigation bar background). See pull request for screenshots and details. Pull Request: https://projects.blender.org/blender/blender/pulls/140288 --- .../datafiles/userdef/userdef_default_theme.c | 54 ------------------- .../presets/interface_theme/Blender_Light.xml | 54 ------------------- .../blender/editors/include/UI_resources.hh | 5 ++ .../editors/interface/interface_panel.cc | 18 ++++--- source/blender/editors/interface/resources.cc | 22 +++++--- source/blender/makesdna/DNA_theme_types.h | 4 +- source/blender/makesrna/intern/rna_userdef.cc | 17 ------ 7 files changed, 33 insertions(+), 141 deletions(-) diff --git a/release/datafiles/userdef/userdef_default_theme.c b/release/datafiles/userdef/userdef_default_theme.c index b5e89d97195..cbe13eac6d9 100644 --- a/release/datafiles/userdef/userdef_default_theme.c +++ b/release/datafiles/userdef/userdef_default_theme.c @@ -277,10 +277,7 @@ const bTheme U_theme_default = { .header = RGBA(0x303030b3), .header_text = RGBA(0xeeeeeeff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x30303000), .button_title = RGBA(0xccccccff), .button_text = RGBA(0xccccccff), @@ -307,10 +304,7 @@ const bTheme U_theme_default = { .header = RGBA(0x303030b3), .header_text = RGBA(0xeeeeeeff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x30303000), .button_title = RGBA(0xffffffff), .button_text = RGBA(0xccccccff), @@ -410,10 +404,7 @@ const bTheme U_theme_default = { .header = RGBA(0x303030b3), .header_text = RGBA(0xeeeeeeff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x30303000), .button_title = RGBA(0xffffffff), .button_text = RGBA(0xccccccff), @@ -439,10 +430,7 @@ const bTheme U_theme_default = { .header = RGBA(0x303030b3), .header_text = RGBA(0xeeeeeeff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x30303000), .button_title = RGBA(0xffffffff), .button_text = RGBA(0xccccccff), @@ -496,10 +484,7 @@ const bTheme U_theme_default = { .header = RGBA(0x303030b3), .header_text = RGBA(0xeeeeeeff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x30303000), .button_title = RGBA(0xffffffff), .button_text = RGBA(0xccccccff), @@ -534,10 +519,7 @@ const bTheme U_theme_default = { .header = RGBA(0x303030b3), .header_text = RGBA(0xeeeeeeff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x22222200), .button_title = RGBA(0xffffffff), .button_text = RGBA(0xccccccff), @@ -599,10 +581,7 @@ const bTheme U_theme_default = { .header = RGBA(0x303030b3), .header_text = RGBA(0xeeeeeeff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x30303000), .button_title = RGBA(0xffffffff), .button_text = RGBA(0xccccccff), @@ -655,10 +634,7 @@ const bTheme U_theme_default = { .header = RGBA(0x303030b3), .header_text = RGBA(0xeeeeeeff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x30303000), .button_title = RGBA(0xffffffff), .button_text = RGBA(0xccccccff), @@ -730,10 +706,7 @@ const bTheme U_theme_default = { .header = RGBA(0x303030b3), .header_text = RGBA(0xeeeeeeff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x30303000), .button_title = RGBA(0xffffffff), .button_text = RGBA(0xccccccff), @@ -791,10 +764,7 @@ const bTheme U_theme_default = { .header = RGBA(0x303030b3), .header_text = RGBA(0xeeeeeeff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x30303000), .button_title = RGBA(0xffffffff), .button_text = RGBA(0xccccccff), @@ -830,10 +800,7 @@ const bTheme U_theme_default = { .header = RGBA(0x282828b3), .header_text = RGBA(0xeeeeeeff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x30303000), .button_title = RGBA(0xffffffff), .button_text = RGBA(0xccccccff), @@ -864,10 +831,7 @@ const bTheme U_theme_default = { .header = RGBA(0x1d1d1db3), .header_text = RGBA(0xeeeeeeff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x30303000), .button_title = RGBA(0xffffffff), .button_text = RGBA(0xccccccff), @@ -931,10 +895,7 @@ const bTheme U_theme_default = { .header = RGBA(0x303030b3), .header_text = RGBA(0xeeeeeeff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x1d1d1dff), .button_title = RGBA(0xffffffff), .button_text = RGBA(0xccccccff), @@ -958,10 +919,7 @@ const bTheme U_theme_default = { .header = RGBA(0x303030b3), .header_text = RGBA(0xeeeeeeff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x30303000), .button_title = RGBA(0xffffffff), .button_text = RGBA(0xccccccff), @@ -991,10 +949,7 @@ const bTheme U_theme_default = { .header = RGBA(0x303030b3), .header_text = RGBA(0xeeeeeeff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x30303000), .button_title = RGBA(0xffffffff), .button_text = RGBA(0xccccccff), @@ -1049,10 +1004,7 @@ const bTheme U_theme_default = { .header = RGBA(0x181818b3), .header_text = RGBA(0xeeeeeeff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x30303000), .button_title = RGBA(0xffffffff), .button_text = RGBA(0xccccccff), @@ -1077,10 +1029,7 @@ const bTheme U_theme_default = { .header = RGBA(0x181818b3), .header_text = RGBA(0x888888ff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x30303000), .button_text = RGBA(0xcccccc00), .button_text_hi = RGBA(0xffffffff), @@ -1104,10 +1053,7 @@ const bTheme U_theme_default = { .header = RGBA(0x303030b3), .header_text = RGBA(0xeeeeeeff), .header_text_hi = RGBA(0xffffffff), - .tab_active = RGBA(0x303030ff), - .tab_inactive = RGBA(0x1d1d1dff), .tab_back = RGBA(0x18181800), - .tab_outline = RGBA(0x3d3d3dff), .button = RGBA(0x30303000), .button_title = RGBA(0xffffffff), .button_text = RGBA(0xccccccff), diff --git a/scripts/presets/interface_theme/Blender_Light.xml b/scripts/presets/interface_theme/Blender_Light.xml index 85980512bef..43e6aa40b38 100644 --- a/scripts/presets/interface_theme/Blender_Light.xml +++ b/scripts/presets/interface_theme/Blender_Light.xml @@ -470,10 +470,7 @@ button_text_hi="#000000" navigation_bar="#00000000" execution_buts="#00000000" - tab_active="#b3b3b3" - tab_inactive="#8e8e8e" tab_back="#656565ff" - tab_outline="#4d4d4dff" > overlap && (theme_col_back[3] != 255)); @@ -1528,7 +1529,10 @@ void UI_panel_category_draw_all(ARegion *region, const char *category_id_active) true, tab_curve_radius, is_active ? theme_col_tab_active : theme_col_tab_inactive); - UI_draw_roundbox_4fv(&box_rect, false, tab_curve_radius, theme_col_tab_outline); + UI_draw_roundbox_4fv(&box_rect, + false, + tab_curve_radius, + is_active ? theme_col_tab_outline_sel : theme_col_tab_outline); /* Disguise the outline on one side to join the tab to the panel. */ if (!region->overlap) { @@ -1558,7 +1562,7 @@ void UI_panel_category_draw_all(ARegion *region, const char *category_id_active) rct->xmin + text_v_ofs - text_size_offset, is_left ? rct->ymin + tab_v_pad_text : rct->ymax - tab_v_pad_text, 0.0f); - BLF_color3ubv(fontid, is_active ? theme_col_text_hi : theme_col_text); + BLF_color3ubv(fontid, is_active ? theme_col_tab_text_sel : theme_col_tab_text); if (fstyle->shadow) { BLF_enable(fontid, BLF_SHADOW); diff --git a/source/blender/editors/interface/resources.cc b/source/blender/editors/interface/resources.cc index cee0b9002bc..a0f67d416ab 100644 --- a/source/blender/editors/interface/resources.cc +++ b/source/blender/editors/interface/resources.cc @@ -291,17 +291,27 @@ const uchar *UI_ThemeGetColorPtr(bTheme *btheme, int spacetype, int colorid) cp = ts->button_text_hi; break; + case TH_TAB_TEXT: + cp = btheme->tui.wcol_tab.text; + break; + case TH_TAB_TEXT_HI: + cp = btheme->tui.wcol_tab.text_sel; + break; case TH_TAB_ACTIVE: - cp = ts->tab_active; + cp = btheme->tui.wcol_tab.inner_sel; break; case TH_TAB_INACTIVE: - cp = ts->tab_inactive; - break; - case TH_TAB_BACK: - cp = ts->tab_back; + cp = btheme->tui.wcol_tab.inner; break; case TH_TAB_OUTLINE: - cp = ts->tab_outline; + cp = btheme->tui.wcol_tab.outline; + break; + case TH_TAB_OUTLINE_ACTIVE: + cp = btheme->tui.wcol_tab.outline_sel; + break; + case TH_TAB_BACK: + /* Tab background is set per editor. */ + cp = ts->tab_back; break; case TH_SHADE1: diff --git a/source/blender/makesdna/DNA_theme_types.h b/source/blender/makesdna/DNA_theme_types.h index 7daba45f30d..0988940a496 100644 --- a/source/blender/makesdna/DNA_theme_types.h +++ b/source/blender/makesdna/DNA_theme_types.h @@ -242,10 +242,8 @@ typedef struct ThemeSpace { unsigned char header_text_hi[4]; /* region tabs */ - unsigned char tab_active[4]; - unsigned char tab_inactive[4]; unsigned char tab_back[4]; - unsigned char tab_outline[4]; + char _pad2[4]; /* button/tool regions */ /** Region background. */ diff --git a/source/blender/makesrna/intern/rna_userdef.cc b/source/blender/makesrna/intern/rna_userdef.cc index 6fd481f9ace..bac16f2300f 100644 --- a/source/blender/makesrna/intern/rna_userdef.cc +++ b/source/blender/makesrna/intern/rna_userdef.cc @@ -2204,27 +2204,10 @@ static void rna_def_userdef_theme_space_common(StructRNA *srna) RNA_def_property_update(prop, 0, "rna_userdef_theme_update"); /* tabs */ - prop = RNA_def_property(srna, "tab_active", PROP_FLOAT, PROP_COLOR_GAMMA); - RNA_def_property_array(prop, 3); - RNA_def_property_ui_text(prop, "Tab Active", ""); - RNA_def_property_update(prop, 0, "rna_userdef_theme_update"); - - prop = RNA_def_property(srna, "tab_inactive", PROP_FLOAT, PROP_COLOR_GAMMA); - RNA_def_property_array(prop, 3); - RNA_def_property_ui_text(prop, "Tab Inactive", ""); - RNA_def_property_update(prop, 0, "rna_userdef_theme_update"); - prop = RNA_def_property(srna, "tab_back", PROP_FLOAT, PROP_COLOR_GAMMA); RNA_def_property_array(prop, 4); RNA_def_property_ui_text(prop, "Tab Background", ""); RNA_def_property_update(prop, 0, "rna_userdef_theme_update"); - - prop = RNA_def_property(srna, "tab_outline", PROP_FLOAT, PROP_COLOR_GAMMA); - RNA_def_property_array(prop, 4); - RNA_def_property_ui_text(prop, "Tab Outline", ""); - RNA_def_property_update(prop, 0, "rna_userdef_theme_update"); - - // } } static void rna_def_userdef_theme_space_gradient(BlenderRNA *brna)