 > ai generated artwork, "multicolor pen"
npm install dynamic-color!4D176908-79ED-44A3-B45F-F5946A2E6458
> ai generated artwork, "multicolor pen"
Dynamic Color is a library that allows you to easily implement dynamic colors in your React Native project that automatically change based on the current theme or accessibility settings, making the process more efficient and less error-prone. It requires you to set up a theme object with the colors you want to use, and then you can access them in your styling with the DynamicColor function.
``tsx
// Error: Implicit conversion of a 'symbol' to a 'string' will fail at runtime.
background-color: ${DynamicColorIOS({ light: 'white', dark: 'black' })};
// Good: with dynamic-color
background-color: ${DynamicColor({ light: 'white', dark: 'black' })};
`
To install the dynamic-color library in your React Native project, you can use npm or yarn:
`bashUsing npm
npm install —save dynamic-color
You will also need to install @emotion/react and @emotion/native if you want to use the library with styled components.
`bash
Using npm
npm install —save @emotion/react @emotion/nativeUsing yarn
yarn add @emotion/react @emotion/native
`The library does not have any native impact to your project (for now) so there is no need to rebuild binaries.
$3
The library requires identical objects in your emotion theme that are selected based on selector keys (
mode and highContrast for now).`tsx
import { ThemeProvider } from '@emotion/react';
import { useColorScheme } from 'react-native';function App() {
const colorScheme = useColorScheme();
return (
theme={{
mode: colorScheme,
light: {
primary: '#0000ff',
text: {
primary: '#000000',
secondary: '#121212',
},
},
dark: {
primary: '#00ffff',
text: {
primary: '#ffffff',
secondary: '#cccccc',
},
},
// (Optional)
highContrast: false,
highContrastLight: { ... },
highContrastDark: { ... }
}}
>
{children}
);
}
`
How it works
The
DynamicColor function allows you to specify different color values for different theme modes (light, dark, and high contrast) in a single call. The function takes in an object with keys for each theme mode, and the corresponding value is the color to be used for that mode.For example, the following code snippet:
`tsx
background-color: ${DynamicColor({ light: 'white', dark: 'black' })};
`Will be converted into a string that looks like this:
`tsx
background-color: color(DynamicColor, '{"light":"white","dark":"black"}');
`This string is then passed through the
StyleSheet.flatten() function, which is patched to convert the css string color(DynamicColor, '*') back into DynamicColorIOS. This allows the @emotion/native library to correctly render the appropriate color based on the current theme mode.Usage
All of the available DynamicColor functions can be used in several ways to access colors from your theme object.
$3
The most basic usage is to reference colors by dot notation. For example, in your theme object, you might have a property primary that holds the value of a color. You can access this color by calling
DynamicColor('primary') in your styling.`tsx
const Foo = styled.View
`This will automatically resolve to the correct color based on the current mode and highContrast settings in your theme object.
$3
You can also pass an object to the DynamicColor function with specific colors for each color scheme or contrast setting. For example:
`tsx
const Bar = styled.View
`This will use the color #fff when the mode is set to light, and #111 when it's set to dark.
You can also specify colors for high contrast mode, by including highContrastLight and highContrastDark properties.
`tsx
const Bar = styled.View
`This will use the color #ddd when the mode is set to light and highContrast is false, and #fff when highContrast is true.
$3
You can also use a function to reference colors based on props or other variables. The function will be passed the props object, and should return either a string with a dot notation or an object with specific colors.
`tsx
const Baz = styled.View
`This will use the color blue when the props.active is true and the mode is set to light, and text.primary when props.active is true and mode is set to dark or when props.active is false.
$3
Please note that when already using props function inside a styled component, you need to pass the props object down to the DynamicColor function.
`tsx
const Button = styled.View
background-color: ${DynamicColor('primary')(props)};
color: ${DynamicColor('text.primary')(props)};
}
`useDynamicColor
React hook for use of dynamic colours directly in style properties or other direct props usage that supports
DynamicColorIOS.`tsx
import { useDynamicColor } from 'dynamic-color';function Button() {
const dynamicColor = useDynamicColor();
return tintColor={dynamicColor('primary.main')}
style={{
color: dynamicColor('primary.main')
}}
/>
}
`withDynamicColor
You can use dynamic color outside of the React context with
withDynamicColor function. The gotcha is that you will have to maintain theme and mode yourself.`tsx
import { withDynamicColor } from 'dynamic-color';
import { theme } from './theme';const dynamicColor = withDynamicColor({
mode: Appearance.getColorScheme(),
...theme,
});
dynamicColor('primary.color');
// Easily update the theme with the merge feature
Appearance.addChangeListener(() =>
dynamicColor.merge({ mode: Appearance.getColorScheme() }));
// Or set theme directly;
dynamicColor.theme.mode = 'dark';
``MIT