在 priceline 设计系统中实现暗模式答案

【问题标题】：Implementing dark mode in priceline design-system在 priceline 设计系统中实现暗模式
【发布时间】：2022-01-26 23:58:15
【问题描述】：

我正在使用priceline design-system，但我对它的暗模式支持感到困惑。使用此设计系统时，实现暗模式的最佳方式是什么？我应该为黑暗创建单独的主题还是有其他方法？

【问题讨论】：

标签： reactjs themes darkmode

【解决方案1】：

您可以为此使用<ThemeProvider>，如下所示：

    <ThemeProvider
  theme={{
    palette: {
      primary: {
        base: '#ff001d',
        dark: '#ffa52f'
      }
    }
  }}
>
  <Button>Custom</Button>
</ThemeProvider>

这会输出this，红色表示正常，橙色表示深色。它开启了鼠标悬停，但我使用的 GIF 录制软件没有显示。

使用 javascript，您可以使用以下方法：

语法：

getPaletteColor(colorShade)(props)

getPaletteColor(color, shade)(props)

getPaletteColor(shade)(props)

用法：

const Component = styled.div`
  color: ${getPaletteColor('primary.base')};
`

我自己对javascript部分不太确定，但根据多个来源它是正确的。

【讨论】：

这个物体中的深色是底色变暗，并不意味着这种深色用于深色模式。我认为我们应该为黑暗模式创建整个主题。
哦，我没有意识到你的意思是暗模式，例如当 iPhone 的暗模式打开时，我以为你的意思是暗版的组件。对于那个很抱歉。如果您正在为类似的东西创作，我认为您可能确实想制作一个新主题。
是的。您知道一种从现有浅色调色板自动创建深色主题调色板的方法吗？
不，唯一的方法是复制现有的并从那里编辑或从头开始。