@ingridsandev/chatbot-widget/src/styles/themes.css

A framework-agnostic chatbot widget using Web Components

/* Theme variations for chatbot widget */

/* Light theme (default) */
.chatbot-widget.theme-light {
  --chatbot-primary-color: #007bff;
  --chatbot-secondary-color: #6c757d;
  --chatbot-background-color: #ffffff;
  --chatbot-text-color: #333333;
  --chatbot-border-color: #dee2e6;
  --chatbot-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Dark theme */
.chatbot-widget.theme-dark {
  --chatbot-primary-color: #0d6efd;
  --chatbot-secondary-color: #6c757d;
  --chatbot-background-color: #1a1a1a;
  --chatbot-text-color: #ffffff;
  --chatbot-border-color: #333333;
  --chatbot-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.chatbot-widget.theme-dark .chatbot-agent-selector {
  background: #2d2d2d;
}

.chatbot-widget.theme-dark .chatbot-message-content {
  background: #2d2d2d;
  color: #ffffff;
}

.chatbot-widget.theme-dark .chatbot-message.user .chatbot-message-content {
  background: var(--chatbot-primary-color);
  color: white;
}

.chatbot-widget.theme-dark .chatbot-input {
  background: #343a40;
  color: var(--chatbot-text-color);
  border-color: var(--chatbot-border-color);
}

.chatbot-widget.theme-dark .chatbot-input::placeholder {
  color: var(--chatbot-secondary-color);
}

.chatbot-widget.theme-dark .chatbot-agent-select {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #333333;
}

.chatbot-widget.theme-dark .chatbot-messages::-webkit-scrollbar-track {
  background: #343a40;
}

/* Purple Theme */
.chatbot-widget.theme-purple {
  --chatbot-primary-color: #6f42c1;
  --chatbot-secondary-color: #6c757d;
  --chatbot-background-color: #ffffff;
  --chatbot-text-color: #333333;
  --chatbot-border-color: #dee2e6;
  --chatbot-shadow: 0 2px 10px rgba(111, 66, 193, 0.1);
}

/* Auto theme - respects system preference */
@media (prefers-color-scheme: dark) {
  .chatbot-widget.theme-auto {
    --chatbot-primary-color: #0d6efd;
    --chatbot-secondary-color: #6c757d;
    --chatbot-background-color: #1a1a1a;
    --chatbot-text-color: #ffffff;
    --chatbot-border-color: #333333;
    --chatbot-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  .chatbot-widget.theme-auto .chatbot-message-content {
    background: #2d2d2d;
    color: #ffffff;
  }

  .chatbot-widget.theme-auto .chatbot-agent-selector {
    background: #2d2d2d;
    border-color: #333333;
  }

  .chatbot-widget.theme-auto .chatbot-agent-select {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #333333;
  }

  .chatbot-widget.theme-auto .chatbot-messages::-webkit-scrollbar-track {
    background: #343a40;
  }
}

@media (prefers-color-scheme: light) {
  .chatbot-widget.theme-auto {
    --chatbot-primary-color: #007bff;
    --chatbot-secondary-color: #6c757d;
    --chatbot-background-color: #ffffff;
    --chatbot-text-color: #333333;
    --chatbot-border-color: #dee2e6;
    --chatbot-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
}