fix: incorrect default theme (#212)

closes https://github.com/better-auth/better-hub/issues/200

apps/web/prisma/schema.prisma

@@ -169,7 +169,7 @@ model UserSettings {
   userId           String  @id
   displayName      String?
   theme            String  @default("system")
-  colorTheme       String  @default("hub")
+  colorTheme       String  @default("better-auth")
   colorMode        String  @default("dark")
   ghostModel       String  @default("auto")
   useOwnApiKey     Boolean @default(false)

apps/web/src/components/repo/repo-overview.tsx

@@ -429,7 +429,10 @@ function ActivityItem({ event }: { event: RepoEvent }) {
 					</p>
 				)}
 			</div>
-			<span className="text-[9px] font-mono text-muted-foreground/60 shrink-0 mt-0.5">
+			<span
+				className="text-[9px] font-mono text-muted-foreground/60 shrink-0 mt-0.5"
+				suppressHydrationWarning
+			>
 				{timeAgo(event.created_at)}
 			</span>
 		</div>

apps/web/src/lib/theme-script.ts

@@ -1,4 +1,4 @@
-import type { ThemeDefinition, ThemeVariant } from "./themes/types";
+import type { ThemeDefinition } from "./themes/types";
 
 interface ThemeScriptData {
 	dark: { colors: Record<string, string> };
@@ -19,8 +19,8 @@ export function generateThemeScript(themes: ThemeDefinition[]): string {
 	}
 
 	const legacyMap: Record<string, { themeId: string; mode: string }> = {
-		midnight: { themeId: "hub", mode: "dark" },
-		"hub-light": { themeId: "hub", mode: "light" },
+		midnight: { themeId: "better-auth", mode: "dark" },
+		"hub-light": { themeId: "better-auth", mode: "light" },
 		"hub-dark": { themeId: "zinc", mode: "dark" },
 		dawn: { themeId: "ember", mode: "light" },
 	};

apps/web/src/lib/themes/index.ts

@@ -4,7 +4,7 @@ import {
 	cloudflare,
 	ember,
 	forest,
-	hub,
+	betterAuthTheme,
 	mintlify,
 	noir,
 	nordWave,
@@ -19,7 +19,7 @@ import {
 } from "./themes";
 
 const themes: ThemeDefinition[] = [
-	hub,
+	betterAuthTheme,
 	vercel,
 	cloudflare,
 	supabase,
@@ -40,7 +40,7 @@ export type { ThemeColors, ThemeDefinition, ThemeVariant, ShikiTheme };
 
 export const STORAGE_KEY = "color-theme";
 export const MODE_KEY = "color-mode";
-export const DEFAULT_THEME_ID = "hub";
+export const DEFAULT_THEME_ID = "better-auth";
 export const DEFAULT_MODE: "dark" | "light" = "dark";
 
 const themeMap = new Map(themes.map((t) => [t.id, t]));
@@ -69,7 +69,7 @@ export function applyTheme(themeId: string, mode: "dark" | "light"): void {
 	const theme = getTheme(themeId);
 	const variant = theme?.[mode];
 
-	const hubDark = hub.dark;
+	const hubDark = betterAuthTheme.dark;
 	const allKeys = Object.keys(hubDark.colors) as (keyof ThemeColors)[];
 
 	if (!variant || (themeId === DEFAULT_THEME_ID && mode === DEFAULT_MODE)) {

apps/web/src/lib/themes/themes.tsx

@@ -86,7 +86,7 @@ function convertToShikiTheme(input: ShikiThemeInput, mode: "light" | "dark" = "d
 }
 
 // Hub theme: midnight (dark) + hubLight (light)
-export const hub: ThemeDefinition = {
+export const betterAuthTheme: ThemeDefinition = {
 	id: "better-auth",
 	name: "Better Auth",
 	description: "The Better Auth theme",