diff --git a/apps/v4/app/layout.tsx b/apps/v4/app/layout.tsx index 1c68828543..bd568cf750 100644 --- a/apps/v4/app/layout.tsx +++ b/apps/v4/app/layout.tsx @@ -84,13 +84,13 @@ export default function RootLayout({ - + {children} diff --git a/apps/v4/components/active-theme.tsx b/apps/v4/components/active-theme.tsx index 2f290608a1..1bc94c6138 100644 --- a/apps/v4/components/active-theme.tsx +++ b/apps/v4/components/active-theme.tsx @@ -8,7 +8,7 @@ import { useState, } from "react" -const DEFAULT_THEME = "blue" +const DEFAULT_THEME = "default" type ThemeContextType = { activeTheme: string diff --git a/apps/v4/components/theme-selector.tsx b/apps/v4/components/theme-selector.tsx index c29bec8ffd..81afa39a0a 100644 --- a/apps/v4/components/theme-selector.tsx +++ b/apps/v4/components/theme-selector.tsx @@ -17,12 +17,14 @@ import { CopyCodeButton } from "./theme-customizer" export function ThemeSelector({ className }: React.ComponentProps<"div">) { const { activeTheme, setActiveTheme } = useThemeConfig() + const value = activeTheme === "default" ? "neutral" : activeTheme + return (
- ) { value={theme.name} className="data-[state=checked]:opacity-50" > - {theme.label === "Neutral" ? "Default" : theme.label} + {theme.label} ))} diff --git a/apps/v4/lib/themes.ts b/apps/v4/lib/themes.ts index adec91cebe..a75ed74765 100644 --- a/apps/v4/lib/themes.ts +++ b/apps/v4/lib/themes.ts @@ -1,5 +1,5 @@ import { baseColors } from "@/registry/base-colors" -export const THEMES = baseColors.filter( - (theme) => !["slate", "stone", "gray", "zinc"].includes(theme.name) -) +export const THEMES = baseColors + .filter((theme) => !["slate", "stone", "gray", "zinc"].includes(theme.name)) + .sort((a, b) => a.name.localeCompare(b.name))