CODEWITHSUNDEEP
reactjstypescriptnode-modulesstyled-componentsdecentralized-applications
Cj Miller
Cj Miller

Reputation: 51

Cannot Change Styled Components Theme Provider

I'm trying to fork the PancakeSwap exchange interface from GitHub and add my own styling to it. The problem is I haven't found a way to change the header nav panel as well as 80% of the rest of the react ts components.

I've followed multiple tutorials and have been reading up on typescript's styled-component documentation but I haven't been able to find any examples or documentation that is similar to Pancakeswap's ThemeProvider setup.

The core theme provider code that is used is: pancake-uikit - Here is where all my confusion lies and where I haven't been able to find any documentation for this type of theme setup.

If you visit the pancake-uikit repository I linked for Pancakeswap, you can see all of the core styled-components related code.

To make my question easier to understand I will provide a Diagram of my project setup: enter image description here

Here is a picture of pancakeswap: enter image description here

Here is a picture of of what I've been able to change: enter image description here

The github repo for my code is here: https://github.com/CJ-Miller/andromeda-swap

I know this is a very open-ended question but I'm on week 2 of trying to get this to work and any help would be greatly appreciated.

Upvotes: 1

Views: 2172

Answers (2)

Blaise
Blaise

Reputation: 56

Most projects are changing the theme by forking the @pancakeswap-libs node_module.

If you look inside the uikit/dist folder there is a file named index.esm.js.

Most of the styles for the light and dark theme are on lines 2774 - 2791 and looks like this.

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%)",
} });

I found one other color variable on line 1746.

Here is an example of how another project added their forked node_module to their package.json file.

"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",

Here's a link to that repo https://github.com/veganswap-defi/vegan-frontend-farms/blob/master/package.json

Upvotes: 2

superhawk610
superhawk610

Reputation: 2653

To customize theme colors, you just need to tweak the theme that you're giving to your SCThemeProvider (in src/ThemeContext.tsx). Here's an example of how to change the background colors for Card components:

// 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>
  )
};

You can use the same method to customize all other components. You can check the component file in @pancakeswap-libs/uikit, or you can just look at the PancakeTheme interface to see what properties are available. Note that some properties are constant (typed as string) while others depend on different variants (like cardHeaderBackground above, they'll be typed as objects where each key corresponds to a different variant).

Here's a CodeSandbox with a simple demo.

Upvotes: 4

Related Questions