将darkmode实施到具有针迹本地的造型的反应本地应用

发布于 2025-02-11 03:36:43 字数 1409 浏览 1 评论 0原文

我有一个用针迹本地css组合的React-native应用程序。 针迹本地中定义的颜色如下:

const themeLight = {
  theme: {
    fonts: {
      inter: 'Inter',
      system: 'system-ui',
    },
    fontSizes: {
      1: 14,
      2: 16,
      3: 18,
      4: 20,
      5: 24,
      6: 32,
      7: 36,
      8: 50,
    },
    fontWeights: {
      400: '400',
      500: '500',
      700: '700',
    },
    lineHeights: {},
    letterSpacings: {},
    colors: {
      blue100: '#EFF3FF',
      blue200: '#DEE7FF',
      blue300: '#7399FF',
      blue400: '#4576FF',
      blue500: '#1755FF',
      blue600: '#1244CC',
      blue700: '#0D3399',
      blue800: '#092266',
      blue900: '#041133',
      grey100: '#F8F8F8',
      grey200: '#EEEEEE',
      grey300: '#E6E6E6',
      grey400: '#CDCDCD',
      grey500: '#B3B3B3',
      grey600: '#999999',
      grey700: '#4F4F4F',
      grey800: '#3E3E3E',
      grey900: '#222222',
      red100: '#FFF0F0',
      red200: '#FFE4E4',
      red300: '#FF8282',
      red400: '#FF4444',
      red500: '#DB0000',
      red600: '#CC1010',
      red700: '#BC0000',
      red800: '#9D0000',
      red900: '#7D0000',
      green600: '#23C023',
      darkBlue: '#0A0A32',
      
    },

我需要创建一个深色主题以符合光主题。在整个应用程序中,背景颜色尚未定义,并且是白色的。有没有办法在针迹本地主题中设置背景颜色?所有屏幕都将每个屏幕设置为背景颜色真的很麻烦。在iOS中,是否有一种简单的方法使用动态颜色/系统颜色? (从问题中可以猜到的是,在反应本地的经验不多)。

I have a react-native app styled with a combination of stitches-native and css. The colors defined within the stitches-native are as follows:

const themeLight = {
  theme: {
    fonts: {
      inter: 'Inter',
      system: 'system-ui',
    },
    fontSizes: {
      1: 14,
      2: 16,
      3: 18,
      4: 20,
      5: 24,
      6: 32,
      7: 36,
      8: 50,
    },
    fontWeights: {
      400: '400',
      500: '500',
      700: '700',
    },
    lineHeights: {},
    letterSpacings: {},
    colors: {
      blue100: '#EFF3FF',
      blue200: '#DEE7FF',
      blue300: '#7399FF',
      blue400: '#4576FF',
      blue500: '#1755FF',
      blue600: '#1244CC',
      blue700: '#0D3399',
      blue800: '#092266',
      blue900: '#041133',
      grey100: '#F8F8F8',
      grey200: '#EEEEEE',
      grey300: '#E6E6E6',
      grey400: '#CDCDCD',
      grey500: '#B3B3B3',
      grey600: '#999999',
      grey700: '#4F4F4F',
      grey800: '#3E3E3E',
      grey900: '#222222',
      red100: '#FFF0F0',
      red200: '#FFE4E4',
      red300: '#FF8282',
      red400: '#FF4444',
      red500: '#DB0000',
      red600: '#CC1010',
      red700: '#BC0000',
      red800: '#9D0000',
      red900: '#7D0000',
      green600: '#23C023',
      darkBlue: '#0A0A32',
      
    },

I need to create a dark theme to comply with the light theme. Throughout the app, the background color is not defined and it's white. Is there a way to set a background colour within stitches-native theme? It will be really cumbersome to go all of the screens and set each screen to a background colour. Is there an easy way of using dynamic colours/system colours as in iOS? (Not so much experience in react-native as you can guess from the question).

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文