Add theming docs for Vega-Lite

Author: snehankekre

content/library/api/charts/altair_chart.md

@@ -10,7 +10,7 @@ description: st.altair_chart displays a chart using the Altair library.
 
 Altair charts are displayed using the Streamlit theme by default. This theme is sleek, user-friendly, and incorporates Streamlit's color palette. The added benefit is that your charts better integrate with the rest of your app's design.
 
-The new Streamlit theme is available from Streamlit 1.16.0 through the `theme="streamlit"` keyword argument. To disable it, and use Altair's native theme, use `theme=None` instead.
+The Streamlit theme is available from Streamlit 1.16.0 through the `theme="streamlit"` keyword argument. To disable it, and use Altair's native theme, use `theme=None` instead.
 
 Let's look at an example of charts with the Streamlit theme and the native Altair theme:
 

content/library/api/charts/plotly_chart.md

@@ -10,7 +10,7 @@ description: st.plotly_chart displays an interactive Plotly chart.
 
 Plotly charts are displayed using the Streamlit theme by default. This theme is sleek, user-friendly, and incorporates Streamlit's color palette. The added benefit is that your charts better integrate with the rest of your app's design.
 
-The new Streamlit theme is available from Streamlit 1.16.0 through the `theme="streamlit"` keyword argument. To disable it, and use Plotly's native theme, use `theme=None` instead.
+The Streamlit theme is available from Streamlit 1.16.0 through the `theme="streamlit"` keyword argument. To disable it, and use Plotly's native theme, use `theme=None` instead.
 
 Let's look at an example of charts with the Streamlit theme and the native Plotly theme:
 

content/library/api/charts/vega_lite_chart.md

@@ -5,3 +5,53 @@ description: st.vega_lite_chart displays a chart using the Vega-Lite library.
 ---
 
 <Autofunction function="streamlit.vega_lite_chart" />
+
+### Theming
+
+Vega-Lite charts are displayed using the Streamlit theme by default. This theme is sleek, user-friendly, and incorporates Streamlit's color palette. The added benefit is that your charts better integrate with the rest of your app's design.
+
+The Streamlit theme is available from Streamlit 1.16.0 through the `theme="streamlit"` keyword argument. To disable it, and use Vega-Lite's native theme, use `theme=None` instead.
+
+Let's look at an example of charts with the Streamlit theme and the native Vega-Lite theme:
+
+```python
+import streamlit as st
+from vega_datasets import data
+
+source = data.cars()
+
+chart = {
+    "mark": "point",
+    "encoding": {
+        "x": {
+            "field": "Horsepower",
+            "type": "quantitative",
+        },
+        "y": {
+            "field": "Miles_per_Gallon",
+            "type": "quantitative",
+        },
+        "color": {"field": "Origin", "type": "nominal"},
+        "shape": {"field": "Origin", "type": "nominal"},
+    },
+}
+
+tab1, tab2 = st.tabs(["Streamlit theme (default)", "Vega-Lite native theme"])
+
+with tab1:
+    # Use the Streamlit theme.
+    # This is the default. So you can also omit the theme argument.
+    st.vega_lite_chart(
+        source, chart, use_container_width=use_container_width, theme="streamlit"
+    )
+with tab2:
+    st.vega_lite_chart(
+        source, chart, use_container_width=use_container_width, theme=None
+    )
+```
+
+Click the tabs in the interactive app below to see the charts with the Streamlit theme enabled and disabled.
+
+<Cloud src="https://doc-vega-lite-theme.streamlit.app/?embed=true" height="500" />
+
+If you're wondering if your own customizations will still be taken into account, don't worry! If you're an experienced Vega-Lite user and like to have your own special customizations, your changes in the chart configurations will still be taken into account.