feat: update customizing appearance with dark mode (#265)

Author: tatianainama

guides/customizing-the-appearance-of-your-project.mdx

@@ -1,32 +1,34 @@
 ---
 title: "Customizing the appearance of your project"
 sidebarTitle: "Color palettes"
-Description: "You can update the default colours used in your organization's charts so that everything you build is on brand."
+Description: "You can update the default colors used in your organization's charts so that everything you build is on brand."
 ---
 
-To customize the colours used by default in your organization, head to the `Organization settings` --> `Appearance` and you can update any and all of your default colours used in your organization.
+To customize the colors used by default in your organization, head to the `Organization settings` --> `Appearance` and you can update any and all of your default colors used in your organization.
 
-## Update the default colours used in charts
+### Viewing available palettes
 
-You will see a list of colour palettes that you can choose from.
+You will see a list of color palettes that you can choose from for each mode. You can create your own palette by clicking on the `Add new palette` button. Here you can preview the palette before you save it.
 
-![](/images/guides/list-color-palettes.png)
+![](/images/guides/appearance/list-color-palettes.png)
 
-### Create a new palette and preview it
+### Color palettes for light and dark mode
 
-You can also create your own palette by clicking on the `Add new palette` button. Here you can preview the palette before you save it.
+You can configure different color palettes for light mode and dark mode to ensure optimal contrast and readability in each theme. The appearance configuration includes separate tabs for both light mode and dark mode, allowing you to customize color schemes for each theme independently.
 
-![](/images/guides/create-new-palette.png)
+![](/images/guides/appearance/light-dark-mode-palette.gif)
+
+Since dark mode is available as a user preference setting within the app, having separate palettes ensures your charts look great regardless of which theme users choose. Note that dark mode is only available when using the app directly - embedded charts, Slack integrations, and other external integrations will continue to display in light mode.
 
 ### Set the palette as the default
 
-Once you have created your palette, you can set it as the default palette by clicking on the `Use this theme` button.
+Once you have created your palette, you can set it as the default palette for the current mode (light or dark) by clicking on the `Use this theme` button.
 You can always come back to this page to change the default palette.
 
-![](/images/guides/use-theme.png)
+![](/images/guides/appearance/use-theme.png)
 
 ## Use the palette in a chart
 
-The next time you build a chart, it will default to using these colours for the series, unless you override them in the chart config.
+The next time you build a chart, it will default to using these colors for the series, unless you override them in the chart config.
 
-![](/images/guides/use-color-palette-chart.png)
+![](/images/guides/appearance/use-color-palette-chart.png)