/*dark theme color palette (via attribute: data-force-color-mode="dark")
work in progress, convert to hex when done*/
:root[data-force-color-mode="dark"] {
--gov-color-blue: hsl(210deg 64% 44%);
--gov-color-white: hsl(0deg 0% 90%);
--gov-color-blue-dark: hsl(213deg 55% 12%);
--gov-color-blue-focus: hsl(211deg 100% 30%);
--gov-color-blue-light: hsl(208deg 58% 25%);
--gov-color-blue-inactive-1: hsl(210deg 40% 49%);
--gov-color-blue-inactive-2: hsl(211deg 40% 68%);
--gov-color-blue-inactive-3: hsl(204deg 16% 74%);
--gov-color-blue-hover: hsl(207deg 27% 20%);
--gov-color-grey-dark: hsl(0deg 0% 55%);
--gov-color-grey-mid: hsl(0deg 0% 63%);
--gov-color-grey-light: hsl(0deg 0% 68%);
--gov-color-grey-inactive: hsl(0deg 0% 87%);
--gov-color-grey-bg: hsl(0deg 0% 16%);
--gov-color-yellow: hsl(69deg 85% 51%);
--gov-color-yellow-dark: hsl(42deg 90% 46%);
--gov-color-error: hsl(354deg 65% 42%);
--gov-color-success: hsl(92deg 62% 41%);
--gov-color-grey-dark-rgb: 59, 59, 59;
--gov-color-white-rgb: 255, 255, 255;
}
/*=== Dark theme color swaps (due to color incompatibility and preserving contrast ratio) ===*/
:root[data-force-color-mode="dark"] .gov-statsbar {
background: var(--gov-color-grey-dark);
}
:root[data-force-color-mode="dark"] .gov-header, :root[data-force-color-mode="dark"] .gov-header__nav, :root[data-force-color-mode="dark"] #gov-header-settings-accordion, :root[data-force-color-mode="dark"] .u-bg-color--grey-dark, :root[data-force-color-mode="dark"] .gov-statsbar--dark, :root[data-force-color-mode="dark"] #notificationsCounter {
background: var(--gov-color-blue-dark);
}
:root[data-force-color-mode="dark"] #notificationsCounter {
box-shadow: 0px 0px 0px 2px var(--gov-color-blue-dark);
}
:root[data-force-color-mode="dark"] .gov-header__item.gov-header__notifications #notificationsCounter.gov-color--warning,
:root[data-force-color-mode="dark"] .gov-multiselect .gov-form-control__label {
color: var(--gov-color-grey-bg);
}
:root[data-force-color-mode="dark"] .gov-lang-switch__select option {
background: var(--gov-color-grey-light);
color: var(--gov-color-grey-bg);
}
:root[data-force-color-mode="dark"] div.gov-breadcrumbs .gov-breadcrumbs__item a.gov-link--standalone {
color: var(--gov-color-blue-inactive-1);
}
:root[data-force-color-mode="dark"] .gov-link--inversed {
color: var(--gov-color-white);
}
:root[data-force-color-mode="dark"] input, :root[data-force-color-mode="dark"] input::placeholder, :root[data-force-color-mode="dark"] input:focus::placeholder,
:root[data-force-color-mode="dark"] textarea, :root[data-force-color-mode="dark"] textarea::placeholder, :root[data-force-color-mode="dark"] textarea:focus::placeholder,
:root[data-force-color-mode="dark"] div#pageContent select, :root[data-force-color-mode="dark"] div#pageContent select::placeholder,
:root[data-force-color-mode="dark"] ul.gov-multiselect__options li,
:root[data-force-color-mode="dark"] header .gov-search ul.gov-autocomplete__results li
{
background-color: var(--gov-color-grey-dark);
color: var(--gov-color-grey-bg);
}
:root[data-force-color-mode="dark"] #pageContent .gov-autocomplete__results, :root[data-force-color-mode="dark"] #pageContent .gov-multiselect__options {
background-color: var(--gov-color-grey-dark);
color: var(--gov-color-grey-bg);
}
:root[data-force-color-mode="dark"] header .gov-search ul.gov-autocomplete__results li:hover {
background-color: var(--gov-color-blue-hover);
color: var(--gov-color-white);
}
:root[data-force-color-mode="dark"] header .gov-search input#autocompleteSearchWidget::placeholder {
color: var(--gov-color-grey-inactive);
}
:root[data-force-color-mode="dark"] .gov-button--primary {
background-color: var(--gov-color-blue-light);
border-color: var(--gov-color-blue-light);
}
:root[data-force-color-mode="dark"] .gov-button--primary:hover {
background-color: var(--gov-color-blue-hover);
}
:root[data-force-color-mode="dark"] table.typeA th, :root[data-force-color-mode="dark"] table.typeA td, :root[data-force-color-mode="dark"] table.typeC th, :root[data-force-color-mode="dark"] table.typeC td {
color: var(--gov-color-grey-light);
}
:root[data-force-color-mode="dark"] table.typeA tr:hover td, :root[data-force-color-mode="dark"] .ui-accordion .ui-accordion-header:not(.ui-state-active):hover {
background: var(--gov-color-blue-light);
}
/*chat*/
:root[data-force-color-mode="dark"] div.chatComponent {
background: var(--gov-color-blue-hover);
}
:root[data-force-color-mode="dark"] div.chatComponent * {
color: var(--gov-color-grey-bg);
}
:root[data-force-color-mode="dark"] .chatMessage.received .chatBody, :root[data-force-color-mode="dark"] .chatMessage.received .chatInitial {
background: var(--gov-color-grey-mid);
}
:root[data-force-color-mode="dark"] #pageContent table {
background: var(--gov-color-blue-hover);
color: white;
}
:root[data-force-color-mode="dark"] #pageContent table.typeA th {
background: var(--gov-color-blue-light)
}
:root[data-force-color-mode="dark"] th.tablesorter-header div.tableHeaderInputContainer input.tableHeaderInput {
background: var(--gov-color-blue-hover);
color: var(--gov-color-grey-mid);
}
:root[data-force-color-mode="dark"] input[type="image"] {
background-color: unset;
}
:root[data-force-color-mode="dark"] a:hover {
color: var(--gov-color-blue-inactive-2);
}
:root[data-force-color-mode="dark"] a:visited {
color: var(--gov-color-blue-inactive-1);
}
:root[data-force-color-mode="dark"] table td.indexHeadCell {
background: var(--gov-color-blue-light);
}
:root[data-force-color-mode="dark"] .ui-accordion .ui-accordion-header {
background: var(--gov-color-blue-hover);
color: var(--gov-color-grey-light)!important
}
:root[data-force-color-mode="dark"] table.typeA input, :root[data-force-color-mode="dark"] table.typeC input {
color: var(--gov-color-grey-bg);
}
:root[data-force-color-mode="dark"] .ui-widget-content:not(.ui-datepicker) {
background: var(--gov-color-blue-hover);
border-color: var(--gov-color-blue-inactive-1);
}
:root[data-force-color-mode="dark"] .note-editing-area * {
background: var(--gov-color-white);
}
:root[data-force-color-mode="dark"] .gov-button--primary, :root[data-force-color-mode="dark"] input[type="button"], :root[data-force-color-mode="dark"] input[type="submit"], :root[data-force-color-mode="dark"] table input[type="button"], :root[data-force-color-mode="dark"] table input[type="submit"] {
background-color: var(--gov-color-blue-light);
border-color: var(--gov-color-grey-light);
color: var(--gov-color-grey-light);
transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out, color 0.1s ease-in-out;
}
:root[data-force-color-mode="dark"] .gov-button--primary:hover, :root[data-force-color-mode="dark"] input[type="button"]:hover, :root[data-force-color-mode="dark"] input[type="submit"]:hover {
background-color: var(--gov-color-blue-hover);
border-color: var(--gov-color-grey-inactive);
color: var(--gov-color-grey-inactive);
transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out, color 0.1s ease-in-out;
}
:root[data-force-color-mode="dark"] .pagerCtl .gov-button:hover {
border-color: var(--gov-color-blue-inactive-2);
color: var(--gov-color-blue-inactive-2);
background-color: var(--gov-color-blue-light);
}
:root[data-force-color-mode="dark"] .pagerCtl .gov-button:hover span.gov-icon {
color: var(--gov-color-blue-inactive-2);
}
/*autocomplete/search*/
:root[data-force-color-mode="dark"] ul.ui-widget.ui-autocomplete {
background-color: var(--gov-color-blue-dark);
border-color: var(--gov-color-blue-inactive-1);
}
:root[data-force-color-mode="dark"] ul.ui-widget.ui-autocomplete li.ui-menu-item {
background-color: var(--gov-color-blue-dark);
}
:root[data-force-color-mode="dark"] ul.ui-widget.ui-autocomplete li.ui-menu-item a {
color: var(--gov-color-grey-light);
}
:root[data-force-color-mode="dark"] ul.ui-widget.ui-autocomplete li.ui-menu-item:hover , :root[data-force-color-mode="dark"] ul.ui-widget.ui-autocomplete li.ui-menu-item a:hover, :root[data-force-color-mode="dark"] ul.searchAutoComplete.ui-widget.ui-widget-content li.ui-menu-item:hover, :root[data-force-color-mode="dark"] ul.searchAutoComplete.ui-widget.ui-widget-content li.ui-menu-item:hover a, :root[data-force-color-mode="dark"] ul.searchAutoComplete.ui-widget.ui-widget-content li.ui-menu-item:hover a, :root[data-force-color-mode="dark"] ul.searchAutoComplete.ui-widget.ui-widget-content li.ui-menu-item a.ui-state-active {
background: var(--gov-color-blue-light);
color: var(--gov-color-blue-inactive-2);
}
:root[data-force-color-mode="dark"] ul.ui-widget.ui-autocomplete li.ui-menu-item div {
background: var(--gov-color-blue-dark);
}
:root[data-force-color-mode="dark"] ul.ui-widget.ui-autocomplete li.ui-menu-item:hover, :root[data-force-color-mode="dark"] ul.ui-widget.ui-autocomplete li.ui-menu-item:hover div, :root[data-force-color-mode="dark"] ul.ui-widget.ui-autocomplete li.ui-menu-item.ui-state-active div {
background: var(--gov-color-blue-light);
}
/*datepicker*/
:root[data-force-color-mode="dark"] .ui-datepicker, :root[data-force-color-mode="dark"] .ui-datepicker-header, :root[data-force-color-mode="dark"] .ui-datepicker table.ui-datepicker-calendar tr, :root[data-force-color-mode="dark"] .ui-datepicker table.ui-datepicker-calendar th, :root[data-force-color-mode="dark"] .ui-datepicker table.ui-datepicker-calendar td a {
background: var(--gov-color-blue-light);
}
:root[data-force-color-mode="dark"] .ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-today a {
background: var(--gov-color-blue-dark);
}
:root[data-force-color-mode="dark"] .ui-datepicker table.ui-datepicker-calendar td a:hover, :root[data-force-color-mode="dark"] .ui-datepicker .ui-datepicker-next:hover, :root[data-force-color-mode="dark"] .ui-datepicker .ui-datepicker-prev:hover {
background: var(--gov-color-blue-hover);
}
/*timepicker*/
:root[data-force-color-mode="dark"] .mdtimepicker .mdtp__clock_holder {
background: var(--gov-color-grey-bg);
}
:root[data-force-color-mode="dark"] .mdtimepicker .mdtp__clock_holder .mdtp__clock, :root[data-force-color-mode="dark"] .mdtimepicker .mdtp__time_holder {
background-color: var(--gov-color-blue-hover);
color: var(--gov-color-grey-mid);
}
:root[data-force-color-mode="dark"] .mdtimepicker span.mdtp__time_holder .active {
color: var(--gov-color-white);
}