Design Customization

The Commentix widget is built as a Web Component that embeds directly into your site (without iframe). You can easily customize its appearance using predefined CSS variables.

Base Size

All sizes (e.g. font-size, width or height of elements) are calculated from a base size. Changing this base size allows you to scale the widget to make it fit into your website's layout.

Example:

commentix-widget {
    --commentix-base-size: 14px; // Makes the widget smaller/narrower (Default: 16px)
}

Font

The widget does not load any external fonts and uses the system UI font by default. As the widget is embedded directly into your website, it can use any existing web font on your site.

Example:

commentix-widget {
    --commentix-font-family: Roboto;
}

Branding

Your website most likely has a brand or primary color for buttons and links. The following example shows how to make the widget use the same color.

Example:

commentix-widget {
    --commentix-color-brand: #396bf1;
}

Dark Mode

The widget has a light color palette by default. To switch it to a dark color palette, you just have to modify the variables shown in the example below.

Example:

commentix-widget {
    --commentix-color-background-primary: #1f1f22;
    --commentix-color-background-secondary: #202023;
    --commentix-color-background-tertiary: #232327;
    --commentix-color-border: #323236;
    --commentix-color-text-primary: #ffffff;
    --commentix-color-text-secondary: #ffffff;
    --commentix-color-text-tertiary: #dddddd;
}

All CSS Variables

There are many ways to fine-tune the appearance and ensure the widget fits seamlessly into your website. Below is the complete list of available CSS variables and their default values.

commentix-widget {
    --commentix-base-size: 16px;

    --commentix-font-family: system-ui, sans-serif;
    --commentix-font-size: var(--commentix-base-size);
    --commentix-font-size-sm: calc(var(--commentix-base-size) * 0.875);
    --commentix-font-size-lg: calc(var(--commentix-base-size) * 1.25);
    --commentix-line-height: 1.5;

    --commentix-border-radius: calc(var(--commentix-base-size) * 0.25);
    --commentix-border-width: 1px;

    --commentix-color-background-primary: #ffffff;
    --commentix-color-background-secondary: #ffffff;
    --commentix-color-background-tertiary: #ffffff;
    --commentix-color-border: #dddddd;
    --commentix-color-border-focus: var(--commentix-color-brand-hover);
    --commentix-color-brand: #396bf1;
    --commentix-color-brand-hover: color-mix(in srgb, var(--commentix-color-brand), black 10%);
    --commentix-color-danger: #ff3737;
    --commentix-color-success: #2eb32e;
    --commentix-color-text-inverse: #ffffff;
    --commentix-color-text-primary: #111111;
    --commentix-color-text-secondary: #505050;
    --commentix-color-text-tertiary: #757575;

    --commentix-focus-outline: 2px solid var(--commentix-color-brand-hover);
    --commentix-focus-outline-offset: -2px;

    --commentix-icon-font-family: var(--commentix-font-family);

    --commentix-spacing-xxs: calc(var(--commentix-base-size) * 0.25);
    --commentix-spacing-xs: calc(var(--commentix-base-size) * 0.5);
    --commentix-spacing-sm: calc(var(--commentix-base-size) * 0.75);
    --commentix-spacing-md: var(--commentix-base-size);
    --commentix-spacing-lg: calc(var(--commentix-base-size) * 1.25);
    --commentix-spacing-xl: calc(var(--commentix-base-size) * 1.5);
    --commentix-spacing-xxl: calc(var(--commentix-base-size) * 2);

    --commentix-badge-background: var(--commentix-color-brand);
    --commentix-badge-border: none;
    --commentix-badge-border-radius: var(--commentix-border-radius);
    --commentix-badge-color: var(--commentix-color-text-inverse);
    --commentix-badge-font-size: var(--commentix-font-size-sm);
    --commentix-badge-padding: var(--commentix-spacing-xxs) var(--commentix-spacing-xs);

    --commentix-button-font-size: var(--commentix-font-size);
    --commentix-button-font-size-sm: var(--commentix-font-size-sm);
    --commentix-button-padding: var(--commentix-spacing-xs) var(--commentix-spacing-md);
    --commentix-button-padding-sm: var(--commentix-spacing-xxs) var(--commentix-spacing-xs);
    --commentix-button-primary-background: var(--commentix-color-brand);
    --commentix-button-primary-background-hover: var(--commentix-color-brand-hover);
    --commentix-button-primary-border: var(--commentix-border-width) solid var(--commentix-color-brand);
    --commentix-button-primary-border-hover: var(--commentix-border-width) solid var(--commentix-color-brand-hover);
    --commentix-button-primary-border-radius: var(--commentix-border-radius);
    --commentix-button-primary-color: var(--commentix-color-text-inverse);
    --commentix-button-primary-color-hover: var(--commentix-color-text-inverse);
    --commentix-button-primary-focus-outline-offset: 2px;
    --commentix-button-secondary-background: var(--commentix-color-background-tertiary);
    --commentix-button-secondary-background-hover: var(--commentix-color-background-tertiary);
    --commentix-button-secondary-border: var(--commentix-border-width) solid var(--commentix-color-border);
    --commentix-button-secondary-border-hover: var(--commentix-border-width) solid var(--commentix-color-brand-hover);
    --commentix-button-secondary-border-radius: var(--commentix-border-radius);
    --commentix-button-secondary-color: var(--commentix-color-text-secondary);
    --commentix-button-secondary-color-hover: var(--commentix-color-brand-hover);
    --commentix-button-secondary-focus-outline-offset: var(--commentix-focus-outline-offset);
    --commentix-button-tertiary-background: transparent;
    --commentix-button-tertiary-background-hover: transparent;
    --commentix-button-tertiary-border: var(--commentix-border-width) solid transparent;
    --commentix-button-tertiary-border-hover: var(--commentix-border-width) solid transparent;
    --commentix-button-tertiary-border-radius: var(--commentix-border-radius);
    --commentix-button-tertiary-color: var(--commentix-color-text-tertiary);
    --commentix-button-tertiary-color-hover: var(--commentix-color-brand-hover);
    --commentix-button-tertiary-focus-outline-offset: 0;

    --commentix-checkbox-background: var(--commentix-input-background);
    --commentix-checkbox-background-checked: var(--commentix-color-brand);
    --commentix-checkbox-border: var(--commentix-input-border);
    --commentix-checkbox-border-radius: var(--commentix-input-border-radius);
    --commentix-checkbox-box-shadow: var(--commentix-input-box-shadow);
    --commentix-checkbox-color: var(--commentix-color-text-primary);
    --commentix-checkbox-font-size: var(--commentix-font-size);
    --commentix-checkbox-font-weight: normal;

    --commentix-comment-date-color: var(--commentix-color-text-tertiary);
    --commentix-comment-date-font-size: var(--commentix-font-size-sm);
    --commentix-comment-message-color: var(--commentix-color-text-primary);
    --commentix-comment-message-font-size: var(--commentix-font-size);
    --commentix-comment-user-color: var(--commentix-color-text-primary);
    --commentix-comment-user-font-size: var(--commentix-font-size);
    --commentix-comment-user-font-weight: bold;

    --commentix-comment-count-background-color: var(--commentix-color-brand);
    --commentix-comment-count-border-radius: var(--commentix-border-radius);
    --commentix-comment-count-color: var(--commentix-color-text-inverse);
    --commentix-comment-count-font-size: var(--commentix-font-size-lg);
    --commentix-comment-count-font-weight: bold;
    --commentix-comment-count-min-width: calc(var(--commentix-base-size) * 3);
    --commentix-comment-count-padding: var(--commentix-spacing-xs) var(--commentix-spacing-md);
    --commentix-comment-count-spinner-size: var(--commentix-base-size);
    --commentix-comment-count-triangle-height: calc(var(--commentix-base-size) * 0.4);

    --commentix-divider-border: var(--commentix-border-width) solid var(--commentix-color-border);

    --commentix-dropdown-background: var(--commentix-color-background-primary);
    --commentix-dropdown-border: var(--commentix-border-width) solid var(--commentix-color-border);
    --commentix-dropdown-border-radius: var(--commentix-border-radius);
    --commentix-dropdown-box-shadow: 0 0 4px rgba(0, 0, 0, 0.075);
    --commentix-dropdown-padding: var(--commentix-spacing-xxs) 0;

    --commentix-error-color: var(--commentix-color-danger);
    --commentix-error-font-size: var(--commentix-font-size);

    --commentix-hint-color: var(--commentix-color-text-tertiary);
    --commentix-hint-font-size: var(--commentix-font-size-sm);

    --commentix-input-background: var(--commentix-color-background-secondary);
    --commentix-input-border: var(--commentix-border-width) solid var(--commentix-color-border);
    --commentix-input-border-radius: var(--commentix-border-radius);
    --commentix-input-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
    --commentix-input-color: var(--commentix-color-text-primary);
    --commentix-input-font-size: var(--commentix-font-size);
    --commentix-input-font-size-sm: var(--commentix-font-size-sm);
    --commentix-input-padding: var(--commentix-spacing-sm);
    --commentix-input-padding-sm: var(--commentix-spacing-xs);
    --commentix-input-placeholder-color: var(--commentix-color-text-tertiary);

    --commentix-label-color: var(--commentix-color-text-tertiary);
    --commentix-label-color-error: var(--commentix-color-danger);
    --commentix-label-font-size: var(--commentix-font-size);
    --commentix-label-font-weight: bold;

    --commentix-line-clamp-max-lines: 5;

    --commentix-notice-border-radius: var(--commentix-border-radius);
    --commentix-notice-border-width: 1px;
    --commentix-notice-font-size: var(--commentix-font-size);
    --commentix-notice-padding: var(--commentix-spacing-sm) var(--commentix-spacing-md);
    --commentix-notice-danger-background: color-mix(in srgb, transparent, var(--commentix-color-danger) 15%);
    --commentix-notice-danger-border-color: color-mix(in srgb, transparent, var(--commentix-color-danger) 50%);
    --commentix-notice-danger-color: var(--commentix-color-text-primary);
    --commentix-notice-neutral-background: var(--commentix-color-background-primary);
    --commentix-notice-neutral-border-color: var(--commentix-color-border);
    --commentix-notice-success-background: color-mix(in srgb, transparent, var(--commentix-color-success) 15%);
    --commentix-notice-success-border-color: color-mix(in srgb, transparent, var(--commentix-color-success) 50%);
    --commentix-notice-success-color: var(--commentix-color-text-primary);

    --commentix-textarea-background: var(--commentix-input-background);
    --commentix-textarea-border: var(--commentix-input-border);
    --commentix-textarea-border-radius: var(--commentix-input-border-radius);
    --commentix-textarea-box-shadow: var(--commentix-input-box-shadow);
    --commentix-textarea-color: var(--commentix-input-color);
    --commentix-textarea-font-size: var(--commentix-input-font-size);
    --commentix-textarea-min-height: calc(var(--commentix-base-size) * var(--commentix-line-height) * 3);
    --commentix-textarea-padding: var(--commentix-input-padding);
    --commentix-textarea-placeholder-color: var(--commentix-input-placeholder-color);

    --commentix-thread-border: var(--commentix-border-width) solid var(--commentix-color-border);
    --commentix-thread-indent: var(--commentix-spacing-sm);

    --commentix-title-color: var(--commentix-color-text-primary);
    --commentix-title-font-size: var(--commentix-font-size-lg);
    --commentix-title-font-weight: bold;
}