Liquid Glass Theme

FinOps Center 26.4.0 introduces the Liquid Glass theme system with two custom QuickSight themes: agent-bill-light (based on CLASSIC) and agent-bill-dark (based on MIDNIGHT). Both themes use the Open Sans font family with sans-serif fallback and feature a teal/amber accent palette with FBBF24 (amber/gold) as the accent foreground color. The dark theme is the default across the entire FinOps Center application. Themes are deployed at the account level using the update-account-settings API.

Below are the CLI Commands to install the Agent Bill Light and Dark Liquid Glass Themes with the Account Permissions.

aws quicksight create-theme \
    --aws-account-id AWSACCOUNT# \
    --theme-id "agent-bill-light" \
    --name "Agent Bill Light" \
    --base-theme-id "CLASSIC" \
    --configuration '{"DataColorPalette":{"Colors":["#0D9488","#F97316","#3B82F6","#10B981","#8B5CF6","#EC4899","#06B6D4","#F59E0B","#6366F1","#14B8A6"],"MinMaxGradient":["#CCFBF1","#0D9488"],"EmptyFillColor":"#E5E7EB"},"UIColorPalette":{"PrimaryForeground":"#1F2937","PrimaryBackground":"#FFFFFF","SecondaryForeground":"#6B7280","SecondaryBackground":"#F8FAFC","Accent":"#0D9488","AccentForeground":"#FFFFFF","Danger":"#EF4444","DangerForeground":"#FFFFFF","Warning":"#F97316","WarningForeground":"#FFFFFF","Success":"#10B981","SuccessForeground":"#FFFFFF","Dimension":"#3B82F6","DimensionForeground":"#FFFFFF","Measure":"#0D9488","MeasureForeground":"#FFFFFF"},"Sheet":{"Tile":{"Border":{"Show":false}},"TileLayout":{"Gutter":{"Show":true},"Margin":{"Show":true}}},"Typography":{"FontFamilies":[{"FontFamily":"Open Sans"},{"FontFamily":"sans-serif"}]}}' \
    --region us-east-1

// aws quicksight create-theme \
    --aws-account-id AWSACCOUNT# \
    --theme-id "agent-bill-dark" \
    --name "Agent Bill Dark" \
    --base-theme-id "MIDNIGHT" \
    --configuration '{"DataColorPalette":{"Colors":["#14B8A6","#F97316","#3B82F6","#10B981","#A78BFA","#F472B6","#22D3EE","#FBBF24","#818CF8","#2DD4BF"],"MinMaxGradient":["#134E4A","#14B8A6"],"EmptyFillColor":"#374151"},"UIColorPalette":{"PrimaryForeground":"#FFFFFF","PrimaryBackground":"#0F172A","SecondaryForeground":"#FFFFFF","SecondaryBackground":"#1E293B","Accent":"#14B8A6","AccentForeground":"#FFFFFF","Danger":"#F87171","DangerForeground":"#FFFFFF","Warning":"#F97316","WarningForeground":"#FFFFFF","Success":"#10B981","SuccessForeground":"#FFFFFF","Dimension":"#FFFFFF","DimensionForeground":"#FFFFFF","Measure":"#FFFFFF","MeasureForeground":"#FFFFFF"},"Sheet":{"Tile":{"Border":{"Show":false}},"TileLayout":{"Gutter":{"Show":true},"Margin":{"Show":true}}},"Typography":{"FontFamilies":[{"FontFamily":"Open Sans"},{"FontFamily":"sans-serif"}]}}' \
    --region us-east-1

Allow Permissions

Replace light for dark for light mode permissions to enable both themes.

// aws quicksight update-theme-permissions \
    --aws-account-id AWSACCOUNT# \
    --theme-id "agent-bill-dark" \
    --grant-permissions '[
        {
            "Principal": "arn:aws:quicksight:us-east-1:AWSACCOUNT#:namespace/default",
            "Actions": [
                "quicksight:DescribeTheme",
                "quicksight:DescribeThemeAlias",
                "quicksight:ListThemeAliases",
                "quicksight:ListThemeVersions"
            ]
        }
    ]' \
    --region us-east-1

Theme Deployment

The default theme is set at the account level using the update-account-settings API. Once the themes are created and permissions granted, set the dark theme as the account default to apply it across all dashboards and embedded experiences automatically.

Known Limitations

QuickSight themes do not fully apply to the Q/Chat visuals panel within embedded experiences. The chat response area and generated visuals may not inherit the custom theme colors. As a workaround, brand customization is used instead of themes for the embedded chat component. Theme inheritance does not propagate to all QuickChat UI elements, so the FinOps Center application CSS applies additional dark mode styling to ensure visual consistency across the full interface.