0

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

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

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

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

为了让我的问题更容易理解，我将提供我的项目设置图： 在此处输入图像描述

这是pancakeswap的图片： 在此处输入图像描述

这是我能够更改的图片： 在此处输入图像描述

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

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

4

2 回答 2

3

要自定义主题颜色，您只需调整theme您提供给SCThemeProvider(in 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 。

于 2021-06-23T01:11:45.843 回答
1

大多数项目通过分叉@pancakeswap-libs node_module 来改变主题。

如果您查看 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

于 2021-07-04T00:29:09.803 回答