Passbolt - Black Midgar Theme

colors_custom.less

/* default */
/* background */
@default-background: #000000;
/* borders */
@default-border: #202020;
/* text */
@default-text-color: #FFFFFF;

/* text */
@text-info-color: #CACACA;
@text-light-color: #8B8B89;
@text-lighter-color: #8B8B89;
@text-lightest-color: #444442; // not WCAG on background default, for decoration only
@text-focus-color: #2894DF;
@text-warning-color: #DD6A00;
@text-error-color: #D40101;
@text-secret-hover-color: #D40101;
@text-error-api-color: #202020;
@text-notification-color: #000000;

/* header */
@header-main-menu-background: #000000;
@header-main-menu-text-color: #EBEBE9;
@header-main-menu-hover-text-color: #FFFFFF;
@header-workspace-background: #000000;

/* footer */
@footer-background: #000000;

/* authentication */
/* background behind card setup/recover/login */
@authentication-background: #101010;
/* text */
@authentication-title-text-color: #CACACA;

/* attention required */
@attention-required-border: #DD6A00;

/* quickaccess */
@quickaccess-header-background: #000000;
@quickaccess-footer-background: #000000;
@quickaccess-back-link-background: #2C2C2C;
@quickaccess-list-title-background: #2C2C2C;
@quickaccess-list-title-hover-background: #101010;
@quickaccess-list-title-active-background: #404040;
@quickaccess-border: #101010;

/* logos */
@logourl: url('@{images}/logo/logo_white.svg');
@passbolt-icon-without-badge: url('@{images}/logo/icon-without-badge.svg');
@passbolt-icon-badge-1: url('@{images}/logo/icon-badge-1.svg');
@passbolt-icon-badge-2: url('@{images}/logo/icon-badge-2.svg');
@passbolt-icon-badge-3: url('@{images}/logo/icon-badge-3.svg');
@passbolt-icon-badge-4: url('@{images}/logo/icon-badge-4.svg');
@passbolt-icon-badge-5: url('@{images}/logo/icon-badge-5.svg');
@passbolt-icon-badge-5-plus: url('@{images}/logo/icon-badge-5+.svg');
@passbolt-icon-inactive: url('@{images}/logo/icon-inactive.svg');

/* Inform menu */
@inform-menu-hover-background: #101010;
@inform-menu-active-background: #404040;
@inform-menu-border: #101010;

/* dialog */
@dialog-background: #000000;
@dialog-overlay-background: rgba(22, 22, 22, 0.8);
@dialog-border: #181818;
@dialog-box-shadow-color: rgb(0, 0, 0);
@dialog-divider-border: #101010;
/* share dialog */
@dialog-permission-updated-background: #5C564C;
@dialog-permission-border: #000000;
/* folder move dialog */
@dialog-folder-move-selected-background: #353535;
@dialog-folder-move-border: #000000;
@dialog-folder-move-selected-border: #353535;
/* delete user/group conflict dialog */
@dialog-delete-conflict-title-background: #353535;

/* buttons */
@button-background: #000000;
@button-active-background: #101010;
@button-border: #202020;
@button-focus-border: #2894DF;

@button-icon-background: #424242;
@button-icon-active-background: #101010;
@button-icon-border: #1E1E1E;

@button-primary-background: #2894DF;
@button-primary-border: #2894DF;
@button-primary-color: #FFFFFF;

@button-warning-background: #D40101;
@button-warning-border: #D40101;
@button-warning-color: #FFFFFF;

@button-transparent-background: rgba(#000000, .1);
@button-transparent-border: rgba(#ffffff, .1);

/* link */
@link-highlight-background: #2894DF;
@link-border: #515151;
@link-hover-border: #2894DF;

/* tooltip */
@tooltip-background: #151515;
@tooltip-text-color: #FFFFFF;

/* inputs */
@input-background: #3b3b3b;
@input-disabled-background: #444442;
@input-infield-background: #353535;
@input-border: #000000;
@input-infield-border: #202020;
@input-focus-border: #2894DF;

/* checkbox */
@input-checkbox-background: #202020;
@input-checkbox-disabled-background: #000000;
@input-checkbox-disabled-image-background: #303030;
@input-checkbox-border: #7A7A7A;
@input-checkbox-disabled-border: #292929;
@input-checkbox-focus-border: #2894DF;

/* controls */
@controls-check:url('@{images}/controls/check_white.svg');

/* radio */
@input-radio-background: #202020;
@input-radio-dot-background: #2a9ceb;
@input-radio-disabled-background: #000000;
@input-radio-dot-disabled-background: #292929;
@input-radio-border: #7A7A7A;
@input-radio-disabled-border: #000000;
@input-radio-focus-border: #2894DF;

/* radio list */
@input-radio-list-background: #353535;
@input-radio-list-border: #202020;
@input-radio-list-hover-border: #202020;
@input-radio-list-focus-border: #2894DF;

/* toggle */
@input-toggle-background: #808080;
@input-toggle-focus-background: #2894DF;
@input-toggle-dot-background: #FFFFFF;
@input-toggle-checked-background: #009900;
@input-toggle-focus-border: #2894DF;

/* range */
@input-range-background: #424242;
@input-range-dot-background: #7A7A7A;
@input-range-dot-border: #424242;

/* select */
@select-background: #353535;
@select-setup-extension-background: #202020;
@select-hover-background: #404040;
@select-focus-background: #2894DF;
@select-focus-text-color: #FFFFFF;
@select-border: #202020;
@select-focus-border: #2894DF;

/* complexity */
@complexity-text-color: #FFFFFF;
@complexity-bar-default-background: #424242;
@complexity-bar-gradient-background: linear-gradient(to right, #A40000, #FFA724, #0EAA00);

/* hints */
@hint-success-color: #009900;
@hint-warning-color: #DD6A00;
@hint-error-color: #D40101;

/* drag items */
@drag-background: #808080;
@drag-number-background: #D40101;
@drag-text-color: #FFFFFF;

/* announcement */
@announcement-background: #fef0bf;
@announcement-text-color: #000000;

/* chips */
@chips-text-color: #FFFFFF;
@chips-beta-background: #DD6A00;
@chips-new-background: #2894DF;

/* autocomplete */
@autocomplete-background: #000000;
@autocomplete-hover-background: #202020;
@autocomplete-selected-background: #353535;
@autocomplete-border: #000000;

/* progress bar */
@progress-bar-default-background: #424242;
@progress-bar-background: #D40101;

/* workspace */
@workspace-left-background: #000000;
@workspace-middle-background: #000000;
@workspace-title-border: #636363;

/* left workspace menu */
@workspace-left-menu-hover-background: #404040;
@workspace-left-menu-focus-border: #2894DF;
@workspace-left-menu-focus-background: #2894DF;
@workspace-left-menu-focus-text-color: #FFFFFF;

/* dropdown menus */
@dropdown-background: #353535;
@dropdown-profile-background: #1C1C1C;
@dropdown-focus-background: #2894DF;
@dropdown-focus-text-color: #FFFFFF;
@dropdown-item-hover-background: #404040;

/* grid */
@tableview-background: #000000;
@tableview-even-background: #0f0f0f;
@tableview-hover-background: #101010;
@tableview-selected-background: #404040;
@tableview-header-background: #202020;
@tableview-shadow-color: #616161;
@breadcrumb-background: #000000;

/* info panel */
@info-panel-background: #000000;
@info-panel-border: #000000;
@info-panel-header-icon-background: #000000;
@info-panel-header-icon-color: #7C7C7C;
@info-panel-header-subtitle-text-color: #B1B1B1;
@info-panel-section-header-background: #000000;
@info-panel-section-content-background: #232323;
@info-panel-section-notice-background: #DDEBF8;
@info-panel-section-border: #202020;

/* comment */
@comment-background: #1F1F1F;

/* tags */
@tag-text-color: #DDEBF8;
@tag-border: #B8D0FD;
@tag-background: rgba(42,156,235,0.1);
@tag-hover-text-color: #2a9ceb;
@tag-hover-border: #2a9ceb;
@tag-hover-background: #303030;
@tag-editor-focus-border: #2894DF;

/* notice */
@notice-background: #202020;

/* tables */
@table-background: #000000;
@table-warning-background: #fef0bf;
@table-error-background: #FFA6A6;
@table-border: #202020;
@table-row-even-background: #424242;

/* tabs */
@tab-selected-background: #202020;
@tab-unselected-background: #101010;
@tab-border: #101010;

/* mfa */
@mfa-background: #444442;
@mfa-border: #444442;
@mfa-provider-border: #000000;
@mfa-hint-trusted-device-color: #009900;

/* feedback card */
@feedback-card-border: #000000;

/* account recovery */
@account-recovery-card-background: #202020;

/* messages */
@message-error-text-color: #000000;
@message-error-background: #FFA6A6;
@message-success-text-color: #000000;
@message-success-background: #EDF7EB;
@message-notice-text-color: #000000;
@message-notice-background: #DDEBF8;
@message-warning-text-color: #000000;
@message-warning-background: #FFDBA6;
@message-link-border: #000000;

/* default icon svg fill */
@icon-color: #FFFFFF;
@icon-background-color: #3B3B3B;
@icon-primary-color: #FFFFFF;
@icon-primary-background-color: #3B3B3B;
@icon-warning-color: #FFFFFF;
@icon-warning-background-color: #3B3B3B;

/* favorite icon fill */
@icon-favorite-color: #D40101;
@icon-unfavorite-color: #696969;

/* exclamation icon fill */
@icon-exclamation-required-color: #DD6A00;
@icon-exclamation-default-color: #696969;
@icon-exclamation-color: #FFFFFF;

/* spinner icon fill */
@icon-spinner-color: #FFFFFF;
@icon-spinner-background: #FFFFFF;
@icon-spinner-primary-color: #FFFFFF;
@icon-spinner-primary-background: #FFFFFF;
@icon-spinner-warning-color: #FFFFFF;
@icon-spinner-warning-background: #FFFFFF;

/* failed icon fill */
@icon-failed-color: #D40101;

/* success icon fill */
@icon-success-color: #009900;

/* box shadows */
@shadow-opacity-hover-black: 0.5;
@shadow-opacity-hover-white: 0.25;
@shadow-opacity-active-white: 0.25;
@shadow-opacity-active-black: 0.5;
@shadow-opacity-dropdown: 0.5;
@shadow-opacity-select: 0.5;
@shadow-opacity-info-panel: 0.75;
@shadow-focus-color: #2a9ceb;
@shadow-drag-color: #808080;

/* success */
@success-1: hsl(68,100%,30%);
@success-2: hsl(45,100%,35%);

@warning-1: hsl(18,80%,54%);
@warning-2: hsl(18,80%,64%);
@warning-3: hsl(18,80%,74%);

@warning-4: hsl(18,80%,44%);

@alert-1: hsl(1,71%,52%);
@alert-2: hsl(1,71%,62%);
@alert-3: hsl(1,71%,72%);

/* user card */
@usercard-created-background: @success-1;
@usercard-updated-background: @warning-1;
@usercard-removed-background: @alert-1;