egroupware_official/pixelegg/less/darkmode.less

/**
 * EGroupware: Darkmode theme
 *
 * Please do NOT change css-files directly, instead change less-files and compile them!
 *
 * @link http://www.egroupware.org
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @author Hadi Nategh <hn@egroupware.org>
 * @package pixelegg
 * @version $Id$
 */

@media (prefers-color-scheme: dark) {
  html[data-darkmode='2'] {
    background: #000;
    filter: invert(1) hue-rotate(180deg) brightness(1);
    #loginMainDiv {
      filter: invert(1) hue-rotate(180deg) !important;
    }
    #loginMainDiv div#centerBox{filter: invert(1) hue-rotate(180deg) !important;}
  }
}
/**
 * DARK THEME
 */
@media all {

  html[data-darkmode='1']
  {
	filter: invert(.82) hue-rotate(180deg) brightness(1);

	sl-menu-item::part(prefix), et2-select-country::part(prefix),
	et2-button::part(prefix), *::part(image), et2-image, #blueimp-gallery:not(:fullscreen), #blueimp-gallery ol,
	 et2-select-account::part(icon), et2-select-email::part(icon), sl-menu-item [slot="prefix"],
	iframe, et2-lavatar[image=""]::part(base), et2-avatar[id="_cropper_image"],
	video, #loginMainDiv, .et2_taglist_tags_icon, .fw_avatar_stat, et2-avatar-group,
	.blueimp-gallery .slide {
	  filter: invert(1) hue-rotate(180deg) !important;
	}
	/* need to explicitly disable the filter on the img tag, if used, as it would be applied twice and therefore not at all */
	et2-image > img {
		filter: none !important;
	}

	#blueimp-gallery {
	  video, .video-content {
		filter: invert(0) hue-rotate(180deg) !important;
	  }
	}

	#loginMainDiv div#centerBox {
	  filter: invert(1) hue-rotate(180deg) !important;
	}

	div.dhtmlxMenu_egw_SubLevelArea_Polygon, .egw_tooltip,
	body .egw_message_wrapper, #egw_fw_header #egw_fw_topmenu, .ui-dialog, .box_shadow,
	#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded {
	  box-shadow: 0px 0px 2px 2px #666666;
	  -moz-box-shadow: 0px 0px 2px 2px #666666;
	  -webkit-box-shadow: 0px 0px 2px 2px #666666;
	  -khtml-box-shadow: 0px 0px 2px 2px #666666;
	}

	et2-dialog::part(panel), body .flatpickr-calendar.open {
	  border: 1px solid hsl(240 5% 64.9%);
	  box-shadow: none;
	}

	//Calendar
	#calendar_sidebox_header.egw_fw_ui_sidemenu_entry_header_active, #calendar_sidebox_header {
	  border-color: #ff9dca !important;
	}

	#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #calendar-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
	  border-top-color: #ff9dca !important;
	}

	//Addressbook
	#addressbook_sidebox_header.egw_fw_ui_sidemenu_entry_header_active, #addressbook_sidebox_header {
	  border-color: #aadaff !important;
	}

	#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #addressbook-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
	  border-top-color: #aadaff !important;
	}

	//Infolog
	#infolog_sidebox_header.egw_fw_ui_sidemenu_entry_header_active, #infolog_sidebox_header {
	  border-color: #ffccff !important;
	}

	#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #infolog-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
	  border-top-color: #ffccff !important;
	}

	//Timesheet
	#timesheet_sidebox_header.egw_fw_ui_sidemenu_entry_header_active, #timesheet_sidebox_header {
	  border-color: #ffdbff !important;
	}

	#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #timesheet-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
	  border-top-color: #ffdbff !important;
	}

	//Mail
	#mail_sidebox_header.egw_fw_ui_sidemenu_entry_header_active, #mail_sidebox_header {
	  border-color: #5db9ec !important;
	}

	#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #mail-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
	  border-top-color: #5db9ec !important;
	}

	//ProjectManager
	#projectmanager_sidebox_header.egw_fw_ui_sidemenu_entry_header_active, #projectmanager_sidebox_header {
	  border-color: #487b7b !important;
	}

	#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #projectmanager-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
	  border-top-color: #487b7b !important;
	}

	//Resources
	#resources_sidebox_header.egw_fw_ui_sidemenu_entry_header_active, #resources_sidebox_header {
	  border-color: #aee0e0 !important;
	}

	#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #resources-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
	  border-top-color: #aee0e0 !important;
	}

	//Admin
	#admin_sidebox_header.egw_fw_ui_sidemenu_entry_header_active, #admin_sidebox_header {
	  border-color: #cccccc !important;
	}

	#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #admin-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
	  border-top-color: #cccccc !important;
	}

	//Filemamanger
	#filemanager_sidebox_header.egw_fw_ui_sidemenu_entry_header_active, #filemanager_sidebox_header {
	  border-color: #ac4500 !important;
	}

	#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #filemanager-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
	  border-top-color: #ac4500 !important;
	}

	//Bookmarks
	#bookmarks_sidebox_header.egw_fw_ui_sidemenu_entry_header_active, #bookmarks_sidebox_header {
	  border-color: #cc6633 !important;
	}

	#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #bookmarks-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
	  border-top-color: #cc6633 !important;
	}

  }
}