From 353d2efb0eba26f30d7c1b61403ac2fb245fa080 Mon Sep 17 00:00:00 2001 From: Mark Dalgleish Date: Thu, 28 Apr 2022 08:31:28 +1000 Subject: [PATCH] feat: support custom accent colors, fix preset contrast issues (#267) --- .changeset/eighty-lies-mix.md | 53 +++++++++++++ .changeset/long-pandas-eat.md | 7 ++ .changeset/mean-birds-behave.md | 7 ++ .changeset/tricky-adults-bake.md | 6 +- README.md | 37 +++++++-- packages/example/pages/_app.tsx | 23 +++--- .../src/components/Button/ActionButton.tsx | 2 +- .../src/components/ChainModal/ChainModal.tsx | 2 +- .../components/MenuButton/MenuButton.css.ts | 2 +- .../ModalSelection/ModalSelection.tsx | 2 +- .../src/css/cssObjectFromTheme.test.ts | 2 +- .../src/css/cssStringFromTheme.test.ts | 2 +- packages/rainbowkit/src/css/sprinkles.css.ts | 2 +- packages/rainbowkit/src/themes/baseTheme.ts | 13 ++- packages/rainbowkit/src/themes/darkTheme.ts | 37 ++++++--- packages/rainbowkit/src/themes/lightTheme.ts | 33 +++++--- .../rainbowkit/src/themes/midnightTheme.ts | 33 +++++--- site/data/docs/custom-theme.mdx | 2 +- site/data/docs/theming.mdx | 79 +++++++++++++++---- 19 files changed, 263 insertions(+), 81 deletions(-) create mode 100644 .changeset/eighty-lies-mix.md create mode 100644 .changeset/long-pandas-eat.md create mode 100644 .changeset/mean-birds-behave.md diff --git a/.changeset/eighty-lies-mix.md b/.changeset/eighty-lies-mix.md new file mode 100644 index 0000000000..fbcaf88624 --- /dev/null +++ b/.changeset/eighty-lies-mix.md @@ -0,0 +1,53 @@ +--- +'@rainbow-me/rainbowkit': patch +--- + +Add support for custom `accentColor` values to built-in themes and add an `accentColorForeground` option to support custom text colors when rendered on top of the accent color + +To enable this change, the built in `blue`, `green`, `orange`, `pink`, `purple` and `red` accent color presets are now provided by an `accentColors` property on each theme function. If you were using the `accentColor` option previously and want to maintain the existing behavior, you’ll need to make the following change: + +```diff +darkTheme({ +- accentColor: 'purple', ++ ...darkTheme.accentColors.purple, +}); +``` + +**Example usage** + +When using a custom accent color: + +```tsx +import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'; + +const App = () => { + return ( + + {/* Your App */} + + ); +}; +``` + +When using a built-in accent color preset: + +```tsx +import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'; + +const App = () => { + return ( + + {/* Your App */} + + ); +}; +``` diff --git a/.changeset/long-pandas-eat.md b/.changeset/long-pandas-eat.md new file mode 100644 index 0000000000..1e7b3b32f5 --- /dev/null +++ b/.changeset/long-pandas-eat.md @@ -0,0 +1,7 @@ +--- +'@rainbow-me/rainbowkit': patch +--- + +Fix accent color contrast issues with `dark`/`midnight` themes + +When using the `green`, `orange` or `pink` accent color presets, the foreground text color is now black rather than white to improve contrast. diff --git a/.changeset/mean-birds-behave.md b/.changeset/mean-birds-behave.md new file mode 100644 index 0000000000..937326c4fa --- /dev/null +++ b/.changeset/mean-birds-behave.md @@ -0,0 +1,7 @@ +--- +'@rainbow-me/rainbowkit': patch +--- + +Remove the `yellow` accent color preset from built-in themes + +Since the color value used for the yellow preset is unable to be made accessible consistently across all themes, it is now removed from the built-in theme APIs. diff --git a/.changeset/tricky-adults-bake.md b/.changeset/tricky-adults-bake.md index f0e41c19f9..f6a38269b4 100644 --- a/.changeset/tricky-adults-bake.md +++ b/.changeset/tricky-adults-bake.md @@ -2,12 +2,16 @@ '@rainbow-me/rainbowkit': patch --- -update Rainbowkit `Theme` object. +Update Rainbowkit `Theme` object. Added: - `shadows.walletLogo` +Renamed: + +- `colors.actionButtonText` is now `colors.accentColorForeground` + Removed: - `borders.modalBorderWidth` diff --git a/README.md b/README.md index 5b9868cb3f..884a9a7568 100644 --- a/README.md +++ b/README.md @@ -165,9 +165,15 @@ The built-in theme functions also accept an options object, allowing you to sele accentColor - "blue" | "green" | "orange" | "pink" | "purple" | "red" | "yellow" - "blue" - The background/text color of various interactive elements + string + "#0E76FD" + The background/text color of various interactive elements. + + + accentColorForeground + string + "white" + The color used for foreground elements rendered on top of the accent color. borderRadius @@ -184,7 +190,7 @@ The built-in theme functions also accept an options object, allowing you to sele -For example, to customize the dark theme with a `purple` accent color and a `medium` border radius scale: +For example, to customize the dark theme with a purple accent color and a `medium` border radius scale: ```tsx import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'; @@ -193,7 +199,8 @@ const App = () => { return ( { }; ``` +Each theme also provides several accent color presets (`blue`, `green`, `orange`, `pink`, `purple`, `red`) that can be spread into the options object. For example, to use the `pink` accent color preset: + +```tsx +import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'; + +const App = () => { + return ( + + {/* Your App */} + + ); +}; +``` + #### Dark mode support If your app uses the standard `prefers-color-mode: dark` media query to swap between light and dark modes, you can optionally provide a dynamic theme object containing `lightMode` and `darkMode` values. @@ -639,10 +664,10 @@ import { RainbowKitProvider, Theme } from '@rainbow-me/rainbowkit'; const myCustomTheme: Theme = { colors: { accentColor: '...', + accentColorForeground: '...', actionButtonBorder: '...', actionButtonBorderMobile: '...', actionButtonSecondaryBackground: '...', - actionButtonText: '...', closeButton: '...', closeButtonBackground: '...', connectButtonBackground: '...', diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx index d3e7d200b9..8805099855 100644 --- a/packages/example/pages/_app.tsx +++ b/packages/example/pages/_app.tsx @@ -74,7 +74,7 @@ const accentColors = [ 'pink', 'purple', 'red', - 'yellow', + 'custom', ] as const; type AccentColor = typeof accentColors[number]; @@ -89,13 +89,14 @@ function App({ Component, pageProps }: AppProps) { const [showRecentTransactions, setShowRecentTransactions] = useState(true); const [coolModeEnabled, setCoolModeEnabled] = useState(false); - const selectedTheme = themes - .find(({ name }) => name === selectedThemeName) - ?.theme({ - accentColor: selectedAccentColor, - borderRadius: selectedRadiusScale, - fontStack: selectedFontStack, - }); + const currentTheme = ( + themes.find(({ name }) => name === selectedThemeName) ?? themes[0] + ).theme; + + const accentColor = + selectedAccentColor === 'custom' + ? { accentColor: 'red', accentColorForeground: 'yellow' } // https://blog.codinghorror.com/a-tribute-to-the-windows-31-hot-dog-stand-color-scheme + : currentTheme.accentColors[selectedAccentColor]; return ( @@ -103,7 +104,11 @@ function App({ Component, pageProps }: AppProps) { chains={chains} coolMode={coolModeEnabled} showRecentTransactions={showRecentTransactions} - theme={selectedTheme} + theme={currentTheme({ + ...accentColor, + borderRadius: selectedRadiusScale, + fontStack: selectedFontStack, + })} > diff --git a/packages/rainbowkit/src/components/Button/ActionButton.tsx b/packages/rainbowkit/src/components/Button/ActionButton.tsx index f34a09d9f8..dcd249851b 100644 --- a/packages/rainbowkit/src/components/Button/ActionButton.tsx +++ b/packages/rainbowkit/src/components/Button/ActionButton.tsx @@ -76,7 +76,7 @@ export function ActionButton({ {...(height ? { height } : {})} > diff --git a/packages/rainbowkit/src/components/ChainModal/ChainModal.tsx b/packages/rainbowkit/src/components/ChainModal/ChainModal.tsx index 3ad565a45a..97c824714c 100644 --- a/packages/rainbowkit/src/components/ChainModal/ChainModal.tsx +++ b/packages/rainbowkit/src/components/ChainModal/ChainModal.tsx @@ -139,7 +139,7 @@ export function ChainModal({ marginRight="6" > diff --git a/packages/rainbowkit/src/components/MenuButton/MenuButton.css.ts b/packages/rainbowkit/src/components/MenuButton/MenuButton.css.ts index 49243ed84f..dccb46b944 100644 --- a/packages/rainbowkit/src/components/MenuButton/MenuButton.css.ts +++ b/packages/rainbowkit/src/components/MenuButton/MenuButton.css.ts @@ -37,7 +37,7 @@ export const SelectedMenuButtonClassName = style([ borderStyle: 'solid', borderWidth: '1', boxShadow: 'selectedOption', - color: 'actionButtonText', + color: 'accentColorForeground', padding: '6', }), ]); diff --git a/packages/rainbowkit/src/components/ModalSelection/ModalSelection.tsx b/packages/rainbowkit/src/components/ModalSelection/ModalSelection.tsx index 1e4ebbbb36..b2e3ec3f28 100644 --- a/packages/rainbowkit/src/components/ModalSelection/ModalSelection.tsx +++ b/packages/rainbowkit/src/components/ModalSelection/ModalSelection.tsx @@ -44,7 +44,7 @@ export const ModalSelection = ({ {...urlProps} > { expect(cssObjectFromTheme(lightTheme)).toMatchInlineSnapshot(` { "--rk-colors-accentColor": "#0E76FD", + "--rk-colors-accentColorForeground": "#FFF", "--rk-colors-actionButtonBorder": "rgba(0, 0, 0, 0.04)", "--rk-colors-actionButtonBorderMobile": "rgba(0, 0, 0, 0)", "--rk-colors-actionButtonSecondaryBackground": "rgba(0, 0, 0, 0.06)", - "--rk-colors-actionButtonText": "#FFF", "--rk-colors-closeButton": "rgba(60, 66, 66, 0.8)", "--rk-colors-closeButtonBackground": "rgba(0, 0, 0, 0.06)", "--rk-colors-connectButtonBackground": "#FFF", diff --git a/packages/rainbowkit/src/css/cssStringFromTheme.test.ts b/packages/rainbowkit/src/css/cssStringFromTheme.test.ts index e9e884dd74..45b4673cf3 100644 --- a/packages/rainbowkit/src/css/cssStringFromTheme.test.ts +++ b/packages/rainbowkit/src/css/cssStringFromTheme.test.ts @@ -5,7 +5,7 @@ import { cssStringFromTheme } from './cssStringFromTheme'; describe('cssStringFromTheme', () => { it('converts themes to CSS strings', () => { expect(cssStringFromTheme(lightTheme())).toMatchInlineSnapshot( - '"--rk-fonts-body:SFRounded, ui-rounded, SF Pro Rounded, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;--rk-radii-actionButton:9999px;--rk-radii-connectButton:12px;--rk-radii-menuButton:12px;--rk-radii-modal:24px;--rk-radii-modalMobile:28px;--rk-colors-accentColor:#0E76FD;--rk-colors-actionButtonBorder:rgba(0, 0, 0, 0.04);--rk-colors-actionButtonBorderMobile:rgba(0, 0, 0, 0);--rk-colors-actionButtonSecondaryBackground:rgba(0, 0, 0, 0.06);--rk-colors-actionButtonText:#FFF;--rk-colors-closeButton:rgba(60, 66, 66, 0.8);--rk-colors-closeButtonBackground:rgba(0, 0, 0, 0.06);--rk-colors-connectButtonBackground:#FFF;--rk-colors-connectButtonBackgroundError:#FF494A;--rk-colors-connectButtonInnerBackground:linear-gradient(0deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.06));--rk-colors-connectButtonText:#25292E;--rk-colors-connectButtonTextError:#FFF;--rk-colors-connectionIndicator:#30E000;--rk-colors-error:#FF494A;--rk-colors-generalBorder:rgba(0, 0, 0, 0.06);--rk-colors-generalBorderDim:rgba(0, 0, 0, 0.03);--rk-colors-menuItemBackground:rgba(60, 66, 66, 0.1);--rk-colors-modalBackdrop:rgba(0, 0, 0, 0.3);--rk-colors-modalBackground:#FFF;--rk-colors-modalBorder:transparent;--rk-colors-modalText:#25292E;--rk-colors-modalTextDim:rgba(60, 66, 66, 0.3);--rk-colors-modalTextSecondary:rgba(60, 66, 66, 0.6);--rk-colors-profileAction:#FFF;--rk-colors-profileActionHover:rgba(255, 255, 255, 0.5);--rk-colors-profileForeground:rgba(60, 66, 66, 0.06);--rk-colors-selectedOptionBorder:rgba(60, 66, 66, 0.1);--rk-colors-standby:#FFD641;--rk-shadows-connectButton:0px 4px 12px rgba(0, 0, 0, 0.1);--rk-shadows-dialog:0px 8px 32px rgba(0, 0, 0, 0.32);--rk-shadows-profileDetailsAction:0px 2px 6px rgba(37, 41, 46, 0.04);--rk-shadows-selectedOption:0px 2px 6px rgba(0, 0, 0, 0.24);--rk-shadows-selectedWallet:0px 2px 6px rgba(0, 0, 0, 0.12);--rk-shadows-walletLogo:0px 2px 16px rgba(0, 0, 0, 0.16);"' + '"--rk-fonts-body:SFRounded, ui-rounded, SF Pro Rounded, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;--rk-radii-actionButton:9999px;--rk-radii-connectButton:12px;--rk-radii-menuButton:12px;--rk-radii-modal:24px;--rk-radii-modalMobile:28px;--rk-colors-accentColor:#0E76FD;--rk-colors-accentColorForeground:#FFF;--rk-colors-actionButtonBorder:rgba(0, 0, 0, 0.04);--rk-colors-actionButtonBorderMobile:rgba(0, 0, 0, 0);--rk-colors-actionButtonSecondaryBackground:rgba(0, 0, 0, 0.06);--rk-colors-closeButton:rgba(60, 66, 66, 0.8);--rk-colors-closeButtonBackground:rgba(0, 0, 0, 0.06);--rk-colors-connectButtonBackground:#FFF;--rk-colors-connectButtonBackgroundError:#FF494A;--rk-colors-connectButtonInnerBackground:linear-gradient(0deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.06));--rk-colors-connectButtonText:#25292E;--rk-colors-connectButtonTextError:#FFF;--rk-colors-connectionIndicator:#30E000;--rk-colors-error:#FF494A;--rk-colors-generalBorder:rgba(0, 0, 0, 0.06);--rk-colors-generalBorderDim:rgba(0, 0, 0, 0.03);--rk-colors-menuItemBackground:rgba(60, 66, 66, 0.1);--rk-colors-modalBackdrop:rgba(0, 0, 0, 0.3);--rk-colors-modalBackground:#FFF;--rk-colors-modalBorder:transparent;--rk-colors-modalText:#25292E;--rk-colors-modalTextDim:rgba(60, 66, 66, 0.3);--rk-colors-modalTextSecondary:rgba(60, 66, 66, 0.6);--rk-colors-profileAction:#FFF;--rk-colors-profileActionHover:rgba(255, 255, 255, 0.5);--rk-colors-profileForeground:rgba(60, 66, 66, 0.06);--rk-colors-selectedOptionBorder:rgba(60, 66, 66, 0.1);--rk-colors-standby:#FFD641;--rk-shadows-connectButton:0px 4px 12px rgba(0, 0, 0, 0.1);--rk-shadows-dialog:0px 8px 32px rgba(0, 0, 0, 0.32);--rk-shadows-profileDetailsAction:0px 2px 6px rgba(37, 41, 46, 0.04);--rk-shadows-selectedOption:0px 2px 6px rgba(0, 0, 0, 0.24);--rk-shadows-selectedWallet:0px 2px 6px rgba(0, 0, 0, 0.12);--rk-shadows-walletLogo:0px 2px 16px rgba(0, 0, 0, 0.16);"' ); }); }); diff --git a/packages/rainbowkit/src/css/sprinkles.css.ts b/packages/rainbowkit/src/css/sprinkles.css.ts index af4a9abb95..8861509da5 100644 --- a/packages/rainbowkit/src/css/sprinkles.css.ts +++ b/packages/rainbowkit/src/css/sprinkles.css.ts @@ -13,10 +13,10 @@ import './reset.css'; const themeContractValues = { colors: { accentColor: '', + accentColorForeground: '', actionButtonBorder: '', actionButtonBorderMobile: '', actionButtonSecondaryBackground: '', - actionButtonText: '', closeButton: '', closeButtonBackground: '', connectButtonBackground: '', diff --git a/packages/rainbowkit/src/themes/baseTheme.ts b/packages/rainbowkit/src/themes/baseTheme.ts index 99731a60d0..6fed9d2e20 100644 --- a/packages/rainbowkit/src/themes/baseTheme.ts +++ b/packages/rainbowkit/src/themes/baseTheme.ts @@ -67,15 +67,20 @@ export const baseTheme = ({ }, }); -export type AccentValues = +export interface AccentColor { + accentColor: string; + accentColorForeground: string; +} + +export type AccentColorPreset = | 'blue' | 'green' | 'red' | 'purple' | 'pink' - | 'orange' - | 'yellow'; + | 'orange'; export interface ThemeOptions extends BaseThemeOptions { - accentColor?: AccentValues; + accentColor?: string; + accentColorForeground?: string; } diff --git a/packages/rainbowkit/src/themes/darkTheme.ts b/packages/rainbowkit/src/themes/darkTheme.ts index b434e3e133..70dbfd4691 100644 --- a/packages/rainbowkit/src/themes/darkTheme.ts +++ b/packages/rainbowkit/src/themes/darkTheme.ts @@ -1,29 +1,38 @@ -import { AccentValues, baseTheme, ThemeOptions } from './baseTheme'; +import { + AccentColor, + AccentColorPreset, + baseTheme, + ThemeOptions, +} from './baseTheme'; -const accents: Record = { - blue: '#3898FF', - green: '#4BD166', - orange: '#FF983D', - pink: '#FF7AB8', - purple: '#7A70FF', - red: '#FF6257', - yellow: '#FFDF3D', +const darkGrey = '#1A1B1F'; + +const accentColors: Record = { + blue: { accentColor: '#3898FF', accentColorForeground: '#FFF' }, + green: { accentColor: '#4BD166', accentColorForeground: darkGrey }, + orange: { accentColor: '#FF983D', accentColorForeground: darkGrey }, + pink: { accentColor: '#FF7AB8', accentColorForeground: darkGrey }, + purple: { accentColor: '#7A70FF', accentColorForeground: '#FFF' }, + red: { accentColor: '#FF6257', accentColorForeground: '#FFF' }, }; +const defaultAccentColor = accentColors.blue; + export const darkTheme = ({ - accentColor = 'blue', + accentColor = defaultAccentColor.accentColor, + accentColorForeground = defaultAccentColor.accentColorForeground, ...baseThemeOptions }: ThemeOptions = {}) => ({ ...baseTheme(baseThemeOptions), colors: { - accentColor: accents[accentColor], + accentColor, + accentColorForeground, actionButtonBorder: 'rgba(255, 255, 255, 0.04)', actionButtonBorderMobile: 'rgba(0, 0, 0, 0)', actionButtonSecondaryBackground: 'rgba(255, 255, 255, 0.08)', - actionButtonText: '#FFF', closeButton: 'rgba(224, 232, 255, 0.6)', closeButtonBackground: 'rgba(255, 255, 255, 0.08)', - connectButtonBackground: '#1A1B1F', + connectButtonBackground: darkGrey, connectButtonBackgroundError: '#FF494A', connectButtonInnerBackground: 'linear-gradient(0deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.15))', @@ -55,3 +64,5 @@ export const darkTheme = ({ walletLogo: '0px 2px 16px rgba(0, 0, 0, 0.16)', }, }); + +darkTheme.accentColors = accentColors; diff --git a/packages/rainbowkit/src/themes/lightTheme.ts b/packages/rainbowkit/src/themes/lightTheme.ts index 5a26f2de86..ed65cd2f92 100644 --- a/packages/rainbowkit/src/themes/lightTheme.ts +++ b/packages/rainbowkit/src/themes/lightTheme.ts @@ -1,26 +1,33 @@ -import { AccentValues, baseTheme, ThemeOptions } from './baseTheme'; +import { + AccentColor, + AccentColorPreset, + baseTheme, + ThemeOptions, +} from './baseTheme'; -const accents: Record = { - blue: '#0E76FD', - green: '#1DB847', - orange: '#FF801F', - pink: '#FF5CA0', - purple: '#5F5AFA', - red: '#FA423C', - yellow: '#FFD014', +const accentColors: Record = { + blue: { accentColor: '#0E76FD', accentColorForeground: '#FFF' }, + green: { accentColor: '#1DB847', accentColorForeground: '#FFF' }, + orange: { accentColor: '#FF801F', accentColorForeground: '#FFF' }, + pink: { accentColor: '#FF5CA0', accentColorForeground: '#FFF' }, + purple: { accentColor: '#5F5AFA', accentColorForeground: '#FFF' }, + red: { accentColor: '#FA423C', accentColorForeground: '#FFF' }, }; +const defaultAccentColor = accentColors.blue; + export const lightTheme = ({ - accentColor = 'blue', + accentColor = defaultAccentColor.accentColor, + accentColorForeground = defaultAccentColor.accentColorForeground, ...baseThemeOptions }: ThemeOptions = {}) => ({ ...baseTheme(baseThemeOptions), colors: { - accentColor: accents[accentColor], + accentColor, + accentColorForeground, actionButtonBorder: 'rgba(0, 0, 0, 0.04)', actionButtonBorderMobile: 'rgba(0, 0, 0, 0)', actionButtonSecondaryBackground: 'rgba(0, 0, 0, 0.06)', - actionButtonText: '#FFF', closeButton: 'rgba(60, 66, 66, 0.8)', closeButtonBackground: 'rgba(0, 0, 0, 0.06)', connectButtonBackground: '#FFF', @@ -55,3 +62,5 @@ export const lightTheme = ({ walletLogo: '0px 2px 16px rgba(0, 0, 0, 0.16)', }, }); + +lightTheme.accentColors = accentColors; diff --git a/packages/rainbowkit/src/themes/midnightTheme.ts b/packages/rainbowkit/src/themes/midnightTheme.ts index 15ad055800..961e12cf57 100644 --- a/packages/rainbowkit/src/themes/midnightTheme.ts +++ b/packages/rainbowkit/src/themes/midnightTheme.ts @@ -1,26 +1,33 @@ -import { AccentValues, baseTheme, ThemeOptions } from './baseTheme'; +import { + AccentColor, + AccentColorPreset, + baseTheme, + ThemeOptions, +} from './baseTheme'; -const accents: Record = { - blue: '#3898FF', - green: '#4BD166', - orange: '#FF983D', - pink: '#FF7AB8', - purple: '#7A70FF', - red: '#FF6257', - yellow: '#FFDF3D', +const accentColors: Record = { + blue: { accentColor: '#3898FF', accentColorForeground: '#FFF' }, + green: { accentColor: '#4BD166', accentColorForeground: '#000' }, + orange: { accentColor: '#FF983D', accentColorForeground: '#000' }, + pink: { accentColor: '#FF7AB8', accentColorForeground: '#000' }, + purple: { accentColor: '#7A70FF', accentColorForeground: '#FFF' }, + red: { accentColor: '#FF6257', accentColorForeground: '#FFF' }, }; +const defaultAccentColor = accentColors.blue; + export const midnightTheme = ({ - accentColor = 'blue', + accentColor = defaultAccentColor.accentColor, + accentColorForeground = defaultAccentColor.accentColorForeground, ...baseThemeOptions }: ThemeOptions = {}) => ({ ...baseTheme(baseThemeOptions), colors: { - accentColor: accents[accentColor], + accentColor, + accentColorForeground, actionButtonBorder: 'rgba(255, 255, 255, 0.04)', actionButtonBorderMobile: 'rgba(0, 0, 0, 0)', actionButtonSecondaryBackground: 'rgba(255, 255, 255, 0.08)', - actionButtonText: '#FFF', closeButton: 'rgba(255, 255, 255, 0.7)', closeButtonBackground: 'rgba(255, 255, 255, 0.08)', connectButtonBackground: '#000', @@ -55,3 +62,5 @@ export const midnightTheme = ({ walletLogo: '0px 2px 16px rgba(0, 0, 0, 0.16)', }, }); + +midnightTheme.accentColors = accentColors; diff --git a/site/data/docs/custom-theme.mdx b/site/data/docs/custom-theme.mdx index 4189f9b939..286ef4098b 100644 --- a/site/data/docs/custom-theme.mdx +++ b/site/data/docs/custom-theme.mdx @@ -19,10 +19,10 @@ import { RainbowKitProvider, Theme } from '@rainbow-me/rainbowkit'; const myCustomTheme: Theme = { colors: { accentColor: '...', + accentColorForeground: '...', actionButtonBorder: '...', actionButtonBorderMobile: '...', actionButtonSecondaryBackground: '...', - actionButtonText: '...', closeButton: '...', closeButtonBackground: '...', connectButtonBackground: '...', diff --git a/site/data/docs/theming.mdx b/site/data/docs/theming.mdx index 1f680da0b4..f3edeeb463 100644 --- a/site/data/docs/theming.mdx +++ b/site/data/docs/theming.mdx @@ -27,7 +27,7 @@ export const App = () => ( ); ``` -If you want, You can pass in `accentColor`, `borderRadius` and `fontStack` to customize them. +If you want, You can pass in `accentColor`, `accentColorForeground`, `borderRadius` and `fontStack` to customize them. ```tsx import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'; @@ -35,7 +35,8 @@ import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'; export const App = () => ( +For example, to customize the dark theme with a purple accent color and a `medium` border radius scale: + +```tsx +import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'; + +const App = () => { + return ( + + {/* Your App */} + + ); +}; +``` + +Each theme also provides several accent color presets (`blue`, `green`, `orange`, `pink`, `purple`, `red`) that can be spread into the options object. For example, to use the `pink` accent color preset: + +```tsx +import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'; + +const App = () => { + return ( + + {/* Your App */} + + ); +}; +``` + ### Examples #### Theme function @@ -117,7 +164,7 @@ export const App = () => ( Here are a few different ways you can use the `accentColor` config. -Set the accent color to `purple`. +Set the accent color to a custom purple value. ```tsx import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'; @@ -126,7 +173,8 @@ const App = () => { return ( {/* Your App */} @@ -135,7 +183,7 @@ const App = () => { }; ``` -Set the accent color to `green`. +Set the accent color to the built-in `green` preset. ```tsx import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'; @@ -144,7 +192,7 @@ const App = () => { return ( {/* Your App */} @@ -153,8 +201,6 @@ const App = () => { }; ``` -> Reminder: the available accent colors are: `blue` (default), `green`, `orange`, `pink`, `purple`, `red` and `yellow`. - #### Border radius Here are a few different ways you can use the `borderRadius` config. @@ -224,7 +270,7 @@ const App = () => { Here are a few different ways you can use different themes, with `accentColor`, `borderRadius` and `fontStack` props together. - Use the `lightTheme` theme -- Set the accent color to `orange` +- Set the accent color to a custom purple value - Set the border radius to `medium` - Set the font stack to `system` @@ -235,7 +281,8 @@ const App = () => { return ( { ``` - Use the `midnightTheme` theme -- Set the accent color to `pink` +- Set the accent color to the built-in `pink` preset. - Set the border radius to `small` - Set the font stack to `system` @@ -261,7 +308,7 @@ const App = () => { return (