Component
Presets
Base Colors
Main background color
Primary text color
Brand/highlight color
CSS Variables
Lock to preserve value | Reset to calculated
Live Preview
Different multiselect configurations showing various theme variables
Preview background matches your selected background color
Export
Cascading Mode Only --ms-* vars
:root {
--ms-accent-color: #3b82f6;
--ms-accent-color-hover: #0b63f3;
--ms-accent-color-active: #0a59da;
--ms-text-primary: #111827;
--ms-text-secondary: #70747d;
--ms-text-on-accent: #000000;
--ms-primary-bg: #ffffff;
--ms-primary-bg-hover: #f2f2f2;
--ms-border-color: #e0e0e0;
--ms-input-background: #ffffff;
--ms-input-color: #111827;
--ms-input-border-style: 1px solid #e0e0e0;
--ms-input-border-color-hover: #c7c7c7;
--ms-input-border-color-focus: #3b82f6;
--ms-input-placeholder-color: #70747d;
--ms-input-background-disabled: rgba(17, 24, 39, 0.03);
--ms-toggle-icon-color: #70747d;
--ms-toggle-icon-color-open: #70747d;
--ms-counter-badge-background: #3b82f6;
--ms-counter-badge-color: #000000;
--ms-counter-badge-background-hover: #0b63f3;
--ms-dropdown-background: #ffffff;
--ms-dropdown-text-color: #111827;
--ms-dropdown-border: 1px solid #e0e0e0;
--ms-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
--ms-option-background: transparent;
--ms-option-text-color: #111827;
--ms-option-background-hover: #f2f2f2;
--ms-option-color-hover: #111827;
--ms-option-background-focused: #f2f2f2;
--ms-option-color-focused: #111827;
--ms-option-outline-focused: 2px solid #3b82f6;
--ms-option-background-matched: rgba(59, 130, 246, 0.08);
--ms-option-color-matched: #111827;
--ms-option-border-matched: 3px solid rgba(59, 130, 246, 0.3);
--ms-option-background-selected: #3b82f6;
--ms-option-color-selected: #000000;
--ms-option-bg-focused-hover: #ebebeb;
--ms-option-color-focused-hover: #111827;
--ms-option-bg-matched-hover: rgba(59, 130, 246, 0.1);
--ms-option-color-matched-hover: #111827;
--ms-option-bg-selected-hover: #0b63f3;
--ms-option-color-selected-hover: #000000;
--ms-option-bg-selected-focused: #2372f5;
--ms-option-color-selected-focused: #000000;
--ms-option-bg-selected-matched: #1469f4;
--ms-option-color-selected-matched: #000000;
--ms-option-bg-disabled-selected: rgba(59, 130, 246, 0.4);
--ms-option-color-disabled-selected: #000000;
--ms-option-title-color: #111827;
--ms-option-subtitle-color: #70747d;
--ms-option-subtitle-color-hover: #70747d;
--ms-option-subtitle-color-selected: #4a4a4a;
--ms-option-subtitle-color-selected-hover: #4a4a4a;
--ms-option-mark-background: rgba(59, 130, 246, 0.25);
--ms-option-mark-color: #111827;
--ms-checkbox-bg: #ffffff;
--ms-checkbox-border: 1px solid #e0e0e0;
--ms-checkbox-hover-border-color: #3b82f6;
--ms-checkbox-checked-bg: #3b82f6;
--ms-checkbox-checked-border: 1px solid #3b82f6;
--ms-checkbox-checkmark-color: #000000;
--ms-checkbox-checked-bg-hover: #0b63f3;
--ms-checkbox-checked-border-color-hover: #0b63f3;
--ms-checkbox-disabled-bg: rgba(17, 24, 39, 0.03);
--ms-checkbox-disabled-border: 1px solid #ebebeb;
--ms-group-border-top: 1px solid #ebebeb;
--ms-group-label-color: #70747d;
--ms-actions-background: #ffffff;
--ms-action-button-background: transparent;
--ms-action-button-color: #111827;
--ms-action-btn-border: 1px solid #e0e0e0;
--ms-action-button-background-hover: #f2f2f2;
--ms-action-button-border-color-hover: #3b82f6;
--ms-more-badge-bg: rgba(59, 130, 246, 0.1);
--ms-more-badge-hover-bg: rgba(59, 130, 246, 0.15);
--ms-more-badge-active-bg: rgba(59, 130, 246, 0.2);
--ms-badge-text-background: rgba(59, 130, 246, 0.15);
--ms-badge-text-color: #0b63f3;
--ms-badge-text-background-hover: rgba(59, 130, 246, 0.2);
--ms-badge-text-color-hover: #0a59da;
--ms-badge-text-border: 1px solid rgba(59, 130, 246, 0.3);
--ms-badge-remove-background: #3b82f6;
--ms-badge-remove-color: #000000;
--ms-badge-remove-border: 1px solid #3b82f6;
--ms-badge-remove-background-hover: #0b63f3;
--ms-badge-counter-border: 1px solid #e0e0e0;
--ms-badge-counter-text-background: #ebebeb;
--ms-badge-counter-text-color: #70747d;
--ms-badge-counter-remove-background: #70747d;
--ms-badge-counter-remove-color: #ffffff;
--ms-badge-counter-remove-background-hover: #111827;
--ms-counter-wrapper-background: transparent;
--ms-counter-wrapper-border: 1px solid #e0e0e0;
--ms-counter-wrapper-background-hover: #f2f2f2;
--ms-counter-wrapper-border-color-hover: #3b82f6;
--ms-count-text-color: #111827;
--ms-count-text-bg: transparent;
--ms-count-clear-background: transparent;
--ms-count-clear-color: #70747d;
--ms-count-clear-background-hover: rgba(59, 130, 246, 0.2);
--ms-count-clear-color-hover: #3b82f6;
--ms-tooltip-background: #333333;
--ms-tooltip-text-color: #ffffff;
--ms-selected-popover-background: #ffffff;
--ms-selected-popover-border: 1px solid #e0e0e0;
--ms-selected-popover-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
--ms-selected-popover-header-background: rgba(59, 130, 246, 0.15);
--ms-selected-popover-header-color: #111827;
--ms-selected-popover-header-border-bottom: 1px solid #e0e0e0;
--ms-selected-popover-close-background: transparent;
--ms-selected-popover-close-color: #70747d;
--ms-selected-popover-close-background-hover: #f2f2f2;
--ms-selected-popover-close-color-hover: #3b82f6;
--ms-scrollbar-track-bg: transparent;
--ms-scrollbar-thumb-bg: #e0e0e0;
--ms-scrollbar-thumb-bg-hover: #70747d;
--ms-empty-color: #70747d;
--ms-loading-color: #70747d;
--ms-hint-background: #ffffff;
--ms-hint-border: 1px solid #e0e0e0;
--ms-hint-color: #70747d;
}