add docs for color themes and result color assignment (#10539)

contents/docs/product-analytics/color-themes.mdx

@@ -0,0 +1,69 @@
+---
+title: Customizable chart colors
+sidebar: Docs
+showTitle: true
+topics:
+  - insights
+availability:
+  free: partial
+  selfServe: full
+  enterprise: full
+---
+
+## Color themes
+
+> **Important:** This feature requires [a Teams or an Enterprise plan](/pricing). 
+
+PostHog allows you to customize color themes for your insights, making it easier to align visualizations with your brand identity. This section covers how to create custom themes, how to set a default theme, and how to override themes for individual insights.
+
+You can find the setting related to color themes under [Project settings > Product analytics > Data colors](https://us.posthog.com/settings/project-product-analytics#data-theme).
+
+<ProductScreenshot
+    imageLight = {"https://res.cloudinary.com/dmukukwp6/image/upload/screenshot_theme_settings_light_77cbc98f41.png"} 
+    imageDark = {"https://res.cloudinary.com/dmukukwp6/image/upload/screenshot_theme_settings_dark_457240427f.png"}
+    classes="rounded"
+    alt= "Theme settings"
+/>
+
+The color themes are also used when displaying shared insights or dashboards.
+
+### Creating color themes
+
+To create a custom color theme in PostHog, open the **Data colors** settings. Click **Add theme**, give it a name, and customize the colors to match your preferred palette. Click **Save** to create the theme.
+
+Insight results use the theme's colors in order. Once all colors are used, the cycle restarts from the first. You can add or remove colors as needed.
+
+<ProductScreenshot
+    imageLight = {"https://res.cloudinary.com/dmukukwp6/image/upload/screenshot_add_theme_light_3b6614e537.png"} 
+    imageDark = {"https://res.cloudinary.com/dmukukwp6/image/upload/screenshot_add_theme_dark_2717171086.png"}
+    classes="rounded"
+    alt= "Add theme"
+/>
+
+
+### Setting the project-wide default
+
+To set the default color theme for a project, simply select your preferred theme from the dropdown in the **Data colors** settings.
+
+### Setting a custom theme override (advanced) for a single insight
+
+To override the color theme for a single insight, click **...** in the top bar and toggle **View source**. In the source, find the insight query node (e.g., `TrendsQuery`) — this is typically where `dateRange` or `properties` are defined. Add `"dataColorTheme": _id_`, replacing `_id_` with the id of your desired theme. 
+
+---
+
+## Associating results with a color
+
+> This feature is available for everyone, and doesn't require a Teams or an Enterprise plan. Only trend and funnel insights support this feature.
+
+For consistency of charts across multiple insights, it is often useful to assign the same color for the same (or similar) results. By default, colors are assigned to results in their order. The order can be different between insights, e.g., when a breakdown is used and the breakdown results appear in a different order due to their values. It would now be desirable to have the same colors for the same breakdown result.
+
+To change a result's color, click the color icon next to it in the **Detailed results** table, then select a new color.
+
+<ProductScreenshot
+    imageLight = {"https://res.cloudinary.com/dmukukwp6/image/upload/screenshot_result_color_light_0195607fd5.png"} 
+    imageDark = {"https://res.cloudinary.com/dmukukwp6/image/upload/screenshot_result_color_dark_d24a637cfa.png"}
+    classes="rounded"
+    alt= "Add theme"
+/>
+
+Unassigned results follow the default color order.

src/navs/index.js

@@ -2320,6 +2320,16 @@ export const docsMenu = {
                         className: 'uppercase !bg-blue/10 !text-blue !dark:text-white !dark:bg-blue/50',
                     },
                 },
+                {
+                    name: 'Color themes',
+                    url: '/docs/product-analytics/color-themes',
+                    icon: 'IconPalette',
+                    color: 'seagreen',
+                    badge: {
+                        title: 'Beta',
+                        className: 'uppercase !bg-blue/10 !text-blue !dark:text-white !dark:bg-blue/50',
+                    },
+                },
             ],
         },
         {