Skip to main content

Theme Customization

JetShip integrates the power of Shadcn UI, a modern open-source component library built with Tailwind CSS. Shadcn UI provides a wide range of accessible, customizable, and responsive UI components that seamlessly integrate with your Next.js project. With Shadcn UI, you can easily build beautiful and consistent user interfaces while maintaining full control over your design and functionality. This toolkit comes with pre-built components that are ready to be customized for a variety of use cases in your application.


πŸ§‘β€πŸŽ¨ How to Customize the Theme​

JetShip allows for easy customization of your theme settings, including colors, border-radius, font-family, and more. Here’s a quick guide to help you get started with customizing the theme:

πŸ–ŒοΈ Customizing Your Theme​

To modify your theme settings, navigate to the packages/ui/tailwind.config.ts file. Additionally, you can make changes in the packages/ui/src/globals.css file. For more details, refer to the Shadcn UI documentation.

πŸŒ— Light and Dark Mode:​

JetShip uses next-themes to handle light and dark mode, as recommended by Shadcn UI. For more information on how this works, visit the Shadcn UI documentation.

A mode dropdown has been created for toggling between light, dark, and system modes, located in the apps/web/src/components/layout/ModeDropdown.tsx file.

🎨 Adding New Colors​

To add new colors, update both your CSS and tailwind.config.ts file as follows:

CSS (globals.css):

packages/ui/src/globals.css
:root {
--warning: 38 92% 50%;
--warning-foreground: 48 96% 89%;
}

.dark {
--warning: 48 96% 89%;
--warning-foreground: 38 92% 50%;
}

Tailwind Config (tailwind.config.ts):

packages/ui/tailwind.config.ts
module.exports = {
theme: {
extend: {
colors: {
warning: 'hsl(var(--warning))',
'warning-foreground': 'hsl(var(--warning-foreground))'
}
}
}
}

You can now use the custom color utility classes in your components:

<div className='bg-warning text-warning-foreground' />

βš™οΈ Setting the Default Theme​

By default, JetShip uses the light theme. To change the default theme, simply set the mode variable in the apps/web/src/configs/appConfig.ts file.

Example:

const appConfig = AppConfigSchema.parse({
mode: 'dark'
})

🏠 Logo Customization​

Customizing your application’s logo is easy in JetShip. We provide two logo components, one for the front pages and another for the admin pages:

  • Front Logo: apps/web/src/components/layout/front/Logo.tsx
  • Admin Logo: apps/web/src/components/layout/vertical/Logo.tsx

We recommend using an SVG format for your logo, as SVGs are scalable and work seamlessly across both light and dark themes. Replace the default logo in apps/web/src/assets/svg/Logo.tsx with your own SVG.


🌟 Favicon Setup​

JetShip includes a simple setup for favicons. To customize your favicon, place the following files in the apps/web/public directory:

  • favicon.ico
  • favicon-16x16.png
  • favicon-32x32.png
  • apple-touch-icon.png
  • android-chrome-512x512.png
  • android-chrome-192x192.png

Providing multiple versions of your favicon ensures the best appearance across different devices and contexts.