View > header: styles is not applied from Theme

[Mohammad-Al-Refai]

I am trying to style View > header from Theme, example: Theme:

Themes:
  - DefaultTheme:
      default: true

DefaultTheme:
  label: Default theme
  Tokens:
    Colors:
      primary: "#0F216B"
      background: "#fafafa"

  Styles:
    # Defaults
    View:
      backgroundColor: ${Colors.background}
      header:
        styles:
          color: ${Colors.primary}
          backgroundColor: white
          surfaceTintColor: white

View:

View:
    styles:
      scrollableView: true
    header:
      title: Home
    body:
      Column:
        styles:
          padding: 24
          gap: 8
        children:
          - Text:
              text: Hi

The changes doesn't applied to the header

[kmahmood74]

currently the only way to style the header in themes is to use classes. For example -

  Styles:
    # Defaults
    .header:
      color: ${Colors.primary}
      backgroundColor: green
      surfaceTintColor: black

View:
  styles:
    useSafeArea: true

  # Optional - set the header for the screen
  header:
    titleText: Home
    className: header

we can keep your ticket open and see when we can get to it. But you shoud not be blocked