@rainbowkit-theme-generator

[zwergdev]

Theme generator

I suggest creating a theme generator for rainbowkit. This could be a regular site like SHADCN UI THEME GENERATOR. What do you think? I tried to create a theme without using <ConnectButton.Custom /> and it worked. A generator could help a lot!

        <RainbowKitProvider
          theme={{
            colors: {
              accentColor: '#someColor',
              accentColorForeground: '#someColor',
              actionButtonBorder: '#someColor',
              actionButtonBorderMobile: '#someColor',
              actionButtonSecondaryBackground: '#someColor',
              closeButton: '#someColor',
              closeButtonBackground: '#someColor',
              connectButtonBackground: '#someColor',
              connectButtonBackgroundError: '#someColor',
              connectButtonInnerBackground: '#someColor',
              connectButtonText: '#someColor',
              connectButtonTextError: '#someColor',
              connectionIndicator: '#someColor',
              downloadBottomCardBackground: '#someColor',
              downloadTopCardBackground: '#someColor',
              error: '#someColor',
              generalBorder: '#someColor',
              generalBorderDim: '#someColor',
              menuItemBackground: '#someColor',
              modalBackdrop: '#someColor',
              modalBackground: '#someColor',
              modalBorder: '#someColor',
              modalText: '#someColor',
              modalTextDim: '#someColor',
              modalTextSecondary: '#someColor',
              profileAction: '#someColor',
              profileActionHover: '#someColor',
              profileForeground: '#someColor',
              selectedOptionBorder: '#someColor',
              standby: '#someColor',
            },
            shadows: {
              connectButton: '#someColor',
              dialog: '#someColor',
              profileDetailsAction: '#someColor',
              selectedOption: '#someColor',
              selectedWallet: '#someColor',
              walletLogo: '#someColor',
            },
            fonts: { body: 'someFont' },
            radii: {
              actionButton: 'string',
              connectButton: 'string',
              menuButton: 'string',
              modal: 'string',
              modalMobile: 'string',
            },
            blurs: {
              modalOverlay: 'string',
            },
          }}
        >
          {children}
        </RainbowKitProvider>

[zwergdev]

rainbowkit-theme.com

[magiziz]

@zwergdev That is a great idea. We kind of have a color picker in our docs here: https://www.rainbowkit.com. Not sure if we should bring a whole new customized theme generator since we already show a few colors for the users.

Also this would mean that we would have to have two theme generators since it'll be used for "accent" color and "mode" color.

[zwergdev]

Anyway, if your application/design requires custom color/background. What will you do?

Step-by-step checking [key]: value or use this site? 🙈

Thanks for response!

[magiziz]

Yeah in this case we would pass in keys and values, but that's so more than expected. In our docs we're trying to make things super simple and just show a few color options and then devs can start playing around with the colors in development.

[zwergdev]

Closed due to rainbow-me/rainbow#5408 issue.