Theming & Branding

SaaSyBase ships with a robust, CSS-variable-driven design system. You can easily control the look and feel through the admin dashboard, create entirely new themes, and leverage the built-in UI components to rapidly build features.

The Admin Theme Designer

The core of the branding system lives at /admin/theme. This interface allows administrators or designers to curate how visitors experience your brand. Changes made here take effect immediately globally without requiring a rebuild or redeploy.

Color Palette System

The platform generates comprehensive CSS custom properties (variables) for both light and dark modes based on your configuration. You can customize:

Core surfaces: Primary, secondary, tertiary, and quaternary backgrounds.
Text: Primary, secondary, and tertiary text colors.
Borders: Primary and secondary border colors.
Accents: Primary brand color and interactive hover states.
Gradients: Page backgrounds, hero sections, cards, and tab gradients (with full control over from/via/to color stops).
Special surfaces: Header, sidebar, hero, panel backgrounds, and page glow effects.

Shipped Themes & Inspirations

SaaSyBase comes with several predefined theme presets meant to cover different SaaS archetypes and aesthetics. You can load these directly in the /admin/theme panel and tweak them further.

Treat the preset picker in the admin UI as the authoritative list. Presets can evolve with the product, but the workflow stays the same: load a preset, adjust light and dark values, then save your own version back to the database.

Creating Custom Themes

You aren't limited to the default look. To create a completely custom theme:

Go to /admin/theme and start adjusting individual color pickers for both Light and Dark mode tabs.
Adjust your border radius (Surface Radius) and layout settings to change the geometry of your components.
Once you are satisfied, click Save as Preset to store this specific palette configuration.
This saves your theme to the database, allowing you to easily swap back to it during A/B testing or a rebrand.

Shipped Reusable Components

To maintain visual consistency and accelerate feature development, SaaSyBase provides several high-quality reusable UI components inside components/ui/ and components/dashboard/.

All components automatically inherit the active theme's CSS variables, ensuring they perfectly match your curated Light or Dark mode.

Component	Location	Purpose
Pagination	components/ui/Pagination.tsx	A robust, accessible pagination control for lists.
ListFilters	components/ui/ListFilters.tsx	A powerful composite component for searching, filtering, and structuring data tables.
ConfirmModal	components/ui/ConfirmModal.tsx	A standardized confirmation dialog for destructive actions.
ImagePickerModal	components/ui/ImagePickerModal.tsx	An integrated media browser and uploader.
SortControls	components/ui/SortControls.tsx	Dropdown or toggle controls for changing data sort order.
Toast	components/ui/Toast.tsx	A non-blocking notification system for feedback (success, error, warning).
WarningsModal	components/ui/WarningsModal.tsx	An alerting modal meant to show bulk action results or serious errors.

This table is representative, not exhaustive. Before building a new primitive, scan components/ui/ and the admin/dashboard component folders to see whether the repo already ships a compatible building block.

Note

Unlike pure Tailwind UI kits where styles are hardcoded with utility classes (e.g. bg-blue-600), these components use the dynamic CSS variables (e.g. bg-[var(--theme-accent)] or rounded-[var(--theme-surface-radius)]). This is what allows the dashboard theme designer to restyle the entire app on the fly.

Layout & Navigation Customization

Header Configuration

The global navigation header is highly configurable. You can adjust:

Styling: Blur radius, border width, drop shadow strength, and custom font weights.
States: Different visual treatments for the default state versus the sticky/scrolled state.
Links: Manage the main navigation menu items directly from the dashboard.

Dark Mode Support

The application has robust, native support for both system-preference and manual dark mode toggling:

Detection: The app first reads localStorage.themePreference. If not set, it gracefully falls back to the browser's prefers-color-scheme media query.
Flash Prevention: A blocking inline script executes before React hydration to immediately apply the correct theme class to the <html> tag. This guarantees no visible light-to-dark flashing upon initial load.
Toggle Component: A reusable ThemeToggle component is provided in the header out-of-the-box.

Because every theme color variable you define in the admin panel generates specific light and dark variations, your palette customizations automatically and seamlessly apply to both modes.

Advanced Customization

Custom Code Injection

For specialized design requirements or third-party integrations that fall outside the built-in configuration UI, the theme designer provides code injection points:

Injection point	Use case
Custom CSS	Inject global CSS rules to override specific component styles.
Custom <head> snippet	Insert custom fonts, meta tags, or early-loading scripts.
Custom <body> snippet	Insert bottom-of-page scripts (e.g., live chat widgets, analytics trackers).

Blog-Specific Theming

The integrated CMS also hooks into the theming system. You can control the visual style of the blog listing (such as adjusting the layout grid or page sizes), enable/disable sidebars, toggle related posts algorithms, and inject specific HTML snippets before, after, or between blog posts — highly effective for rendering newsletter CTAs or ad units.

Tip

Best Practice:Always try to achieve your design goals using the built-in theme color system and variables first. Only resort to writing Custom CSS or injecting code when the design system explicitly doesn't cover your use case.