> ## Documentation Index > Fetch the complete documentation index at: https://docs.bunship.com/llms.txt > Use this file to discover all available pages before exploring further. # Theming & Branding > Customize colors, fonts, dark mode, logos, and visual style in BunShip Pro. # Theming & Branding BunShip Pro uses CSS custom properties (HSL values) for its entire color system. Change one variable and every component updates — buttons, borders, backgrounds, charts, everything. ## Brand Color The primary brand color is defined in `packages/ui/src/styles/globals.css`. BunShip Pro ships with teal (`172` on the hue scale). To change it, update the `--primary` HSL value in both `:root` (light mode) and `.dark` (dark mode): ```css theme={null} /* packages/ui/src/styles/globals.css */ :root { --primary: 172 80% 34%; /* Change the hue (first number) */ --primary-foreground: 0 0% 100%; /* Text on primary — usually white */ --accent: 172 60% 95%; /* Lighter tint for hover/accent areas */ --accent-foreground: 172 80% 24%; /* Text on accent */ --ring: 172 80% 34%; /* Focus ring — match primary */ } .dark { --primary: 172 70% 55%; /* Brighter in dark mode */ --accent: 172 30% 15%; --accent-foreground: 172 70% 70%; --ring: 172 70% 55%; } ``` ### Common Brand Colors | Brand Color | Light Mode HSL | Dark Mode HSL | | -------------- | -------------- | ------------- | | Teal (default) | `172 80% 34%` | `172 70% 55%` | | Blue | `221 83% 53%` | `217 91% 60%` | | Purple | `262 83% 58%` | `263 70% 60%` | | Green | `142 76% 36%` | `142 70% 45%` | | Orange | `24 95% 53%` | `20 90% 48%` | | Red | `0 84% 60%` | `0 72% 51%` | Change all five variables (`--primary`, `--primary-foreground`, `--accent`, `--accent-foreground`, `--ring`) to keep the theme consistent. ## Color System The full color palette uses these CSS variables: | Variable | Purpose | | -------------------- | ------------------------------------------- | | `--background` | Page background | | `--foreground` | Default text color | | `--primary` | Brand color — buttons, links, active states | | `--secondary` | Subtle backgrounds for secondary actions | | `--muted` | Muted backgrounds and section dividers | | `--muted-foreground` | Subdued text — labels, descriptions | | `--accent` | Hover and highlight backgrounds | | `--destructive` | Delete, danger, error states | | `--border` | Borders and dividers | | `--input` | Input field borders | | `--ring` | Focus rings | | `--success` | Success states and indicators | All values are HSL triplets (e.g., `172 80% 34%`) and are referenced as `hsl(var(--primary))` in Tailwind classes. ## Dark Mode BunShip Pro supports three theme modes: light, dark, and system (follows OS preference). The toggle is in the dashboard header and in user preferences at `/settings/preferences`. The theme is applied by adding or removing the `dark` class on the `` element. The `.dark` block in `globals.css` overrides all color variables. To adjust dark mode colors, edit the `.dark` section in `globals.css`. The dark background defaults to `0 0% 7.8%` (near-black). ## Fonts BunShip Pro uses two fonts defined in `globals.css`: | Font | Variable | Usage | | ---------------------------------------------------- | ------------- | ----------------------------------------------------- | | [Inter](https://rsms.me/inter/) | `--font-sans` | All body text, headings, data values | | [JetBrains Mono](https://www.jetbrains.com/lp/mono/) | `--font-mono` | Code snippets, terminal content, small section labels | To change fonts: 1. Update the `@theme` block in `globals.css`: ```css theme={null} @theme inline { --font-sans: "Your Font", system-ui, sans-serif; --font-mono: "Your Mono Font", ui-monospace, monospace; } ``` 2. Load the new font — either add a `` tag in the root layout or install it as an npm package ## Logo and Favicon Replace these files with your own: | File | Location | Format | | -------------- | --------------------------------------------- | ------------------- | | Logo (sidebar) | Used in `apps/web/src/components/sidebar.tsx` | SVG or image import | | Favicon | `apps/web/public/favicon.ico` | ICO or SVG | The sidebar currently uses the text "BunShip" with the Ship icon from Lucide. To replace it with an image logo, edit the logo section in `sidebar.tsx`. ## Border Radius The global border radius is set with the `--radius` variable: ```css theme={null} :root { --radius: 0.625rem; /* default — 10px */ } ``` All components derive their radius from this value (`--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl`). Increase it for rounder corners, decrease for sharper. ## Next Steps * [UI Components](/pro/components) — Available components and how to use them * [Landing Page](/pro/landing-page) — Customize the marketing site with your branding