Office theme colors missing or shifted

[sami-romdhana]

Your Environment

• Platform: both Web and PC desktop
• Host: PowerPoint
• Office version number: Microsoft® PowerPoint® for Microsoft 365 MSO (Version 2407 Build 16.0.17830.20016) 64-bit
• Operating System: Windows 11 22621
• Browser: Tested using latest Chrome and Firefox

Expected behavior

I want OfficeThemes.css variables to be an exact match of the theme colors as seen in the Custom Colors window.

Current behavior

Some colors are either shifted, or are completely missing.

Theme 1

Seeing the Office theme colors window and "sample" area, it seems that "Text/Background - Dark 1" as font color goes with "Text/Background - Light 2" as background color, and that "Text/Background - Light 1" as font color goes with "Text/Background - Dark 2" as background color.

Office theme colors

Theme color name	Value in Office
Text/Background - Dark 1	#595959
Text/Background - Light 1	#FFFFFF
Text/Background - Dark 2	#FF4648
Text/Background - Light 2	#FFF0F0
Accent 1	#625CFA
Accent 2	#B1D0FF
Accent 3	#050921
Accent 4	#FFD6FB
Accent 5	#FCC14E
Accent 6	#F7DA9F
Hyperlink	#FF4648
Followed Hyperlink	#FF4648

OfficeThemes.css colors

CSS variable name	Value
.office-docTheme-primary-fontColor	#595959
.office-docTheme-primary-bgColor	#FEFEFE
.office-docTheme-secondary-fontColor	#595959
.office-docTheme-secondary-bgColor	#FFF0F0
.office-contentAccent1-*color	#5F57F9
.office-contentAccent2-*color	#AFCFFE
.office-contentAccent3-*color	#050922
.office-contentAccent4-*color	#FFD5FB
.office-contentAccent5-*color	#FEC253
.office-contentAccent6-*color	#F8DBA0
.office-a	#FF464D
.office-a:visited	#FF464D
.office-officeTheme-primary-fontColor	#454545
.office-officeTheme-primary-bgColor	#FFFFFF
.office-officeTheme-secondary-fontColor	#444444
.office-officeTheme-secondary-bgColor	#FCFCFC

Comments and notes

• ⚠️ "Text/Background - Dark 2" cannot be found within the regular CSS variables. It does correspond to .office-a and .office-a:visited which is normal since they are supposed to be the same color but I expected one of the base variables to match as well, for instance one of the .office-docTheme-* or .office-officeTheme-* variables
• There is duplication
  • "Text/Background - Dark 1" corresponds to both .office-docTheme-primary-fontColor and .office-docTheme-secondary-fontColor
  • "Text/Background - Light 1" corresponds to both .office-docTheme-primary-bgColor and .office-docTheme-secondary-bgColor
• The accent theme colors can't be matched exactly:
  • "Accent 1", the color should be #625CFA but the nearest value is #5F57F9
  • "Accent 2", the color should be #B1D0FF but the nearest value is #AFCFFE
  • "Accent 3", the color should be #050921 but the nearest value is #050922
  • "Accent 4", the color should be #FFD6FB but the nearest value is #FFD5FB
  • "Accent 5", the color should be #FCC14E but the nearest value is #FEC253
  • "Accent 6", the color should be #F7DA9F but the nearest value is #F8DBA0

Theme 2

Office theme colors

Theme color name	Value in Office
Text/Background - Dark 1	#595959
Text/Background - Light 1	#FFFFFF
Text/Background - Dark 2	#3DC7FF
Text/Background - Light 2	#0782BE
Accent 1	#EB5D16
Accent 2	#E6E6E6
Accent 3	#FEC008
Accent 4	#FD8124
Accent 5	#04DAAB
Accent 6	#595959
Hyperlink	#3DC7FF
Followed Hyperlink	#0782BE

OfficeThemes.css colors

CSS variable name	Value
.office-docTheme-primary-fontColor	#2BC6FE
.office-docTheme-primary-bgColor	#0181BD
.office-docTheme-secondary-fontColor	#2BC6FE
.office-docTheme-secondary-bgColor	#FFFFFF
.office-contentAccent1-*color	#EE5E21
.office-contentAccent2-*color	#E6E6E6
.office-contentAccent3-*color	#FFC11C
.office-contentAccent4-*color	#FF822D
.office-contentAccent5-*color	#01DBAA
.office-contentAccent6-*color	#5A5A5A
.office-a	#2BC6FE
.office-a:visited	#0181BD
.office-officeTheme-primary-fontColor	#454545
.office-officeTheme-primary-bgColor	#FFFFFF
.office-officeTheme-secondary-fontColor	#454545
.office-officeTheme-secondary-bgColor	#FFFFFF

Comments and notes

• ⚠️ Nothing matches with "Text/Background - Dark 1" except .office-contentAccent6-*color which does have the same color, but I expected one of the base variables to have that value
• These theme colors can't be matched exactly:
  • "Text/Background - Dark 2", the color should be #3DC7FF but the nearest value is #2BC6FE
  • "Text/Background - Light 2", the color should be #0782BE but the nearest value is #0181BD
  • "Accent 1", the color should be #EB5D16 but the nearest value is #EE5E21
  • "Accent 3", the color should be #FEC008 but the nearest value is #FFC11C
  • "Accent 4", the color should be #FD8124 but the nearest value is #FF822D
  • "Accent 5", the color should be #04DAAB but the nearest value is #01DBAA
  • "Accent 6", the color should be #595959 but the nearest value is #5A5A5A

Steps to reproduce

1. Have a custom theme in PowerPoint
2. Pull the colors using OfficeThemes.css
3. Compare the colors

Context

We are trying to pull client theming automatically with no user intervention or hard coding, having colors missing hampers our efforts to integrate our content add-in with the rest of our clients' content.

[EsterBergen]

@micahgodbolt - Can you investigate?

[micahgodbolt]

@micahgodbolt - Can you investigate?

The theme here is pretty specific to Office, and not Fluent. I'm not sure what help I can offer here.

[touss59]

Hello @EsterBergen,

Do you have another person in mind to investigate this problem?

Thank you in advance for your reply.

[EsterBergen]

Thanks for the ping @touss59 - we are continuing to look into this and will share updates once we know more. Thanks.