@atlassian/aui/dist/aui/aui-prototyping-darkmode.css

Atlassian User Interface library

body.aui-theme-dark  {
  color-scheme: dark;
  --aui-shadow1: rgba(9, 10, 11, 0.48);
  --aui-shadow2: rgba(9, 10, 11, 0.63);
  --aui-blanket: rgba(9, 10, 11, 0.73);
  --aui-body-text: #C7CED6;
  --aui-lesser-body-text: #65758B;
  --aui-lesser-header-text: #65758B;
  --aui-body-background: #202328;
  --aui-page-background: #202328;
  --aui-page-border: #202328;
  --aui-border: #2F353D;
  --aui-border-strong: #5A697C;
  --aui-focus: #4C9AFF;
  --aui-link-color: #4C9AFF;
  --aui-link-hover-color: #B3D4FF;
  --aui-link-active-color: #2684FF;
  --aui-link-visited-color: #998DD9;
  --aui-item-bg: transparent;
  --aui-item-text: #A3AEBD;
  --aui-item-focus-bg: rgba(101, 117, 139, 0.3);
  --aui-item-focus-text: #A3AEBD;
  --aui-item-active-bg: #B3D4FF;
  --aui-item-active-text: #0052CC;
  --aui-item-selected-bg: var(--aui-item-focus-bg);
  --aui-item-selected-text: var(--aui-item-focus-text);
  --aui-item-disabled-bg: transparent;
  --aui-item-disabled-text: #5A697C;
  --aui-tooltip-bg-color: rgba(163, 174, 189, 0.9);
  --aui-tooltip-border-color: rgba(163, 174, 189, 0.9);
  --aui-tooltip-content-text-color: #262B31;
  --aui-tooltip-title-text-color: #090A0B;
  --aui-help-color: #6554C0;
  --aui-badge-bg-color: #3F4855;
  --aui-badge-text-color: #D9DDE3;
  --aui-badge-primary-bg-color: #4C9AFF;
  --aui-badge-primary-text-color: #090A0B;
  --aui-badge-added-bg-color: rgba(0, 102, 68, 0.33);
  --aui-badge-added-text-color: #ABF5D1;
  --aui-badge-removed-bg-color: rgba(191, 38, 0, 0.33);
  --aui-badge-removed-text-color: #FFBDAD;
  --aui-badge-important-bg-color: #FF5630;
  --aui-badge-important-text-color: #090A0B;
  --aui-lozenge-subtle-bg-color: #2F353D;
  --aui-lozenge-subtle-text-color: #A3AEBD;
  --aui-lozenge-success-bg-color: #57D9A3;
  --aui-lozenge-success-text-color: #090A0B;
  --aui-lozenge-success-subtle-bg-color: rgba(0, 102, 68, 0.33);
  --aui-lozenge-success-subtle-text-color: #ABF5D1;
  --aui-lozenge-current-bg-color: #2684FF;
  --aui-lozenge-current-text-color: #090A0B;
  --aui-lozenge-current-subtle-bg-color: rgba(7, 71, 166, 0.33);
  --aui-lozenge-current-subtle-text-color: #B3D4FF;
  --aui-lozenge-moved-bg-color: #FFAB00;
  --aui-lozenge-moved-text-color: #090A0B;
  --aui-lozenge-moved-subtle-bg-color: rgba(255, 139, 0, 0.22);
  --aui-lozenge-moved-subtle-text-color: #FFF0B3;
  --aui-lozenge-error-bg-color: #FF5630;
  --aui-lozenge-error-text-color: #090A0B;
  --aui-lozenge-error-subtle-bg-color: rgba(191, 38, 0, 0.33);
  --aui-lozenge-error-subtle-text-color: #FFBDAD;
  --aui-lozenge-new-bg-color: #8777D9;
  --aui-lozenge-new-text-color: #090A0B;
  --aui-lozenge-new-subtle-bg-color: rgba(64, 50, 148, 0.33);
  --aui-lozenge-new-subtle-text-color: #C0B6F2;
  --aui-message-info-bg-color: #0747A6;
  --aui-message-info-icon-color: initial;
  --aui-message-info-text-color: #E8EAEE;
  --aui-message-success-bg-color: #006644;
  --aui-message-success-icon-color: initial;
  --aui-message-success-text-color: #E8EAEE;
  --aui-message-warning-bg-color: #FF991F;
  --aui-message-warning-icon-color: initial;
  --aui-message-warning-text-color: #17191C;
  --aui-message-error-bg-color: #BF2600;
  --aui-message-error-icon-color: initial;
  --aui-message-error-text-color: #E8EAEE;
  --aui-message-change-bg-color: #5243AA;
  --aui-message-change-icon-color: initial;
  --aui-message-change-text-color: #E8EAEE;
  --aui-banner-error-bg-color: #DE350B;
  --aui-banner-error-text-color: #F6F7F8;
  --aui-flag-bg-color: var(--aui-dropdown-bg-color);
  --aui-flag-info-color: #2684FF;
  --aui-flag-success-color: #36B37E;
  --aui-flag-warning-color: #FFAB00;
  --aui-flag-error-color: #FF5630;
  --aui-button-default-bg-color: #373F49;
  --aui-button-default-hover-bg-color: #515F70;
  --aui-button-default-text-color: #C7CED6;
  --aui-button-default-active-bg-color: #B3D4FF;
  --aui-button-default-selected-bg-color: #8392A5;
  --aui-button-default-disabled-bg-color: #3F4855;
  --aui-button-default-disabled-text-color: #202328;
  --aui-button-primary-bg-color: #4C9AFF;
  --aui-button-primary-text-color: #202328;
  --aui-button-primary-icon-color: #202328;
  --aui-button-primary-hover-bg-color: #B3D4FF;
  --aui-button-primary-active-bg-color: #2684FF;
  --aui-button-primary-active-text-color: #090A0B;
  --aui-button-primary-disabled-bg-color: var(--aui-button-default-disabled-bg-color);
  --aui-button-primary-disabled-text-color: var(--aui-button-default-disabled-text-color);
  --aui-button-light-bg-color: transparent;
  --aui-button-subtle-text-color: #A3AEBD;
  --aui-label-text-color: #C7CED6;
  --aui-label-link-color: #C7CED6;
  --aui-label-bg-color: #3F4855;
  --aui-label-hover-bg-color: #475262;
  --aui-label-close-hover-bg-color: #DE350B;
  --aui-label-close-hover-text-color: #202328;
  --aui-form-placeholder-text-color: #65758B;
  --aui-form-placeholder-disabled-text-color: #3F4855;
  --aui-form-label-text-color: #8392A5;
  --aui-form-error-text-color: #BF2600;
  --aui-form-description-text-color: #8392A5;
  --aui-form-disabled-field-bg-color: #202328;
  --aui-form-disabled-field-text-color: #475262;
  --aui-form-disabled-field-label-color: #475262;
  --aui-form-field-border-color: #475262;
  --aui-form-field-hover-border-color: #475262;
  --aui-form-field-default-text-color: #C7CED6;
  --aui-form-field-default-bg-color: #262B31;
  --aui-form-field-hover-text-color: var(--aui-form-field-default-text-color);
  --aui-form-field-hover-bg-color: #202328;
  --aui-form-field-focus-bg-color: #090A0B;
  --aui-form-select-bg-color: #3F4855;
  --aui-form-select-border-color: #3F4855;
  --aui-form-select-hover-bg-color: #262B31;
  --aui-form-checkbox-radio-hover-bg-color: #0065FF;
  --aui-form-checkbox-radio-active-bg-color: #4C9AFF;
  --aui-form-optgroup-text-color: #5A697C;
  --aui-form-optgroup-bg-color: #17191C;
  --aui-form-option-bg-color: #090A0B;
  --aui-form-pre-bg-color: #17191C;
  --aui-form-field-autofilled-bg-color: #403294;
  --aui-form-field-autofilled-border-color: #998DD9;
  --aui-form-field-autofilled-text-color: #C0B6F2;
  --aui-form-glyph-disabled-icon-color: #65758B;
  --aui-form-glyph-disabled-fill-color: #3F4855;
  --aui-form-glyph-icon-color: #D9DDE3;
  --aui-form-glyph-fill-color: #0052CC;
  --aui-form-checkbox-active-bg-color: #DEEBFF;
  --aui-form-checkbox-active-border-color: #DEEBFF;
  --aui-form-checkbox-active-icon-color: #2684FF;
  --aui-form-radio-unchecked-bg-color: #101213;
  --aui-form-radio-unchecked-border-color: #3F4855;
  --aui-form-radio-unchecked-hover-bg-color: #202328;
  --aui-form-radio-unchecked-hover-border-color: #3F4855;
  --aui-toggle-default-bg-color: #515F70;
  --aui-toggle-default-bg-hover-color: #5A697C;
  --aui-toggle-button-color: #202328;
  --aui-toggle-on-color: #36B37E;
  --aui-toggle-on-hover-color: #57D9A3;
  --aui-toggle-disabled-overlay-color: rgba(32, 35, 40, 0.5);
  --aui-toggle-tick-color: #202328;
  --aui-toggle-cross-color: #202328;
  --aui-form-notification-info-color: #475262;
  --aui-form-notification-error-color: #FF5630;
  --aui-form-notification-success-color: #36B37E;
  --aui-progressbar-color: #C7CED6;
  --aui-progressbar-track-color: rgba(9, 10, 11, 0.85);
  --aui-spinner-color: #C7CED6;
  --aui-nav-pagination-text-color: #C7CED6;
  --aui-nav-pagination-active-text-color: #475262;
  --aui-appheader-bg-color: #0747A6;
  --aui-appheader-text-color: #DEEBFF;
  --aui-appheader-item-focus-bg-color: rgba(9, 10, 11, 0.36);
  --aui-appheader-item-focus-text-color: #DEEBFF;
  --aui-appheader-item-active-bg-color: rgba(9, 10, 11, 0.63);
  --aui-appheader-item-active-text-color: #DEEBFF;
  --aui-appheader-quicksearch-bg-color: rgba(9, 10, 11, 0.63);
  --aui-appheader-quicksearch-border-color: transparent;
  --aui-appheader-quicksearch-text-color: #DEEBFF;
  --aui-appheader-quicksearch-focus-bg-color: var(--aui-appheader-quicksearch-bg-color);
  --aui-appheader-quicksearch-focus-text-color: #DEEBFF;
  --aui-sidebar-icon-color: #8392A5;
  --aui-sidebar-toggle-icon-color: #8392A5;
  --aui-sidebar-bg-color: #17191C;
  --aui-sidebar-dropdown-arrow-color: #8392A5;
  --aui-sidebar-tooltip-bg-color: rgba(9, 10, 11, 0.97);
  --aui-sidebar-badge-bg-color: rgba(246, 247, 248, 0.19);
  --aui-sidebar-badge-text-color: inherit;
  --aui-tabs-tab-border-color: #373F49;
  --aui-tabs-tab-text-color: #8392A5;
  --aui-tabs-tab-hover-text-color: #4C9AFF;
  --aui-tabs-tab-active-border-color: #4C9AFF;
  --aui-tabs-tab-active-text-color: #4C9AFF;
  --aui-progress-tracker-step-border-color: #17191C;
  --aui-progress-tracker-container-color: #17191C;
  --aui-progress-tracker-current-step-color: #0065FF;
  --aui-progress-tracker-current-step-text-color: var(--aui-progress-tracker-visited-step-text-color);
  --aui-progress-tracker-visited-step-text-color: #C7CED6;
  --aui-progress-tracker-visited-step-hover-text-color: var(--aui-link-hover-color);
  --aui-progress-tracker-visited-step-active-text-color: var(--aui-link-active-color);
  --aui-progress-tracker-future-step-color: #3F4855;
  --aui-progress-tracker-future-step-text-color: #718298;
  --aui-table-row-bg-color: transparent;
  --aui-table-row-text-color: #C7CED6;
  --aui-table-header-bg-color: transparent;
  --aui-table-heading-text-color: #8392A5;
  --aui-table-border-color: #2F353D;
  --aui-table-caption-bg-color: #17191C;
  --aui-table-caption-text-color: #5A697C;
  --aui-table-list-row-hover-color: #262B31;
  --aui-table-list-row-subtle-color: #373F49;
  --aui-table-sortable-hover-bg-color: rgba(9, 10, 11, 0.18);
  --aui-table-sortable-active-bg-color: #DEEBFF;
  --aui-table-sortable-active-border-color: #2684FF;
  --aui-table-sortable-active-text-color: #2684FF;
  --aui-table-sortable-selected-bg-color: transparent;
  --aui-table-sortable-selected-border-color: #8392A5;
  --aui-table-sortable-selected-text-color: #C7CED6;
  --aui-restfultable-row-focused-border-color: #373F49;
  --aui-restfultable-row-create-border-color: #262B31;
  --aui-restfultable-row-editable-hover-bg-color: var(--aui-form-field-hover-bg-color);
  --aui-restfultable-error-text-color: var(--aui-form-notification-error-color);
  --aui-restfultable-header-row-bg-color: #090A0B;
  --aui-restfultable-header-row-text-color: #65758B;
  --aui-restfultable-row-moving-bg-color: #17191C;
  --aui-restfultable-editable-em-text-color: #475262;
  --aui-restfultable-row-active-bg-color: #17191C;
  --aui-restfultable-row-hover-bg-color: #17191C;
  --aui-dropdown-bg-color: #2F353D;
  --aui-dropdown-border-color: #3F4855;
  --aui-select2-placeholder-text-color: #5A697C;
  --aui-select2-chosen-bg-color: #202328;
  --aui-select2-chosen-text-color: #C7CED6;
  --aui-select2-chosen-hover-bg-color: #475262;
  --aui-select2-chosen-hover-text-color: #C7CED6;
  --aui-select2-active-chosen-bg-color: #475262;
  --aui-select2-active-chosen-text-color: #C7CED6;
  --aui-select2-field-default-bg-color: var(--aui-form-select-bg-color);
  --aui-select2-field-border-color: var(--aui-form-select-border-color);
  --aui-select2-field-hover-bg-color: var(--aui-form-select-hover-bg-color);
  --aui-select2-drop-bg-color: var(--aui-dropdown-bg-color);
  --aui-dialog-bg-color: #262B31;
  --aui-dialog-border-color: #262B31;
  --aui-dialog-header-bg-color: var(--aui-dialog-bg-color);
  --aui-dialog-header-warning-bg-color: #FF7452;
  --aui-dialog-header-warning-text-color: #090A0B;
  --aui-dialog-button-hover-border-color: #475262;
  --aui-dialog-footer-hint-text-color: #8392A5;
  --aui-inline-dialog-bg-color: var(--aui-dropdown-bg-color);
  --aui-inline-dialog-border-color: var(--aui-dropdown-border-color);
  --aui-datepicker-panel-bg-color: #2F353D;
  --aui-datepicker-panel-divider-color: #2F353D;
  --aui-datepicker-heading-bg-color: #2F353D;
  --aui-datepicker-heading-text-color: #A3AEBD;
  --aui-datepicker-heading-weekdays-text-color: #718298;
  --aui-datepicker-option-bg-color: transparent;
  --aui-datepicker-option-text-color: #A3AEBD;
  --aui-datepicker-option-focus-bg-color: #3F4855;
  --aui-datepicker-option-focus-text-color: #A3AEBD;
  --aui-datepicker-option-selected-bg-color: #090A0B;
  --aui-datepicker-option-selected-text-color: #2684FF;
  --aui-datepicker-option-unselectable-bg-color: transparent;
  --aui-datepicker-option-unselectable-text-color: #5A697C;
  --aui-datepicker-disabled-text-color: #5A697C;
  --aui-datepicker-hint-text-color: #8392A5;
}