fix: inconsistent behaviour between FluentDesignTheme and loading-theme

[davhdavh]

🐛 Bug Report

Followup to #3502

The set mode was fixed in #3516, but the colorSchemeListener does not use the mode setter, it just changes the baseLayerLuminance.

Also theming is very inconsistent in behaviour:

• If mode is not set on loading-theme, then data-theme on not set and css-styling is thus not possible.
• If mode is set to system on loading-theme, then data-theme is set, but colorSchemeListener doesnt work.
• If any mode is set on loading-theme, the storage-name is ignored.
• If you have <FluentDesignTheme /> in static context, it is same as loading-theme without mode, but storage-name works.
• If you have <FluentDesignTheme /> in interactive context, it is same as loading-theme with mode set to system.
• And even if all of these were working, the data-theme on body is not re-applied on page changes on enhanced navigation.
• And if you try to monitor --base-layer-luminance you also lose, since that always resets to 0.15 on enhanced navigation.
• And if you visit an external page, and then press back... data-theme is gone.

So it is pretty much impossible to find a set of settings that works no matter if a user starts on a static page, a dynamic page, has set their theme, haven't set their theme etc.

[davhdavh]

similar to #3906, most problems are solvable by a mutationobserver:

function attachThemeObserver() {
 if (!document.body) return;
 if (window.__themeObserver) {
  window.__themeObserver.disconnect();
 }
 
function updateThemeFromAccent() {
 function parseColor(str) {
  const ctx = document.createElement('canvas').getContext('2d');
  ctx.fillStyle = str;
  const computed = ctx.fillStyle;

  if (computed.startsWith('#')) {
    let hex = computed.slice(1);
    if (hex.length === 3) hex = hex.split('').map((c) => c + c).join('');
    const bigint = parseInt(hex, 16);
    return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
  }

  if (computed.startsWith('rgb')) {
    return computed.match(/\d+/g).map(Number).slice(0, 3);
  }

  return [0, 0, 0]; // fallback
}

function relativeLuminance([r, g, b]) {
  const toLinear = (c) => {
    c /= 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  };
  const [R, G, B] = [toLinear(r), toLinear(g), toLinear(b)];
  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
}
  const color = getComputedStyle(document.body).getPropertyValue('--accent-base-color').trim();
  const rgb = parseColor(color);
  const luminance = relativeLuminance(rgb);

  const theme = luminance > 0.5 ? 'light' : 'dark';

  //console.log(`[theme] accent=${color}, luminance=${luminance.toFixed(3)}, applying ${theme}`);
  document.body.dataset.theme = theme;
}

 const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
   if (
    mutation.type === 'attributes' &&
    mutation.attributeName === 'data-theme' &&
    !document.body.dataset.theme
   ) {
    updateThemeFromAccent();
   }
  }
 });

 observer.observe(document.body, {
  attributes: true,
  attributeFilter: ['data-theme'],
 });

 window.__themeObserver = observer;
}

export function afterWebStarted(blazor) {
    blazor.addEventListener('enhancednavigationstart', attachThemeObserver);
}

Use with <loading-theme mode="system"/>.

Only remaining problem is then: "If mode is set to system on loading-theme, then data-theme is set, but colorSchemeListener doesnt work."

[davhdavh]

fluentui-blazor/src/Core.Assets/src/DesignTheme.ts

Line 290 in 98a332b

if (currentMode == null) {

the currentMode here is system, so check fails... it might be enough to just check currentMode == null || currentMode === 'system'... on the other hand there is some confusion with using system-dark/system-light/system

[vnbaaij]

@davhdavh do you have a test project for this? If so, then please attach it here.

I have added your code in a branch locally, but having difficulty with getting it tested

[davhdavh]

@vnbaaij

1. I can see I accidentially copied the test code and not the final code...
   const color = getComputedStyle(document.body).getPropertyValue('--accent-base-color').trim();
   ->
   const color = getComputedStyle(document.body).getPropertyValue('--foreground-on-accent-rest').trim();
2. The way to test it is
   a) initial page load with a loading-theme mode="system"
   b) go from one blazor page to another with enhanced view (ie a normal page change in blazor web)
   c) go to an external page, and click back
   d) change the OS (or browser debugger prefer-color-scheme) while on a page
   e) Use loading-theme with primary-color="#000000" and primary-color="#ffffff"

In all cases, what you are looking for is that the data-theme on the body element is consistent with your OS/browser scheme.

[vnbaaij]

We are addressing this for v5. See #4202