Styles
The PushFeedback button is highly customizable, allowing you to customize its appearance to suit your application's needs. This reference document lists all the available CSS custom properties that can be overridden to match your website's design.
Usage
To customize these properties, define them in your website's CSS using the :root selector for global changes or a specific selector to target particular areas:
:root {
--feedback-primary-color: #00D68F;
...
}
Properties
The tables below lists all the available properties you can override:
Global properties
:root {
/* Colors */
--feedback-primary-color: #0070F4;
--feedback-secondary-color: #f1f3f4;
--feedback-light-color: #ccc;
--feedback-dark-color: #191919;
--feedback-text-color: #5f6368;
--feedback-white-color: #fff;
--feedback-highlight-color: #ffb422;
/* Fonts */
--feedback-font-family: "Inter", "Tahoma", "sans-serif";
--feedback-heading-font-size: 16px;
--feedback-text-font-size: 14px;
}
Feedback button properties
:root {
/* Feedback button*/
--feedback-button-border-radius: 20px;
--feedback-button-dark-bg-color: var(--feedback-primary-color);
--feedback-button-dark-text-color: var(--feedback-white-color);
--feedback-button-light-bg-color: var(--feedback-white-color);
--feedback-button-light-text-color: var(--feedback-primary-color);
--feedback-button-text-font-size: var(--feedback-text-font-size);
--feedback-button-text-font-weight: 600;
--feedback-button-z-index: 300;
}
Feedback modal properties
:root {
--feedback-modal-button-bg-color: var(--feedback-white-color);
--feedback-modal-button-bg-color-active: var(--feedback-white-color);
--feedback-modal-button-border-color: var(--feedback-light-color);
--feedback-modal-button-border-color-active: var(--feedback-primary-color);
--feedback-modal-button-border-radius: 4px;
--feedback-modal-button-font-size: var(--feedback-text-font-size);
--feedback-modal-button-icon-color: var(--feedback-dark-color);
--feedback-modal-button-icon-color-active: var(--feedback-primary-color);
--feedback-modal-button-submit-bg-color: var(--feedback-primary-color);
--feedback-modal-button-submit-bg-color-hover: var(--feedback-primary-color);
--feedback-modal-button-submit-border-color-hover: var(--feedback-primary-color);
--feedback-modal-button-submit-text-color: var(--feedback-white-color);
--feedback-modal-button-submit-text-color-hover: var(--feedback-white-color);
--feedback-modal-button-text-color: var(--feedback-dark-color);
--feedback-modal-button-text-color-active: var(--feedback-primary-color);
--feedback-modal-close-bg-color: var(--feedback-white-color);
--feedback-modal-close-color: var(--feedback-dark-color);
--feedback-modal-content-bg-color: var(--feedback-white-color);
--feedback-modal-content-border-color: var(--feedback-light-color);
--feedback-modal-content-border-radius: 8px;
--feedback-modal-content-font-family: var(--feedback-font-family);
--feedback-modal-content-position-bottom: 10px;
--feedback-modal-content-position-left: 10px;
--feedback-modal-content-position-right: 10px;
--feedback-modal-content-position-top: 10px;
--feedback-modal-content-text-color: var(--feedback-text-color);
--feedback-modal-content-z-index: 300;
--feedback-modal-element-hover-border-color: var(--feedback-primary-color);
--feedback-modal-element-selected-border-color: var(--feedback-primary-color);
--feedback-modal-footer-link: var(--feedback-dark-color);
--feedback-modal-header-font-family: var(--feedback-font-family);
--feedback-modal-header-font-size: var(--feedback-heading-font-size);
--feedback-modal-header-font-weight: 500;
--feedback-modal-header-text-color: var(--feedback-dark-color);
--feedback-modal-input-bg-color: var(--feedback-secondary-color);
--feedback-modal-input-border-color: transparent;
--feedback-modal-input-border-color-focused: transparent;
--feedback-modal-input-border-radius: 4px;
--feedback-modal-input-font-size: var(--feedback-text-font-size);
--feedback-modal-input-text-color: var(--feedback-text-color);
--feedback-modal-message-font-size: var(--feedback-text-font-size);
--feedback-modal-modal-wrapper-z-index: 300;
--feedback-modal-rating-button-color: var(--feedback-text-color);
--feedback-modal-rating-button-selected-color: var(--feedback-primary-color);
--feedback-modal-rating-button-stars-selected-color: var(--feedback-highlight-color);
}
Screenshot mode properties
:root {
--feedback-modal-screenshot-bg-color: rgba(0, 0, 0, 0.4);
--feedback-modal-screenshot-close-color: var(--feedback-dark-color);
--feedback-modal-screenshot-header-bg-color: var(--feedback-white-color);
--feedback-modal-screenshot-header-text-color: var(--feedback-dark-color);
--feedback-modal-screenshot-header-z-index: 250;
--feedback-modal-screnshot-z-index: 100;
}
Dark mode properties
[data-theme='dark'] {
--feedback-text-color: #b0b8c4;
--feedback-light-color: #363636;
--feedback-modal-button-bg-color-active: transparent;
--feedback-modal-button-icon-color: var(--feedback-white-color);
--feedback-modal-button-text-color: var(--feedback-white-color);
--feedback-modal-close-bg-color: transparent;
--feedback-modal-close-color: var(--feedback-white-color);
--feedback-modal-content-bg-color: var(--feedback-dark-color);
--feedback-modal-content-text-color: var(--feedback-text-color);
--feedback-modal-footer-link: var(--feedback-white-color);
--feedback-modal-header-text-color: var(--feedback-white-color);
--feedback-modal-input-bg-color: var(--feedback-light-color);
--feedback-modal-input-text-color: var(--feedback-white-color);
--feedback-modal-rating-button-color: var(--feedback-white-color);
--feedback-modal-screenshot-close-color: var(--feedback-white-color);
--feedback-modal-screenshot-header-bg-color: var(--feedback-dark-color);
--feedback-modal-screenshot-header-text-color: var(--feedback-white-color);
}