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"
    }

Location: Goa, India

Comments

Post a Comment

Thank you for your comment.

Popular posts from this blog

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

Image
The Location field in SharePoint has been announced in February 2019 - ( https://techcommunity.microsoft.com/t5/sharepoint/add-location-details-to-sharepoint-data-and-content/m-p/284875 ). Before this announcement, data has been saved as addresses and coordinates(Latitude, Longitude) in different columns in SharePoint because if they have to be filtered by address, city, or state.    The data of the location column is saved with all these details: Image 1 If you want to save only the coordinates, you can pass only that value to the location column while saving the item. If you want to save, only the address like city, country and Pincode, you can pass only those values to the location column. I initially thought because it is a location column you have to pass the coordinates for saving. But, there is no mandatory value that needs to be passed to save the value for the location column and that is really useful.  Save Location Details through SPFx/PnP JS: In this exam...
Read more

JavaScript Tips and Tricks - I

Image
I decided to write a series of coding tips and tricks that I follow while writing my code. This series will help Javascript developers to have a good judgement when to use them and helps to build a quality application. Now, let's jump into the first one. Ternary Operator: It is commonly referred to as the conditional operator , inline if (iif) , or ternary if . I personally use this one in most of my codes. Before jumping into how to use them, let study why to use them. when you write an if block, first you declare the variable outside the if block, so that you can use them after the if block. So a simple condition takes a two-block.   Block 1 for variable assignment and Block 2 for executing the condition.   A minimum of 6 to 7 lines of code required. Let's see how ternary operator makes it more concise.  The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression...
Read more

Create And Deploy Outlook Add-Ins Using SPFx 1.10

Image
These are simple steps to create your first Outlook add-in from the SharePoint framework 1.10 version. The integration of SharePoint Framework lets you use all of the tools of SPFx, including access to Graph APIs, along with the rich, native JavaScript APIs that are available across applications. Please note that it is still in Preview mode.   Prerequisites Node version 10 LTS Latest Yeoman and gulp Visual studio code For more details, Please follow check Microsoft docs for  Setting up your SharePoint Framework development environment .   Development Steps Run the following command:   yo @microsoft/sharepoint --plusbeta   For the below question, select yes, as the solution needs to be deployed, tenant scoped.    Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites?  Y   Select the framework you would want to use. I preferre...
Read more