Dark Mode

Dark mode for Viafoura widgets can be achieved with CSS overrides combined with an overall dark mode CSS theme for your site. Switching between CSS themes must be handled on your site.

For specific Viafoura widget dark mode CSS overrides see below:

/* Viafoura Dark Mode Styles */
.viafoura,
.vf3-comments {
  --background-color: #2a262b !important;
  --light-text-on-background-color: #fff !important;
  --dark-text-on-background-color: #fff !important;
  --light-text-on-default-color: #fff !important;
  --dark-text-on-default-color: #fff !important;
  --dark-text-on-default-color: #fff !important;
  --secondary-text-color: #fff !important;
  --text-on-accent-color: #fff !important;
  --default-color: #434343;
  --primary-color-20: #434343;
  --primary-color-10: #434343;
  --accent-color-light: #2792fe !important;
  --accent-color: #1d8eff !important;
  --accent-color-dark: #007fff !important;
}
.viafoura h2,
.viafoura h3 {
  color: #fff;
}
.viafoura .vf-community-content .vf-tabbed-subnav .vf-tabbed-nav {
  background-color: #2a262b;
}
.viafoura .vf-conversation-starter_content {
  background-color: #43392d !important;
}
.viafoura .vf-conversation-starter_text,
.vf-secondary-text-colour,
.vf-primary-colour {
  color: #fff !important;
}
.viafoura .vf-livechat__header {
  border-color: #525252;
}
.viafoura .vf-tray {
  color: #fff !important;
}
.viafoura .vf-icon-button .vf-icon-svg {
  fill: #fff !important;
}
.viafoura svg {
  fill: #fff !important;
}
.viafoura .vf-comments-count {
  color: #fff !important;
}
.vf-topic-follow-button {
  background-color: #1d8eff !important;
  border-color: #007fff !important;
  color: #fff !important;
}
.vf-tabbed-nav__tabs .vf-active .vf-nav-label,
.viafoura .vf-nav-button:hover .vf-nav-label,
.viafoura .vf-label {
  color: #fff !important;
}