Basic Configuration

This document covers basic configuration options for TinyShip, including application name, Logo, theme system, and internationalization.

Application Basic Configuration

Application Name

The application name appears in page titles, next to the Logo, in email templates, etc.

// config.ts
export const config = {
  app: {
    name: 'TinyShip',  // Change to your app name
  }
}

Logo Configuration

TinyShip supports flexible Logo configuration:

// config.ts
export const config = {
  app: {
    logo: {
      iconUrl: '/logo.svg',
      fullLogoUrl: undefined,
      iconClassName: 'bg-chart-1 rounded-full p-2',
    },
  }
}

Theme System Configuration

TinyShip includes 5 beautiful color schemes:

1. Default Theme: Classic grayscale palette
2. Claude Theme: Warm orange palette
3. Cosmic Night Theme: Mysterious purple palette
4. Modern Minimal Theme: Modern minimal purple-blue palette
5. Ocean Breeze Theme: Fresh teal palette

Configure Theme

// config.ts
export const config = {
  app: {
    theme: {
      defaultTheme: 'light' as const,
      defaultColorScheme: 'claude' as const,
      storageKey: 'tinyship-ui-theme'
    }
  }
}

Create Custom Theme

1. Visit tweakcn.com theme editor
2. Customize colors with the visual editor
3. Export theme CSS
4. Create a new theme file in libs/ui/styles/themes/

Internationalization Configuration

TinyShip provides comprehensive internationalization support:

• English (en) - English
• 简体中文 (zh-CN) - Simplified Chinese, default language

Configure Language

// config.ts
export const config = {
  app: {
    i18n: {
      defaultLocale: 'zh-CN' as const,
      locales: ['en', 'zh-CN'] as const,
      cookieKey: 'NEXT_LOCALE',
      autoDetect: false
    }
  }
}

Add New Translations

1. Add English translations in libs/i18n/locales/en.ts
2. Add corresponding Chinese translations in libs/i18n/locales/zh-CN.ts
3. Restart the development server