html[data-darkmode="1"], .sl-theme-dark {
  background-color: black;
  color: var(--sl-color-neutral-700);

  --sl-color-primary-950: hsl(from var(--primary-color) h s calc(l + 18));
  --sl-color-primary-900: hsl(from var(--primary-color) h s calc(l + 16));
  --sl-color-primary-800: hsl(from var(--primary-color) h s calc(l + 12));
  --sl-color-primary-700: hsl(from var(--primary-color) h s calc(l + 8));
  --sl-color-primary-600: hsl(from var(--primary-color) h s calc(l + 4));
  --sl-color-primary-500: var(--primary-color);
  --sl-color-primary-400: hsl(from var(--primary-color) h s calc(l - 4));
  --sl-color-primary-300: hsl(from var(--primary-color) h s calc(l - 8));
  --sl-color-primary-200: hsl(from var(--primary-color) h s calc(l - 12));
  --sl-color-primary-100: hsl(from var(--primary-color) h s calc(l - 16));
  --sl-color-primary-50: hsl(from var(--primary-color) h s calc(l - 18));

  /*** HEADER ***/
  #egw_fw_topmenu_info_items {
	#topmenu_info_timer:before {
	  filter:initial;
	}
  }

  /*** APPLICATION ***/

  egw-app {
	--application-header-text-color: var(--sl-color-neutral-900);
  }

  /*** End APPLICATION ***/

  /*** WIDGETS ***/
  /* This should mostly go away with webcomponents */

  .et2_container {
	background-color: initial;
  }

  .dialogFooterToolbar et2-button::part(base):not(:hover), et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) {
	background-color: var(--sl-input-background-color);
  }
  .nextmatch_sortheader {
	color: #96bcd9;
  }

  /* Date widget (flatpickr dark theme)  */
  @import (inline) "../../../node_modules/flatpickr/dist/themes/dark.css";

  .flatpickr-calendar {
	background: var(--sl-panel-background-color);
	box-shadow: var(--sl-shadow-large);

	.flatpickr-innerContainer {
	  background: var(--sl-panel-background-color);
	  border-bottom-color: var(--sl-panel-border-color);
	}

	.flatpickr-months {
	  background-color: var(--sl-color-neutral-200);

	  .flatpickr-month, .flatpickr-monthDropdown-months {
		background: none;
		color: var(--sl-color-neutral-700);
	  }
	}

	.flatpickr-weeks, .flatpickr-days {
	  border-left-color: var(--sl-panel-border-color);
	}

	span.flatpickr-weekday {
	  color: var(--sl-color-neutral-500);
	  background-color: var(--sl-color-neutral-200);
	}

	.flatpickr-time {
	  background-color: transparent;
	  border-color: var(--sl-panel-border-color);

	  .flatpickr-calendar.hasTime & {
		border-top: var(--sl-panel-border-width) solid var(--sl-panel-border-color);
	  }
	}
  }
  /** End WIDGETS **/
}