Merge pull request #2005 from quadratichq/jim-fix-theme

fix: support theming in app bar

quadratic-client/src/shared/hooks/useThemeAppearanceMode.tsx

@@ -1,5 +1,6 @@
 import { useFeatureFlag } from '@/shared/hooks/useFeatureFlag';
 import useLocalStorage from '@/shared/hooks/useLocalStorage';
+import { getCSSVariableAsHexColor } from '@/shared/utils/colors';
 import { useEffect } from 'react';
 
 const DEFAULT_APPEARANCE_MODE = 'light';
@@ -53,6 +54,20 @@ export const ThemeAppearanceModeEffects = () => {
     };
   }, [appearanceMode, userPrefesDarkMode]);
 
+  useEffect(() => {
+    const metaTag = document.querySelector('meta[name="theme-color"]');
+    const hexColor = getCSSVariableAsHexColor('background');
+
+    if (metaTag) {
+      metaTag.setAttribute('content', hexColor);
+    } else {
+      const meta = document.createElement('meta');
+      meta.name = 'theme-color';
+      meta.content = hexColor;
+      document.head.appendChild(meta);
+    }
+  }, [appearanceMode, userPrefesDarkMode]);
+
   return null;
 };
 

quadratic-client/src/shared/utils/colors.ts

@@ -0,0 +1,15 @@
+import Color from 'color';
+
+export function getCSSVariableAsHexColor(cssVariableName: string) {
+  if (cssVariableName.startsWith('--')) {
+    console.warn(
+      '`getCSSVariableTint` expects a CSS variable name without the `--` prefix. Are you sure you meant: `%s`',
+      cssVariableName
+    );
+  }
+
+  const hslColorString = getComputedStyle(document.documentElement).getPropertyValue(`--${cssVariableName}`).trim();
+  const parsed = Color.hsl(hslColorString.split(' ').map(parseFloat));
+  const out = parsed.hex();
+  return out;
+}