feat: support configs for light & dark logos

messages/en.json

@@ -434,7 +434,7 @@
           },
           "billing": {
             "title": "Billing",
-            "description": "Manage your billing information",
+            "description": "Manage your subscription and billing details",
             "status": {
               "active": "Active",
               "trial": "Trial",

messages/zh.json

@@ -145,7 +145,7 @@
       "signInWithGitHub": "使用 GitHub 登录",
       "showPassword": "显示密码",
       "hidePassword": "隐藏密码",
-       "or": "或"
+      "or": "或"
     },
     "register": {
       "title": "注册",
@@ -429,7 +429,7 @@
           },
           "billing": {
             "title": "账单",
-            "description": "管理您的账单信息",
+            "description": "管理您的订阅和账单信息",
             "status": {
               "active": "已激活",
               "trial": "试用中",

src/app/[locale]/(marketing)/(legal)/layout.tsx

@@ -1,4 +1,4 @@
-import Container from '@/components/container';
+import Container from '@/components/shared/container';
 import { PropsWithChildren } from 'react';
 
 import '@/styles/mdx.css';

src/app/[locale]/(marketing)/(pages)/layout.tsx

@@ -1,4 +1,4 @@
-import Container from '@/components/container';
+import Container from '@/components/shared/container';
 import { PropsWithChildren } from 'react';
 
 export default function PageLayout({ children }: PropsWithChildren) {

src/app/[locale]/(marketing)/blog/(blog)/layout.tsx

@@ -1,5 +1,5 @@
 import { BlogCategoryFilter } from '@/components/blog/blog-category-filter';
-import Container from '@/components/container';
+import Container from '@/components/shared/container';
 import { HeaderSection } from '@/components/shared/header-section';
 import { PropsWithChildren } from 'react';
 import { allCategories } from 'content-collections';

src/app/[locale]/(marketing)/blog/[...slug]/layout.tsx

@@ -1,4 +1,4 @@
-import Container from '@/components/container';
+import Container from '@/components/shared/container';
 import { PropsWithChildren } from 'react';
 
 export default function BlogPostLayout({ children }: PropsWithChildren) {

src/app/[locale]/(marketing)/pricing/page.tsx

@@ -1,4 +1,4 @@
-import Container from '@/components/container';
+import Container from '@/components/shared/container';
 import { PricingTable } from '@/components/payment/pricing-table';
 import { HeaderSection } from '@/components/shared/header-section';
 import { constructMetadata } from '@/lib/metadata';

src/app/[locale]/docs/layout.tsx

@@ -1,6 +1,6 @@
 import { XTwitterIcon } from '@/components/icons/x';
 import { ModeSwitcher } from '@/components/layout/mode-switcher';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { websiteConfig } from '@/config';
 import { LOCALE_LIST } from '@/i18n/routing';
 import { docsI18nConfig } from '@/lib/docs/i18n';

src/app/[locale]/not-found.tsx

@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { LocaleLink } from '@/i18n/navigation';
 import { useTranslations } from 'next-intl';

src/app/[locale]/preview/features/nine/page.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Activity, Map as MapIcon, MessageCircle } from 'lucide-react';
 import DottedMap from 'dotted-map';
 import { Area, AreaChart, CartesianGrid } from 'recharts';

src/app/[locale]/preview/footer/five/page.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 
 const enterpriseLinks = [
   { href: '#', label: 'About' },

src/app/[locale]/preview/footer/one/page.tsx

@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import Link from 'next/link';
 
 const links = [

src/app/[locale]/preview/footer/three/page.tsx

@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';

src/app/[locale]/preview/footer/two/page.tsx

@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import Link from 'next/link';
 
 const links = [

src/app/[locale]/preview/hero-section/eight/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import Link from 'next/link';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { ArrowRight, Menu, Rocket, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import Image from 'next/image';

src/app/[locale]/preview/hero-section/nine/page.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import Link from 'next/link';
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';

src/app/[locale]/preview/hero-section/seven/page.tsx

@@ -8,7 +8,7 @@ import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import 'swiper/css/effect-coverflow';
 import Link from 'next/link';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { ArrowRight, Menu, Rocket, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 

src/app/[locale]/preview/hero-section/six/page.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { ArrowRight, Mail, Menu, SendHorizonal, X } from 'lucide-react';
 import Image from 'next/image';

src/app/[locale]/preview/login/one/page.tsx

@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';

src/app/[locale]/preview/login/three/page.tsx

@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';

src/app/[locale]/preview/login/two/page.tsx

@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';

src/app/[locale]/preview/sign-up/one/page.tsx

@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';

src/app/[locale]/preview/sign-up/three/page.tsx

@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';

src/app/[locale]/preview/sign-up/two/page.tsx

@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';

src/components/auth/auth-card.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { BottomLink } from '@/components/auth/bottom-link';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import {
   Card,
   CardContent,

src/components/blocks/hero5-header.tsx

@@ -1,6 +1,6 @@
 'use client';
 import Link from 'next/link';
-import { Logo } from '../logo';
+import { Logo } from '../shared/logo';
 import { Menu, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import React from 'react';

src/components/blocks/hero6-header.tsx

@@ -1,6 +1,6 @@
 'use client';
 import Link from 'next/link';
-import { Logo } from '../logo';
+import { Logo } from '../shared/logo';
 import { Menu, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import React from 'react';

src/components/blocks/hero8-header.tsx

@@ -1,6 +1,6 @@
 'use client';
 import Link from 'next/link';
-import { Logo } from '../logo';
+import { Logo } from '../shared/logo';
 import { Menu, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import React from 'react';

src/components/blocks/hero9-header.tsx

@@ -1,6 +1,6 @@
 'use client';
 import Link from 'next/link';
-import { Logo } from '../logo';
+import { Logo } from '../shared/logo';
 import { Menu, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import React from 'react';

src/components/blog/blog-category-filter.tsx

@@ -1,4 +1,4 @@
-import Container from '@/components/container';
+import Container from '@/components/shared/container';
 import { Category } from 'content-collections';
 import { BlogCategoryListDesktop } from './blog-category-list-desktop';
 import { BlogCategoryListMobile } from './blog-category-list-mobile';

src/components/dashboard/dashboard-sidebar.tsx

@@ -16,7 +16,7 @@ import { useCurrentUser } from '@/hooks/use-current-user';
 import { LocaleLink } from '@/i18n/navigation';
 import { useTranslations } from 'next-intl';
 import * as React from 'react';
-import { Logo } from '../logo';
+import { Logo } from '../shared/logo';
 import { SidebarUpgradeCard } from './sidebar-upgrade-card';
 
 export function DashboardSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {

src/components/error/error.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { useLocaleRouter } from '@/i18n/navigation';
 import { Loader2Icon } from 'lucide-react';

src/components/layout/footer.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import Container from '@/components/container';
+import Container from '@/components/shared/container';
 import { ModeSwitcherHorizontal } from '@/components/layout/mode-switcher-horizontal';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import BuiltWithButton from '@/components/shared/built-with-button';
 import { getFooterLinks, getSocialLinks } from '@/config';
 import { LocaleLink } from '@/i18n/navigation';

src/components/layout/navbar-mobile.tsx

@@ -2,7 +2,7 @@
 
 import LocaleSelector from '@/components/layout/locale-selector';
 import { ModeSwitcherHorizontal } from '@/components/layout/mode-switcher-horizontal';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button, buttonVariants } from '@/components/ui/button';
 import {
   Collapsible,

src/components/layout/navbar.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { LoginWrapper } from '@/components/auth/login-wrapper';
-import Container from '@/components/container';
+import Container from '@/components/shared/container';
 import { ModeSwitcher } from '@/components/layout/mode-switcher';
 import { NavbarMobile } from '@/components/layout/navbar-mobile';
 import { UserButton } from '@/components/layout/user-button';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import {
   NavigationMenu,

src/components/logo.tsx

@@ -1,15 +0,0 @@
-import { cn } from '@/lib/utils';
-import Image from 'next/image';
-
-export function Logo({ className }: { className?: string }) {
-  return (
-    <Image
-      src="/logo.png"
-      alt="Logo"
-      title="Logo"
-      width={96}
-      height={96}
-      className={cn('size-8 rounded-md', className)}
-    />
-  );
-}

src/components/sections/features/features-9.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Activity, Map as MapIcon, MessageCircle } from 'lucide-react';
 import DottedMap from 'dotted-map';
 import { Area, AreaChart, CartesianGrid } from 'recharts';

src/components/sections/hero/hero-section-2.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { ArrowRight, Mail, Menu, SendHorizonal, X } from 'lucide-react';
 import Image from 'next/image';

src/components/sections/hero/hero-section-3.tsx

@@ -8,7 +8,7 @@ import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import 'swiper/css/effect-coverflow';
 import Link from 'next/link';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { ArrowRight, Menu, Rocket, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 

src/components/sections/hero/hero-section.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import Link from 'next/link';
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';

src/components/settings/billing/billing-card.tsx

@@ -11,7 +11,7 @@ import { LocaleLink } from '@/i18n/navigation';
 import { formatDate, formatPrice } from '@/lib/formatter';
 import { getAllPlans } from '@/payment';
 import { PlanIntervals, Subscription } from '@/payment/types';
-import { RefreshCwIcon, RocketIcon } from 'lucide-react';
+import { RefreshCwIcon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useState } from 'react';
 

src/components/shared/built-with-button.tsx

@@ -1,7 +1,7 @@
 import { buttonVariants } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import Link from 'next/link';
-import { MkSaaSLogo } from '@/components/logo-mksaas';
+import { MkSaaSLogo } from '@/components/shared/logo-mksaas';
 
 export default function BuiltWithButton() {
   return (

src/components/shared/logo.tsx

@@ -0,0 +1,22 @@
+import { websiteConfig } from '@/config';
+import { cn } from '@/lib/utils';
+import { useTheme } from 'next-themes';
+import Image from 'next/image';
+
+export function Logo({ className }: { className?: string }) {
+  const theme = useTheme();
+  const logoLight = websiteConfig.logo.light ?? '/logo.png';
+  const logoDark = websiteConfig.logo.dark ?? '/logo-dark.png';
+  const logo = theme.theme === 'dark' ? logoDark : logoLight;
+
+  return (
+    <Image
+      src={logo}
+      alt="Logo"
+      title="Logo"
+      width={96}
+      height={96}
+      className={cn('size-8 rounded-md', className)}
+    />
+  );
+}

src/config.tsx

@@ -54,6 +54,10 @@ export const websiteConfig: WebsiteConfig = {
   metadata: {
     image: '/og.png',
   },
+  logo: {
+    light: '/logo.png',
+    dark: '/logo-dark.png',
+  },
   mail: {
     from: 'support@mksaas.com',
     to: 'support@mksaas.com',
@@ -64,9 +68,9 @@ export const websiteConfig: WebsiteConfig = {
   },
   social: {
     github: 'https://github.com/MkSaaSHQ',
-    twitter: 'https://x.com/MkSaaSHQ',
+    twitter: 'https://x.com/mksaascom',
+    youtube: 'https://www.youtube.com/@MkSaaS',
     blueSky: 'https://bsky.app/profile/mksaas.com',
-    youtube: 'https://www.youtube.com/@MkSaaSHQ',
     linkedin: 'https://linkedin.com/company/mksaas',
     facebook: 'https://facebook.com/mksaas',
     instagram: 'https://instagram.com/mksaas',

src/types/index.d.ts

@@ -8,6 +8,10 @@ export type WebsiteConfig = {
   metadata: {
     image?: string;
   };
+  logo: {
+    light?: string;
+    dark?: string;
+  };
   mail: {
     from?: string;
     to?: string;