定义你的主题

任何使用此库的项目都应该有一个全局主题对象，其中指定了间距、颜色、断点等一组值。这些值可用于 Restyle 组件，因此您可以例如编写 backgroundColor="cardPrimary" 来使用主题中命名的颜色。事实上，TypeScript 强制 backgroundColor 属性只接受在主题中定义的颜色，并在现代编辑器中自动完成这些值。

以下是一个基本主题的示例。请务必阅读基础知识中的其他章节，了解有关如何设置不同主题值的更多详细信息。

import {createTheme} from '@shopify/restyle';

const palette = {
  purpleLight: '#8C6FF7',
  purplePrimary: '#5A31F4',
  purpleDark: '#3F22AB',

  greenLight: '#56DCBA',
  greenPrimary: '#0ECD9D',
  greenDark: '#0A906E',

  black: '#0B0B0B',
  white: '#F0F2F3',
};

const theme = createTheme({
  colors: {
    mainBackground: palette.white,
    cardPrimaryBackground: palette.purplePrimary,
  },
  spacing: {
    s: 8,
    m: 16,
    l: 24,
    xl: 40,
  },
  textVariants: {
    header: {
      fontWeight: 'bold',
      fontSize: 34,
    },
    body: {
      fontSize: 16,
      lineHeight: 24,
    },
    defaults: {
      // We can define a default text variant here.
    },
  },
});

export type Theme = typeof theme;
export default theme;

注意：createTheme 除了强制主题具有与 BaseTheme 相同的形状之外，不执行任何操作，但它会保留用户特定值的类型（例如，主题具有的颜色），因此您不会因 BaseTheme 中的 { [key:string]: any } 而失去类型安全。

此主题应在您的 React 树的顶部传递给 ThemeProvider

import {ThemeProvider} from '@shopify/restyle';
import theme from './theme';

const App = () => (
  <ThemeProvider theme={theme}>{/* Rest of the app */}</ThemeProvider>
);