Custom Theme

Build a fully custom DotSelect theme by overriding SCSS variables and adding your own styles.

Quick Start

Create a custom theme by overriding variables before importing DotSelect's base styles:

// my-theme.scss

// 1. Override variables
$ds-primary-color: #8b5cf6;
$ds-border-radius: 12px;
$ds-font-family: 'Inter', sans-serif;
$ds-font-size: 0.9rem;
$ds-border-color: #e2e8f0;
$ds-item-bg: #f5f3ff;
$ds-item-color: #6d28d9;
$ds-item-border: #c4b5fd;

// 2. Import the base theme
@import 'dot-select/src/scss/themes/default';

// 3. Add your own overrides (optional)
.dot-select {
  .ds-control {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
}

Compile with your SCSS toolchain and include the resulting CSS.

Full Variable Reference

Layout & Sizing

Variable	Default	Description
$ds-font-family	system-ui, -apple-system, sans-serif	Font stack for all text
$ds-font-size	0.875rem	Base font size
$ds-font-size-sm	0.8rem	Font size for sm variant
$ds-font-size-lg	1rem	Font size for lg variant
$ds-line-height	1.5	Base line height
$ds-min-height	38px	Minimum height of the control
$ds-min-height-sm	32px	Minimum height for sm variant
$ds-min-height-lg	46px	Minimum height for lg variant
$ds-padding-x	12px	Horizontal padding inside the control
$ds-padding-y	6px	Vertical padding inside the control

Colors

Variable	Default	Description
$ds-primary-color	#3b82f6	Primary accent color
$ds-bg-color	#ffffff	Control background
$ds-text-color	#1f2937	Primary text color
$ds-placeholder-color	#9ca3af	Placeholder text color
$ds-border-color	#d1d5db	Border color
$ds-hover-border-color	#9ca3af	Border color on hover
$ds-disabled-opacity	0.5	Opacity for disabled state
$ds-disabled-bg	#f9fafb	Background for disabled state

Focus

Variable	Default	Description
$ds-focus-border-color	$ds-primary-color	Border color when focused
$ds-focus-ring-color	rgba($ds-primary-color, 0.25)	Focus ring color
$ds-focus-ring-width	3px	Focus ring width

Borders

Variable	Default	Description
$ds-border-width	1px	Border width
$ds-border-radius	6px	Border radius
$ds-border-radius-sm	4px	Border radius for sm variant
$ds-border-radius-lg	8px	Border radius for lg variant

Dropdown

Variable	Default	Description
$ds-dropdown-bg	#ffffff	Dropdown background
$ds-dropdown-border-color	$ds-border-color	Dropdown border color
$ds-dropdown-border-width	1px	Dropdown border width
$ds-dropdown-border-radius	$ds-border-radius	Dropdown border radius
$ds-dropdown-shadow	0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)	Dropdown shadow
$ds-dropdown-max-height	300px	Maximum dropdown height
$ds-dropdown-z-index	1050	Dropdown z-index

Options

Variable	Default	Description
$ds-option-padding-x	12px	Option horizontal padding
$ds-option-padding-y	8px	Option vertical padding
$ds-option-hover-bg	#f3f4f6	Option hover background
$ds-option-hover-color	$ds-text-color	Option hover text color
$ds-option-selected-bg	#eff6ff	Selected option background
$ds-option-selected-color	$ds-primary-color	Selected option text color
$ds-option-disabled-color	#d1d5db	Disabled option text color
$ds-optgroup-label-color	#6b7280	Optgroup heading color
$ds-optgroup-label-size	0.75rem	Optgroup heading font size

Selected Items (Tags/Badges)

Variable	Default	Description
$ds-item-bg	#eff6ff	Item badge background
$ds-item-color	#1e40af	Item badge text color
$ds-item-border	#bfdbfe	Item badge border color
$ds-item-border-width	1px	Item badge border width
$ds-item-border-radius	4px	Item badge border radius
$ds-item-padding-x	8px	Item horizontal padding
$ds-item-padding-y	2px	Item vertical padding
$ds-item-font-size	0.8rem	Item font size
$ds-item-gap	4px	Gap between items

Search Input

Variable	Default	Description
$ds-search-padding	8px 12px	Search input padding
$ds-search-border-color	$ds-border-color	Search input border color
$ds-search-bg	#ffffff	Search input background

Icons

Variable	Default	Description
$ds-arrow-color	#6b7280	Dropdown arrow color
$ds-arrow-size	20px	Arrow icon size
$ds-clear-color	#9ca3af	Clear button color
$ds-clear-hover-color	#ef4444	Clear button hover color
$ds-remove-color	#9ca3af	Remove button color
$ds-remove-hover-color	#ef4444	Remove button hover color

Transitions

Variable	Default	Description
$ds-transition-speed	150ms	Transition duration
$ds-transition-fn	ease-in-out	Transition timing function

Example: Brand Theme

A complete example creating a branded theme:

// brand-theme.scss
$ds-primary-color: #f97316;        // Orange
$ds-font-family: 'Poppins', sans-serif;
$ds-border-radius: 10px;
$ds-border-color: #fed7aa;
$ds-hover-border-color: #fb923c;
$ds-focus-ring-color: rgba(249, 115, 22, 0.2);
$ds-item-bg: #fff7ed;
$ds-item-color: #c2410c;
$ds-item-border: #fdba74;
$ds-item-border-radius: 10px;
$ds-dropdown-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.15);
$ds-option-selected-bg: #fff7ed;
$ds-option-selected-color: #ea580c;

@import 'dot-select/src/scss/themes/default';

// Extra custom styles
.dot-select .ds-control {
  font-weight: 500;
}

.dot-select .ds-dropdown-header {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
}

CSS Custom Properties

For runtime theming without SCSS, DotSelect exposes CSS custom properties:

:root {
  --ds-primary-color: #3b82f6;
  --ds-bg-color: #ffffff;
  --ds-text-color: #1f2937;
  --ds-border-color: #d1d5db;
  --ds-border-radius: 6px;
  --ds-font-size: 0.875rem;
  --ds-dropdown-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Dark mode override */
.dark {
  --ds-primary-color: #60a5fa;
  --ds-bg-color: #1f2937;
  --ds-text-color: #f9fafb;
  --ds-border-color: #4b5563;
  --ds-dropdown-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

WARNING

CSS custom properties provide runtime flexibility but are limited compared to SCSS variables. Some computed values (like rgba() with opacity based on the primary color) require SCSS compilation.