# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.finopscenter.com/agent-bill-amazon-quickchat-for-finops-center/functional/liquid-glass-theme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.