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-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-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