Themes

DotSelect ships with several pre-built themes and supports custom theming through SCSS variables.

Available Themes

Theme	Description	Best For
Default	Clean, minimal design with no framework dependency	Standalone projects
Bootstrap 5	Matches Bootstrap 5 form controls	Bootstrap-based projects
Tailwind	Utility-class inspired design with dark mode	Tailwind CSS projects
Classic	Traditional select appearance with subtle enhancements	Conservative UIs
Custom	Build your own theme with SCSS variables	Any project

How Themes Work

Each theme is a separate CSS file that overrides DotSelect's base styles. Themes are built from SCSS source files using a shared set of variables.

Using a Theme via CDN

Replace the default CSS file with the theme CSS:

<!-- Default theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dot-select@latest/dist/css/dot-select.min.css">

<!-- Bootstrap 5 theme (replaces default) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dot-select@latest/dist/css/themes/bootstrap5.min.css">

<!-- Tailwind theme (replaces default) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dot-select@latest/dist/css/themes/tailwind.min.css">

<!-- Classic theme (replaces default) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dot-select@latest/dist/css/themes/classic.min.css">

Using a Theme via npm

Import the theme CSS in your project:

// Default
import 'dot-select/dist/css/dot-select.min.css';

// Or a specific theme
import 'dot-select/dist/css/themes/bootstrap5.min.css';

Using a Theme via SCSS

For maximum control, import the SCSS source and override variables before the import:

// Override variables
$ds-primary-color: #8b5cf6;
$ds-border-radius: 8px;
$ds-font-size: 0.9rem;

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

Theme Structure

Each theme SCSS file follows this structure:

src/scss/
├── _variables.scss       # Default variable values
├── _base.scss            # Core styles (shared across themes)
├── _dropdown.scss        # Dropdown panel styles
├── _items.scss           # Selected item styles
├── _search.scss          # Search input styles
├── _plugins.scss         # Plugin-specific styles
└── themes/
    ├── default.scss
    ├── bootstrap5.scss
    ├── tailwind.scss
    └── classic.scss

TIP

You only need to include one theme CSS file. Each theme file includes all necessary base styles — do not load the default CSS alongside a theme.