support high contrast colors (#2640)

* support high contrast colors

* fix eslint

* Update docs/dynamiccolorios.md

Co-authored-by: Bartosz Kaszubowski <gosimek@gmail.com>

docs/dynamiccolorios.md

@@ -8,14 +8,17 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 The `DynamicColorIOS` function is a platform color type specific to iOS.
 
 ```jsx
-DynamicColorIOS({ light: color, dark: color });
+DynamicColorIOS({
+  light: color,
+  dark: color,
+  highContrastLight: color, // (optional) will fallback to "light" if not provided
+  highContrastDark: color // (optional) will fallback to "dark" if not provided
+});
 ```
 
-`DynamicColorIOS` takes a single argument as an object with two keys: `dark` and `light`. These correspond to the colors you want to use for "light mode" and "dark mode" on iOS.
-
-> In the future, more keys might become available for different user preferences, like high contrast.
+`DynamicColorIOS` takes a single argument as an object with two mandatory keys: `dark` and `light`, and two optional keys `highContrastLight` and `highContrastDark`. These correspond to the colors you want to use for "light mode" and "dark mode" on iOS, and when high contrast accessibility mode is enabled, high contrast version of them.
 
-At runtime, the system will choose which of the two colors to display depending on the current system appearance settings. Dynamic colors are useful for branding colors or other app specific colors that still respond automatically to system setting changes.
+At runtime, the system will choose which of the colors to display depending on the current system appearance and accessibility settings. Dynamic colors are useful for branding colors or other app specific colors that still respond automatically to system setting changes.
 
 #### Developer notes
 
@@ -42,4 +45,11 @@ const customDynamicTextColor = DynamicColorIOS({
   dark: 'lightskyblue',
   light: 'midnightblue'
 });
+
+const customContrastDynamicTextColor = DynamicColorIOS({
+  dark: 'darkgray',
+  light: 'lightgray',
+  highContrastDark: 'black',
+  highContrastLight: 'white'
+});
 ```