Theme Customization

JetShip leverages the power of FlyonUI, an open-source library built on Tailwind CSS. FlyonUI provides a robust set of semantic components and powerful JavaScript plugins, making it easy to create responsive and visually appealing UIs.

If you appreciate FlyonUI, don't forget to give it a ⭐ on GitHub!

Default Themes

JetShip comes preconfigured with all the default themes provided by FlyonUI. To get a detailed understanding of how themes are implemented, take a look at the tailwind.config.js file in your project. You can also refer to the FlyonUI Themes documentation for detailed information on available themes.

How to Customize the Theme

JetShip allows you to customize your theme configurations, including colors, border-radius, font-family, and more. Here’s a quick guide to help you customize the theme:

Customizing the Theme

You can modify the tailwind.config.js file to change theme settings. Below is a simple example of how to customize the color, border radius, and font-family:

// tailwind.config.js

flyonui: {
  themes: [
    flyonDefaultTheme, // Keep the default FlyonUI theme
    {
      light: { // Custom Light Theme
        ...flyonDefaultTheme.light,  // Inherit default light theme settings
        '--rounded-box': '0.75rem',  // Custom border-radius
        primary: '#f00',             // Custom primary color (Red)
      },
    },
    {
      dark: { // Custom Dark Theme
        ...flyonDefaultTheme.dark,    // Inherit default dark theme settings
        '--rounded-box': '0.75rem',   // Custom border-radius
        fontFamily: 'Montserrat',     // Custom font-family (Ensure it's added to the project)
      },
    },
  ]
}

• primary: Set your custom primary color here.
• --rounded-box: Customize the border-radius for specific components.
• fontFamily: You can set your preferred font family, such as 'Montserrat', but ensure you have added the font in your project setup.

Setting the Default Theme

By default, JetShip dynamically loads the theme based on the user's system preference (light or dark mode). However, if you want to load a specific theme initially, you can modify the currentTheme variable in the resources/js/app.js file.

Example: Setting a Specific Default Theme

const currentTheme = localStorage.getItem("theme")  
  ? localStorage.getItem("theme") 
  : isDarkMode ? "dark" : "light"; 

const currentTheme = 'gourmet'

This change ensures that your preferred theme is loaded by default instead of relying on system preferences.

✨ Pro Tip

Customize and experiment with different themes, and set a theme that aligns with your brand or aesthetic preferences!

By following these steps, you'll be able to fully customize the look and feel of your application using FlyonUI's powerful theme system.

Logo

Customizing your application’s logo is easy in JetShip. The logo component can be found at:

resources/views/components/layouts/partials/logo.blade.php

Using SVG for the Logo

We recommend using an SVG format for your logo because SVGs are scalable and work seamlessly across all themes. Simply replace the default logo.svg file with your own.

Image Toggler for Non-SVG Logos

If you're unable to use SVGs, JetShip offers an image toggler component that allows you to switch between logos for light and dark mode.

Here’s an example code snippet for using the image toggler:

<div class="flex items-center gap-2">
    <x-misc.image-toggler 
        darkImage="{{ asset('/path/to/dark/logo') }}"   
        lightImage="{{ asset('/path/to/light/logo') }}" 
        altText="your-brand-name"
    ></x-misc.image-toggler>

    <span class="text-xl font-extrabold">{{ config('app.name') }}</span>
</div>

• darkImage: Path to the logo for dark mode.
• lightImage: Path to the logo for light mode.
• altText: A meaningful description of your logo for accessibility.

⚠️ Note: Ensure that both the light and dark images are correctly configured to provide a consistent user experience across modes.

Favicon Setup

JetShip also provides a setup for favicons. You can easily set the favicon in the public directory.

Here is the list of favicons you should place in public:

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

By providing multiple versions of the favicon, you ensure that your website displays the best possible icon in various contexts.