Defined custom properties of Azure DevOps Dark Theme

azure-devops-themes-custom-properties.css

:root {
    --palette-primary-shade-30: 184, 216, 255;
    --palette-primary-shade-20: 152, 198, 255;
    --palette-primary-shade-10: 121, 181, 255;
    --palette-primary: 0, 120, 212;
    --palette-primary-tint-10: 82, 143, 217;
    --palette-primary-tint-20: 73, 126, 191;
    --palette-primary-tint-30: 55, 96, 145;
    --palette-primary-tint-40: 34, 59, 89;
    --palette-neutral-100: 255, 255, 255;
    --palette-neutral-80: 225, 223, 221;
    --palette-neutral-70: 190, 187, 184;
    --palette-neutral-60: 161, 159, 157;
    --palette-neutral-30: 121, 119, 117;
    --palette-neutral-20: 96, 94, 92;
    --palette-neutral-10: 72, 70, 68;
    --palette-neutral-8: 59, 58, 57;
    --palette-neutral-6: 50, 49, 48;
    --palette-neutral-4: 41, 40, 39;
    --palette-neutral-2: 37, 36, 35;
    --palette-neutral-0: 32, 31, 30;
    --palette-accent1-light: 68, 39, 38;
    --palette-accent1: 241, 112, 123;
    --palette-accent1-dark: 241, 112, 123;
    --palette-accent2-light: 57, 61, 27;
    --palette-accent2: 146, 195, 83;
    --palette-accent2-dark: 146, 195, 83;
    --palette-accent3-light: 67, 53, 25;
    --palette-accent3: 253, 185, 19;
    --palette-accent3-dark: 253, 185, 19;
    --background-color: rgba(var(--palette-neutral-0), 1);
    --communication-foreground: rgba(97, 168, 255);
    --communication-background: rgba(var(--palette-primary), 1);
    --text-primary-color: rgba(var(--palette-neutral-100), .95);
    --text-secondary-color: rgba(var(--palette-neutral-100), .80);
    --text-disabled-color: rgba(var(--palette-neutral-100), .5);
    --text-on-communication-background: var(--text-primary-color);
    --border-subtle-color: rgba(var(--palette-neutral-100), .08);
    --callout-background-color: rgba(var(--palette-neutral-6), 1);
    --callout-shadow-color: rgba(0, 0, 0, .4);
    --callout-shadow-secondary-color: rgba(0, 0, 0, .32);
    --focus-pulse-max-color: rgba(var(--palette-primary), 0.35);
    --focus-pulse-min-color: rgba(var(--palette-primary), 0.15);
    --third-party-icon-filter: invert(100%);
    --component-grid-row-hover-color: rgba(var(--palette-neutral-100), 0.04);
    --component-grid-selected-row-color: rgba(var(--palette-primary-tint-40), 1);
    --component-grid-focus-border-color: rgba(var(--palette-primary), 1);
    --component-grid-link-selected-row-color: rgba(var(--palette-primary), 1);
    --component-grid-link-hover-color: rgba(var(--palette-primary), 1);
    --component-grid-action-hover-color: rgba(var(--palette-neutral-8), 1);
    --component-grid-action-selected-cell-hover-color: rgba(var(--palette-primary-tint-30), 0.4);
    --component-grid-cell-bottom-border-color: rgba(var(--palette-neutral-8), 1);
    --icon-folder-color: #dcb67a;
    --component-errorBoundary-border-color: rgba(var(--palette-accent1), 1);
    --component-errorBoundary-background-color: rgba(var(--palette-accent1-light), 1);
    --nav-header-background: rgba(var(--palette-neutral-4), 1);
    --nav-header-item-hover-background: rgba(var(--palette-neutral-100), 0.04);
    --nav-header-active-item-background: rgba(var(--palette-neutral-100), 0.08);
    --nav-header-text-primary-color: var(--text-primary-color);
    --nav-header-text-secondary-color: var(--text-secondary-color);
    --nav-header-product-color: rgba(var(--palette-primary), 1);
    --nav-header-breadcrumb-text-opacity: .8;
    --nav-header-breadcrumb-separator-opacity: .55;
    --nav-vertical-background-color: rgba(var(--palette-neutral-100), 0.08);
    --nav-vertical-item-hover-background: rgba(var(--palette-neutral-100), 0.04);
    --nav-vertical-active-group-background: rgba(var(--palette-neutral-100), 0.06);
    --nav-vertical-active-item-background: rgba(var(--palette-neutral-100), 0.12);
    --nav-vertical-text-primary-color: var(--text-primary-color);
    --nav-vertical-text-secondary-color: var(--text-secondary-color);
    --mainMenuBackgroundColor: rgba(var(--palette-neutral-80), 1);
    --mainMenuBackgroundHoverColor: rgba(var(--palette-neutral-100), 1);
    --tfsSelectorBackgroundColor: rgba(var(--palette-primary-shade-20), 1);
    --headerBottomBackgroundColor: rgba(var(--palette-neutral-4), 1);
    --headerBottomDisplayedTextColor: rgba(var(--palette-primary-shade-10), 1);
    --headerBottomLinkHoverColor: rgba(var(--palette-neutral-20), 1);
    --headerBottomTextColor: rgba(var(--palette-neutral-100), 1);
    --headerTopBackgroundColor: rgba(var(--palette-primary), 1);
    --headerTopLinkHoverColor: rgba(var(--palette-primary-shade-10), 1);
    --headerTopTextColor: rgba(var(--palette-neutral-0), 1);
    --searchBoxBackgroundColor: rgba(var(--palette-primary-shade-20), 1);
    --searchBoxPlaceholderTextColor: rgba(var(--palette-primary-tint-20), 1);
    --searchBoxTextColor: rgba(var(--palette-neutral-0), 1);
    --component-menu-selected-item-background: rgba(var(--palette-neutral-100), 0.04);
}