Themes provide pre-designed visual styles for your Tadabase applications. They offer a quick way to achieve professional, polished designs without writing extensive CSS. This article covers built-in themes, theme customization, and creating custom themes from scratch.

Tadabase provides several professionally designed themes out of the box. Each theme includes coordinated colors, typography, spacing, and component styling that work together harmoniously.

Default Theme:

• Clean, minimal design
• Blue color scheme
• Standard spacing
• Universal compatibility
• Best for: Internal business apps

Modern Theme:

• Contemporary flat design
• Vibrant colors
• Larger buttons and spacing
• Card-based layouts
• Best for: Customer-facing portals

Dark Theme:

• Dark backgrounds
• High contrast
• Reduced eye strain
• Modern aesthetic
• Best for: Data dashboards, monitoring apps

Minimal Theme:

• Maximum whitespace
• Simple, clean lines
• Subtle colors
• Focus on content
• Best for: Content-heavy applications

Corporate Theme:

• Professional appearance
• Conservative colors
• Formal typography
• Structured layouts
• Best for: Enterprise applications

How to Apply a Theme:

1. Go to App Settings
2. Navigate to "Appearance" or "Theme" section
3. Browse available themes
4. Preview each theme
5. Select and apply
6. Publish changes

Considerations:

• Target Audience: Internal users vs external customers
• Brand Identity: Match your brand personality
• Content Type: Data-heavy vs content-focused
• Device Usage: Desktop vs mobile primary
• Accessibility: Contrast and readability needs

Customize themes through built-in settings:

Primary Colors:

• Primary Color: Main brand color for buttons, links, accents
• Secondary Color: Supporting color for variety
• Success Color: Positive actions and confirmations
• Warning Color: Cautions and alerts
• Danger Color: Errors and destructive actions

Typography:

• Font Family: Primary typeface
• Heading Font: Font for headers
• Base Size: Default text size
• Line Height: Spacing between lines
• Font Weight: Regular, medium, bold

Layout:

• Container Width: Max width of content
• Spacing Scale: Padding and margin sizes
• Border Radius: Rounded corner amount
• Shadow Depth: Elevation effects

Create custom color schemes:

Choosing Brand Colors:

1. Start with your brand's primary color
2. Select complementary colors
3. Test for contrast and accessibility
4. Create variations (light, dark)
5. Apply consistently across app

Color Psychology:

• Blue: Trust, professionalism, calm
• Green: Growth, success, health
• Red: Energy, urgency, importance
• Purple: Creativity, luxury, innovation
• Orange: Friendly, enthusiasm, confidence
• Gray: Neutral, professional, sophisticated

Example Color Palettes:

/* Tech Startup */
--primary: #6366f1;
--secondary: #8b5cf6;
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;

/* Finance/Corporate */
--primary: #1e40af;
--secondary: #475569;
--success: #059669;
--warning: #d97706;
--danger: #dc2626;

/* Healthcare */
--primary: #0891b2;
--secondary: #06b6d4;
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;

/* Creative Agency */
--primary: #ec4899;
--secondary: #8b5cf6;
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;

Custom fonts enhance brand identity:

Google Fonts Integration:

/* Import professional fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* Apply to application */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif !important;
}

Font Pairing Suggestions:

• Montserrat + Open Sans: Modern and clean
• Playfair Display + Source Sans Pro: Elegant and readable
• Raleway + Lato: Professional and friendly
• Roboto + Roboto Slab: Contemporary and strong
• Inter + Inter: Unified modern look

Typography Scale:

/* Establish typographic hierarchy */
h1 { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 2rem; font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 1.75rem; font-weight: 600; }
h4 { font-size: 1.5rem; font-weight: 600; }
h5 { font-size: 1.25rem; font-weight: 500; }
h6 { font-size: 1.125rem; font-weight: 500; }

body { font-size: 1rem; line-height: 1.6; }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.75rem; }

Build themes using CSS variables and systematic styling:

/*=====================
    THEME NAME
    VERSION 1.0
=====================*/

/* === COLOR SYSTEM === */
:root {
    /* Brand Colors */
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --primary-dark: #2563eb;

    --secondary: #8b5cf6;
    --secondary-light: #a78bfa;
    --secondary-dark: #7c3aed;

    /* Semantic Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;

    /* Neutral Colors */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Surface Colors */
    --background: #ffffff;
    --surface: #f9fafb;
    --card: #ffffff;

    /* Text Colors */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-disabled: #9ca3af;

    /* Border & Shadow */
    --border-color: #e5e7eb;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Typography */
    --font-sans: 'Inter', sans-serif;
    --font-heading: 'Poppins', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;
}

/* === GLOBAL STYLES === */
body {
    font-family: var(--font-sans) !important;
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-base) !important;
    color: var(--text-primary) !important;
    background-color: var(--background) !important;
}

/* === COMPONENTS === */

/* Buttons */
.btn {
    border-radius: var(--radius-md) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

.btn-primary:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow) !important;
}

/* Cards */
.card {
    background-color: var(--card) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: var(--spacing-lg) !important;
}

/* Tables */
.td-table {
    background-color: var(--surface) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
}

.td-table thead th {
    background-color: var(--primary) !important;
    color: white !important;
    font-weight: 600 !important;
    padding: var(--spacing-md) !important;
}

/* Forms */
.form-control {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    transition: all 0.2s ease !important;
}

.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Navigation */
.navbar {
    background-color: var(--surface) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

Create light and dark variations:

/* Light Theme (default) */
:root {
    --background: #ffffff;
    --surface: #f9fafb;
    --text-primary: #111827;
    --text-secondary: #6b7280;
}

/* Dark Theme */
[data-theme="dark"], .dark-theme {
    --background: #111827;
    --surface: #1f2937;
    --card: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --border-color: #374151;
}

/* Apply to body */
body[data-theme="dark"] {
    background-color: var(--background) !important;
    color: var(--text-primary) !important;
}

Add your company logo:

Navigation Logo:

1. Go to App Settings > Branding
2. Upload logo image (PNG with transparency recommended)
3. Set logo dimensions
4. Configure link destination
5. Adjust positioning

Logo Sizing Guidelines:

• Horizontal Logo: 200px width x 50px height
• Square Logo: 80px x 80px
• File Format: PNG with transparent background
• Resolution: 2x for retina displays

Custom Logo Styling:

.navbar-brand img {
    max-height: 50px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Responsive logo */
@media (max-width: 768px) {
    .navbar-brand img {
        max-height: 40px !important;
    }
}

Add browser tab icon:

1. Create 32x32px favicon image
2. Upload to App Settings > Branding
3. Image appears in browser tabs
4. Helps with brand recognition

Customize authentication pages:

/* Login page customization */
.login-page {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
}

.login-card {
    background-color: white !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
    padding: var(--spacing-xl) !important;
}

.login-logo {
    max-width: 200px !important;
    margin-bottom: var(--spacing-lg) !important;
}

/* Healthcare Theme */
:root {
    --primary: #0891b2; /* Medical teal */
    --secondary: #06b6d4;
    --success: #10b981;
    --background: #f0fdfa;
}

/* Professional, trustworthy design */
body {
    font-family: 'Roboto', sans-serif !important;
}

.btn-primary {
    background-color: var(--primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Finance Theme */
:root {
    --primary: #1e40af; /* Professional blue */
    --secondary: #475569; /* Slate gray */
    --background: #f8fafc;
}

/* Conservative, reliable design */
.card {
    border: 2px solid #e2e8f0 !important;
}

h1, h2, h3 {
    font-family: 'Merriweather', serif !important;
}

/* Creative Theme */
:root {
    --primary: #ec4899; /* Bold pink */
    --secondary: #8b5cf6; /* Purple */
    --background: #fdf2f8;
}

/* Bold, energetic design */
.btn {
    border-radius: 25px !important;
    padding: 12px 30px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

h1 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 800 !important;
}

/* E-Commerce Theme */
:root {
    --primary: #059669; /* Trust green */
    --secondary: #f59e0b; /* Accent orange */
    --background: #ffffff;
}

/* Shopping-focused design */
.product-card {
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: transform 0.2s !important;
}

.product-card:hover {
    transform: scale(1.05) !important;
}

.btn-primary {
    background: var(--primary) !important;
    font-size: 18px !important;
    padding: 15px 40px !important;
}

Before deploying a theme:

• ☐ Test on all major browsers (Chrome, Firefox, Safari, Edge)
• ☐ Verify mobile responsiveness
• ☐ Check tablet view
• ☐ Test all components (tables, forms, buttons)
• ☐ Verify color contrast for accessibility
• ☐ Test dark/light mode if applicable
• ☐ Check loading states and animations
• ☐ Verify text readability
• ☐ Test with real data
• ☐ Get stakeholder approval

Ensure themes are accessible:

Color Contrast:

• Text should have 4.5:1 contrast ratio minimum
• Large text (18pt+) needs 3:1 minimum
• Use online contrast checkers
• Test with accessibility tools

Font Sizing:

• Minimum 16px for body text
• Scalable with browser zoom
• Clear typographic hierarchy
• Adequate line spacing

Interactive Elements:

• Minimum 44x44px touch targets
• Clear focus indicators
• Keyboard navigable
• Screen reader friendly

Document your custom themes:

/*=====================
    COMPANY THEME
    Version: 1.0
    Created: 2026-01-28
    Author: [Your Name]
=====================*/

/* === THEME DOCUMENTATION ===
 *
 * Primary Color: #3b82f6 - Used for primary actions, links
 * Secondary Color: #8b5cf6 - Used for accents, highlights
 *
 * Typography:
 * - Headings: Poppins
 * - Body: Inter
 *
 * Modifications from base:
 * - Increased border radius to 12px
 * - Added subtle shadows
 * - Custom button hover effects
 *
 * Browser Support:
 * - Chrome 90+
 * - Firefox 88+
 * - Safari 14+
 * - Edge 90+
 */

Consistency:

• Use consistent colors throughout
• Maintain uniform spacing
• Apply same border radius everywhere
• Use cohesive typography

Flexibility:

• Use CSS variables for easy updates
• Build reusable component styles
• Create theme variations
• Plan for scalability

Performance:

• Minimize custom fonts
• Optimize images
• Use efficient CSS
• Avoid heavy animations

You now understand how to work with themes in Tadabase. The next article covers white labeling and custom domains to create fully branded, professional applications.

Hands-On Exercise (To Be Added)

Exercise placeholders will include practical activities such as:

• Selecting and applying a built-in theme
• Customizing theme colors to match brand
• Creating a complete custom theme
• Testing theme across devices and browsers

Knowledge Check (To Be Added)

Quiz questions will test understanding of:

• When to use built-in vs custom themes
• Color psychology and selection
• Theme customization techniques
• Accessibility requirements for themes