griefith/test2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

UI: Theme: Use tab widget colors for sidebar tabs

Browse Source 
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
This commit is contained in:
Pablo Vazquez
2025-06-12 19:09:23 +02:00
committed by Pablo Vazquez
parent 72e49ba20a
commit e8735c3203
7 changed files with 33 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
release/datafiles/userdef/userdef_default_theme.c
View File

@@ -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),

54
scripts/presets/interface_theme/Blender_Light.xml
View File

@@ -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"
>
<gradients>
<ThemeGradientColors
@@ -552,10 +549,7 @@
button_text_hi="#000000"
navigation_bar="#00000000"
execution_buts="#00000000"
tab_active="#6697e6"
tab_inactive="#cccccc"
tab_back="#999999ff"
tab_outline="#999999ff"
>
<panelcolors>
<ThemePanelColors
@@ -598,10 +592,7 @@
button_text_hi="#000000"
navigation_bar="#00000000"
execution_buts="#999999e6"
tab_active="#6697e6"
tab_inactive="#cccccc"
tab_back="#999999ff"
tab_outline="#999999ff"
>
<panelcolors>
<ThemePanelColors
@@ -657,10 +648,7 @@
button_text_hi="#000000"
navigation_bar="#00000000"
execution_buts="#00000000"
tab_active="#6697e6"
tab_inactive="#535353"
tab_back="#404040ff"
tab_outline="#3c3c3cff"
>
<panelcolors>
<ThemePanelColors
@@ -735,10 +723,7 @@
button_text_hi="#000000"
navigation_bar="#00000000"
execution_buts="#00000000"
tab_active="#6697e6"
tab_inactive="#535353"
tab_back="#404040ff"
tab_outline="#3c3c3cff"
>
<panelcolors>
<ThemePanelColors
@@ -822,10 +807,7 @@
button_text_hi="#000000"
navigation_bar="#00000000"
execution_buts="#00000000"
tab_active="#b3b3b3"
tab_inactive="#8e8e8e"
tab_back="#656565ff"
tab_outline="#4d4d4dff"
>
<panelcolors>
<ThemePanelColors
@@ -901,10 +883,7 @@
button_text_hi="#000000"
navigation_bar="#00000000"
execution_buts="#00000000"
tab_active="#b3b3b3"
tab_inactive="#8e8e8e"
tab_back="#656565ff"
tab_outline="#4d4d4dff"
>
<panelcolors>
<ThemePanelColors
@@ -947,10 +926,7 @@
button_text_hi="#000000"
navigation_bar="#a6a6a6ff"
execution_buts="#00000000"
tab_active="#6697e6"
tab_inactive="#535353"
tab_back="#404040ff"
tab_outline="#3c3c3cff"
>
<panelcolors>
<ThemePanelColors
@@ -994,10 +970,7 @@
button_text_hi="#000000"
navigation_bar="#00000000"
execution_buts="#00000000"
tab_active="#6697e6"
tab_inactive="#535353"
tab_back="#404040ff"
tab_outline="#3c3c3cff"
>
<panelcolors>
<ThemePanelColors
@@ -1062,10 +1035,7 @@
button_text_hi="#000000"
navigation_bar="#00000000"
execution_buts="#00000000"
tab_active="#b3b3b3"
tab_inactive="#8e8e8e"
tab_back="#656565ff"
tab_outline="#4d4d4dff"
>
<panelcolors>
<ThemePanelColors
@@ -1113,10 +1083,7 @@
button_text_hi="#000000"
navigation_bar="#00000000"
execution_buts="#00000000"
tab_active="#6697e6"
tab_inactive="#535353"
tab_back="#404040ff"
tab_outline="#3c3c3cff"
>
<panelcolors>
<ThemePanelColors
@@ -1159,10 +1126,7 @@
button_text_hi="#000000"
navigation_bar="#00000000"
execution_buts="#00000000"
tab_active="#6697e6"
tab_inactive="#535353"
tab_back="#404040ff"
tab_outline="#3c3c3cff"
>
<panelcolors>
<ThemePanelColors
@@ -1193,10 +1157,7 @@
button_text_hi="#000000"
navigation_bar="#b3b3b3ff"
execution_buts="#b3b3b3ff"
tab_active="#6697e6"
tab_inactive="#535353"
tab_back="#404040ff"
tab_outline="#3c3c3cff"
>
<panelcolors>
<ThemePanelColors
@@ -1234,10 +1195,7 @@
button_text_hi="#ffffff"
navigation_bar="#00000000"
execution_buts="#00000000"
tab_active="#6697e6"
tab_inactive="#535353"
tab_back="#404040ff"
tab_outline="#3c3c3cff"
>
<panelcolors>
<ThemePanelColors
@@ -1300,10 +1258,7 @@
button_text_hi="#000000"
navigation_bar="#00000000"
execution_buts="#00000000"
tab_active="#6697e6"
tab_inactive="#535353"
tab_back="#404040ff"
tab_outline="#3c3c3cff"
>
<panelcolors>
<ThemePanelColors
@@ -1343,10 +1298,7 @@
button_text_hi="#000000"
navigation_bar="#00000000"
execution_buts="#00000000"
tab_active="#446499"
tab_inactive="#28292d"
tab_back="#28292dff"
tab_outline="#28292dff"
>
<panelcolors>
<ThemePanelColors
@@ -1377,10 +1329,7 @@
button_text_hi="#000000"
navigation_bar="#00000000"
execution_buts="#00000000"
tab_active="#446499"
tab_inactive="#28292d"
tab_back="#28292dff"
tab_outline="#28292dff"
>
<panelcolors>
<ThemePanelColors
@@ -1413,10 +1362,7 @@
button_text_hi="#000000"
navigation_bar="#00000000"
execution_buts="#999999e6"
tab_active="#6697e6"
tab_inactive="#cccccc"
tab_back="#999999ff"
tab_outline="#999999ff"
>
<panelcolors>
<ThemePanelColors

5
source/blender/editors/include/UI_resources.hh
View File

@@ -57,10 +57,15 @@ enum ThemeColorID {
TH_TEXT,
TH_TEXT_HI,
TH_TITLE,
/* Tabs. */
TH_TAB_TEXT,
TH_TAB_TEXT_HI,
TH_TAB_ACTIVE,
TH_TAB_INACTIVE,
TH_TAB_BACK,
TH_TAB_OUTLINE,
TH_TAB_OUTLINE_ACTIVE,
TH_HEADER,
TH_HEADER_TEXT,

18
source/blender/editors/interface/interface_panel.cc
View File

@@ -1387,23 +1387,24 @@ void UI_panel_category_draw_all(ARegion *region, const char *category_id_active)
/* Primary theme colors. */
uchar theme_col_back[4];
uchar theme_col_text[3];
uchar theme_col_text_hi[3];
/* Tab colors. */
uchar theme_col_tab_bg[4];
uchar theme_col_tab_text[3];
uchar theme_col_tab_text_sel[3];
float theme_col_tab_active[4];
float theme_col_tab_inactive[4];
float theme_col_tab_outline[4];
float theme_col_tab_outline_sel[4];
UI_GetThemeColor4ubv(TH_BACK, theme_col_back);
UI_GetThemeColor3ubv(TH_TEXT, theme_col_text);
UI_GetThemeColor3ubv(TH_TEXT_HI, theme_col_text_hi);
UI_GetThemeColor3ubv(TH_TAB_TEXT, theme_col_tab_text);
UI_GetThemeColor3ubv(TH_TAB_TEXT_HI, theme_col_tab_text_sel);
UI_GetThemeColor4ubv(TH_TAB_BACK, theme_col_tab_bg);
UI_GetThemeColor4fv(TH_TAB_ACTIVE, theme_col_tab_active);
UI_GetThemeColor4fv(TH_TAB_INACTIVE, theme_col_tab_inactive);
UI_GetThemeColor4fv(TH_TAB_OUTLINE, theme_col_tab_outline);
UI_GetThemeColor4fv(TH_TAB_OUTLINE_ACTIVE, theme_col_tab_outline_sel);
is_alpha = (region->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);

22
source/blender/editors/interface/resources.cc
View File

@@ -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:

4
source/blender/makesdna/DNA_theme_types.h
View File

@@ -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. */

17
source/blender/makesrna/intern/rna_userdef.cc
View File

@@ -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)