apps/relay: customize theme

apps/relays/app/components/layout.tsx

@@ -11,6 +11,7 @@ import Container from "./container";
 import Main from "./main";
 import Header from "./header";
 import Footer from "./footer";
+import { theme } from "../theme";
 
 const cacheAdapter = new NDKCacheAdapterDexie({ dbName: "relays" });
 const ndk = new NDK({
@@ -27,6 +28,7 @@ export default function Layout({ children }: { children: ReactNode }) {
 
   return (
     <NgineProvider
+      theme={theme}
       ndk={ndk}
       links={{
         component: Link,

apps/relays/app/theme.ts

@@ -0,0 +1,31 @@
+import { extendTheme } from "@chakra-ui/react";
+import { theme as baseTheme } from "@ngine/core";
+
+export const theme = extendTheme(
+  {
+    semanticTokens: {
+      colors: {
+        "chakra-body-bg": { _light: "#F8F7F4", _dark: "#111111" },
+        "chakra-placeholder-color": {
+          _light: "gray.500",
+          _dark: "whiteAlpha.500",
+        },
+      },
+    },
+    colors: {
+      brand: {
+        50: "#ffe8df",
+        100: "#ffc0b1",
+        200: "#fe9881",
+        300: "#fc6f50",
+        400: "#fa471f",
+        500: "#e02d05",
+        600: "#af2203",
+        700: "#7d1701",
+        800: "#4e0b00",
+        900: "#200100",
+      },
+    },
+  },
+  baseTheme,
+);

packages/core/src/components/RecommendedAppMenu.tsx

@@ -176,7 +176,7 @@ function AppMenuItem({
           {isPreferredApp ? (
             <HStack>
               <Text>{app.display_name || app.name}</Text>
-              <Icon as={Star} boxSize={3} color="brand.500" />
+              <Icon as={Star} boxSize={3} color="chakra-subtle-text" />
             </HStack>
           ) : (
             <Text>{app.display_name || app.name}</Text>