shoelace/themes/dark.css

.sl-theme-dark {
  /* Inputs */
  --sl-input-background-color: var(--sl-color-gray-900);
  --sl-input-background-color-hover: var(--sl-color-gray-900);
  --sl-input-background-color-focus: var(--sl-color-gray-900);
  --sl-input-background-color-disabled: var(--sl-color-gray-800);
  --sl-input-border-color: var(--sl-color-gray-700);
  --sl-input-border-color-hover: var(--sl-color-gray-600);
  --sl-input-border-color-focus: var(--sl-color-primary-500);
  --sl-input-border-color-disabled: var(--sl-color-gray-200);
  --sl-input-border-color-invalid: var(--sl-color-danger-500);
  --sl-input-font-family: var(--sl-font-sans);
  --sl-input-font-weight: var(--sl-font-weight-normal);
  --sl-input-font-size-small: var(--sl-font-size-small);
  --sl-input-font-size-medium: var(--sl-font-size-medium);
  --sl-input-font-size-large: var(--sl-font-size-large);
  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
  --sl-input-border-color: var(--sl-color-gray-700);
  --sl-input-border-color-hover: var(--sl-color-gray-600);
  --sl-input-border-color-focus: var(--sl-color-primary-400);
  --sl-input-border-color-disabled: var(--sl-color-gray-700);
  --sl-input-border-color-invalid: var(--sl-color-danger-500);
  --sl-input-color: var(--sl-color-gray-200);
  --sl-input-color-hover: var(--sl-color-gray-200);
  --sl-input-color-focus: var(--sl-color-gray-200);
  --sl-input-color-disabled: var(--sl-color-gray-100);
  --sl-input-color-invalid: var(--sl-color-danger-600);
  --sl-input-icon-color: var(--sl-color-gray-500);
  --sl-input-icon-color-hover: var(--sl-color-gray-300);
  --sl-input-icon-color-focus: var(--sl-color-gray-300);
  --sl-input-placeholder-color: var(--sl-color-gray-600);
  --sl-input-placeholder-color-disabled: var(--sl-color-gray-500);

  /* Overlays */
  --sl-overlay-background-color: #d1d5db22;

  /*  Panels */
  --sl-panel-background-color: var(--sl-color-gray-900);
  --sl-panel-border-color: var(--sl-color-gray-800);

  /* Tooltips */
  --sl-tooltip-background-color: var(--sl-color-gray-200);
  --sl-tooltip-color: var(--sl-color-black);
}

/* Alert */
.sl-theme-dark sl-alert::part(base) {
  background-color: var(--sl-color-gray-900);
  border-left-color: var(--sl-color-gray-800);
  border-right-color: var(--sl-color-gray-800);
  border-bottom-color: var(--sl-color-gray-800);
  color: var(--sl-color-gray-200);
}

/* Avatar */
.sl-theme-dark sl-avatar::part(base) {
  background-color: var(--sl-color-gray-700);
  color: var(--sl-color-gray-300);
}

/* Button */
.sl-theme-dark sl-button[type='default']::part(base) {
  background-color: var(--sl-color-gray-900);
  border-color: var(--sl-color-gray-700);
  color: var(--sl-color-gray-400);
}

.sl-theme-dark sl-button[type='default']:not([disabled])::part(base):hover {
  background-color: var(--sl-color-primary-950);
  border-color: var(--sl-color-primary-800);
  color: var(--sl-color-primary-400);
}

.sl-theme-dark sl-button[type='default']:not([disabled])::part(base):focus {
  background-color: var(--sl-color-primary-950);
  border-color: var(--sl-color-primary-800);
  color: var(--sl-color-primary-400);
  box-shadow: 0 0 0 var(--sl-focus-ring-width)
    hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
}

.sl-theme-dark sl-button[type='default']:not([disabled])::part(base):active {
  background-color: var(--sl-color-primary-900);
  border-color: var(--sl-color-primary-700);
  color: var(--sl-color-primary-300);
}

/* Card */
.sl-theme-dark sl-card::part(base) {
  background-color: var(--sl-color-gray-900);
  --border-color: var(--sl-color-gray-800);
}

/* Checkbox & radio */
.sl-theme-dark sl-checkbox::part(control),
.sl-theme-dark sl-radio::part(control) {
  color: var(--sl-color-gray-900);
}

/* Color picker */
.sl-theme-dark sl-color-picker::part(format-button) {
  background-color: var(--sl-color-gray-900);
  border-color: var(--sl-color-gray-700);
  color: var(--sl-color-gray-400);
}

.sl-theme-dark sl-color-picker::part(format-button):hover {
  background-color: var(--sl-color-primary-950);
  border-color: var(--sl-color-primary-800);
  color: var(--sl-color-primary-400);
}

.sl-theme-dark sl-color-picker::part(format-button):focus {
  background-color: var(--sl-color-primary-950);
  border-color: var(--sl-color-primary-800);
  color: var(--sl-color-primary-400);
  box-shadow: 0 0 0 var(--sl-focus-ring-width)
    hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
}

.sl-theme-dark sl-color-picker::part(format-button):active {
  background-color: var(--sl-color-primary-900);
  border-color: var(--sl-color-primary-700);
  color: var(--sl-color-primary-300);
}

.sl-theme-dark sl-color-picker::part(panel) {
  background-color: var(--sl-color-gray-900);
  border-color: var(--sl-color-gray-800);
}

.sl-theme-dark sl-color-picker::part(slider-handle) {
  background-color: var(--sl-color-gray-800);
  box-shadow: 0 0 0 1px var(--sl-color-gray-600);
}

.sl-theme-dark sl-color-picker::part(slider-handle):focus {
  box-shadow: 0 0 0 1px var(--sl-color-primary-500), 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}

.sl-theme-dark sl-color-picker::part(grid-handle) {
  border-color: var(--sl-color-gray-900);
}

.sl-theme-dark sl-color-picker::part(preview),
.sl-theme-dark sl-color-picker::part(opacity-slider),
.sl-theme-dark sl-color-picker::part(trigger) {
  background-image: linear-gradient(45deg, #333 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #333 75%),
    linear-gradient(45deg, transparent 75%, #333 75%), linear-gradient(45deg, #333 25%, transparent 25%);
}

.sl-theme-dark sl-color-picker::part(swatches) {
  border-top-color: var(--sl-color-gray-800);
}

/* Details */
.sl-theme-dark sl-details::part(base) {
  border-color: var(--sl-color-gray-800);
}

/* Icon button */
.sl-theme-dark sl-icon-button::part(base) {
  color: var(--sl-color-gray-400);
}

.sl-theme-dark sl-icon-button:not([disabled])::part(base):hover,
.sl-theme-dark sl-icon-button:not([disabled])::part(base):focus {
  color: var(--sl-color-primary-500);
}

.sl-theme-dark sl-icon-button:not([disabled])::part(base):active {
  color: var(--sl-color-primary-400);
}

/* Image comparer */
.sl-theme-dark sl-image-comparer::part(divider),
.sl-theme-dark sl-image-comparer::part(handle) {
  background-color: var(--sl-color-gray-900);
  color: var(--sl-color-gray-400);
}

/* Menu item */
.sl-theme-dark sl-menu-item::part(base) {
  color: var(--sl-color-gray-200);
}

.sl-theme-dark sl-menu-item::part(base):focus {
  background-color: var(--sl-color-primary-950);
  color: var(--sl-color-primary-500);
}

.sl-theme-dark sl-menu-item[disabled]::part(base) {
  color: var(--sl-color-gray-600);
}

/* Menu label */
.sl-theme-dark sl-menu-label::part(base) {
  color: var(--sl-color-gray-600);
}

/* Progress bar */
.sl-theme-dark sl-progress-bar::part(base) {
  background-color: var(--sl-color-gray-800);
}

.sl-theme-dark sl-progress-bar::part(indicator) {
  color: var(--sl-color-gray-900);
}

/* Progress ring */
.sl-theme-dark sl-progress-ring::part(base) {
  --track-color: var(--sl-color-gray-800);
}

/* Range */
.sl-theme-dark sl-range {
  --track-color: var(--sl-color-gray-800);
}

/* Rating */
.sl-theme-dark sl-rating {
  --symbol-color: var(--sl-color-gray-700);
}

/* Select */
.sl-theme-dark sl-select::part(tag) {
  background-color: var(--sl-color-info-800);
  border-color: var(--sl-color-info-700);
  color: var(--sl-color-info-300);
}

/* Skeleton */
.sl-theme-dark sl-skeleton {
  --color: var(--sl-color-gray-800);
  --sheen-color: var(--sl-color-gray-700);
}

/* Spinner */
.sl-theme-dark sl-spinner {
  --track-color: #f9fafb20;
}

/* Switch */
.sl-theme-dark sl-switch::part(thumb) {
  background-color: var(--sl-color-gray-900);
}

.sl-theme-dark sl-switch::part(control) {
  background-color: var(--sl-color-gray-700);
  border-color: var(--sl-color-gray-700);
}

.sl-theme-dark sl-switch:not([disabled])::part(control):hover {
  background-color: var(--sl-color-gray-600);
  border-color: var(--sl-color-gray-600);
}

.sl-theme-dark sl-switch[checked]::part(control) {
  background-color: var(--sl-color-primary-600);
  border-color: var(--sl-color-primary-600);
}

.sl-theme-dark sl-switch[checked]::part(control):hover {
  background-color: var(--sl-color-primary-500);
  border-color: var(--sl-color-primary-500);
}

/* Tab group */
.sl-theme-dark sl-tab-group::part(tabs) {
  --tabs-border-color: var(--sl-color-gray-800);
}

/* Tab */
.sl-theme-dark sl-tab::part(base) {
  color: var(--sl-color-gray-400);
}

.sl-theme-dark sl-tab:not([disabled])::part(base):hover,
.sl-theme-dark sl-tab[active]::part(base) {
  color: var(--sl-color-primary-500);
}

/* Tag */
.sl-theme-dark sl-tag[type='primary']::part(base) {
  background-color: var(--sl-color-primary-950);
  border-color: var(--sl-color-primary-900);
  color: var(--sl-color-primary-300);
}

.sl-theme-dark sl-tag[type='success']::part(base) {
  background-color: var(--sl-color-success-950);
  border-color: var(--sl-color-success-900);
  color: var(--sl-color-success-300);
}

.sl-theme-dark sl-tag[type='info']::part(base) {
  background-color: var(--sl-color-info-800);
  border-color: var(--sl-color-info-700);
  color: var(--sl-color-info-300);
}

.sl-theme-dark sl-tag[type='warning']::part(base) {
  background-color: var(--sl-color-warning-950);
  border-color: var(--sl-color-warning-900);
  color: var(--sl-color-warning-300);
}

.sl-theme-dark sl-tag[type='danger']::part(base) {
  background-color: var(--sl-color-danger-950);
  border-color: var(--sl-color-danger-900);
  color: var(--sl-color-danger-300);
}