From 1c9b7a598edfa9404d1b102d56b4948ecc0b176a Mon Sep 17 00:00:00 2001 From: Rachel Nabors Date: Thu, 16 Apr 2020 01:47:30 +0100 Subject: [PATCH 1/8] Adding DynamicColorsIOS and referencing it and PlatformColors from Colors page --- docs/colors.md | 20 ++++---------------- docs/dynamiccolorios.md | 33 +++++++++++++++++++++++++++++++++ docs/platformcolor.md | 8 +++++++- website/sidebars.json | 1 + 4 files changed, 45 insertions(+), 17 deletions(-) create mode 100644 docs/dynamiccolorios.md diff --git a/docs/colors.md b/docs/colors.md index 99749b3025e..8354b27683c 100644 --- a/docs/colors.md +++ b/docs/colors.md @@ -31,24 +31,12 @@ React Native supports also colors as an `int` values (in RGB color mode): > **_Note:_** This might appear similar to the Android [Color](https://developer.android.com/reference/android/graphics/Color) ints representation but on Android values are stored in SRGB color mode (0xaarrggbb). -## DynamicColorIOS +## Color APIs -```jsx -DynamicColorIOS({light: color, dark: color}); -``` +React Native has several color APIs designed to allow you to take full advantage of your platform's design and user preferences. -The `DynamicColorIOS` function is a platform color type specific to iOS. `DynamicColorIOS` takes a single argument as an object with two keys: light and dark. - -At runtime, the system will chose 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. - -``` -const headerTextColor = DynamicColorIOS({ - dark: PlatformColor('labelColor'), - light: PlatformColor('secondaryLabelColor') -}); -``` - -The `DynamicColorIOS` function is similar to the iOS native methods [`UIColor colorWithDynamicProvider:`](https://developer.apple.com/documentation/uikit/uicolor/3238040-colorwithdynamicprovider) +- [PlatformColor](platformcolor) lets you reference the platform's color system. +- [DynamicColorIOS](dynamiccolorios) is iOS specific and allows you to specify which colors should be used in light or dark mode. ## Named colors diff --git a/docs/dynamiccolorios.md b/docs/dynamiccolorios.md new file mode 100644 index 00000000000..90898422b8f --- /dev/null +++ b/docs/dynamiccolorios.md @@ -0,0 +1,33 @@ +--- +id: dynamiccolorios +title: DynamicColorIOS +--- + +The `DynamicColorIOS` function is a platform color type specific to iOS. + +```jsx +DynamicColorIOS({light: color, dark: color}); +``` + +`DynamicColorIOS` takes a single argument as an object with two keys: `light` and `dark`. These correspond to the colors you want to use for "light mode" and "dark mode". + +> In the future, more keys might become available for different user preferences, like high contrast. + +At runtime, the system will chose 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. + + + +> If you’re familiar `@media (prefers-color-scheme: dark)` in CSS, this is similar! Only instead of defining all the colors in a media query, you define which color to use under what circumstances right there where you're using it. Neat! + + + +## Example + +``` +const headerTextColor = DynamicColorIOS({ + dark: PlatformColor('labelColor'), + light: PlatformColor('secondaryLabelColor') +}); +``` + +> The `DynamicColorIOS` function is similar to the iOS native methods [`UIColor colorWithDynamicProvider:`](https://developer.apple.com/documentation/uikit/uicolor/3238040-colorwithdynamicprovider) diff --git a/docs/platformcolor.md b/docs/platformcolor.md index 5a4a4d6e2ab..f344454b419 100644 --- a/docs/platformcolor.md +++ b/docs/platformcolor.md @@ -7,7 +7,13 @@ title: PlatformColor PlatformColor(color1, [color2, ...colorN]) ``` -Use the `PlatformColor` function to access native colors on the target platform via supplying the native color’s corresponding string value. You pass a string to the `PlatformColor` function, and provided it exists on that platform, that native color will be applied to the control or Javascript component specified in your style. All native color logic also translates if applicable, meaning if the native color specified is themes and/or high contrast sensitive, that logic will also transfer to the JavaScript component being colored. +You can use the `PlatformColor` function to access native colors on the target platform by supplying the native color’s corresponding string value. You pass a string to the `PlatformColor` function, and provided it exists on that platform, that native color will be applied to the control or Javascript component specified in your style. All native color logic also translates if applicable, meaning if the native color specified is themes and/or high contrast sensitive, that logic will also transfer to the JavaScript component being colored. + + + +> If you’re familiar with design systems, another way of thinking about this is that `PlatformColor` lets you tap into the local design system's color tokens so your app can blend right in! + + For a full list of the types of system colors supported, see: diff --git a/website/sidebars.json b/website/sidebars.json index 05322d36be2..970eaf6a8bc 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -112,6 +112,7 @@ "appstate", "devsettings", "dimensions", + "dynamiccolorios", "easing", "interactionmanager", "keyboard", From 29bfadda15a3d02497a63b0a4bf27081cae5ff7e Mon Sep 17 00:00:00 2001 From: Rachel Nabors Date: Thu, 16 Apr 2020 01:51:01 +0100 Subject: [PATCH 2/8] Adding DynamicColorsIOS and referencing it and PlatformColors from Colors page --- docs/colors.md | 20 ++++++++++++++++---- docs/dynamiccolorios.md | 33 --------------------------------- docs/platformcolor.md | 8 +------- website/sidebars.json | 1 - 4 files changed, 17 insertions(+), 45 deletions(-) delete mode 100644 docs/dynamiccolorios.md diff --git a/docs/colors.md b/docs/colors.md index 8354b27683c..99749b3025e 100644 --- a/docs/colors.md +++ b/docs/colors.md @@ -31,12 +31,24 @@ React Native supports also colors as an `int` values (in RGB color mode): > **_Note:_** This might appear similar to the Android [Color](https://developer.android.com/reference/android/graphics/Color) ints representation but on Android values are stored in SRGB color mode (0xaarrggbb). -## Color APIs +## DynamicColorIOS -React Native has several color APIs designed to allow you to take full advantage of your platform's design and user preferences. +```jsx +DynamicColorIOS({light: color, dark: color}); +``` -- [PlatformColor](platformcolor) lets you reference the platform's color system. -- [DynamicColorIOS](dynamiccolorios) is iOS specific and allows you to specify which colors should be used in light or dark mode. +The `DynamicColorIOS` function is a platform color type specific to iOS. `DynamicColorIOS` takes a single argument as an object with two keys: light and dark. + +At runtime, the system will chose 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. + +``` +const headerTextColor = DynamicColorIOS({ + dark: PlatformColor('labelColor'), + light: PlatformColor('secondaryLabelColor') +}); +``` + +The `DynamicColorIOS` function is similar to the iOS native methods [`UIColor colorWithDynamicProvider:`](https://developer.apple.com/documentation/uikit/uicolor/3238040-colorwithdynamicprovider) ## Named colors diff --git a/docs/dynamiccolorios.md b/docs/dynamiccolorios.md deleted file mode 100644 index 90898422b8f..00000000000 --- a/docs/dynamiccolorios.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: dynamiccolorios -title: DynamicColorIOS ---- - -The `DynamicColorIOS` function is a platform color type specific to iOS. - -```jsx -DynamicColorIOS({light: color, dark: color}); -``` - -`DynamicColorIOS` takes a single argument as an object with two keys: `light` and `dark`. These correspond to the colors you want to use for "light mode" and "dark mode". - -> In the future, more keys might become available for different user preferences, like high contrast. - -At runtime, the system will chose 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. - - - -> If you’re familiar `@media (prefers-color-scheme: dark)` in CSS, this is similar! Only instead of defining all the colors in a media query, you define which color to use under what circumstances right there where you're using it. Neat! - - - -## Example - -``` -const headerTextColor = DynamicColorIOS({ - dark: PlatformColor('labelColor'), - light: PlatformColor('secondaryLabelColor') -}); -``` - -> The `DynamicColorIOS` function is similar to the iOS native methods [`UIColor colorWithDynamicProvider:`](https://developer.apple.com/documentation/uikit/uicolor/3238040-colorwithdynamicprovider) diff --git a/docs/platformcolor.md b/docs/platformcolor.md index f344454b419..5a4a4d6e2ab 100644 --- a/docs/platformcolor.md +++ b/docs/platformcolor.md @@ -7,13 +7,7 @@ title: PlatformColor PlatformColor(color1, [color2, ...colorN]) ``` -You can use the `PlatformColor` function to access native colors on the target platform by supplying the native color’s corresponding string value. You pass a string to the `PlatformColor` function, and provided it exists on that platform, that native color will be applied to the control or Javascript component specified in your style. All native color logic also translates if applicable, meaning if the native color specified is themes and/or high contrast sensitive, that logic will also transfer to the JavaScript component being colored. - - - -> If you’re familiar with design systems, another way of thinking about this is that `PlatformColor` lets you tap into the local design system's color tokens so your app can blend right in! - - +Use the `PlatformColor` function to access native colors on the target platform via supplying the native color’s corresponding string value. You pass a string to the `PlatformColor` function, and provided it exists on that platform, that native color will be applied to the control or Javascript component specified in your style. All native color logic also translates if applicable, meaning if the native color specified is themes and/or high contrast sensitive, that logic will also transfer to the JavaScript component being colored. For a full list of the types of system colors supported, see: diff --git a/website/sidebars.json b/website/sidebars.json index 970eaf6a8bc..05322d36be2 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -112,7 +112,6 @@ "appstate", "devsettings", "dimensions", - "dynamiccolorios", "easing", "interactionmanager", "keyboard", From 09390df977da143f2b6fc4955780ad1caf3cfcaf Mon Sep 17 00:00:00 2001 From: Rachel Nabors Date: Thu, 16 Apr 2020 02:29:32 +0100 Subject: [PATCH 3/8] Making sure the new page is actually in there. --- docs/colors.md | 20 +++++++------------- docs/dynamiccolorios.md | 40 ++++++++++++++++++++++++++++++++++++++++ docs/platformcolor.md | 15 ++++++++++++++- website/i18n/en.json | 3 +++ website/sidebars.json | 1 + 5 files changed, 65 insertions(+), 14 deletions(-) create mode 100644 docs/dynamiccolorios.md diff --git a/docs/colors.md b/docs/colors.md index 99749b3025e..91d187fc0fd 100644 --- a/docs/colors.md +++ b/docs/colors.md @@ -31,24 +31,18 @@ React Native supports also colors as an `int` values (in RGB color mode): > **_Note:_** This might appear similar to the Android [Color](https://developer.android.com/reference/android/graphics/Color) ints representation but on Android values are stored in SRGB color mode (0xaarrggbb). -## DynamicColorIOS +## Color APIs -```jsx -DynamicColorIOS({light: color, dark: color}); -``` +React Native has several color APIs designed to allow you to take full advantage of your platform's design and user preferences. -The `DynamicColorIOS` function is a platform color type specific to iOS. `DynamicColorIOS` takes a single argument as an object with two keys: light and dark. +- [PlatformColor](platformcolor) lets you reference the platform's color system. +- [DynamicColorIOS](dynamiccolorios) is iOS specific and allows you to specify which colors should be used in light or dark mode. -At runtime, the system will chose 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. +## Named colors -``` -const headerTextColor = DynamicColorIOS({ - dark: PlatformColor('labelColor'), - light: PlatformColor('secondaryLabelColor') -}); -``` +In React Native you can also use color name strings as values. -The `DynamicColorIOS` function is similar to the iOS native methods [`UIColor colorWithDynamicProvider:`](https://developer.apple.com/documentation/uikit/uicolor/3238040-colorwithdynamicprovider) +> **_Note:_** React Native only supports lowercase color names. Uppercase color names are not supported. ## Named colors diff --git a/docs/dynamiccolorios.md b/docs/dynamiccolorios.md new file mode 100644 index 00000000000..00a6b2ba95e --- /dev/null +++ b/docs/dynamiccolorios.md @@ -0,0 +1,40 @@ +--- +id: dynamiccolorios +title: DynamicColorIOS +--- + +The `DynamicColorIOS` function is a platform color type specific to iOS. + +```jsx +DynamicColorIOS({light: color, dark: color}); +``` + +`DynamicColorIOS` takes a single argument as an object with two keys: `light` and `dark`. These correspond to the colors you want to use for "light mode" and "dark mode". + +> In the future, more keys might become available for different user preferences, like high contrast. + +At runtime, the system will chose 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. + +
+ Developer Notes + + + +
+ + + +> If you’re familiar `@media (prefers-color-scheme: dark)` in CSS, this is similar! Only instead of defining all the colors in a media query, you define which color to use under what circumstances right there where you're using it. Neat! + + + +## Example + +``` +const headerTextColor = DynamicColorIOS({ + dark: PlatformColor('labelColor'), + light: PlatformColor('secondaryLabelColor') +}); +``` + +> The `DynamicColorIOS` function is similar to the iOS native methods [`UIColor colorWithDynamicProvider:`](https://developer.apple.com/documentation/uikit/uicolor/3238040-colorwithdynamicprovider) diff --git a/docs/platformcolor.md b/docs/platformcolor.md index 5a4a4d6e2ab..f392b729818 100644 --- a/docs/platformcolor.md +++ b/docs/platformcolor.md @@ -7,7 +7,20 @@ title: PlatformColor PlatformColor(color1, [color2, ...colorN]) ``` -Use the `PlatformColor` function to access native colors on the target platform via supplying the native color’s corresponding string value. You pass a string to the `PlatformColor` function, and provided it exists on that platform, that native color will be applied to the control or Javascript component specified in your style. All native color logic also translates if applicable, meaning if the native color specified is themes and/or high contrast sensitive, that logic will also transfer to the JavaScript component being colored. +You can use the `PlatformColor` function to access native colors on the target platform by supplying the native color’s corresponding string value. You pass a string to the `PlatformColor` function, and provided it exists on that platform, that native color will be applied to the control or Javascript component specified in your style. All native color logic also translates if applicable, meaning if the native color specified is themes and/or high contrast sensitive, that logic will also transfer to the JavaScript component being colored. + +
+ Developer Notes + + + +
+ + + +> If you’re familiar with design systems, another way of thinking about this is that `PlatformColor` lets you tap into the local design system's color tokens so your app can blend right in! + + For a full list of the types of system colors supported, see: diff --git a/website/i18n/en.json b/website/i18n/en.json index fea7fb64388..243bbb58b1d 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -104,6 +104,9 @@ "drawerlayoutandroid": { "title": "DrawerLayoutAndroid" }, + "dynamiccolorios": { + "title": "DynamicColorIOS" + }, "easing": { "title": "Easing" }, diff --git a/website/sidebars.json b/website/sidebars.json index 05322d36be2..970eaf6a8bc 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -112,6 +112,7 @@ "appstate", "devsettings", "dimensions", + "dynamiccolorios", "easing", "interactionmanager", "keyboard", From eb02ec5b9b0dc38435c0b751b65b979045e4c283 Mon Sep 17 00:00:00 2001 From: R Nabors Date: Thu, 16 Apr 2020 13:28:36 +0100 Subject: [PATCH 4/8] Moving note for iOS devs into devNotes section --- docs/dynamiccolorios.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/dynamiccolorios.md b/docs/dynamiccolorios.md index 00a6b2ba95e..7f198dce09d 100644 --- a/docs/dynamiccolorios.md +++ b/docs/dynamiccolorios.md @@ -19,6 +19,7 @@ At runtime, the system will chose which of the two colors to display depending o Developer Notes + @@ -26,6 +27,10 @@ At runtime, the system will chose which of the two colors to display depending o > If you’re familiar `@media (prefers-color-scheme: dark)` in CSS, this is similar! Only instead of defining all the colors in a media query, you define which color to use under what circumstances right there where you're using it. Neat! + + +> The `DynamicColorIOS` function is similar to the iOS native methods [`UIColor colorWithDynamicProvider:`](https://developer.apple.com/documentation/uikit/uicolor/3238040-colorwithdynamicprovider) + ## Example @@ -36,5 +41,3 @@ const headerTextColor = DynamicColorIOS({ light: PlatformColor('secondaryLabelColor') }); ``` - -> The `DynamicColorIOS` function is similar to the iOS native methods [`UIColor colorWithDynamicProvider:`](https://developer.apple.com/documentation/uikit/uicolor/3238040-colorwithdynamicprovider) From 23079dccb1ac9fc102e59c77d653f1e6f1b49393 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Thu, 16 Apr 2020 15:58:13 +0200 Subject: [PATCH 5/8] small tweaks, remove duplicated section --- docs/colors.md | 6 ------ docs/dynamiccolorios.md | 10 ++++++---- docs/platformcolor.md | 32 +++++++++++++++----------------- website/sidebars.json | 3 +-- 4 files changed, 22 insertions(+), 29 deletions(-) diff --git a/docs/colors.md b/docs/colors.md index 91d187fc0fd..8354b27683c 100644 --- a/docs/colors.md +++ b/docs/colors.md @@ -44,12 +44,6 @@ In React Native you can also use color name strings as values. > **_Note:_** React Native only supports lowercase color names. Uppercase color names are not supported. -## Named colors - -In React Native you can also use color name strings as values. - -> **_Note:_** React Native only supports lowercase color names. Uppercase color names are not supported. - ### `transparent` This is a shortcut for `rgba(0,0,0,0)`, same like in [CSS3](https://www.w3.org/TR/css-color-3/#transparent). diff --git a/docs/dynamiccolorios.md b/docs/dynamiccolorios.md index 7f198dce09d..1ca322bda6e 100644 --- a/docs/dynamiccolorios.md +++ b/docs/dynamiccolorios.md @@ -35,9 +35,11 @@ At runtime, the system will chose which of the two colors to display depending o ## Example -``` -const headerTextColor = DynamicColorIOS({ - dark: PlatformColor('labelColor'), - light: PlatformColor('secondaryLabelColor') +```jsx +import { DynamicColorIOS } from 'react-native'; + +const customDynamicTextColor = DynamicColorIOS({ + dark: 'lightskyblue', + light: 'midnightblue', }); ``` diff --git a/docs/platformcolor.md b/docs/platformcolor.md index f392b729818..efa38726750 100644 --- a/docs/platformcolor.md +++ b/docs/platformcolor.md @@ -25,32 +25,30 @@ You can use the `PlatformColor` function to access native colors on the target p For a full list of the types of system colors supported, see: - [Android R.attr](https://developer.android.com/reference/android/R.attr) -- [iOS Color](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/) +- [iOS Color](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/#dynamic-system-colors) ## Example -``` +```jsx import React from 'react'; -import { Text, View, StyleSheet, PlatformColor, Platform } from 'react-native'; - -export default function App() { - return ( - - - I am a special label color! - - - ); -} +import { Platform, PlatformColor, StyleSheet, Text, View } from 'react-native'; + +export default App = () => ( + + + I am a special label color! + + +); const styles = StyleSheet.create({ - labelCell: { + labelCell: { flex: 1, alignItems: 'stretch', ...Platform.select({ - ios: {color: PlatformColor('labelColor')}, - android: {color: PlatformColor('?attr/colorControlNormal')}, - default: {color: 'black'}, + ios: { color: PlatformColor('labelColor') }, + android: { color: PlatformColor('?attr/colorControlNormal') }, + default: { color: 'black' }, }), }, }); diff --git a/website/sidebars.json b/website/sidebars.json index 970eaf6a8bc..3a782bc179a 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -112,7 +112,6 @@ "appstate", "devsettings", "dimensions", - "dynamiccolorios", "easing", "interactionmanager", "keyboard", @@ -139,7 +138,7 @@ { "type": "subcategory", "label": "iOS APIs", - "ids": ["actionsheetios", "settings"] + "ids": ["actionsheetios", "dynamiccolorios", "settings"] } ] } From 03ba1ec6ffd067295c165cba9e43a6f76e2c9119 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Thu, 16 Apr 2020 16:21:33 +0200 Subject: [PATCH 6/8] formatting, typo fix --- docs/dynamiccolorios.md | 4 ++-- docs/platformcolor.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/dynamiccolorios.md b/docs/dynamiccolorios.md index 1ca322bda6e..7396c068f3f 100644 --- a/docs/dynamiccolorios.md +++ b/docs/dynamiccolorios.md @@ -9,11 +9,11 @@ The `DynamicColorIOS` function is a platform color type specific to iOS. DynamicColorIOS({light: color, dark: color}); ``` -`DynamicColorIOS` takes a single argument as an object with two keys: `light` and `dark`. These correspond to the colors you want to use for "light mode" and "dark mode". +`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. -At runtime, the system will chose 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 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.
Developer Notes diff --git a/docs/platformcolor.md b/docs/platformcolor.md index efa38726750..89df8006ff8 100644 --- a/docs/platformcolor.md +++ b/docs/platformcolor.md @@ -3,7 +3,7 @@ id: platformcolor title: PlatformColor --- -``` +```js PlatformColor(color1, [color2, ...colorN]) ``` @@ -56,4 +56,4 @@ const styles = StyleSheet.create({ The string value provided to the `PlatformColor` function must match and agree with the same string as it exists on the native platform the app is being run on. This means to avoid runtime errors the function should be wrapped in a platform check, either through a `Platform.OS === 'platform'` or a `Platform.Select()`. -You can find a complete example that demonstrates proper, intended use of PlatformColor in [PlatformColorExample.js](https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PlatformColor/PlatformColorExample.js). +> **Note:** You can find a complete example that demonstrates proper, intended use of `PlatformColor` in [PlatformColorExample.js](https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PlatformColor/PlatformColorExample.js). From acc6d8c5be2b313fee7abd83edb74cf5eeb01fdf Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 20 Apr 2020 20:13:28 +0200 Subject: [PATCH 7/8] update the iOS color reference list link --- docs/platformcolor.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platformcolor.md b/docs/platformcolor.md index 89df8006ff8..4db46d04a44 100644 --- a/docs/platformcolor.md +++ b/docs/platformcolor.md @@ -25,7 +25,7 @@ You can use the `PlatformColor` function to access native colors on the target p For a full list of the types of system colors supported, see: - [Android R.attr](https://developer.android.com/reference/android/R.attr) -- [iOS Color](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/#dynamic-system-colors) +- [iOS Color](https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors?language=objc) ## Example From f517f6a23a2a687121a07784b963ad23a1d524d2 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 20 Apr 2020 20:25:14 +0200 Subject: [PATCH 8/8] typo fix --- docs/dynamiccolorios.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/dynamiccolorios.md b/docs/dynamiccolorios.md index 7396c068f3f..2a24cbfb77d 100644 --- a/docs/dynamiccolorios.md +++ b/docs/dynamiccolorios.md @@ -25,7 +25,7 @@ At runtime, the system will choose which of the two colors to display depending -> If you’re familiar `@media (prefers-color-scheme: dark)` in CSS, this is similar! Only instead of defining all the colors in a media query, you define which color to use under what circumstances right there where you're using it. Neat! +> If you’re familiar with `@media (prefers-color-scheme: dark)` in CSS, this is similar! Only instead of defining all the colors in a media query, you define which color to use under what circumstances right there where you're using it. Neat!