web: toggle dark/light theme manually (#4876)
This commit is contained in:
Jens L
@ -124,333 +124,6 @@ html > form > input {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.ak-static-page h1 {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
body {
|
||||
background-color: var(--ak-dark-background) !important;
|
||||
}
|
||||
:root {
|
||||
--pf-global--Color--100: var(--ak-dark-foreground);
|
||||
--pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker);
|
||||
--pf-global--link--Color: var(--ak-dark-foreground-link);
|
||||
}
|
||||
.pf-c-radio {
|
||||
--pf-c-radio__label--Color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* Global page background colour */
|
||||
.pf-c-page {
|
||||
--pf-c-page--BackgroundColor: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-drawer__content {
|
||||
--pf-c-drawer__content--BackgroundColor: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-title {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-u-mb-xl {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* Header sections */
|
||||
.pf-c-page__main-section {
|
||||
--pf-c-page__main-section--BackgroundColor: var(--ak-dark-background);
|
||||
}
|
||||
.sidebar-trigger,
|
||||
.notification-trigger {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.pf-c-page__main-section.pf-m-light {
|
||||
background-color: transparent;
|
||||
}
|
||||
.pf-c-content {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* Card */
|
||||
.pf-c-card {
|
||||
--pf-c-card--BackgroundColor: var(--ak-dark-background-light);
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-card__title,
|
||||
.pf-c-card__body {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-toolbar {
|
||||
--pf-c-toolbar--BackgroundColor: var(--ak-dark-background-light);
|
||||
}
|
||||
.pf-c-pagination.pf-m-bottom {
|
||||
background-color: var(--ak-dark-background-light);
|
||||
}
|
||||
/* table */
|
||||
.pf-c-table {
|
||||
--pf-c-table--BackgroundColor: var(--ak-dark-background-light);
|
||||
--pf-c-table--BorderColor: var(--ak-dark-background-lighter);
|
||||
--pf-c-table--cell--Color: var(--ak-dark-foreground);
|
||||
--pf-c-table--tr--m-hoverable--hover--BackgroundColor: var(--ak-dark-background-light-ish);
|
||||
--pf-c-table--tr--m-hoverable--active--BackgroundColor: var(--ak-dark-background-lighter);
|
||||
}
|
||||
.pf-c-table__text {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-table__sort:not(.pf-m-selected) .pf-c-table__button .pf-c-table__text {
|
||||
color: var(--ak-dark-foreground) !important;
|
||||
}
|
||||
.pf-c-table__sort-indicator i {
|
||||
color: var(--ak-dark-foreground) !important;
|
||||
}
|
||||
.pf-c-table__expandable-row.pf-m-expanded {
|
||||
--pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(
|
||||
--ak-dark-background-lighter
|
||||
);
|
||||
}
|
||||
/* tabs */
|
||||
.pf-c-tabs {
|
||||
background-color: transparent;
|
||||
}
|
||||
.pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__list::before {
|
||||
border-color: transparent;
|
||||
}
|
||||
.pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current:first-child .pf-c-tabs__link::before {
|
||||
border-color: transparent;
|
||||
}
|
||||
.pf-c-tabs__link::before {
|
||||
border-color: transparent;
|
||||
}
|
||||
.pf-c-tabs__item.pf-m-current {
|
||||
--pf-c-tabs__link--after--BorderColor: #fd4b2d;
|
||||
}
|
||||
.pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
|
||||
background-color: transparent;
|
||||
}
|
||||
/* table, on mobile */
|
||||
@media screen and (max-width: 1200px) {
|
||||
.pf-m-grid-xl.pf-c-table tbody:first-of-type {
|
||||
border-top-color: var(--ak-dark-background);
|
||||
}
|
||||
.pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) {
|
||||
border-bottom-color: var(--ak-dark-background);
|
||||
}
|
||||
}
|
||||
/* class for pagination text */
|
||||
.pf-c-options-menu__toggle {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* table icon used for expanding rows */
|
||||
.pf-c-table__toggle-icon {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* expandable elements */
|
||||
.pf-c-expandable-section__toggle-text {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-expandable-section__toggle-icon {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-expandable-section.pf-m-display-lg {
|
||||
background-color: var(--ak-dark-background-light-ish);
|
||||
}
|
||||
/* header for form group */
|
||||
.pf-c-form__field-group-header-title-text {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-form__field-group {
|
||||
border-bottom: 0;
|
||||
}
|
||||
/* inputs */
|
||||
optgroup,
|
||||
option {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
select[multiple] optgroup:checked,
|
||||
select[multiple] option:checked {
|
||||
color: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-input-group {
|
||||
--pf-c-input-group--BackgroundColor: transparent;
|
||||
}
|
||||
.pf-c-form-control {
|
||||
--pf-c-form-control--BorderTopColor: var(--ak-dark-background-lighter);
|
||||
--pf-c-form-control--BorderRightColor: var(--ak-dark-background-lighter);
|
||||
--pf-c-form-control--BorderLeftColor: var(--ak-dark-background-lighter);
|
||||
--pf-global--BackgroundColor--100: transparent;
|
||||
--pf-c-form-control--BackgroundColor: var(--ak-dark-background-light);
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-form-control:disabled {
|
||||
background-color: var(--ak-dark-background-light);
|
||||
}
|
||||
.pf-c-form-control[readonly] {
|
||||
background-color: var(--ak-dark-background-light);
|
||||
}
|
||||
.pf-c-switch__input:checked ~ .pf-c-switch__label {
|
||||
--pf-c-switch__input--checked__label--Color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* select toggle */
|
||||
.pf-c-select__toggle::before {
|
||||
--pf-c-select__toggle--before--BorderTopColor: var(--ak-dark-background-lighter);
|
||||
--pf-c-select__toggle--before--BorderRightColor: var(--ak-dark-background-lighter);
|
||||
--pf-c-select__toggle--before--BorderLeftColor: var(--ak-dark-background-lighter);
|
||||
}
|
||||
.pf-c-select__toggle.pf-m-typeahead {
|
||||
--pf-c-select__toggle--BackgroundColor: var(--ak-dark-background-light);
|
||||
}
|
||||
.pf-c-select__menu {
|
||||
--pf-c-select__menu--BackgroundColor: var(--ak-dark-background-light-ish);
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-select__menu-item {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-select__menu-wrapper:hover,
|
||||
.pf-c-select__menu-item:hover {
|
||||
--pf-c-select__menu-item--hover--BackgroundColor: var(--ak-dark-background-lighter);
|
||||
}
|
||||
.pf-c-select__menu-wrapper:focus-within,
|
||||
.pf-c-select__menu-wrapper.pf-m-focus,
|
||||
.pf-c-select__menu-item:focus,
|
||||
.pf-c-select__menu-item.pf-m-focus {
|
||||
--pf-c-select__menu-item--focus--BackgroundColor: var(--ak-dark-background-light-ish);
|
||||
}
|
||||
.pf-c-button.pf-m-plain:hover {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-button.pf-m-control {
|
||||
--pf-c-button--after--BorderColor: var(--ak-dark-background-lighter)
|
||||
var(--ak-dark-background-lighter)
|
||||
var(--pf-c-button--m-control--after--BorderBottomColor)
|
||||
var(--ak-dark-background-lighter);
|
||||
background-color: var(--ak-dark-background-light);
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-m-tertiary,
|
||||
.pf-c-button.pf-m-tertiary {
|
||||
--pf-c-button--after--BorderColor: var(--ak-dark-foreground-darker);
|
||||
color: var(--ak-dark-foreground-darker);
|
||||
}
|
||||
.pf-m-tertiary:hover,
|
||||
.pf-c-button.pf-m-tertiary:hover {
|
||||
--pf-c-button--after--BorderColor: var(--ak-dark-background-lighter);
|
||||
}
|
||||
.pf-c-form__label-text {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-check__label {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.form-help-text {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-dropdown__toggle::before {
|
||||
border-color: transparent;
|
||||
}
|
||||
.pf-c-dropdown__menu {
|
||||
--pf-c-dropdown__menu--BackgroundColor: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-dropdown__menu-item {
|
||||
--pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background);
|
||||
--pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-dropdown__menu-item:hover,
|
||||
.pf-c-dropdown__menu-item:focus {
|
||||
--pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background-light-ish);
|
||||
--pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-toggle-group__button {
|
||||
color: var(--ak-dark-foreground) !important;
|
||||
}
|
||||
.pf-c-toggle-group__button:not(.pf-m-selected) {
|
||||
background-color: var(--ak-dark-background-light) !important;
|
||||
}
|
||||
.pf-c-toggle-group__button.pf-m-selected {
|
||||
color: var(--ak-dark-foreground) !important;
|
||||
background-color: var(--pf-global--primary-color--100) !important;
|
||||
}
|
||||
/* inputs help text */
|
||||
.pf-c-form__helper-text:not(.pf-m-error) {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* modal */
|
||||
.pf-c-modal-box,
|
||||
.pf-c-modal-box__header,
|
||||
.pf-c-modal-box__footer,
|
||||
.pf-c-modal-box__body {
|
||||
background-color: var(--ak-dark-background);
|
||||
}
|
||||
/* sidebar */
|
||||
.pf-c-nav {
|
||||
background-color: var(--ak-dark-background-light);
|
||||
}
|
||||
/* flows */
|
||||
.pf-c-login__main {
|
||||
background-color: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-login__main-body,
|
||||
.pf-c-login__main-header,
|
||||
.pf-c-login__main-header-desc {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-login__main-footer-links-item img {
|
||||
filter: invert(1);
|
||||
}
|
||||
.pf-c-login__main-footer-band {
|
||||
background-color: var(--ak-dark-background-lighter);
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.form-control-static {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* notifications */
|
||||
.pf-c-drawer__panel {
|
||||
background-color: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-notification-drawer {
|
||||
--pf-c-notification-drawer--BackgroundColor: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-notification-drawer__header {
|
||||
background-color: var(--ak-dark-background-lighter);
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-notification-drawer__list-item {
|
||||
background-color: var(--ak-dark-background-light-ish);
|
||||
color: var(--ak-dark-foreground);
|
||||
--pf-c-notification-drawer__list-item--BorderBottomColor: var(
|
||||
--ak-dark-background-lighter
|
||||
) !important;
|
||||
}
|
||||
/* data list */
|
||||
.pf-c-data-list {
|
||||
border-top-color: var(--ak-dark-background-lighter);
|
||||
}
|
||||
.pf-c-data-list__item {
|
||||
--pf-c-data-list__item--BackgroundColor: transparent;
|
||||
--pf-c-data-list__item--BorderBottomColor: var(--ak-dark-background-lighter);
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* wizards */
|
||||
.pf-c-wizard__nav {
|
||||
--pf-c-wizard__nav--BackgroundColor: var(--ak-dark-background-lighter);
|
||||
--pf-c-wizard__nav--lg--BorderRightColor: transparent;
|
||||
}
|
||||
.pf-c-wizard__main {
|
||||
background-color: var(--ak-dark-background-light-ish);
|
||||
}
|
||||
.pf-c-wizard__footer {
|
||||
--pf-c-wizard__footer--BackgroundColor: var(--ak-dark-background-light-ish);
|
||||
}
|
||||
.pf-c-wizard__toggle-num,
|
||||
.pf-c-wizard__nav-link::before {
|
||||
--pf-c-wizard__nav-link--before--BackgroundColor: transparent;
|
||||
}
|
||||
/* tree view */
|
||||
.pf-c-tree-view__node:focus {
|
||||
--pf-c-tree-view__node--focus--BackgroundColor: var(--ak-dark-background-light-ish);
|
||||
}
|
||||
.pf-c-tree-view__content:hover,
|
||||
.pf-c-tree-view__content:focus-within {
|
||||
--pf-c-tree-view__node--hover--BackgroundColor: var(--ak-dark-background-light-ish);
|
||||
}
|
||||
}
|
||||
|
||||
.pf-c-data-list__item {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
321
web/src/common/styles/theme-dark.css
Normal file
321
web/src/common/styles/theme-dark.css
Normal file
@ -0,0 +1,321 @@
|
||||
.ak-static-page h1 {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
body {
|
||||
background-color: var(--ak-dark-background) !important;
|
||||
}
|
||||
:root {
|
||||
--pf-global--Color--100: var(--ak-dark-foreground);
|
||||
--pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker);
|
||||
--pf-global--link--Color: var(--ak-dark-foreground-link);
|
||||
}
|
||||
.pf-c-radio {
|
||||
--pf-c-radio__label--Color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* Global page background colour */
|
||||
.pf-c-page {
|
||||
--pf-c-page--BackgroundColor: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-drawer__content {
|
||||
--pf-c-drawer__content--BackgroundColor: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-title {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-u-mb-xl {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* Header sections */
|
||||
.pf-c-page__main-section {
|
||||
--pf-c-page__main-section--BackgroundColor: var(--ak-dark-background);
|
||||
}
|
||||
.sidebar-trigger,
|
||||
.notification-trigger {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.pf-c-page__main-section.pf-m-light {
|
||||
background-color: transparent;
|
||||
}
|
||||
.pf-c-content {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* Card */
|
||||
.pf-c-card {
|
||||
--pf-c-card--BackgroundColor: var(--ak-dark-background-light);
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-card__title,
|
||||
.pf-c-card__body {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-toolbar {
|
||||
--pf-c-toolbar--BackgroundColor: var(--ak-dark-background-light);
|
||||
}
|
||||
.pf-c-pagination.pf-m-bottom {
|
||||
background-color: var(--ak-dark-background-light);
|
||||
}
|
||||
/* table */
|
||||
.pf-c-table {
|
||||
--pf-c-table--BackgroundColor: var(--ak-dark-background-light);
|
||||
--pf-c-table--BorderColor: var(--ak-dark-background-lighter);
|
||||
--pf-c-table--cell--Color: var(--ak-dark-foreground);
|
||||
--pf-c-table--tr--m-hoverable--hover--BackgroundColor: var(--ak-dark-background-light-ish);
|
||||
--pf-c-table--tr--m-hoverable--active--BackgroundColor: var(--ak-dark-background-lighter);
|
||||
}
|
||||
.pf-c-table__text {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-table__sort:not(.pf-m-selected) .pf-c-table__button .pf-c-table__text {
|
||||
color: var(--ak-dark-foreground) !important;
|
||||
}
|
||||
.pf-c-table__sort-indicator i {
|
||||
color: var(--ak-dark-foreground) !important;
|
||||
}
|
||||
.pf-c-table__expandable-row.pf-m-expanded {
|
||||
--pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--ak-dark-background-lighter);
|
||||
}
|
||||
/* tabs */
|
||||
.pf-c-tabs {
|
||||
background-color: transparent;
|
||||
}
|
||||
.pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__list::before {
|
||||
border-color: transparent;
|
||||
}
|
||||
.pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current:first-child .pf-c-tabs__link::before {
|
||||
border-color: transparent;
|
||||
}
|
||||
.pf-c-tabs__link::before {
|
||||
border-color: transparent;
|
||||
}
|
||||
.pf-c-tabs__item.pf-m-current {
|
||||
--pf-c-tabs__link--after--BorderColor: #fd4b2d;
|
||||
}
|
||||
.pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
|
||||
background-color: transparent;
|
||||
}
|
||||
/* table, on mobile */
|
||||
@media screen and (max-width: 1200px) {
|
||||
.pf-m-grid-xl.pf-c-table tbody:first-of-type {
|
||||
border-top-color: var(--ak-dark-background);
|
||||
}
|
||||
.pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) {
|
||||
border-bottom-color: var(--ak-dark-background);
|
||||
}
|
||||
}
|
||||
/* class for pagination text */
|
||||
.pf-c-options-menu__toggle {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* table icon used for expanding rows */
|
||||
.pf-c-table__toggle-icon {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* expandable elements */
|
||||
.pf-c-expandable-section__toggle-text {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-expandable-section__toggle-icon {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-expandable-section.pf-m-display-lg {
|
||||
background-color: var(--ak-dark-background-light-ish);
|
||||
}
|
||||
/* header for form group */
|
||||
.pf-c-form__field-group-header-title-text {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-form__field-group {
|
||||
border-bottom: 0;
|
||||
}
|
||||
/* inputs */
|
||||
optgroup,
|
||||
option {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
select[multiple] optgroup:checked,
|
||||
select[multiple] option:checked {
|
||||
color: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-input-group {
|
||||
--pf-c-input-group--BackgroundColor: transparent;
|
||||
}
|
||||
.pf-c-form-control {
|
||||
--pf-c-form-control--BorderTopColor: var(--ak-dark-background-lighter);
|
||||
--pf-c-form-control--BorderRightColor: var(--ak-dark-background-lighter);
|
||||
--pf-c-form-control--BorderLeftColor: var(--ak-dark-background-lighter);
|
||||
--pf-global--BackgroundColor--100: transparent;
|
||||
--pf-c-form-control--BackgroundColor: var(--ak-dark-background-light);
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-form-control:disabled {
|
||||
background-color: var(--ak-dark-background-light);
|
||||
}
|
||||
.pf-c-form-control[readonly] {
|
||||
background-color: var(--ak-dark-background-light);
|
||||
}
|
||||
.pf-c-switch__input:checked ~ .pf-c-switch__label {
|
||||
--pf-c-switch__input--checked__label--Color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* select toggle */
|
||||
.pf-c-select__toggle::before {
|
||||
--pf-c-select__toggle--before--BorderTopColor: var(--ak-dark-background-lighter);
|
||||
--pf-c-select__toggle--before--BorderRightColor: var(--ak-dark-background-lighter);
|
||||
--pf-c-select__toggle--before--BorderLeftColor: var(--ak-dark-background-lighter);
|
||||
}
|
||||
.pf-c-select__toggle.pf-m-typeahead {
|
||||
--pf-c-select__toggle--BackgroundColor: var(--ak-dark-background-light);
|
||||
}
|
||||
.pf-c-select__menu {
|
||||
--pf-c-select__menu--BackgroundColor: var(--ak-dark-background-light-ish);
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-select__menu-item {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-select__menu-wrapper:hover,
|
||||
.pf-c-select__menu-item:hover {
|
||||
--pf-c-select__menu-item--hover--BackgroundColor: var(--ak-dark-background-lighter);
|
||||
}
|
||||
.pf-c-select__menu-wrapper:focus-within,
|
||||
.pf-c-select__menu-wrapper.pf-m-focus,
|
||||
.pf-c-select__menu-item:focus,
|
||||
.pf-c-select__menu-item.pf-m-focus {
|
||||
--pf-c-select__menu-item--focus--BackgroundColor: var(--ak-dark-background-light-ish);
|
||||
}
|
||||
.pf-c-button.pf-m-plain:hover {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-button.pf-m-control {
|
||||
--pf-c-button--after--BorderColor: var(--ak-dark-background-lighter)
|
||||
var(--ak-dark-background-lighter) var(--pf-c-button--m-control--after--BorderBottomColor)
|
||||
var(--ak-dark-background-lighter);
|
||||
background-color: var(--ak-dark-background-light);
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-m-tertiary,
|
||||
.pf-c-button.pf-m-tertiary {
|
||||
--pf-c-button--after--BorderColor: var(--ak-dark-foreground-darker);
|
||||
color: var(--ak-dark-foreground-darker);
|
||||
}
|
||||
.pf-m-tertiary:hover,
|
||||
.pf-c-button.pf-m-tertiary:hover {
|
||||
--pf-c-button--after--BorderColor: var(--ak-dark-background-lighter);
|
||||
}
|
||||
.pf-c-form__label-text {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-check__label {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.form-help-text {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-dropdown__toggle::before {
|
||||
border-color: transparent;
|
||||
}
|
||||
.pf-c-dropdown__menu {
|
||||
--pf-c-dropdown__menu--BackgroundColor: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-dropdown__menu-item {
|
||||
--pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background);
|
||||
--pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-dropdown__menu-item:hover,
|
||||
.pf-c-dropdown__menu-item:focus {
|
||||
--pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background-light-ish);
|
||||
--pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-toggle-group__button {
|
||||
color: var(--ak-dark-foreground) !important;
|
||||
}
|
||||
.pf-c-toggle-group__button:not(.pf-m-selected) {
|
||||
background-color: var(--ak-dark-background-light) !important;
|
||||
}
|
||||
.pf-c-toggle-group__button.pf-m-selected {
|
||||
color: var(--ak-dark-foreground) !important;
|
||||
background-color: var(--pf-global--primary-color--100) !important;
|
||||
}
|
||||
/* inputs help text */
|
||||
.pf-c-form__helper-text:not(.pf-m-error) {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* modal */
|
||||
.pf-c-modal-box,
|
||||
.pf-c-modal-box__header,
|
||||
.pf-c-modal-box__footer,
|
||||
.pf-c-modal-box__body {
|
||||
background-color: var(--ak-dark-background);
|
||||
}
|
||||
/* sidebar */
|
||||
.pf-c-nav {
|
||||
background-color: var(--ak-dark-background-light);
|
||||
}
|
||||
/* flows */
|
||||
.pf-c-login__main {
|
||||
background-color: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-login__main-body,
|
||||
.pf-c-login__main-header,
|
||||
.pf-c-login__main-header-desc {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-login__main-footer-links-item img {
|
||||
filter: invert(1);
|
||||
}
|
||||
.pf-c-login__main-footer-band {
|
||||
background-color: var(--ak-dark-background-lighter);
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.form-control-static {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* notifications */
|
||||
.pf-c-drawer__panel {
|
||||
background-color: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-notification-drawer {
|
||||
--pf-c-notification-drawer--BackgroundColor: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-notification-drawer__header {
|
||||
background-color: var(--ak-dark-background-lighter);
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
.pf-c-notification-drawer__list-item {
|
||||
background-color: var(--ak-dark-background-light-ish);
|
||||
color: var(--ak-dark-foreground);
|
||||
--pf-c-notification-drawer__list-item--BorderBottomColor: var(
|
||||
--ak-dark-background-lighter
|
||||
) !important;
|
||||
}
|
||||
/* data list */
|
||||
.pf-c-data-list {
|
||||
border-top-color: var(--ak-dark-background-lighter);
|
||||
}
|
||||
.pf-c-data-list__item {
|
||||
--pf-c-data-list__item--BackgroundColor: transparent;
|
||||
--pf-c-data-list__item--BorderBottomColor: var(--ak-dark-background-lighter);
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
/* wizards */
|
||||
.pf-c-wizard__nav {
|
||||
--pf-c-wizard__nav--BackgroundColor: var(--ak-dark-background-lighter);
|
||||
--pf-c-wizard__nav--lg--BorderRightColor: transparent;
|
||||
}
|
||||
.pf-c-wizard__main {
|
||||
background-color: var(--ak-dark-background-light-ish);
|
||||
}
|
||||
.pf-c-wizard__footer {
|
||||
--pf-c-wizard__footer--BackgroundColor: var(--ak-dark-background-light-ish);
|
||||
}
|
||||
.pf-c-wizard__toggle-num,
|
||||
.pf-c-wizard__nav-link::before {
|
||||
--pf-c-wizard__nav-link--before--BackgroundColor: transparent;
|
||||
}
|
||||
/* tree view */
|
||||
.pf-c-tree-view__node:focus {
|
||||
--pf-c-tree-view__node--focus--BackgroundColor: var(--ak-dark-background-light-ish);
|
||||
}
|
||||
.pf-c-tree-view__content:hover,
|
||||
.pf-c-tree-view__content:focus-within {
|
||||
--pf-c-tree-view__node--hover--BackgroundColor: var(--ak-dark-background-light-ish);
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
import { currentInterface } from "@goauthentik/common/sentry";
|
||||
import { me } from "@goauthentik/common/users";
|
||||
|
||||
import { UserSelf } from "@goauthentik/api";
|
||||
import { UiThemeEnum, UserSelf } from "@goauthentik/api";
|
||||
|
||||
export enum UserDisplay {
|
||||
username = "username",
|
||||
@ -32,6 +32,7 @@ export interface UIConfig {
|
||||
userDisplay: UserDisplay;
|
||||
};
|
||||
theme: {
|
||||
base: UiThemeEnum;
|
||||
background: string;
|
||||
cardBackground: string;
|
||||
};
|
||||
@ -59,6 +60,7 @@ export class DefaultUIConfig implements UIConfig {
|
||||
userDisplay: UserDisplay.username,
|
||||
};
|
||||
theme = {
|
||||
base: UiThemeEnum.Automatic,
|
||||
background: "",
|
||||
cardBackground: "",
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user