@uiw/react-native/lib/theme/index.js

UIW for React Native

import { createTheme } from '@shopify/restyle';
const basePalette = {
    // 基础色
    white: '#FFFFFF',
    black: '#000000',
    transparent: 'transparent',
    // 功能色
    func50: '#FBF5F5',
    func100: '#FFF7E3',
    func200: '#FFD21D',
    func300: '#52C41A',
    func400: '#1890FF',
    func500: '#F86E21',
    func600: '#F4333C',
    func700: 'transparent',
    func800: 'transparent',
    func900: 'transparent',
};
/** 默认调色板 */
const palette = {
    ...basePalette,
    // 主色
    primary50: '#E5F1FF',
    primary100: '#3AA3FF',
    primary200: '#005DFF',
    primary300: 'rgba(0, 93, 255, 0.7)',
    primary400: 'rgba(0, 93, 255, 0.4)',
    primary500: '#ebedf0',
    primary600: 'transparent',
    primary700: 'transparent',
    primary800: 'transparent',
    primary900: 'transparent',
    // 中性色
    gray50: '#F5F5F5',
    gray100: '#E5E5E5',
    gray200: '#CCCCCC',
    gray300: '#999999',
    gray400: '#666666',
    gray500: '#333333',
    gray600: 'rgba(0, 0, 0, 0.4)',
    gray700: 'rgba(0, 0, 0, 0.04)',
    gray800: 'transparent',
    gray900: 'transparent',
};
const lightTheme = createTheme({
    spacing: {
        x0: 0,
        x1: 4,
        x2: 8,
        x3: 12,
        x4: 16,
        x5: 20,
        x6: 24,
        x7: 28,
        x8: 32,
        x9: 36,
        x10: 40,
    },
    borderRadii: {
        x0: 0,
        x1: 4,
        x2: 8,
        x3: 12,
        x4: 16,
        x5: 20,
        x6: 24,
        x7: 28,
        x8: 32,
        x9: 36,
        x10: 40,
    },
    zIndices: {
        '1': 1,
        '9': 9,
        '19': 9,
        '29': 9,
        '39': 9,
        '49': 9,
        '59': 9,
        '69': 9,
        '79': 9,
        '89': 9,
        '99': 99,
        '199': 199,
        '299': 299,
        '399': 399,
        '499': 499,
        '599': 599,
        '699': 699,
        '799': 799,
        '899': 899,
        '999': 999,
    },
    breakpoints: {
        phone: 0,
        tablet: 768,
        largeTablet: 1024,
    },
    colors: {
        ...palette,
        background: palette.gray50,
        mask: palette.white,
        border: palette.gray200,
        icon: palette.gray300,
        disabled: palette.gray200,
        text: palette.gray500,
        text_active: palette.white,
        primary_text: palette.black,
        primary_background: '#3578e5',
    },
    textVariants: {
        defaults: {
            fontFamily: 'PingFang SC',
        },
        h0: {
            fontWeight: 'bold',
            fontSize: 28,
            lineHeight: 39,
            fontFamily: 'PingFang SC',
        },
        h1: {
            fontWeight: '500',
            fontSize: 18,
            lineHeight: 25,
            fontFamily: 'PingFang SC',
        },
        h2: {
            fontWeight: '500',
            fontSize: 16,
            lineHeight: 22,
            fontFamily: 'PingFang SC',
        },
        h3: {
            fontWeight: '500',
            fontSize: 14,
            lineHeight: 19,
            fontFamily: 'PingFang SC',
        },
        h4: {},
        h5: {},
        h6: {},
        h7: {},
        h8: {},
        h9: {},
        p0: {
            fontSize: 16,
            lineHeight: 22,
            fontFamily: 'PingFang SC',
        },
        p1: {
            fontSize: 14,
            lineHeight: 19,
            fontFamily: 'PingFang SC',
        },
        p2: {
            fontSize: 12,
            lineHeight: 16,
            fontFamily: 'PingFang SC',
        },
        p3: {
            fontSize: 10,
            lineHeight: 14,
            fontFamily: 'PingFang SC',
        },
        p4: {},
        p5: {},
        p6: {},
        p7: {},
        p8: {},
        p9: {},
        d0: {
            fontSize: 24,
            lineHeight: 28,
            fontFamily: 'Roboto',
        },
        d1: {
            fontSize: 18,
            lineHeight: 21,
            fontFamily: 'Roboto',
        },
        d2: {
            fontSize: 14,
            lineHeight: 19,
            fontFamily: 'Roboto',
        },
        d3: {
            fontSize: 12,
            lineHeight: 14,
            fontFamily: 'Roboto',
        },
        d4: {},
        d5: {},
        d6: {},
        d7: {},
        d8: {},
        d9: {},
    },
    theme: 'light',
});
/** 深色调色板 */
const darkPalette = {
    ...basePalette,
    // 主色
    primary50: 'rgba(0, 93, 255, 0.3)',
    primary100: '#3AA3FF',
    primary200: '#005DFF',
    primary300: 'rgba(0, 93, 255, 0.7)',
    primary400: 'rgba(0, 93, 255, 0.4)',
    primary500: '#1E1E28', // 苹果暗模式背景色
    primary600: 'transparent',
    primary700: 'transparent',
    primary800: 'transparent',
    primary900: 'transparent',
    // 中性色
    gray50: '#0D0D0D',
    gray100: 'rgba(255, 255, 255, 0.15)',
    gray200: 'rgba(255, 255, 255, 0.25)',
    gray300: 'rgba(255, 255, 255, 0.4)',
    gray400: 'rgba(255, 255, 255, 0.6)',
    gray500: 'rgba(255, 255, 255, 0.8)',
    gray600: 'rgba(0, 0, 0, 0.4)',
    gray700: 'rgba(0, 0, 0, 0.04)',
    gray800: '#1E1E28', // 苹果暗模式弹开颜色
    gray900: 'transparent',
};
const darkTheme = {
    ...lightTheme,
    colors: {
        ...darkPalette,
        background: darkPalette.gray50,
        mask: darkPalette.gray800,
        border: darkPalette.gray400,
        icon: darkPalette.gray300,
        disabled: darkPalette.gray200,
        text: darkPalette.gray500,
        text_active: darkPalette.white,
        primary_text: palette.white,
        primary_background: '#3578e5',
    },
    theme: 'dark',
};
export default {
    lightTheme,
    darkTheme,
};