theme/AppTheme.ts

@@ -29,6 +29,7 @@ const AppTheme = extendTheme({
       footer: "#0097a7",
       footerText: "black",
       content: "#2d3748",
+      patreon: "#FF424D",
     },
   },
   styles: {

theme/components/buttonStyles.ts

@@ -157,6 +157,18 @@ const buttonStyles = {
         border: "1px solid #0068ff",
       },
     }),
+    patreon: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "brand.patreon",
+      fontSize: "lg",
+      p: 3,
+      color: "whiteAlpha",
+      _hover: {
+        bg: mode(
+          whiten("brand.patreon", 20),
+          darken("brand.patreon", 20)
+        )(props),
+      },
+    }),
   },
   // default values for `size` and `variant`
   defaultProps: {},

theme/layout/Footer.tsx

@@ -87,8 +87,7 @@ const Footer = (): JSX.Element => {
             >
               <Button
                 color="whiteAlpha"
-                background="#FF424D"
+                variant="patreon"
-                variant="credits"
                 leftIcon={<Icon icon="ri:patreon-fill" />}
               >
                 Fund This App