Theme

The @shopify/restyle library provides us with complete theme customization functions.

Spacing spacing

name	description	value
x0	1x	0
x1	1x	4
x2	2 times	8
x3	3 times	12
x4	4 times	16
x5	5 times	20
x6	6 times	24
x7	7 times	28
x8	8 times	32
x9	9 times	36
x10	10 times	40

Rounded corners

name	description	value
x0	1x	0
x1	1x	4
x2	2 times	8
x3	3 times	12
x4	4 times	16
x5	5 times	20
x6	6 times	24
x7	7 times	28
x8	8 times	32
x9	9 times	36
x10	10 times	40

Media query breakpoint

name	description	value
phone	mobile phone	0
tablet	tablet	768
largeTablet	Large Tablet	1024

Common colors

name	description	value
transparent	transparent	transparent
white	white	#FFFFFF
black	black	#000000
func50	Function color 0	#FBF5F5
func100	Function color 1	#FFF7E3
func200	Function color 2	#FFD21D
func300	Functional color 3	#52C41A
func400	Functional color 4	#1890FF
func500	Functional color 5	#F86E21
func600	Functional color 6	#F4333C
func700	Preserve functional colors	transparent
func800	Preserve functional colors	transparent
func900	Preserve functional colors	transparent

We set func700/func800/func900 as reserved functional colors to facilitate developers to expand

Light mode color (inherit universal color)

name	description	value
primary50	Main color	#E5F1FF
primary100	Primary color	#3AA3FF
primary200	Primary color	#005DFF
primary300	Primary color	rgba(0, 93, 255, 0.7)
primary400	Primary color	rgba(0, 93, 255, 0.4)
primary500	Keep primary color	transparent
primary600	Keep primary color	transparent
primary700	Keep primary color	transparent
primary800	Keep primary color	transparent
primary900	Keep primary color	transparent
gray50	Neutral colors	#F5F5F5
gray100	Neutral colors	#E5E5E5
gray200	Neutral colors	#CCCCCC
gray300	Neutral colors	#999999
gray400	Neutral colors	#666666
gray500	Neutral colors	#333333
gray600	Neutral color	rgba(0, 0, 0, 0.4)
gray700	Neutral color	rgba(0, 0, 0, 0.04)
gray800	Keep neutral colors	transparent
gray900	Keep neutral colors	transparent
background	Background color	Same as gray50
mask	Mask	Same as gray600
border	Border	Same as gray200
icon	Icon	Same as gray300
disabled	Disabled	Same as gray200
text	text	same as gray500
text_active	Current text	Same as white

We set primary600/primary700/primary800/primary900 as reserved main colors, gray800 /gray900 as reserved neutral colors to facilitate developers to expand

Dark mode color (inherit universal color)

name	description	value
primary50	Primary color	rgba(0, 93, 255, 0.3)
primary100	Primary color	#3AA3FF
primary200	Primary color	#005DFF
primary300	Primary color	rgba(0, 93, 255, 0.7)
primary400	Primary color	rgba(0, 93, 255, 0.4)
primary500	Keep primary color	transparent
primary600	Keep primary color	transparent
primary700	Keep primary color	transparent
primary800	Keep primary color	transparent
primary900	Keep primary color	transparent
gray50	Neutral colors	#131C22
gray100	Neutral color	rgba(255, 255, 255, 0.15)
gray200	Neutral color	rgba(255, 255, 255, 0.25)
gray300	Neutral color	rgba(255, 255, 255, 0.4)
gray400	Neutral color	rgba(255, 255, 255, 0.6)
gray500	Neutral color	rgba(255, 255, 255, 0.8)
gray600	Neutral color	rgba(0, 0, 0, 0.4)
gray700	Neutral color	rgba(0, 0, 0, 0.04)
gray800	Keep neutral colors	transparent
gray900	Keep neutral colors	transparent
background	Background color	Same as gray50
mask	Mask	Same as gray600
border	Border	Same as gray400
icon	Icon	Same as gray300
disabled	Disabled	Same as gray300
text	text	same as gray500
text_active	Current text	Same as white

TextVariant

Name	Font size (fontSize)	Font weight (fontWeight)	Line height (lineHeight)
h0	24	bold	39
h1	18	500	25
h2	16	500	22
h3	14	500	19
h4
h5
h6
h7
h8
h9
p0	16		22
p1	14		19
p2	12		16
p3	10		14
p4
p5
p6
p7
p8
p9
d0	24		28
d1	18		21
d2	12		14
d3
d4
d5
d6
d7
d8
d9

We set h4/h5/h6/h7/h8/h9/p4/p5/p6/p7/p8/ p9/d3/d4/d5/d6/d7/d8/d9 are reserved font styles to facilitate developers to expand

How to override application themes

It is very simple to overwrite the application theme. You only need to do the following:

1. Define your own theme color file in the application:

import { theme, Theme } from '@td-design/react-native';

export const lightTheme: Theme = {
  ...theme.lightTheme,
  colors: {
    ...theme.lightTheme.colors,
    //Copy the color that needs to be overwritten
  },
};

export const darkTheme: Theme = {
...theme.darkTheme,
  colors: {
    ...theme.darkTheme.colors,
    //Copy the color that needs to be overwritten
  },
};

2. Inject the custom theme into ThemeProvider in app.tsx:

//Other imports
import { ThemeProvider } from '@td-design/react-native';
import { lightTheme, darkTheme } from './theme';

export default () => {
  //other code

  return <ThemeProvider theme={lightTheme}>{/**Other Provider */}</ThemeProvider>;
};

3. Achieve switching between light mode and dark mode

//Other imports
import { ThemeProvider } from '@td-design/react-native';
import { lightTheme, darkTheme } from './theme';

export default () => {
  const [dark, setDark] = useState(false);
  //other code

  return (
    <ThemeProvider theme={dark ? darkTheme : lightTheme}>
      {/**Pass the setDark method to the application through context or other global variables and call it where needed. */}
      {/**Other Providers */}
    </ThemeProvider>
  );
};