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-dark-icon-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-light-icon-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;
}

: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-max-width: 600px;
    --feedback-modal-content-sidebar-max-width: 300px;
    --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 editor properties

:root {
    --feedback-canvas-editor-bg-color: var(--feedback-white-color);
    --feedback-canvas-editor-border-color: var(--feedback-light-color);
    --feedback-canvas-editor-header-bg-color: var(--feedback-secondary-color);
    --feedback-canvas-editor-tool-bg-color: var(--feedback-white-color);
    --feedback-canvas-editor-tool-bg-hover: var(--feedback-secondary-color);
    --feedback-canvas-editor-tool-bg-active: var(--feedback-primary-color);
    --feedback-canvas-editor-tool-text-color: var(--feedback-text-color);
    --feedback-canvas-editor-tool-text-active: var(--feedback-white-color);
    --feedback-canvas-editor-action-primary-bg: var(--feedback-primary-color);
    --feedback-canvas-editor-action-primary-text: var(--feedback-white-color);
    --feedback-canvas-editor-action-secondary-bg: var(--feedback-white-color);
    --feedback-canvas-editor-action-secondary-text: var(--feedback-text-color);
    --feedback-canvas-editor-action-secondary-border: var(--feedback-light-color);
    --feedback-canvas-editor-divider-color: var(--feedback-light-color);
    --feedback-canvas-editor-content-bg: var(--feedback-secondary-color);
    --feedback-canvas-editor-resize-handle-color: var(--feedback-primary-color);
    --feedback-canvas-editor-slider-track: var(--feedback-light-color);
}

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);
    --feedback-canvas-editor-bg-color: var(--feedback-dark-color);
    --feedback-canvas-editor-border-color: var(--feedback-light-color);
    --feedback-canvas-editor-header-bg-color: var(--feedback-light-color);
    --feedback-canvas-editor-tool-bg-color: var(--feedback-light-color);
    --feedback-canvas-editor-tool-bg-hover: #4a4a4a;
    --feedback-canvas-editor-tool-text-color: var(--feedback-white-color);
    --feedback-canvas-editor-action-secondary-bg: var(--feedback-light-color);
    --feedback-canvas-editor-action-secondary-text: var(--feedback-white-color);
    --feedback-canvas-editor-action-secondary-border: var(--feedback-light-color);
    --feedback-canvas-editor-content-bg: var(--feedback-light-color);
    --feedback-canvas-editor-divider-color: #4a4a4a;
    --feedback-canvas-editor-slider-track: #4a4a4a;
}

Styles

Usage​

Properties​

Global properties​

Feedback button properties​

Feedback modal properties​

Screenshot editor properties​

Dark mode properties​

Example​