1"use strict";(self.webpackChunkholistics_docs=self.webpackChunkholistics_docs||[]).push([["16972"],{72334(e,n,s){s.r(n),s.d(n,{metadata:()=>r,default:()=>d,frontMatter:()=>i,contentTitle:()=>l,toc:()=>h,assets:()=>c});var r=JSON.parse('{"id":"docs/admin/dashboard-themes/index","title":"Dashboard Themes","description":"Customize dashboard styles, define dashboard themes","source":"@site/docs/docs/admin/dashboard-themes/index.md","sourceDirName":"docs/admin/dashboard-themes","slug":"/docs/admin/dashboard-themes","permalink":"/docs/admin/dashboard-themes","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Dashboard Themes","description":"Customize dashboard styles, define dashboard themes","sidebar_label":"Dashboard Themes","slug":"/docs/admin/dashboard-themes","image":"https://cdn.holistics.io/canvas/canvas-dashboard-thumbnail.png","toc_max_heading_level":3},"sidebar":"admin","previous":{"title":"Slack","permalink":"/docs/integrations/slack"},"next":{"title":"Theme Builder","permalink":"/docs/admin/dashboard-themes/theme-builder"}}'),t=s(74848),a=s(28453);let i={title:"Dashboard Themes",description:"Customize dashboard styles, define dashboard themes",sidebar_label:"Dashboard Themes",slug:"/docs/admin/dashboard-themes",image:"https://cdn.holistics.io/canvas/canvas-dashboard-thumbnail.png",toc_max_heading_level:3},l,c={},h=[{value:"High-level concepts",id:"high-level-concepts",level:2},{value:"Theme components",id:"theme-components",level:3},{value:"Theme types",id:"theme-types",level:3},{value:"Apply a theme",id:"apply-a-theme",level:2},{value:"Apply a static theme",id:"apply-a-static-theme",level:3},{value:"Apply a dynamic theme",id:"apply-a-dynamic-theme",level:3},{value:"Create a theme",id:"create-a-theme",level:2},{value:"Create a reusable theme",id:"create-a-reusable-theme",level:3},{value:"Create a local theme",id:"create-a-local-theme",level:3},{value:"Set a chart color palette",id:"set-a-chart-color-palette",level:3},{value:"Add custom CSS",id:"add-custom-css",level:3},{value:"Customize individual blocks",id:"customize-individual-blocks",level:2},{value:"Override block styling",id:"override-block-styling",level:3},{value:"Override viz styling",id:"override-viz-styling",level:3},{value:"Reuse theme values",id:"reuse-theme-values",level:2},{value:"Use constants for reusable values",id:"use-constants-for-reusable-values",level:3},{value:"Use AML Dict to avoid namespace pollution",id:"use-aml-dict-to-avoid-namespace-pollution",level:3},{value:"Syntax Reference",id:"syntax-reference",level:2}];function o(e){let n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,a.R)(),...e.components},{TabItem:s,Tabs:r,VideoPlayer:i}=n;return s||m("TabItem",!0),r||m("Tabs",!0),i||m("VideoPlayer",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Themes"})," give you full control over how your dashboards look: typography, colors, spacing, and visualization styling. Define them once to enforce consistent branding across your workspace, apply them ad-hoc to a single dashboard, or set them to switch automatically between light and dark mode."]}),"\n",(0,t.jsx)(n.p,{children:"You can customize:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Typography:"})," Font family and size for text and data labels"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Colors:"})," Dashboard backgrounds, borders, and other UI elements"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Canvas & block styling:"})," Padding, shadows, and background images"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Visualization styling:"})," Tables, KPI metrics, and chart color palettes"]}),"\n"]}),"\n",(0,t.jsx)(i,{src:"https://cdn.holistics.io/product/canvas-dashboard-canvas-dashboard-creative-themes-v2-20240729-166.mp4"}),"\n",(0,t.jsx)(n.h2,{id:"high-level-concepts",children:"High-level concepts"}),"\n",(0,t.jsx)(n.h3,{id:"theme-components",children:"Theme components"}),"\n",(0,t.jsx)(n.p,{children:"Dashboard theme controls the following visual sections of your dashboard:"}),"\n",(0,t.jsx)("img",{alt:"themes-components",title:"Themes components",src:"https://media.holistics.io/a706ab0a-theme-demo.png",width:"800",height:"600"}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{children:"Section"}),(0,t.jsx)(n.th,{children:"Description"})]})}),(0,t.jsxs)(n.tbody,{children:[(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"color"})}),(0,t.jsxs)(n.td,{children:["Default ",(0,t.jsx)(n.a,{href:"/docs/admin/dashboard-themes/color-palettes",children:"color palette"})," for all charts in the dashboard"]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"background"})}
1),(0,t.jsx)(n.td,{children:"Background of the outermost page viewport"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"canvas"})}),(0,t.jsx)(n.td,{children:"Styling for the main canvas area: background, border, shadow, opacity"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"block"})}),(0,t.jsx)(n.td,{children:"Default styling for all blocks: label, text, border, background, shadow, padding, opacity"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"viz"})}),(0,t.jsx)(n.td,{children:"Default styling for data visualizations"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"custom_css"})}),(0,t.jsxs)(n.td,{children:[(0,t.jsx)(n.a,{href:"/docs/admin/dashboard-themes/custom-css",children:"Custom CSS"})," injected into the dashboard"]})]})]})]}),"\n",(0,t.jsxs)(n.p,{children:["See ",(0,t.jsx)(n.a,{href:"/reference/aml/theme",children:"AML Theme Reference"})," for full syntax details."]}),"\n",(0,t.jsx)(n.h3,{id:"theme-types",children:"Theme types"}),"\n",(0,t.jsxs)(n.p,{children:["There are two types of themes in Holistics: ",(0,t.jsx)(n.strong,{children:"reusable themes"}),", and ",(0,t.jsx)(n.strong,{children:"local themes"}),". Each serves different use cases:"]}),"\n",(0,t.jsxs)("table",{children:[(0,t.jsx)("thead",{style:{backgroundColor:"var(--ifm-color-success-contrast-background)"},children:(0,t.jsxs)("tr",{children:[(0,t.jsx)("th",{children:(0,t.jsx)("b",{children:"Name"})}),(0,t.jsx)("th",{children:(0,t.jsx)("b",{children:"Description"})})]})}),(0,t.jsxs)("tbody",{children:[(0,t.jsxs)("tr",{children:[(0,t.jsx)("td",{children:(0,t.jsx)("b",{children:"Reusable themes"})}),(0,t.jsxs)("td",{children:[(0,t.jsx)("p",{children:"Themes that can be applied across multiple dashboards, providing consistency and efficiency. There are two sub-types:"}),(0,t.jsxs)("ul",{children:[(0,t.jsxs)("li",{children:[(0,t.jsx)("b",{children:"Built-in themes:"})," Ready-to-use themes shipped by Holistics"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("b",{children:"Custom themes:"})," Themes created by your team's admins and analysts, saved for organization-wide use"]})]}),(0,t.jsx)("p",{children:"These themes can be selected from a dropdown menu when styling any dashboard."})]})]}),(0,t.jsxs)("tr",{children:[(0,t.jsx)("td",{children:(0,t.jsx)("b",{children:"Local themes (or ad-hoc themes)"})}),(0,t.jsxs)("td",{children:[(0,t.jsx)("p",{children:"Local customizations applied directly to a specific dashboard that cannot be reused elsewhere. Perfect for:"}),(0,t.jsxs)("ul",{children:[(0,t.jsx)("li",{children:"Quick one-off styling adjustments"}),(0,t.jsx)("li",{children:"Dashboard-specific branding requirements"}),(0,t.jsx)("li",{children:"Prototyping theme ideas before creating reusable versions"})]})]})]})]})]}),"\n",(0,t.jsx)(n.h2,{id:"apply-a-theme",children:"Apply a theme"}),"\n",(0,t.jsxs)(n.p,{children:["Each viewer sees Holistics in either ",(0,t.jsx)(n.code,{children:"light"})," or ",(0,t.jsx)(n.code,{children:"dark"})," mode, depending on their ",(0,t.jsx)(n.a,{href:"/docs/account-setting#switch-to-lightdark-mode",children:"account setting"}),". When you assign a theme to a dashboard, you choose whether that setting changes what they see:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"One theme for both modes (static):"})," Everyone sees the same theme, regardless of their app mode."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"A theme per mode (dynamic):"})," Each viewer gets the theme matching their mode."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Both work with reusable and local themes. Apply either using the GUI or code approach below."}),"\n",(0,t.jsx)(n.h3,{id:"apply-a-static-theme",children:"Apply a static theme"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"GUI:"})," Open ",(0,t.jsx)(n.strong,{children:"Themes setting"})," at the top right corner of your dashboard and choose from either built-in or custom themes:"]}),"\n",(0,t.jsx)("img",{alt:"themes-panel",title:"Themes panel",src:"https://media.holistics.io/product/reporting/static-theme.png"}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Code:"})," Reference the theme by name directly in your dashboard code in ",(0,t.jsx)(n.strong,{children:"Development"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"Dashboard ecommerce_dashboard {\n // highlight-next-line\n theme: theme_name\n}\n"})}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"apply-a-dynamic-theme",children:"Apply a dynamic theme"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"GUI:"})," In the Themes panel, turn on ",(0,t.jsx)(n.strong,{children:"Separate themes per app mode"}),", then pick a theme for the ",(0,t.jsx)(n.strong,{children:"Light"})," card and another for the ",(0,t.jsx)(n.strong,{children:"Dark"})," card."]}),"\n",(0,t.jsx)("img",{alt:"themes-panel-dynamic",title:"Dynamic theme panel",src:"https://media.holistics.io/product/reporting/dynamic-theme.png"}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Code:"})," There are two ways to set up a dynamic theme:"]}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Assign separate themes per mode directly on the dashboard (recommended):"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"Dashboard ecommerce_dashboard {\n // highlight-start\n theme: DynamicPageTheme {\n light: theme_a,\n dark: theme_b,\n }\n // highlight-end\n}\n"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsxs)(n.strong,{children:["Define a reusable ",(0,t.jsx)(n.code,{children:"DynamicPageTheme"}),", then reference it by name:"]})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"// themes.aml\nDynamicPageTheme theme_name {\n light {},\n dark {},\n}\n\n// dashboard file\nDashboard ecommerce_dashboard {\n // highlight-next-line\n theme: theme_name\n}\n"})}),"\n",(0,t.jsx)(n.admonition,{type:"info",children:(0,t.jsx)(n.p,{children:"Storing the light/dark pairing inside a reusable theme locks every dashboard that references it into the same pairing. Use the 1st approach above if dashboards need different pairings."})}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Assigning themes per mode through the GUI always uses the direct, per-dashboard assignment from the 1st approach, not a reusable named theme."}),"\n",(0,t.jsx)(n.h2,{id:"create-a-theme",children:"Create a theme"}),"\n",(0,t.jsxs)(n.admonition,{type:"tip",children:[(0,t.jsx)(n.p,{children:"Themes are defined in AML code - there's no visual editor in Holistics yet. To avoid writing one by hand, you can:"}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Ask ",(0,t.jsx)(n.a,{href:"/docs/ai",children:"Holistics AI"})," to generate a theme for you"]}),"\n",(0,t.jsxs)(n.li,{children:["Design one in the ",(0,t.jsx)(n.a,{href:"/docs/admin/dashboard-themes/theme-builder",children:"external Theme Builder"}),", an interactive sandbox for designing and previewing themes, then copy the generated AML code into your project"]}),"\n"]})]}),"\n",(0,t.jsx)(n.h3,{id:"create-a-reusable-theme",children:"Create a reusable theme"}),"\n",(0,t.jsx)(n.p,{children:"To create a reusable custom theme, simply follow these steps:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Go to ",(0,t.jsx)(n.strong,{children:"Development > Library > Themes"})," and create a new ",(0,t.jsx)(n.code,{children:".theme.aml"})," file."]}),"\n",(0,t.jsxs)(n.li,{children:["Define the theme with a ",(0,t.jsx)(n.a,{href:"/reference/aml/theme#pagetheme",children:(0,t.jsx)(n.code,{children:"PageTheme"})})," definition:","\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-aml",children:"PageTheme classic_blue {\n background {\n bg_color: '#F
1FFFFF'\n }\n block {\n border {\n border_color: '#4896EA'\n }\n }\n}\n"})}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Once created, you can apply it to your dashboards."}),"\n",(0,t.jsx)(i,{src:"https://media.holistics.io/product/reporting/create-dashboard-theme.mp4"}),"\n",(0,t.jsx)(n.h3,{id:"create-a-local-theme",children:"Create a local theme"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Local themes"})," are defined directly within your dashboard code. When your dashboard uses a local theme, you'll see a local theme indicator in the Theme Settings panel:"]}),"\n",(0,t.jsx)("img",{alt:"local-themes",title:"Local theme",src:"https://media.holistics.io/product/reporting/local-theme.png"}),"\n",(0,t.jsx)(n.p,{children:"A local theme can be static or dynamic, same as any theme:"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Static local theme:"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"Dashboard ecommerce_dashboard {\n // highlight-next-line\n theme: PageTheme {}\n}\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"Dashboard ecommerce_dashboard {\n // highlight-next-line\n theme: theme_name.extend({}) // local theme created by extending a reusable theme\n}\n"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Dynamic local theme:"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"Dashboard ecommerce_dashboard {\n // highlight-start\n theme: DynamicPageTheme {\n light {}\n dark {}\n }\n // highlight-end\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"set-a-chart-color-palette",children:"Set a chart color palette"}),"\n",(0,t.jsxs)(n.p,{children:["You can set a default ",(0,t.jsx)(n.a,{href:"/docs/admin/dashboard-themes/color-palettes",children:"color palette"})," for all charts in a dashboard by referencing it in your theme:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-aml",children:"PageTheme my_theme {\n // highlight-start\n color {\n data: palette_name\n }\n // highlight-end\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["The palette priority order is: ",(0,t.jsx)(n.strong,{children:"viz-level palette > theme palette > project default palette"}),". If no palette is set at a given level, it falls through to the next."]}),"\n",(0,t.jsx)(n.h3,{id:"add-custom-css",children:"Add custom CSS"}),"\n",(0,t.jsxs)(n.p,{children:["You can include CSS snippets directly in your theme using the ",(0,t.jsx)(n.code,{children:"custom_css"})," parameter and reuse it across dashboards. ",(0,t.jsx)(n.a,{href:"/docs/admin/dashboard-themes/custom-css",children:"Read more for details and examples"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"PageTheme classic {\n // existing theme properties\n // highlight-start\n custom_css: @css\n /* your custom CSS rules here */\n ;;\n // highlight-end\n}\n"})}),"\n",(0,t.jsx)(n.h2,{id:"customize-individual-blocks",children:"Customize individual blocks"}),"\n",(0,t.jsx)(n.p,{children:"Block and viz styling works at two levels:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Theme level"}),": Define inside a ",(0,t.jsx)(n.code,{children:"PageTheme"})," to set defaults for any dashboard using that theme:","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"block {}"})," applies to all ",(0,t.jsx)(n.a,{href:"/docs/dashboards#block",children:"block types"})]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"viz {}"})," applies only to ",(0,t.jsx)(n.a,{href:"/docs/dashboards/visualization-blocks",children:"Viz blocks"})]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Block level"}),": Define overrides on a specific block in your dashboard file using ",(0,t.jsx)(n.code,{children:"BlockTheme"})," (for block container styling) or ",(0,t.jsx)(n.code,{children:"VizTheme"})," (for viz content inside a Viz block) to customize that specific block only."]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"override-block-styling",children:"Override block styling"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"Dashboard ecommerce_dashboard {\n block text_block: TextBlock {\n ...\n // highlight-start\n theme: BlockTheme {\n background {\n bg_color: 'transparent'\n }\n }\n // highlight-end\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"override-viz-styling",children:"Override viz styling"}),"\n",(0,t.jsxs)(n.p,{children:["Currently, viz-level styling is supported across all built-in Holistics visualizations (except ",(0,t.jsx)(n.a,{href:"/docs/charts/map",children:"maps"}),") using three specific theme properties:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"/reference/aml/theme#viztable",children:"Table styling"}),": Supported for ",(0,t.jsx)(n.a,{href:"/docs/charts/table",children:"Table"}),", ",(0,t.jsx)(n.a,{href:"/docs/charts/pivot-table",children:"Pivot table"}),", ",(0,t.jsx)(n.a,{href:"/docs/charts/metric-sheets",children:"Metric table"}),", ",(0,t.jsx)(n.a,{href:"/docs/charts/conversion-funnel",children:"Conversion funnel breakdown table"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"/reference/aml/theme#vizmetric_kpi",children:"Metric KPI styling"}),": Supported for ",(0,t.jsx)(n.a,{href:"/docs/charts/metric-kpi",children:"KPI metric"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"/reference/aml/theme#colorpalette",children:"Color palette"}),": Supported for ",(0,t.jsx)(n.a,{href:"/docs/charts/line-chart",children:"Line chart"}),", ",(0,t.jsx)(n.a,{href:"/docs/charts/area-chart",children:"Area chart"}),", ",(0,t.jsx)(n.a,{href:"/docs/charts/bar-chart",children:"Bar chart"}),", ",(0,t.jsx)(n.a,{href:"/docs/charts/column-chart",children:"Column chart"}),", ",(0,t.jsx)(n.a,{href:"/docs/charts/combination-chart",children:"Combination chart"}),", ",(0,t.jsx)(n.a,{href:"/docs/charts/pyramid-chart-funnel-chart",children:"Pie & Donut chart"}),", ",(0,t.jsx)(n.a,{href:"/docs/charts/scatter-chart",children:"Scatter chart"}),", ",(0,t.jsx)(n.a,{href:"/docs/charts/bubble-chart",children:"Bubble chart"}),", ",(0,t.jsx)(n.a,{href:"/docs/charts/pyramid-chart-funnel-chart",children:"Pyramid & Funnel chart"}),", ",(0,t.jsx)(n.a,{href:"/docs/charts/radar-chart",children:"Radar chart"}),", ",(0,t.jsx)(n.a,{href:"/docs/charts/word-cloud",children:"Word cloud"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["See ",(0,t.jsx)(n.a,{href:"/docs/admin/dashboard-themes/color-palettes#apply-color-palette",children:"this guide"})," to override color palettes at the chart or series level."]}),"\n",(0,t.jsxs)(r,{children:[(0,t.jsx)(s,{value:"table",label:"Table",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"Dashboard ecommerce_dashboard {\n block table_name: VizBlock {\n ...\n viz: PivotTable {\n ...\n // highlight-start\n theme: VizTheme {\n table {\n general {\n bg_color: 'white'\n }\n }\n }\n // highlight-end\n }\n }\n}\n"})})}),(0,t.jsx)(s,{value:"kpi",label:"KPI Metric",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:'Dashboard ecommerce_dashboard {\n block kpi_name: VizBlock {\n ...\n viz: MetricKpi {\n ...\n // highlight-start\n theme: VizTheme {\n metric_kpi {\n alignment: "center"\n value {\n font_color: "#1357A0"\n font_weight: "bold"\n }\n trend {\n positive {\n background { bg_color: "#DCFCE7" }\n }\n negative {\n background { bg_color: "#FEE2E2" }\n }\n }\n }\n }\n // highlight-end\n }\n }\n}\n'})})}),(0,t.jsx)(s,{value:"charts",label:"Color palette",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-aml",children:"Dashboard ecommerce_dashboard {\n block chart_name: VizBlock {\n ...\n viz: LineChart {\n ...\n // highlight-start\n theme: VizTheme {\n color {\n data: palette_name\n }\n }\n // highlight-end\n }\n }\n}\n"})})})]}),"\n",(0,t.jsx)(n.h2,{id:"reuse-theme-values",children:"Reuse theme values"}),"\n",(0,t.jsxs)(n.p,{children:["Theme definitions often repeat the same values - the same color code or font family appearing across ",(0,t.jsx)(n.code,{children:"block"}),", ",(0,t.jsx)(n.code,{children:"canvas"}),", and ",(0,t.jsx)(n.code,{children:"viz"})," sections. You can use ",(0,t.jsx)(n.a,{href:"/as-code/aml/reusability-overview",children:"AML reusability"})," features to define these values once and reference them throughout, so a single change updates the whole theme."]}),"\n",(0,t.jsx)(n.h3,{id:"use-constants-for-reusable-values",children:"Use constants for reusable values"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:'const classic_blue_border_color = "#4896EA"\nconst classic_blue_font_color = "#1357A0"\nconst classic_blue_font_family = "Inter"\n\nPageTheme classic_blue {\n // other properties omitted...\n canvas {\n border {\n // other properties omitted...\n border_color: classic_blue_border_color\n }\n }\n block {\n // other properties omitted...\n label {\n // other properties omitted...\n font_family: classic_blue_font_family\n }\n text {\n // other properties omitted...\n font_family: classic_blue_font_family\n }\n border {\n // other properties omitted...\n border_color: classic_blue_border_color\n }\n }\n}\n'})}),"\n",(0,t.jsx)(n.h3,{id:"use-aml-dict-to-avoid-namespace-pollution",children:"Use AML Dict to avoid namespace pollution"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:'// Instead of separate constant for each variable\n// const classic_blue_border_color = "#4896EA"\n// const classic_blue_font_color = "#1357A0"\n// const classic_blue_font_family = "Inter"\n\n// You can use an AML Dict instead\nconst classic_blue_vars = {\n border_color: "#4896EA"\n font_color: "#1357A0"\n font_family: "Inter"\n}\n// then use it like this\nPageTheme classic_blue {\n // other properties omitted...\n canvas {\n border {\n // other properties omitted...\n border_color: classic_blue_vars("border_color")\n }\n }\n}\n'})}),"\n",(0,t.jsx)(n.h2,{id:"syntax-reference",children:"Syntax Reference"}),"\n",(0,t.jsxs)(n.p,{children:["For a full parameter reference for ",(0,t.jsx)(n.code,{children:"PageTheme"}),", ",(0,t.jsx)(n.code,{children:"DynamicPageTheme"}),", ",(0,t.jsx)(n.code,{children:"BlockTheme"}),", and ",(0,t.jsx)(n.code,{children:"VizTheme"}),", see the ",(0,t.jsx)(n.a,{href:"/reference/aml/theme",children:"AML Theme and Colors"}),"."]}),"\n",(0,t.jsx)(n.admonition,{type:"tip",children:(0,t.jsxs)(n.p,{children:["Hover over ",(0,t.jsx)(n.code,{children:"PageTheme"}),", ",(0,t.jsx)(n.code,{children:"DynamicPageTheme"}),", ",(0,t.jsx)(n.code,{children:"BlockTheme"}),", or ",(0,t.jsx)(n.code,{children:"VizTheme"})," in the code editor to see suggestions for available parameters."]})})]})}function d(e={}){let{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(o,{...e})}):o(e)}function m(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},28453(e,n,s){s.d(n,{R:()=>i,x:()=>l});var r=s(96540);let t={},a=r.createContext(t);function i(e){let n=r.useContext(a);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(a.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.