PaneItem and TabView Color

[mahery01]

Hello to all,
How to change the background PaneItem and selected TabView?

[bdlukaa]

You can provide a navigationPaneTheme in FluentTheme:

theme: FluentThemeData(
  navigationPaneTheme: NavigationPaneThemeData(
    tileColor: ButtonState.resolveWith((states) {
      return ...; // return color here based on the state.
    }),
  ),
)

We don't have an option to change background color on TabView. One hack is to change the FluentThemeData.resources values that are used in TabView.

fluent_ui/lib/src/controls/navigation/tab_view.dart

Lines 872 to 899 in 52c0b0e

	final foregroundColor = ButtonState.resolveWith<Color>((states) {
	if (widget.selected) {
	return res.textFillColorPrimary;
	} else if (states.isPressing) {
	return res.textFillColorSecondary;
	} else if (states.isHovering) {
	return res.textFillColorPrimary;
	} else if (states.isDisabled) {
	return res.textFillColorDisabled;
	} else {
	return res.textFillColorSecondary;
	}
	}).resolve(states);
	/// https://github.com/microsoft/microsoft-ui-xaml/blob/main/dev/TabView/TabView_themeresources.xaml#L10-L14
	final backgroundColor = ButtonState.resolveWith<Color>((states) {
	if (widget.selected) {
	return res.solidBackgroundFillColorTertiary;
	} else if (states.isPressing) {
	return res.layerOnMicaBaseAltFillColorDefault;
	} else if (states.isHovering) {
	return res.layerOnMicaBaseAltFillColorSecondary;
	} else if (states.isDisabled) {
	return res.layerOnMicaBaseAltFillColorTransparent;
	} else {
	return res.layerOnMicaBaseAltFillColorTransparent;
	}
	}).resolve(states);

[mahery01]

@bdlukaa
Thank you for your response. Could you please provide an example for both questions? I've tried but I can't seem to do it. Thank you in advance

[bdlukaa]

¹ is provided at the previous response.

²

FluentTheme(
  data: FluentTheme.of(context).copyWith(
    resources: ResourceDictionary(
      layerOnMicaBaseAltFillColorTransparent: Color(...),
      ...,
    ),
  ),
  child: TabView( ... )
),

The previous response shows what colors are used on the TabView.