无法更改样式化组件主题提供程序

Posted 2023-02-19

【中文标题】无法更改样式化组件主题提供程序

【英文标题】：Cannot Change Styled Components Theme Provider

【发布时间】：2021-09-04 17:00:04

【问题描述】：

我正在尝试从 GitHub 分叉 PancakeSwap exchange interface 并向其中添加我自己的样式。问题是我还没有找到一种方法来更改标题导航面板以及其余 80% 的 react ts 组件。

我已经学习了多个教程，并且一直在阅读 typescript 的 styled-component documentation，但我找不到任何类似于 Pancakeswap 的 ThemeProvider 设置的示例或文档。

使用的 core 主题提供程序代码是：pancake-uikit - 这是我所有困惑的地方，也是我无法找到任何文档的地方对于这种类型的主题设置。

如果您访问我为 Pancakeswap 链接的 pancake-uikit 存储库，您可以看到所有与核心样式组件相关的代码。

为了让我的问题更容易理解，我将提供我的项目设置图：

这是 pancakeswap 的图片：

这是我能够改变的图片：

我的代码的 github 仓库在这里：https://github.com/CJ-Miller/andromeda-swap

我知道这是一个非常开放式的问题，但我正处于第 2 周试图让它发挥作用，任何帮助将不胜感激。

【参考方案1】：

要自定义主题颜色，您只需调整您提供给SCThemeProvider 的theme（在src/ThemeContext.tsx 中）。以下是如何更改 Card 组件的背景颜色的示例：

// src/ThemeContext.tsx

import  ThemeProvider as SCThemeProvider  from 'styled-components';
import 
  light as lightBase,
  dark as darkBase,
  PancakeTheme
 from '@pancakeswap-libs/uikit';

// customize light theme
const light: PancakeTheme = lightBase;
light.colors.text = '#222';
light.card.background = '#f4f4f4';
light.card.cardHeaderBackground = 
  default: 'coral',
  violet: 'goldenrod',
  blue: 'aquamarine'
;

// customize dark theme
const dark: PancakeTheme = darkBase;
dark.colors.text = '#444';
dark.card.background = '#111';
dark.card.cardHeaderBackground = 
  default: 'bisque',
  violet: 'chartreuse',
  blue: 'blueviolet'
;

// ...

const ThemeContextProvider: React.FC = ( children ) => 
  // ...

  return (
    <ThemeContext.Provider value= isDark, toggleTheme >
      <SCThemeProvider theme=isDark ? dark : light>children</SCThemeProvider>
    </ThemeContext.Provider>
  )
;

您可以使用相同的方法自定义所有其他组件。可以查看@pancakeswap-libs/uikit中的组件文件，也可以直接看PancakeTheme界面看看有哪些属性可用。请注意，一些属性是常量（类型为 string），而另一些属性取决于不同的变体（如上面的 cardHeaderBackground，它们将被类型化为对象，其中每个键对应一个不同的变体）。

这是一个CodeSandbox 的简单演示。

【参考方案2】：

大多数项目通过分叉 @pancakeswap-libs 节点模块来改变主题。

如果您查看 uikit/dist 文件夹，则会有一个名为 index.esm.js 的文件。

大多数浅色和深色主题的样式都在第 2774 - 2791 行，看起来像这样。

var baseColors = 
failure: "#ED4B9E",
primary: "#537f91",
primaryBright: "#537f91",
primaryDark: "#537f91",
secondary: "#787878",
success: "#31D0AA",
warning: "#FFB237",

var lightColors = __assign(__assign(__assign(, baseColors), brandColors),  background: "#FAF9FA", backgroundDisabled: "#E9EAEB", contrast: "#191326", invertedContrast: "#c1dec0", input: "#eeeaf4", tertiary: "#EFF4F5", text: "#537f91", textDisabled: "#BDC2C4", textSubtle: "#537f91", borderColor: "#E9EAEB", card: "#FFFFFF", gradients: 
    bubblegum: "linear-gradient(139.73deg, #E6FDFF 0%, #F3EFFF 100%)",
 );
var darkColors = __assign(__assign(__assign(, baseColors), brandColors),  secondary: "#FFFFFF", background: "#343135", backgroundDisabled: "#3c3742", contrast: "#FFFFFF", invertedContrast: "#191326", input: "#483f5a", primaryDark: "#0098A1", tertiary: "#353547", text: "#ffff", textDisabled: "#666171", textSubtle: "#ffff", borderColor: "#524B63", card: "#27262c", gradients: 
    bubblegum: "linear-gradient(139.73deg, #313D5C 0%, #3D2A54 100%)",
 );

我在第 1746 行发现了另一个颜色变量。

这是另一个项目如何将他们的分叉 node_module 添加到他们的 package.json 文件的示例。

"dependencies": 
"@binance-chain/bsc-use-wallet": "^0.8.1",
"@craco/craco": "^6.1.1",
"@crowdin/crowdin-api-client": "^1.10.1",
"@ethersproject/abi": "^5.0.7",
"@pancakeswap-libs/uikit": "veganswap-defi/vegan-uikit",
"@reduxjs/toolkit": "^1.5.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-router-dom": "^5.1.5",

这是该仓库https://github.com/veganswap-defi/vegan-frontend-farms/blob/master/package.json的链接