Theming & Customization

Creating a Custom Theme

Create a custom theme by extending the default configuration in your config file.

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        secondary: '#8B5CF6',
        success: '#10B981',
        warning: '#F59E0B',
        error: '#EF4444',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui'],
        serif: ['Merriweather', 'serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
    },
  },
}

Color Theme

<!-- Use custom semantic color names -->
<div class="bismillah-bg-primary bismillah-text-white bismillah-rounded-lg bismillah-p-4">
  Primary theme color
</div>

<div class="bismillah-bg-success bismillah-text-white bismillah-rounded-lg bismillah-p-4">
  Success message
</div>

<div class="bismillah-bg-error bismillah-text-white bismillah-rounded-lg bismillah-p-4">
  Error state
</div>

// config.js
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#082f49',
        },
      },
    },
  },
}

// config.js - Define both light and dark colors
export default {
  theme: {
    extend: {
      colors: {
        surface: {
          light: '#ffffff',
          dark: '#1f2937',
        },
        text: {
          light: '#1f2937',
          dark: '#f3f4f6',
        },
      },
    },
  },
}

Typography Theme

// config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'ui-sans-serif'],
        serif: ['Georgia', 'ui-serif'],
        mono: ['Fira Code', 'monospace'],
      },
      fontSize: {
        xs: ['12px', { lineHeight: '1.5' }],
        sm: ['14px', { lineHeight: '1.5' }],
        base: ['16px', { lineHeight: '1.5' }],
        lg: ['18px', { lineHeight: '1.625' }],
        xl: ['20px', { lineHeight: '1.75' }],
        '2xl': ['24px', { lineHeight: '2' }],
        '3xl': ['30px', { lineHeight: '1.2' }],
        '4xl': ['36px', { lineHeight: '1.1' }],
      },
      fontWeight: {
        light: '300',
        normal: '400',
        medium: '500',
        semibold: '600',
        bold: '700',
        extrabold: '800',
      },
    },
  },
}

Spacing & Sizing Theme

// config.js
export default {
  theme: {
    extend: {
      spacing: {
        xs: '0.25rem',  // 4px
        sm: '0.5rem',   // 8px
        md: '1rem',     // 16px
        lg: '1.5rem',   // 24px
        xl: '2rem',     // 32px
        '2xl': '3rem',  // 48px
        '3xl': '4rem',  // 64px
      },
      borderRadius: {
        xs: '0.25rem',   // 4px (sharp)
        sm: '0.375rem',  // 6px (subtle)
        base: '0.5rem',  // 8px (default)
        lg: '0.75rem',   // 12px (rounded)
        xl: '1rem',      // 16px (very rounded)
        full: '9999px',  // circles & pills
      },
    },
  },
}

Shadow & Effects Theme

// config.js
export default {
  theme: {
    extend: {
      boxShadow: {
        xs: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
        sm: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
        base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
        md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
        '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
      },
    },
  },
}

Component-Specific Themes

// config.js
export default {
  theme: {
    extend: {
      // Button theme
      buttonColors: {
        primary: 'bg-blue-600 hover:bg-blue-700 text-white',
        secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-900',
        danger: 'bg-red-600 hover:bg-red-700 text-white',
      },
      // Card theme
      cardRadius: '0.75rem',
      cardShadow: 'shadow-md',
      // Input theme
      inputBorder: 'border-gray-300',
      inputFocus: 'focus:border-blue-500 focus:ring-blue-500',
    },
  },
}

Theme Variants

<div class="bismillah-bg-white bismillah-text-gray-900">
  Light theme content
</div>

<div class="dark:bismillah-bg-gray-900 dark:bismillah-text-white">
  Dark theme content
</div>

<div class="bismillah-bg-black bismillah-text-white">
  High contrast theme
</div>

Brand Color System

// Brand-specific color palette
export default {
  theme: {
    extend: {
      colors: {
        // Brand primary
        brand: '#3b82f6',
        // Derived palette
        'brand-light': '#dbeafe',
        'brand-lighter': '#eff6ff',
        'brand-dark': '#1e40af',
        'brand-darker': '#1e3a8a',
        
        // Brand accent
        accent: '#ec4899',
        'accent-light': '#fbcfe8',
        'accent-dark': '#be185d',
        
        // Status colors
        success: '#10b981',
        warning: '#f59e0b',
        error: '#ef4444',
        info: '#3b82f6',
      },
    },
  },
}

CSS Variables Theme

:root {
  /* Brand colors */
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  
  /* Neutral palette */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-900: #111827;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  /* Border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
}

.dark {
  --color-bg: #1f2937;
  --color-text: #f3f4f6;
}

Theme Utilities

<!-- Primary themed button -->
<button class="bismillah-bg-primary bismillah-text-white bismillah-px-4 bismillah-py-2 bismillah-rounded-lg hover:bismillah-opacity-90">
  Primary Button
</button>

<!-- Success themed alert -->
<div class="bismillah-bg-success bismillah-bg-opacity-10 bismillah-text-success bismillah-px-4 bismillah-py-3 bismillah-rounded-lg">
  Success message
</div>

<!-- Interactive themed card -->
<div class="bismillah-bg-white dark:bismillah-bg-gray-800 bismillah-rounded-lg bismillah-shadow-md hover:bismillah-shadow-lg bismillah-transition">
  Themed card
</div>

Multi-Theme Support

// Define multiple themes
const themes = {
  light: {
    colors: {
      primary: '#3b82f6',
      background: '#ffffff',
      text: '#1f2937',
    },
  },
  dark: {
    colors: {
      primary: '#60a5fa',
      background: '#1f2937',
      text: '#f3f4f6',
    },
  },
  highContrast: {
    colors: {
      primary: '#000000',
      background: '#ffffff',
      text: '#000000',
    },
  },
};

// Apply theme via CSS class
function applyTheme(themeName) {
  const html = document.documentElement;
  html.setAttribute('data-theme', themeName);
  localStorage.setItem('theme', themeName);
}

Best Practices

• Use semantic color names for consistency
• Define color palettes with shade variations (50-900)
• Create a hierarchy of sizes and spacing
• Test themes in light and dark modes
• Use CSS variables for dynamic theme switching
• Document your theme configuration
• Maintain color contrast for accessibility
• Use consistent naming conventions