feat: support custom accent colors, fix preset contrast issues (#267)

.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 (
+    <RainbowKitProvider
+      theme={darkTheme({
+        accentColor: '#7b3fe4',
+        accentColorForeground: 'white',
+      })}
+    >
+      {/* Your App */}
+    </RainbowKitProvider>
+  );
+};
+```
+
+When using a built-in accent color preset:
+
+```tsx
+import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
+
+const App = () => {
+  return (
+    <RainbowKitProvider
+      theme={darkTheme({
+        ...darkTheme.accentColors.purple,
+      })}
+    >
+      {/* Your App */}
+    </RainbowKitProvider>
+  );
+};
+```

.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.

.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.

.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`

README.md

@@ -165,9 +165,15 @@ The built-in theme functions also accept an options object, allowing you to sele
   <tbody>
     <tr>
       <td><code>accentColor</code></td>
-      <td><code>"blue" | "green" | "orange" | "pink" | "purple" | "red" | "yellow"</code></td>
-      <td><code>"blue"</code></td>
-      <td>The background/text color of various interactive elements</td>
+      <td><code>string</code></td>
+      <td><code>"#0E76FD"</code></td>
+      <td>The background/text color of various interactive elements.</td>
+    </tr>
+    <tr>
+      <td><code>accentColorForeground</code></td>
+      <td><code>string</code></td>
+      <td><code>"white"</code></td>
+      <td>The color used for foreground elements rendered on top of the accent color.</td>
     </tr>
     <tr>
       <td><code>borderRadius</code></td>
@@ -184,7 +190,7 @@ The built-in theme functions also accept an options object, allowing you to sele
   </tbody>
 </table>
 
-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 (
     <RainbowKitProvider
       theme={darkTheme({
-        accentColor: 'purple',
+        accentColor: '#7b3fe4',
+        accentColorForeground: 'white',
         borderRadius: 'medium',
       })}
       {...etc}
@@ -204,6 +211,24 @@ const 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 (
+    <RainbowKitProvider
+      theme={darkTheme({
+        ...darkTheme.accentColors.pink,
+      })}
+    >
+      {/* Your App */}
+    </RainbowKitProvider>
+  );
+};
+```
+
 #### 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: '...',

packages/example/pages/_app.tsx

@@ -74,7 +74,7 @@ const accentColors = [
   'pink',
   'purple',
   'red',
-  'yellow',
+  'custom',
 ] as const;
 type AccentColor = typeof accentColors[number];
 
@@ -89,21 +89,26 @@ 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 (
     <WagmiProvider autoConnect connectors={connectors} provider={provider}>
       <RainbowKitProvider
         chains={chains}
         coolMode={coolModeEnabled}
         showRecentTransactions={showRecentTransactions}
-        theme={selectedTheme}
+        theme={currentTheme({
+          ...accentColor,
+          borderRadius: selectedRadiusScale,
+          fontStack: selectedFontStack,
+        })}
       >
         <Component {...pageProps} />
 

packages/rainbowkit/src/components/Button/ActionButton.tsx

@@ -76,7 +76,7 @@ export function ActionButton({
       {...(height ? { height } : {})}
     >
       <Text
-        color={isPrimary ? 'actionButtonText' : 'accentColor'}
+        color={isPrimary ? 'accentColorForeground' : 'accentColor'}
         size={fontSize}
         weight="bold"
       >

packages/rainbowkit/src/components/ChainModal/ChainModal.tsx

@@ -139,7 +139,7 @@ export function ChainModal({
                               marginRight="6"
                             >
                               <Text
-                                color="actionButtonText"
+                                color="accentColorForeground"
                                 size="14"
                                 weight="medium"
                               >

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',
   }),
 ]);

packages/rainbowkit/src/components/ModalSelection/ModalSelection.tsx

@@ -44,7 +44,7 @@ export const ModalSelection = ({
         {...urlProps}
       >
         <Box
-          color={currentlySelected ? 'actionButtonText' : 'modalText'}
+          color={currentlySelected ? 'accentColorForeground' : 'modalText'}
           disabled={!ready}
           fontFamily="body"
           fontSize="16"

packages/rainbowkit/src/css/cssObjectFromTheme.test.ts

@@ -7,10 +7,10 @@ describe('cssObjectFromTheme', () => {
     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",

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

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: '',

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

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<AccentValues, string> = {
-  blue: '#3898FF',
-  green: '#4BD166',
-  orange: '#FF983D',
-  pink: '#FF7AB8',
-  purple: '#7A70FF',
-  red: '#FF6257',
-  yellow: '#FFDF3D',
+const darkGrey = '#1A1B1F';
+
+const accentColors: Record<AccentColorPreset, AccentColor> = {
+  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;