Theming

Customize the widget appearance to match your brand using CSS custom properties or the theme configuration option.

Quick Theming

Via JavaScript

VanityCert.init({
  target: '#ssl-widget',
  apiEndpoint: '/api/vanitycert-proxy',
  serverId: 123,
  userId: 'user-123',

  theme: {
    primaryColor: '#10243f',
    secondaryColor: '#1867a0',
    successColor: '#28a745',
    errorColor: '#dc3545',
    fontFamily: '"Helvetica Neue", Arial, sans-serif'
  }
});

Via CSS

Override CSS custom properties in your stylesheet:

:root {
  --vc-primary-color: #10243f;
  --vc-secondary-color: #1867a0;
  --vc-success-color: #28a745;
}

Theme Options

JavaScript Theme Object

Property	Type	Default	Description
`primaryColor`	string	`#10243f`	Primary brand color
`secondaryColor`	string	`#1867a0`	Secondary brand color
`tertiaryColor`	string	`#92c2e9`	Tertiary/accent color
`successColor`	string	`#28a745`	Success state color
`errorColor`	string	`#dc3545`	Error state color
`warningColor`	string	`#ffc107`	Warning state color
`infoColor`	string	`#17a2b8`	Info state color
`fontFamily`	string	`system-ui, -apple-system, "Segoe UI", Roboto, sans-serif`	Font family
`fontSize`	string	`16px`	Base font size
`borderRadius`	string	`8px`	Border radius for elements

CSS Custom Properties

Complete list of customizable CSS variables:

Colors

:root {
  /* Brand Colors */
  --vc-primary-color: #10243f;
  --vc-secondary-color: #1867a0;
  --vc-tertiary-color: #92c2e9;
  --vc-success-color: #28a745;
  --vc-error-color: #dc3545;
  --vc-warning-color: #ffc107;
  --vc-info-color: #17a2b8;

  /* Text Colors */
  --vc-text-primary: #212529;
  --vc-text-secondary: #6c757d;
  --vc-text-light: #ffffff;

  /* Background Colors */
  --vc-bg-primary: #ffffff;
  --vc-bg-secondary: #f8f9fa;
  --vc-bg-dark: #343a40;

  /* Border */
  --vc-border-color: #dee2e6;
}

Typography

:root {
  /* Font Family */
  --vc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Font Sizes */
  --vc-font-size-base: 16px;
  --vc-font-size-sm: 14px;
  --vc-font-size-lg: 18px;
  --vc-font-size-xl: 24px;

  /* Font Weights */
  --vc-font-weight-normal: 400;
  --vc-font-weight-medium: 500;
  --vc-font-weight-bold: 600;
}

Spacing & Layout

:root {
  /* Border Radius */
  --vc-border-radius: 8px;
  --vc-border-radius-sm: 4px;
  --vc-border-radius-lg: 12px;

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

  /* Shadows */
  --vc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --vc-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --vc-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --vc-transition: all 0.2s ease;
}

Theming Examples

Dark Mode

.dark-mode {
  --vc-primary-color: #4a9eff;
  --vc-secondary-color: #6bb6ff;
  --vc-text-primary: #ffffff;
  --vc-text-secondary: #b0b0b0;
  --vc-bg-primary: #1a1a1a;
  --vc-bg-secondary: #2a2a2a;
  --vc-border-color: #404040;
}

Brand Examples

Stripe-inspired

theme: {
  primaryColor: '#635bff',
  secondaryColor: '#0a2540',
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
  borderRadius: '6px'
}

GitHub-inspired

theme: {
  primaryColor: '#24292f',
  secondaryColor: '#0969da',
  successColor: '#1a7f37',
  errorColor: '#cf222e',
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
  borderRadius: '6px'
}

Shopify-inspired

theme: {
  primaryColor: '#008060',
  secondaryColor: '#5c6ac4',
  fontFamily: 'SF Pro Display, -apple-system, sans-serif',
  borderRadius: '8px'
}

Advanced Customization

Override Specific Components

Target specific elements with custom CSS:

/* Stepper */
.vc-stepper {
  margin-bottom: 40px;
}

.vc-step-circle {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

/* Buttons */
.vc-button-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vc-button-primary:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* DNS Box */
.vc-dns-box {
  background: linear-gradient(to right, #f0f7ff, #e6f2ff);
  border-left: 4px solid var(--vc-primary-color);
}

/* Success Icon */
.vc-success-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Responsive Customization

@media (max-width: 768px) {
  :root {
    --vc-font-size-base: 14px;
    --vc-spacing-lg: 16px;
  }

  .vanitycert-widget {
    padding: 16px;
  }
}

Animation Customization

/* Custom animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vc-step-content {
  animation: slideIn 0.3s ease;
}

/* Disable animations (accessibility) */
@media (prefers-reduced-motion: reduce) {
  .vanitycert-widget * {
    animation: none !important;
    transition: none !important;
  }
}

Scoped Theming

Apply different themes to different instances:

<div id="widget-1" class="theme-blue"></div>
<div id="widget-2" class="theme-green"></div>

<style>
  .theme-blue {
    --vc-primary-color: #007bff;
    --vc-secondary-color: #0056b3;
  }

  .theme-green {
    --vc-primary-color: #28a745;
    --vc-secondary-color: #1e7e34;
  }
</style>

Font Customization

Custom Font

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

<script>
  VanityCert.init({
    target: '#ssl-widget',
    apiEndpoint: '/api/vanitycert-proxy',
    serverId: 123,
    userId: 'user-123',
    theme: {
      fontFamily: '"Inter", -apple-system, sans-serif'
    }
  });
</script>

Monospace for Technical Elements

.vc-dns-value,
.vc-domain-display {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
}

Accessibility

Ensure sufficient color contrast when customizing:

// ✅ Good contrast
theme: {
  primaryColor: '#10243f',  // Dark blue
  textLight: '#ffffff'       // White text
}

// ❌ Poor contrast
theme: {
  primaryColor: '#ffeb3b',  // Yellow
  textLight: '#ffffff'       // White text (hard to read)
}

Use online tools to check contrast ratios:

WebAIM Contrast Checker
Minimum ratio: 4.5:1 for normal text

Browser DevTools

Use browser DevTools to experiment with theming:

Open DevTools (F12)
Select an element
Edit CSS variables in the Styles panel
Copy final values to your configuration

Complete Theming Example

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vanitycert/widget@1/vanitycert.min.css">

  <style>
    /* Custom theme */
    :root {
      --vc-primary-color: #1a1a2e;
      --vc-secondary-color: #16213e;
      --vc-tertiary-color: #0f3460;
      --vc-success-color: #53a653;
      --vc-error-color: #e94560;
      --vc-font-family: 'Inter', -apple-system, sans-serif;
      --vc-border-radius: 12px;
      --vc-shadow-md: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    /* Custom component styles */
    .vc-button-primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
    }

    .vc-button-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(102, 126, 234, 0.4);
    }

    .vc-dns-box {
      background: linear-gradient(to right, #f6f8fb, #eef2f7);
      border-left: 4px solid #667eea;
    }
  </style>
</head>
<body>
  <div id="ssl-widget"></div>

  <script src="https://cdn.jsdelivr.net/npm/@vanitycert/widget@1/vanitycert.min.js"></script>
  <script>
    VanityCert.init({
      target: '#ssl-widget',
      apiEndpoint: '/api/vanitycert-proxy',
      serverId: 123,
      userId: 'user-123'
    });
  </script>
</body>
</html>

Next Steps

Configuration - Configure widget options and callbacks
Troubleshooting - Common styling issues
Examples - See complete theming examples

Quick Theming​

Via JavaScript​

Via CSS​

Theme Options​

JavaScript Theme Object​

CSS Custom Properties​

Colors​

Typography​

Spacing & Layout​

Theming Examples​

Dark Mode​

Brand Examples​

Stripe-inspired​

GitHub-inspired​

Shopify-inspired​

Advanced Customization​

Override Specific Components​

Responsive Customization​

Animation Customization​

Scoped Theming​

Font Customization​

Custom Font​

Monospace for Technical Elements​

Accessibility​

Browser DevTools​

Complete Theming Example​

Next Steps​