Add documentation for themes in dashboards (#3641)

* Add documentation for themes * doc: slight copy change * doc: add ref tqo Rill cloud --------- Co-authored-by: Alexander Thor <[email protected]>
rilldata · Dec 8, 2023 · 6805e9b · 6805e9b
1 parent 46c2aa1
commit 6805e9b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/docs/docs/reference/project-files/dashboards.md b/docs/docs/reference/project-files/dashboards.md
@@ -24,6 +24,8 @@ _**`first_month_of_year`**_ — the first month of the year for time grain aggre
 
 _**`available_time_zones`**_ — time zones that should be pinned to the top of the time zone selector _(optional)_. It should be a list of [IANA time zone identifiers](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones). By adding one or more time zones will make the dashboard time zone aware and allow users to change current time zone within the dashboard.
 
+_**`default_theme`**_ — default theme to apply to the dashboard _(optional)_. A valid theme must be defined in the project. Read this [page](./themes.md) for more detailed information about themes.
+
 _**`dimensions`**_ — for exploring [segments](../../develop/metrics-dashboard#dimensions) and filtering the dashboard _(required)_
   - _**`column`**_ — a categorical column _(required)_ 
   - _**`name`**_ — a stable identifier for the dimension _(optional)_

diff --git a/docs/docs/reference/project-files/themes.md b/docs/docs/reference/project-files/themes.md
@@ -0,0 +1,15 @@
+---
+title: Theme YAML
+sidebar_label: Theme YAML
+sidebar_position: 41
+---
+
+In your Rill project directory, create a `<theme_name>.yaml` file in any directory containing `kind: theme`. Rill will automatically ingest the theme next time you run `rill start` or deploy to Rill Cloud.
+
+## Properties
+
+_**`kind`**_ - is mandatory and must be `theme`. _(required)_
+
+_**`colors`**_ - used to override the dashboard colors.
+  - _**`primary`**_ - overrides the primary blue color in the dashboard. Can have any hex (without the # character), [named colors](https://www.w3.org/TR/css-color-4/#named-colors) or hsl() formats. Note that the hue of the input colors is used for variants but the saturation and lightness is copied over from the [blue color palette](https://tailwindcss.com/docs/customizing-colors).
+  - _**`secondary`**_ - overrides the secondary color in the dashboard. Applies to the loading spinner only as of now. Can have any hex (without the # character), [named colors](https://www.w3.org/TR/css-color-4/#named-colors) or hsl() formats.