.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-blue-500);
  --sl-input-border-color-disabled: var(--sl-color-gray-200);
  --sl-input-border-color-invalid: var(--sl-color-red-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-label-color: var(--sl-color-gray-700);
  --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-blue-400);
  --sl-input-border-color-disabled: var(--sl-color-gray-700);
  --sl-input-border-color-invalid: var(--sl-color-red-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-red-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);

  /* labels */
  --sl-label-color-very-light-gray: var(--sl-color-gray-700);
  --sl-label-color-light-gray: var(--sl-color-gray-600);
  --sl-label-color-dark-gray: var(--sl-color-gray-400);
  --sl-label-color-very-dark-gray: var(--sl-color-gray-300);
  --sl-label-color-black: var(--sl-color-white);

  /* Badges */
  --sl-badge-background-color-primary: var(--sl-color-blue-300);
  --sl-badge-border-color-primary: var(--sl-color-blue-200);
  --sl-badge-background-color-success: var(--sl-color-green-300);
  --sl-badge-border-color-success: var(--sl-color-green-200);
  --sl-badge-background-color-warning: var(--sl-color-yellow-300);
  --sl-badge-border-color-warning: var(--sl-color-yellow-200);
  --sl-badge-background-color-danger: var(--sl-color-red-300);
  --sl-badge-border-color-danger: var(--sl-color-red-200);
  --sl-badge-background-color-info: var(--sl-color-gray-500);
  --sl-badge-border-color-info: var(--sl-color-gray-400);
  --sl-badge-font-color-info: var(--sl-color-white);

  /* Cell */
  --sl-cell-header-background: var(--sl-color-gray-800);
  --sl-cell-header-border-color: var(--sl-color-gray-700);

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

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

  /* Sidebar */
  --sl-sidebar-background: var(--sl-color-gray-950);
  --sl-sidebar-footer-background: var(--sl-color-gray-800);

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

  color-scheme: dark;
}

/* 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);
  border-top-color: var(--sl-color-gray-700);
  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);
}

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

/* 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-blue-900);
  border-color: var(--sl-color-blue-800);
  color: var(--sl-color-blue-400);
}

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

.sl-theme-dark sl-button[type='default']:not([disabled])::part(base):active {
  background-color: var(--sl-color-blue-900);
  border-color: var(--sl-color-blue-700);
  color: var(--sl-color-blue-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);
}

/* 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-blue-500);
}

.sl-theme-dark sl-icon-button:not([disabled])::part(base):active {
  color: var(--sl-color-blue-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);
}

/* List Divider */
.sl-theme-dark sl-list::part(base) {
}

/* List Divider */
.sl-theme-dark sl-list-divider::part(base) {
  background-color: var(--sl-color-gray-900);
}

/* List Item */
.sl-theme-dark sl-list-item {
  --label-color-very-dark-active: var(--sl-label-color-very-dark-gray);
  --label-color-dark-active: var(--sl-label-color-very-dark-gray);
  --label-color-medium-active: var(--sl-label-color-very-dark-gray);
  --label-color-light-active: var(--sl-label-color-very-dark-gray);
  --label-color-very-light-active: var(--sl-label-color-very-dark-gray);
}

/* 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-blue-600);
  color: var(--sl-color-white);
}

.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);
}

/* Page Header */
.sl-theme-dark sl-page-header::part(base) {
  background-color: var(--sl-color-gray-900);
}

.sl-theme-dark sl-page-header::part(header) {
  color: var(--sl-color-gray-100);
}

/* 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);
}

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

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

.sl-theme-dark sl-section::part(content) {
  background-color: var(--sl-color-gray-900);
}

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

/* Shades */
.sl-theme-dark {
  --sl-shading-blue: repeating-linear-gradient(
    135deg,
    var(--sl-color-blue-900),
    var(--sl-color-blue-900) 1px,
    var(--sl-color-black) 1px,
    var(--sl-color-black) 4px
  );

  --sl-shading-red: repeating-linear-gradient(
    135deg,
    var(--sl-color-red-900),
    var(--sl-color-red-900) 1px,
    var(--sl-color-black) 1px,
    var(--sl-color-black) 4px
  );

  --sl-shading-yellow: repeating-linear-gradient(
    135deg,
    var(--sl-color-yellow-900),
    var(--sl-color-yellow-900) 1px,
    var(--sl-color-black) 1px,
    var(--sl-color-black) 4px
  );

  --sl-shading-pink: repeating-linear-gradient(
    135deg,
    var(--sl-color-pink-900),
    var(--sl-color-pink-900) 1px,
    var(--sl-color-black) 1px,
    var(--sl-color-black) 4px
  );

  --sl-shading-gray: repeating-linear-gradient(
    135deg,
    var(--sl-color-gray-900),
    var(--sl-color-gray-900) 1px,
    var(--sl-color-black) 1px,
    var(--sl-color-black) 4px
  );

  --sl-shading-indigo: repeating-linear-gradient(
    135deg,
    var(--sl-color-indigo-900),
    var(--sl-color-indigo-900) 1px,
    var(--sl-color-black) 1px,
    var(--sl-color-black) 4px
  );

  --sl-shading-green: repeating-linear-gradient(
    135deg,
    var(--sl-color-green-900),
    var(--sl-color-green-900) 1px,
    var(--sl-color-black) 1px,
    var(--sl-color-black) 4px
  );

  --sl-shading-purple: repeating-linear-gradient(
    135deg,
    var(--sl-color-purple-900),
    var(--sl-color-purple-900) 1px,
    var(--sl-color-black) 1px,
    var(--sl-color-black) 4px
  );
}

/* Skeleton */
.sl-theme-dark sl-sidebar {
  --sl-sidebar-background: var(--sl-color-gray-800);
  --sl-sidebar-footer-background: var(--sl-color-gray-700);
  --sl-sidebar-footer-border-color: var(--sl-color-gray-600);
}

/* 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-blue-600);
  border-color: var(--sl-color-blue-600);
}

.sl-theme-dark sl-switch[checked]::part(control):hover {
  background-color: var(--sl-color-blue-500);
  border-color: var(--sl-color-blue-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-blue-500);
}

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

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

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

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

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