Skip to content

Instantly share code, notes, and snippets.

@manne
Created November 28, 2018 12:47
Show Gist options
  • Save manne/5977d70e98cd7e37aed59688d1204c25 to your computer and use it in GitHub Desktop.
Save manne/5977d70e98cd7e37aed59688d1204c25 to your computer and use it in GitHub Desktop.
Defined custom properties of Azure DevOps Dark Theme
: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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment