How do I check whether Word (or another Office app) is in Dark mode or Light mode?

[15MariamS]

Article URL

https://learn.microsoft.com/en-us/javascript/api/office/office.officetheme?view=common-js-preview https://learn.microsoft.com/en-us/office/dev/add-ins/design/add-in-color

Issue

I'm using Fluent UI v9 in my Word add-in. My current logic to check whether my Word app is in dark or light mode is faulty. How can I check what mode Word is in so that I can apply light/dark mode to my add-in app?

return Office.context.officeTheme.bodyBackgroundColor === "#ffffff" ? webLightTheme : webDarkTheme;

[AlexJerabek]

Hi @15MariamS,

Thank you for raising this question. @samantharamon, is it possible to check if an Office app is in dark mode?

[Rick-Kirkham]

@15MariamS I think your code is basically correct. Could you provide more details of what goes wrong? Also, see this file and the code comments at lined 130 - 159.

[15MariamS]

@15MariamS I think your code is basically correct. Could you provide more details of what goes wrong? Also, see this file and the code comments at lined 130 - 159.

Here is my code: https://gist.github.com/15MariamS/f924bdf25a32deaf2a89e83b9439199b

Problem 1

I ended up using MediaQuery to check for dark mode since using Office.context.officeTheme as I did below just didn't work (never passed to light mode or vice versa when I tried the dark mode bg color)

return Office.context.officeTheme.bodyBackgroundColor === "#ffffff" ? webLightTheme : webDarkTheme;

Now, I'm using matchMedia, which works fine — but it's not using Office.context which would've been ideal

import { useState } from "react";

/* global window */

export default function usePrefersDark(): boolean {
  const [prefersDark, setPrefersDark] = useState(getPrefersDark());

  if (window?.matchMedia) {
    window.matchMedia("(prefers-color-scheme: dark)").onchange = (e) => {
      setPrefersDark(e.matches);
    };
  }

  return prefersDark;
}

function getPrefersDark(): boolean {
  return window?.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
}

[Rick-Kirkham]

@15MariamS The line return Office.context.officeTheme.bodyBackgroundColor === "#ffffff" ? webLightTheme : webDarkTheme; works fine for me, so I cannot reproduce the issue. Also, please note that currently the Office JavaScript Library doesn't expose the theme changed event in Office. This means that if the user changes the Office theme while the add-in is open, the add-in's theme will NOT change. The user would have to reload the add-in to see it take on the new theme.

I will close this issue. If you have further comments or problems, you can still comment on it.