docs: Add theming recipes (#869)

* docs: Add theming recipes
* docs: clarify that only themes for the *same* VarGroup are mutually exclusive

Author: nmn

apps/docs/docs/learn/06-recipes/03-descendant styles.mdx

@@ -6,9 +6,6 @@
 sidebar_position: 3
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 # Variables for descendant styles
 
 It is not uncommon to define styles on an element that are dependent on a parent element's state, 

apps/docs/docs/learn/06-recipes/04-reset-themes.mdx

@@ -0,0 +1,30 @@
+---
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+sidebar_position: 4
+---
+
+# Reset Theme
+
+The `stylex.defineVars` function is used to create a set of CSS variables,
+called `VarGroup`s. Further, the `stylex.createTheme` function can be used to create 
+`Theme`s, that override the values of the variables defined within `VarGroup`s.
+
+Many `VarGroup`s can be defined which can then be independently overridden with `Theme`s.
+However, `Theme`s for the *same* `VarGroup` are mutually exclusive and do not merge.
+Any variable in a `VarGroup` that is not explicitly overridden in a `Theme` for that `VarGroup`
+is set to its default value.
+
+This characteristic of `Theme`s can be used to define a "empty" theme that resets all variables
+to their default values.
+
+## Example
+
+```tsx
+import * as stylex from '@stylexjs/stylex';
+import { vars } from './variables.stylex';
+
+export const resetVars = stylex.createTheme(vars, {});
+```

apps/docs/docs/learn/06-recipes/05-merge-themes.mdx

@@ -0,0 +1,42 @@
+---
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+sidebar_position: 5
+---
+
+# Merge Themes
+
+`Theme`s for the *same* `VarGroup` are mutually exclusive and do not merge.
+Any variable in a `VarGroup` that is not explicitly overridden in a `Theme` for that `VarGroup`
+is set to its default value.
+
+However, you can reuse common constants when defining multiple themes for a particular
+`VarGroup` and avoid excessive repetition.
+
+## Example
+
+```tsx
+import * as stylex from '@stylexjs/stylex';
+import { vars } from './variables.stylex';
+
+const themeBlueVars = {
+  backgroundColor: 'blue',
+};
+const themeBlue = stylex.createTheme(vars, themeBlueVars);
+
+const themeBigVars = {
+  size: '128px',
+};
+const themeBig = stylex.createTheme(vars, themeBigVars);
+
+const themeBigBlueVars = {...themeBlueVars, ...themeBigVars};
+const themeBigBlue = stylex.createTheme(vars, themeBigBlueVars);
+```
+
+The StyleX compiler is able to resolve local object constants and merge them.
+This is useful to be able to define a `Theme` that merges the values of two or more
+other `Theme`s without repetition.
+
+

apps/docs/docs/learn/06-recipes/06-light-dark-themes.mdx

@@ -0,0 +1,79 @@
+---
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+sidebar_position: 6
+---
+
+# Light and Dark Themes
+
+It is a common pattern to define separate `light`, `dark` and system themes
+to provide the ability to switch between different color schemes.
+
+This would typically be done by defining three separate `Theme`s:
+
+```tsx
+const lightVars = {
+  primaryColor: 'black',
+  ...
+};
+export const light = stylex.createTheme(vars, lightVars);
+
+const darkVars = {
+  primaryColor: 'white',
+  ...
+};
+export const dark = stylex.createTheme(vars, darkVars);
+
+const systemVars = {
+  primaryColor: {
+    default: 'black',
+    '@media (prefers-color-scheme: dark)': 'white',
+  },
+  ...
+};
+export const system = stylex.createTheme(vars, systemVars);
+```
+This pattern is well supported and will work in all browsers that support CSS variables.
+
+## Using the `light-dark()` CSS function
+
+In modern browsers, we suggest using the 
+[`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark)
+CSS function instead which will simplify the code and remove the need to define themes.
+
+```tsx
+export const vars = stylex.defineVars({
+  primaryColor: 'light-dark(black, white)',
+  ...
+});
+```
+
+You can now control the color scheme applied by using the `color-scheme` CSS property.
+
+```tsx
+const styles = stylex.create({
+  light: {
+    colorScheme: 'light',
+  },
+  dark: {
+    colorScheme: 'dark',
+  },
+  system: {
+    colorScheme: 'light dark',
+  },
+});
+
+<div {...stylex.props(styles[colorScheme])}>
+  ...
+</div>
+```
+
+You *can* still define custom themes for other use-cases and use `light-dark()` within them.
+
+### Limitations
+
+1. The `light-dark()` CSS function can only be used for color values.
+2. The `light-dark()` function is not supported in older browsers.
+