Skip to main content

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);
}

Example

Ask AI