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

  //our strongest neutral color should not be fully black
  //--sl-color-neutral-0: var(--sl-color-neutral-50);

  --sl-color-primary-50:  hsl(210, 43%, 10%) ;
  --sl-color-primary-100: hsl(210, 43%, 15%) ;
  --sl-color-primary-200: hsl(210, 43%, 20%) ;
  --sl-color-primary-300: hsl(210, 43%, 26%) ;
  --sl-color-primary-400: hsl(210, 40%, 33%) ;
  --sl-color-primary-500: hsl(210, 40%, 42%) ;
  --sl-color-primary-600: hsl(210, 38%, 53%) ;
  --sl-color-primary-700: hsl(210, 36%, 63%) ;
  --sl-color-primary-800: hsl(210, 33%, 73%) ;
  --sl-color-primary-900: hsl(210, 30%, 84%) ;
  --sl-color-primary-950: hsl(210, 25%, 94%) ;




  /*** 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 */

  //Toolbar should use background color of the page
  et2-toolbar{
	--sl-color-neutral-0: var(--sl-color-neutral-50);
  }

  .et2_container {
	background-color: initial;
  }
  .egw_tooltip{
	filter:(80%);
  }

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

  /* 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-weekdays{
		background: var(--sl-color-neutral-200);
	  }
	}

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

	  .flatpickr-current-month{
		.numInputWrapper{
		  background-color: var(--sl-color-neutral-50);
		}
	  }

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

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

	span.flatpickr-weekday {
	  color: var(--sl-color-neutral-700);
	  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 **/
  /**
  * images that look like bootstrap icons can be inverted nicely into darkmode
  * This is deprecated, we should replace these either with et2-images or use the bootstrap icons directly
  **/
  img[src*='/node_modules/bootstrap-icons/icons/']{
	filter: invert(1);
  }
}