SPFx Theme Color Values

"theme": {
    "palette": {
      "themeDarker": "#004578",
      "themeDark": "#005a9e",
      "themeDarkAlt": "#106ebe",
      "themePrimary": "#0078d4",
      "themeSecondary": "#2b88d8",
      "themeTertiary": "#71afe5",
      "themeLight": "#c7e0f4",
      "themeLighter": "#deecf9",
      "themeLighterAlt": "#eff6fc",
      "black": "#000000",
      "blackTranslucent40": "rgba(0,0,0,.4)",
      "neutralDark": "#201f1e",
      "neutralPrimary": "#323130",
      "neutralPrimaryAlt": "#3b3a39",
      "neutralSecondary": "#605e5c",
      "neutralSecondaryAlt": "#8a8886",
      "neutralTertiary": "#a19f9d",
      "neutralTertiaryAlt": "#c8c6c4",
      "neutralQuaternary": "#d2d0ce",
      "neutralQuaternaryAlt": "#e1dfdd",
      "neutralLight": "#edebe9",
      "neutralLighter": "#f3f2f1",
      "neutralLighterAlt": "#faf9f8",
      "accent": "#8764b8",
      "white": "#ffffff",
      "whiteTranslucent40": "rgba(255, 255, 255, 0.40)",
      "yellowDark": "#d29200",
      "yellow": "#ffb900",
      "yellowLight": "#fff100",
      "orange": "#d83b01",
      "orangeLight": "#ea4300",
      "orangeLighter": "#ff8c00",
      "redDark": "#a4262c",
      "red": "#e81123",
      "magentaDark": "#5c005c",
      "magenta": "#b4009e",
      "magentaLight": "#e3008c",
      "purpleDark": "#32145a",
      "purple": "#5c2d91",
      "purpleLight": "#b4a0ff",
      "blueDark": "#002050",
      "blueMid": "#00188f",
      "blue": "#0078d4",
      "blueLight": "#00bcf2",
      "tealDark": "#004b50",
      "teal": "#008272",
      "tealLight": "#00b294",
      "greenDark": "#004b1c",
      "green": "#107c10",
      "greenLight": "#bad80a",
      "primaryBackground": "#ffffff",
      "primaryText": "#333333",
      "HyperlinkActive": "#004578",
      "CommandLinksPressed": "#004578",
      "NavigationPressed": "#004578",
      "EmphasisHoverBorder": "#004578",
      "TopBarPressedText": "#004578",
      "HeaderNavigationPressedText": "#004578",
      "Hyperlinkfollowed": "#004578",
      "EmphasisHoverBackground": "#005a9e",
      "EmphasisBorder": "#005a9e",
      "AccentText": "#0078d4",
      "CommandLinksHover": "#0078d4",
      "RowAccent": "#0078d4",
      "NavigationAccent": "#0078d4",
      "NavigationHover": "#0078d4",
      "EmphasisBackground": "#0078d4",
      "HeaderNavigationHoverText": "#0078d4",
      "HeaderNavigationSelectedText": "#0078d4",
      "SuiteBarBackground": "#0078d4",
      "Hyperlink": "#0078d4",
      "ContentAccent1": "#0078d4",
      "AccentLines": "#2b88d8",
      "HeaderAccentLines": "#2b88d8",
      "ButtonPressedBorder": "#2b88d8",
      "SuiteBarHoverBackground": "#71afe5",
      "StrongLines": "#c7e0f4",
      "HeaderStrongLines": "#c7e0f4",
      "SuiteBarHoverText": "#c7e0f4",
      "ButtonPressedBackground": "#c7e0f4",
      "ButtonHoverBorder": "#c7e0f4",
      "ButtonHoverBackground": "#deecf9",
      "SelectionBackground": "rgba(199, 224, 244, 0.50)",
      "HoverBackground": "rgba(222, 236, 249, 0.50)",
      "NavigationHoverBackground": "rgba(222, 236, 249, 0.50)",
      "PageBackground": "#ffffff",
      "EmphasisText": "#ffffff",
      "SuiteBarText": "#ffffff",
      "TileText": "#ffffff",
      "BackgroundOverlay": "rgba(255, 255, 255, 0.85)",
      "HeaderBackground": "rgba(255, 255, 255, 0.85)",
      "FooterBackground": "rgba(255, 255, 255, 0.85)",
      "DisabledBackground": "#faf9f8",
      "HeaderDisabledBackground": "#faf9f8",
      "ButtonBackground": "#faf9f8",
      "ButtonDisabledBackground": "#faf9f8",
      "SubtleEmphasisBackground": "#f3f2f1",
      "DialogBorder": "#f3f2f1",
      "NavigationSelectedBackground": "rgba(237, 235, 233, 0.78)",
      "TopBarBackground": "rgba(237, 235, 233, 0.78)",
      "DisabledLines": "#edebe9",
      "HeaderDisabledLines": "#edebe9",
      "ButtonDisabledBorder": "#edebe9",
      "SuiteBarDisabledText": "#edebe9",
      "SubtleLines": "#c8c6c4",
      "HeaderSubtleLines": "#c8c6c4",
      "ButtonGlyphDisabled": "#c8c6c4",
      "DisabledText": "#a19f9d",
      "CommandLinksDisabled": "#a19f9d",
      "HeaderDisableText": "#a19f9d",
      "ButtonDisabledText": "#a19f9d",
      "Lines": "#a19f9d",
      "HeaderLines": "#a19f9d",
      "ButtonBorder": "#a19f9d",
      "SubtleBodyText": "#8a8886",
      "HeaderSubtleText": "#8a8886",
      "CommandLinks": "#605e5c",
      "Navigation": "#605e5c",
      "SubtleEmphasisText": "#605e5c",
      "TopBarText": "#605e5c",
      "HeaderNavigationText": "#605e5c",
      "ButtonGlyph": "#605e5c",
      "BodyText": "#323130",
      "WebPartHeading": "#323130",
      "HeaderText": "#323130",
      "ButtonText": "#323130",
      "ButtonGlyphActive": "#323130",
      "TopBarHoverText": "#323130",
      "StrongBodyText": "#201f1e",
      "SiteTitle": "#201f1e",
      "CommandLinksSecondary": "#201f1e",
      "SubtleEmphasisCommandLinks": "#201f1e",
      "HeaderSiteTitle": "#201f1e",
      "TileBackgroundOverlay": "rgba(0, 0, 0, 0.50)",
      "ContentAccent2": "#00485b",
      "ContentAccent3": "#288054",
      "ContentAccent4": "#767956",
      "ContentAccent5": "#ed0033",
      "ContentAccent6": "#682a7a",
      "backgroundOverlay": "rgba(255, 255, 255, 0.85)",
      "themeAccent": "#0078d4",
      "themeAccentTranslucent10": "rgba(0, 120, 212, 0.10)",
      "suiteBarBackground": "#0078d4",
      "suiteBarText": "#ffffff",
      "suiteBarDisabledText": "#edebe9",
      "topBarBackground": "rgba(237, 235, 233, 0.78)",
      "topBarText": "#605e5c",
      "topBarHoverText": "#323130",
      "dialogBorder": "#f3f2f1"
    }

Comments

Popular posts from this blog

Save Location details to SharePoint Location column through SPFx and PnP JS

Get All content types from ContentTypeHub using SharePoint Rest API v2 using JavaScript

How To Create/ Generate QRcode In SPFx Web Part