How to customize the default color primary (#0078d4)?

[Jérôme Bolliet (jbolliet-jint)]

Hello,

First of all, thank you for your great work and especially the theme customization possibilities.

However, if many things are possible, I did not find how to change the primary color used in the theme, nor its shades.
I am using mgt components in my application which is predominantly red and where there is no blue at all.

How to change the next 3 colors :

• primary (commblue_primary: #0078d4)
• shade10 (commblue_shade10: #106ebe)
• shade20 (commblue_shade20: #005a9e)
  Is there a mechanism ?

Thank you.

[Sébastien Levert (sebastienlevert)]

Can you share some of the code you are using and where these colors are affected? Thanks!

[Jérôme Bolliet (jbolliet-jint)]

Thank you for your reply.

You can find below an example of the code:
I use Fluent UI and my application is predominantly red (themePrimary = #c20000).

export default function App() {
  const myTheme = createTheme({
    palette: {
      themePrimary: "#c20000",
      ...
    }
  });

  return (
    <ThemeProvider theme={myTheme}>
      <Stack tokens={{ childrenGap: 10 }}>
        <Login />
        <PersonCard personQuery="adelev@mytenant.onmicrosoft.com" />
        <Stack.Item>
          <PrimaryButton text="Button" />
        </Stack.Item>
        <Checkbox defaultChecked label="Checkbox" />
      </Stack>
    </ThemeProvider>
  );
}

The result is below:

I want all the links in blue in PersonCard component in the snapshot to be red (#c20000) like the others Fluent UI components.
How is it possible to do that?

[Sébastien Levert (sebastienlevert)]

MGT doesn't support yet the Fluent UI Theme Provider. You can use the following documentation from MGT to customize the colors : https://docs.microsoft.com/en-us/graph/toolkit/customize-components/style

[Jérôme Bolliet (jbolliet-jint)]

I know that MGT doesn't support yet the Fluent UI Theme Provider (I use Fluent UI only to show that all my other components are in red with no blue).
And I know that we have to use CSS custom properties to customize the colors.
I actually customize these CSS properties in another file:

  --background-color--hover: #edebe9;
  --background-color-sub2: #f3f2f1;
  --color-sub1: black;
  --line-seperator-color: #edebe9;
  --person-card-background-color: #f3f2f1;
  --person-card-display-name-color: black;
  --tab-background-color--hover: #edebe9;
  --tab-line-color: #edebe9;
  --title-color-sub2: #373737;
  --title-color-subtitle: black;

My question is how to change the next 3 colors that are in blue color by default:

• primary (commblue_primary: #0078d4)
• shade10 (commblue_shade10: #106ebe)
• shade20 (commblue_shade20: #005a9e)

I want to make these 3 properties in red.
I don't find any CSS custom properties for these colors (which are very important because these are the primary colors).

How to change these colors ?

[Sébastien Levert (sebastienlevert)]

Adding Nicolas Vogt (@vogtn) to the discussion as he has a lot of experience on theming and on the persona card specifically!

[Nicolas Vogt (vogtn)]

@BollietMZK

Currently since its a unexposed theme color for the links, so even custom themes wont help here:

microsoft-graph-toolkit/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/mgt-person-card-contact.scss

Line 59 in bb3ec27

color: $commblue_primary;

There isn't much you can do for the current version. However, we could easily add these links as another css property. Something like:
$link-color: var(--link-color, #{$commblue_primary});

Then in your css:

  mgt-person-card {
        --link-color: red;
      }

Just to make sure, are these the only links you need (in the contact section 1,2,3)? Do you also need the smaller cards links (4,5):

[Jérôme Bolliet (jbolliet-jint)]

Thank you for your reply and your vision.
Wow, you are really reactive :)

The needs are:

• all 1,2,3,4,5 as you said
• the tabs (nav buttons) - 6
• the selected item in the organization tab - 7
• the "return back arrow" when select another item in the organization tab - 8
• the different states if exist (hover, active, etc...)

It would be perfect if it were possible to include the entire shopping list :)
Thank you very much.

[Nicolas Vogt (vogtn)]

@BollietMZK

Can you confirm the following story contains the requested css properties:
https://mgt.dev/next/pr/1676/?path=/story/components-mgt-person-card-style--custom-css-properties

Let me know if there are others.

[Jérôme Bolliet (jbolliet-jint)]

It's perfect!
Thank you very much Nicolas Vogt (@vogtn) !

[Joaquin AG (joaquinajenjo)]

Hi All,

I'm facing the same issue where all the components use these variables that are in "shared-sass-variables.scss" file and are defined in "Blue". What makes difficult to fit the components in applications that use another palette of colors.

$comm-blue-primary: #023b8f; /* Comm Blue / Primary #0078D4 /
$comm-blue-shade10: #106ebe; / Comm Blue / Shade 10 #106EBE /
$comm-blue-shade20: #005a9e; / Comm Blue / Shade 20 #005A9E */

https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/main/packages/mgt-components/src/styles/shared-sass-variables.scss

Is there any way or workaround that I can use to update these variables to be reflected in the components?

Thank you in advance.