1. Overview of Theme Customization

Nexus AI is built with TailwindCSS, so you can easily customize the colors and styles by editing the tailwind configuration and custom styles.

You can add more broad colors and other customizations in tailwind.config.ts file.

But if you want to customize the Nexus AI's unique styles you can do it in assets/style.css file.

2. Changing Colors

To change the colors of the Nexus AI, you can edit the classes in the assets/style.css file. There are typically named in the format of bg-primary, text-primary, border-color-1, etc.

For example, if you want to change the background color of the Nexus AI, you can edit the bg-primary class in the assets/style.css file.

.bg-primary {
  background-color: #040102; // Edit this line
}

3. Changing Logo

To change the logo of the Nexus AI, you can edit the components/base/Logo.vue file. Logo component accepts 2 different sizes, 2 different variants (Primary and White) and optional showText prop to hide or show the text of the logo.

So if you want to change the logo to your own logo, you must have 2 different logos for 2 different sizes and if logo has text, you must have 2 different logos for with or without text.

Easy way to change logo is to replace these following svg components:

• SvgLogoPrimary.vue
• SvgLogoPrimaryLarge.vue
• SvgLogoWhite.vue
• SvgLogoWhiteLarge.vue

4. Typography Settings

Nexus AI uses 'San Francisco' font by default. But you can easily change it to any other font you want.

To change the font, you can edit the assets/main.css file.

html {
  font-family: "-apple-system", "BlinkMacSystemFont", "SF Pro Display Regular",
    "SF Pro Display Regular Placeholder", sans-serif;
}

You can also change the specific font sizes, weights and other typography settings in the assets/style.css file. Text styles are named in the format of heading-1, paragraph, etc.

For example, if you want to change the font size of the paragraph style, you can edit the paragraph class in the assets/style.css file.

.paragraph {
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
}

5. Custom CSS

If you want to add more custom styles, you can create a new file in the assets/css/ folder and import it in the assets/main.css file.

Nexus AI already uses Tailwind CSS utility classes, so you can use them to add more custom styling for you components & pages.