Is a preconfigured dark theme available for Blazor FlexGrid?

Is a preconfigured dark theme available for Blazor FlexGrid?

Posted by: calvin on 22 October 2024, 9:57 pm EST

• 

  calvin

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 22 October 2024, 9:57 pm EST

  Are CSS theme packs available for the C1 Blazor FlexGrid component? I.e., I seek a comprehensive styling specification for a dark theme.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 23 October 2024, 2:31 am EST

  Hi,

  Currently, there are no predefined themes for our Blazor Components. However, it is present in our product backlog with internal tracking id: C1XAML-33011.

  I have asked the dev team if there is an ETA for this. I will let you know when there is an update on this from the dev team.

  Regards,

  Ankit

• 

  calvin

  • Post Options:
  • Link
    Copy

  Posted 23 October 2024, 11:00 am EST

  Thanks for the feedback, Ankit!

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 23 October 2024, 11:35 pm EST

  Hi,

  The developers have mentioned that currently there is no ETA for the themes for the Blazor Components.

  I will let you know when there is any update on this from the dev team.

  Regards,

  Ankit

• 

  calvin

  • Post Options:
  • Link
    Copy

  Posted 14 November 2024, 11:59 am EST

  In case anyone stumbles across this post who would like to embed the FlexGrid in a Fluent Blazor Web App template-generated project, the following styles coincide fairly well with that template’s Dark Theme.

  <FlexGrid Style="@("max-height:80vh;color:#ffffff;border: 1px solid #595959")"
            CellStyle="@("padding:0 10px;color:#a4a4a4")"
            GridLinesBrush="@("#595959")"
            ColumnHeaderGridLinesBrush="@("#595959")"
            RowHeaderGridLinesBrush="@("#595959")"
            TopLeftHeaderGridLinesBrush="@("#595959")"
            RowStyle="@("background-color:#383838;margin 10px;")"
            CursorStyle="@("background-color:rgba(47,47,47,0.4);color:#ffffff")"
            EditorStyle="@("background-color:#2f2f2f;color:#ffffff")"
            TopLeftHeaderStyle="@("background-color:#2f2f2f")"
            RowHeaderStyle="@("background-color:#2f2f2f;color:#ffffff")"
            RowHeaderSelectedStyle="@("background-color:#4a4a4a")"
            SelectionStyle="@("background-color:#4a4a4a;color:#ffffff")"
            SelectionAdornerStyle="@("border-color:#595959;color:#ffffff")"
            ColumnHeaderStyle="@("text-wrap: wrap;background-image:linear-gradient(to bottom,#2f2f2f,#383838);color:#ffffff;")">
  

  However, the main scrollbar tracks are not dark enough.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 18 November 2024, 5:08 am EST

  Hi Calvin,

  Thank you for providing your valuable feedback on this. You’re correct that the Style properties in FlexGrid can be utilized to create a dark theme.

  This can be used as a workaround until we officially support it.

  Best regards,

  Ankit