> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Sample Flows

## Article: Sample Flows

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/site-settings/site-theme/sample-flows.md

## Article Content:

# Site Theme API: Sample Flows

This article presents possible use cases and corresponding sample flows that you can support. It provides a useful starting point as you plan your implementation.

## Resolve a theme color ID to a color value

A color setting in your component's settings holds either a theme color ID, such as `color_4`, when the Wix user picks a color from the site's theme, or a color value that the Wix user entered, such as `#333333`. This flow turns the setting into a color value you can use in CSS.

To resolve a theme color ID to a color value, follow these steps:

1. Read the color setting from your own component's `settings` object:

   ```ts
   const setting = settings.backgroundColor
   ```

2. Check whether the setting is a theme color ID. Anything else is already a color value:

   ```ts
   const isThemeColorId = /^color_\d+$/.test(setting)
   ```

3. Look up the ID in `colors`. The lookup gives `undefined` when the site's theme doesn't have that ID, so fall back to a default color:

   ```ts
   const color = isThemeColorId ? (siteThemeService.colors[setting] ?? '#1F1F1F') : setting
   ```

4. Use the color while the component renders. Reading `colors` during the render, rather than once when the component mounts, makes the component follow theme changes:

   ```tsx
   return <div className="banner" style={{ backgroundColor: color }}>{children}</div>
   ```

## Draw a chart in the site theme colors

To draw a chart in the site theme colors, follow these steps:

1. Read `colorsMap` while the component renders, so the component renders again when the theme changes:

   ```ts
   const themeColors = siteThemeService.colorsMap
   ```

2. Draw the chart in an effect that depends on `themeColors`, so it redraws only when the theme or the data changes. Fall back to a default color for any index the theme doesn't have. `drawChart()`, `sales` and `canvasRef` are your own charting function, data and canvas ref:

   ```tsx
   useEffect(() => {
       const seriesColors = [4, 5, 3].map((index) => themeColors[index] ?? '#9C9C9C')
       drawChart(canvasRef.current, sales, seriesColors)
   }, [themeColors, sales])
   ```

3. Render the canvas that the effect draws on:

   ```tsx
   return <canvas ref={canvasRef} width={600} height={300} />
   ```