Default Theme
The default theme provides a clean, minimal design that works well in any project without framework dependencies.
Preview
The default theme features:
- Neutral gray borders and backgrounds
- Subtle hover and focus states
- Clean typography using the system font stack
- Responsive sizing that adapts to container width
Usage
CDN
html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dot-select@latest/dist/css/dot-select.min.css">npm
js
import 'dot-select/dist/css/dot-select.min.css';SCSS
scss
@import 'dot-select/src/scss/themes/default';Variables
The default theme uses these SCSS variable values:
| Variable | Value | Description |
|---|---|---|
$ds-primary-color | #3b82f6 | Primary accent color (focus ring, highlights) |
$ds-font-family | system-ui, -apple-system, sans-serif | Font stack |
$ds-font-size | 0.875rem | Base font size |
$ds-line-height | 1.5 | Base line height |
$ds-border-color | #d1d5db | Border color for the control |
$ds-border-radius | 6px | Border radius |
$ds-border-width | 1px | Border width |
$ds-bg-color | #ffffff | Background color |
$ds-text-color | #1f2937 | Text color |
$ds-placeholder-color | #9ca3af | Placeholder text color |
$ds-disabled-opacity | 0.5 | Opacity for disabled state |
$ds-focus-ring-color | rgba(59, 130, 246, 0.25) | Focus ring color |
$ds-focus-ring-width | 3px | Focus ring width |
$ds-dropdown-shadow | 0 4px 6px -1px rgba(0,0,0,0.1) | Dropdown box shadow |
$ds-item-bg | #eff6ff | Selected item background |
$ds-item-color | #1e40af | Selected item text color |
$ds-item-border | #bfdbfe | Selected item border color |
$ds-option-hover-bg | #f3f4f6 | Option hover background |
$ds-option-selected-bg | #eff6ff | Selected option background |
Customizing
Override any variable before importing the theme:
scss
$ds-primary-color: #10b981;
$ds-border-radius: 12px;
$ds-item-bg: #d1fae5;
$ds-item-color: #065f46;
$ds-item-border: #6ee7b7;
@import 'dot-select/src/scss/themes/default';