Theme Options

Complete reference for customizing the appearance and branding of your Practice Growth Suite widget.

Overview

Practice Growth Suite provides extensive theming options to match your brand identity and design preferences. All theme options are configured through the theme object in your scheduler configuration.

Branding Options

Logo Configuration

theme: {
  logo: {
    name: "Your Company Name",
    src: "https://example.com/logo.png",
    alt: "Company Logo",
    width: 120,
    height: 40
  }
}

Logo Properties:

name: Company name displayed as text fallback
src: URL to your logo image (PNG, JPG, SVG recommended)
alt: Alt text for accessibility
width: Logo width in pixels (optional)
height: Logo height in pixels (optional)

Color Scheme

Primary Colors

colors: {
  // Primary brand colors
  primaryOptionColor: "#51B44F",
  secondaryOptionColor: "#D4F3BB",
  primaryButtonBackground: "#51B44F",
  primaryButtonBorderColor: "#51B44F",
  primaryButtonColor: "#FFFFFF",
  
  // Secondary colors
  secondaryButtonBackground: "transparent",
  secondaryButtonBorderColor: "#212127",
  secondaryButtonColor: "#212127",
  
  // Active states
  activeNavItemBackground: "#51B44F",
  activeNavItemColor: "#FFFFFF",
  inactiveNavItemBackground: "#9CA3AF",
  inactiveNavItemColor: "#FFFFFF"
}

Background Colors

colors: {
  // Main backgrounds
  bodyBackground: "#F3F4F6",
  headerBackground: "#FFFFFF",
  footerBackground: "#FFFFFF",
  containerBackground: "#FFFFFF",
  
  // Section backgrounds
  availabilityBackground: "#F9FAFB",
  availabilityPaginationBackground: "#111827",
  nearestCardBackground: "#FFFFFF",
  samedayCardBackground: "#FFFFFF"
}

Text Colors

colors: {
  // Primary text
  headerColor: "#212127",
  navItemColor: "#212127",
  
  // Card text
  nearestCardTitleColor: "#212127",
  nearestCardSubtitleColor: "#9CA3AF",
  samedayCardTitleColor: "#212127",
  samedayCardSubtitlesColor: "#9CA3AF",
  samedayCardServiceTitleColor: "#212127",
  
  // Pagination text
  availabilityPaginationColor: "#FFFFFF",
  availabilityColumnHeaderColor: "#FFFFFF",
  nearestCardColumnHeaderColor: "#FFFFFF"
}

### Border Colors

```js
colors: {
  // Card borders
  nearestCardBorderColor: "#D1D5DB",
  samedayCardBorderColor: "#E5E7EB",
  samedayCardDividerColor: "#212127"
}

Button Colors

colors: {
  // Primary buttons
  primaryButtonBackground: "#51B44F",
  primaryButtonBorderColor: "#51B44F",
  primaryButtonColor: "#FFFFFF",
  
  // Secondary buttons
  secondaryButtonBackground: "transparent",
  secondaryButtonBorderColor: "#212127",
  secondaryButtonColor: "#212127"
}

Typography

Font Configuration

theme: {
  typography: {
    // Font families
    fontFamilyPrimary: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
    fontFamilySecondary: "'Georgia', serif",
    fontFamilyMono: "'JetBrains Mono', 'Fira Code', monospace",
    
    // Font sizes
    fontSizeSmall: "0.875rem",
    fontSizeBase: "1rem",
    fontSizeLarge: "1.125rem",
    fontSizeXLarge: "1.25rem",
    fontSize2XLarge: "1.5rem",
    fontSize3XLarge: "1.875rem",
    
    // Font weights
    fontWeightLight: 300,
    fontWeightNormal: 400,
    fontWeightMedium: 500,
    fontWeightSemibold: 600,
    fontWeightBold: 700
  }
}

Text Styles

theme: {
  typography: {
    // Heading styles
    heading1: {
      fontSize: "2.25rem",
      fontWeight: 700,
      lineHeight: "2.5rem"
    },
    heading2: {
      fontSize: "1.875rem",
      fontWeight: 600,
      lineHeight: "2.25rem"
    },
    heading3: {
      fontSize: "1.5rem",
      fontWeight: 600,
      lineHeight: "2rem"
    },
    
    // Body text styles
    body: {
      fontSize: "1rem",
      fontWeight: 400,
      lineHeight: "1.5rem"
    },
    bodySmall: {
      fontSize: "0.875rem",
      fontWeight: 400,
      lineHeight: "1.25rem"
    }
  }
}

Layout & Spacing

Spacing System

theme: {
  spacing: {
    // Base spacing unit
    base: "0.25rem",
    
    // Spacing scale
    xs: "0.25rem",    // 4px
    sm: "0.5rem",     // 8px
    md: "1rem",       // 16px
    lg: "1.5rem",     // 24px
    xl: "2rem",       // 32px
    "2xl": "3rem",    // 48px
    "3xl": "4rem"     // 64px
  }
}

Component Spacing

theme: {
  layout: {
    // Container spacing
    containerPadding: "1rem",
    containerMaxWidth: "1200px",
    
    // Section spacing
    sectionPadding: "2rem",
    sectionMargin: "1.5rem",
    
    // Card spacing
    cardPadding: "1.5rem",
    cardMargin: "1rem",
    cardBorderRadius: "0.5rem",
    
    // Button spacing
    buttonPadding: "0.75rem 1.5rem",
    buttonMargin: "0.5rem",
    buttonBorderRadius: "0.375rem"
  }
}

Component Styling

Header Styling

theme: {
  header: {
    // Header appearance
    height: "4rem",
    padding: "0 1.5rem",
    borderBottom: "1px solid #E5E7EB",
    
    // Logo positioning
    logoPosition: "left", // "left", "center", "right"
    logoSize: "auto",
    
    // Navigation styling
    navSpacing: "2rem",
    navFontWeight: 500
  }
}

Calendar Styling

theme: {
  calendar: {
    // Calendar grid
    gridGap: "0.5rem",
    cellPadding: "0.75rem",
    cellBorderRadius: "0.375rem",
    
    // Date styling
    todayBackground: "#FEF3C7",
    todayBorder: "2px solid #F59E0B",
    selectedBackground: "#51B44F",
    selectedText: "#FFFFFF",
    
    // Availability indicators
    availableBackground: "#D1FAE5",
    availableText: "#065F46",
    unavailableBackground: "#FEE2E2",
    unavailableText: "#991B1B"
  }
}

Form Styling

theme: {
  forms: {
    // Input fields
    inputPadding: "0.75rem",
    inputBorderRadius: "0.375rem",
    inputBorder: "1px solid #D1D5DB",
    inputFocusBorder: "2px solid #51B44F",
    
    // Labels
    labelFontWeight: 500,
    labelMargin: "0.5rem 0",
    
    // Validation states
    inputErrorBorder: "2px solid #EF4444",
    inputSuccessBorder: "2px solid #10B981"
  }
}

Responsive Design

Breakpoint Configuration

theme: {
  breakpoints: {
    // Mobile-first approach
    sm: "640px",
    md: "768px",
    lg: "1024px",
    xl: "1280px",
    "2xl": "1536px"
  }
}

Responsive Spacing

theme: {
  responsive: {
    // Mobile spacing
    mobile: {
      containerPadding: "1rem",
      sectionPadding: "1.5rem",
      cardPadding: "1rem"
    },
    
    // Tablet spacing
    tablet: {
      containerPadding: "1.5rem",
      sectionPadding: "2rem",
      cardPadding: "1.5rem"
    },
    
    // Desktop spacing
    desktop: {
      containerPadding: "2rem",
      sectionPadding: "3rem",
      cardPadding: "2rem"
    }
  }
}

Animation & Transitions

Transition Configuration

theme: {
  transitions: {
    // Duration
    durationFast: "150ms",
    durationNormal: "300ms",
    durationSlow: "500ms",
    
    // Easing functions
    easeIn: "cubic-bezier(0.4, 0, 1, 1)",
    easeOut: "cubic-bezier(0, 0, 0.2, 1)",
    easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
    
    // Component transitions
    buttonTransition: "all 150ms ease-in-out",
    cardTransition: "transform 200ms ease-out, box-shadow 200ms ease-out",
    modalTransition: "opacity 300ms ease-in-out"
  }
}

Dark Mode Support

Dark Theme Colors

theme: {
  darkMode: {
    // Dark backgrounds
    bodyBackground: "#111827",
    headerBackground: "#1F2937",
    cardBackground: "#374151",
    
    // Dark text
    textPrimary: "#F9FAFB",
    textSecondary: "#D1D5DB",
    textTertiary: "#9CA3AF",
    
    // Dark borders
    borderPrimary: "#4B5563",
    borderSecondary: "#374151"
  }
}

Complete Theme Example

const jarvis = new JarvisAnalyticsScheduler({
  token: "YOUR_TOKEN",
  companyId: "YOUR_COMPANY_ID",
  locationId: "YOUR_LOCATION_ID",
  
  // Logo configuration
  logo: {
    src: "https://acme.com/logo.png",
    width: 189,
    height: 38
  },
  
  // Color customization
  colors: {
    // Primary colors
    primaryOptionColor: "#2563EB",
    secondaryOptionColor: "#DBEAFE",
    primaryButtonBackground: "#2563EB",
    primaryButtonBorderColor: "#2563EB",
    primaryButtonColor: "#FFFFFF",
    
    // Backgrounds
    bodyBackground: "#F8FAFC",
    headerBackground: "#FFFFFF",
    containerBackground: "#FFFFFF",
    availabilityBackground: "#F1F5F9",
    
    // Text colors
    headerColor: "#0F172A",
    navItemColor: "#0F172A",
    nearestCardTitleColor: "#0F172A",
    nearestCardSubtitleColor: "#64748B",
    
    // Card styling
    nearestCardBackground: "#FFFFFF",
    nearestCardBorderColor: "#E2E8F0",
    samedayCardBackground: "#FFFFFF",
    samedayCardBorderColor: "#E2E8F0"
  }
});

Best Practices

Color Accessibility

Ensure sufficient contrast ratios (WCAG AA compliance)
Test colors with colorblind users
Provide alternative color schemes

Typography

Use readable font sizes (minimum 16px for body text)
Maintain consistent hierarchy
Consider line height for readability

Responsive Design

Test on multiple device sizes
Use relative units when possible
Ensure touch targets are appropriately sized

Performance

Optimize image assets for logos
Use CSS custom properties for dynamic theming
Minimize theme changes during user interaction

Next Steps

Theming & Customization - Overview of theming capabilities
UTM Parameters - Configuration options

Overview​

Branding Options​

Logo Configuration​

Color Scheme​

Primary Colors​

Background Colors​

Text Colors​

Button Colors​

Typography​

Font Configuration​

Text Styles​

Layout & Spacing​

Spacing System​

Component Spacing​

Component Styling​

Header Styling​

Calendar Styling​

Form Styling​

Responsive Design​

Breakpoint Configuration​

Responsive Spacing​

Animation & Transitions​

Transition Configuration​

Dark Mode Support​

Dark Theme Colors​

Complete Theme Example​

Best Practices​

Color Accessibility​

Typography​

Responsive Design​

Performance​

Next Steps​

Overview

Branding Options

Logo Configuration

Color Scheme

Primary Colors

Background Colors

Text Colors

Button Colors

Typography

Font Configuration

Text Styles

Layout & Spacing

Spacing System

Component Spacing

Component Styling

Header Styling

Calendar Styling

Form Styling

Responsive Design

Breakpoint Configuration

Responsive Spacing

Animation & Transitions

Transition Configuration

Dark Mode Support

Dark Theme Colors

Complete Theme Example

Best Practices

Color Accessibility

Typography

Responsive Design

Performance

Next Steps