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):
: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):
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
π Using an SVG for the Logoβ
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.