ref(page-meta): Make theme-color content dynamic (#30913)

src/sentry/templates/sentry/layout.html

@@ -15,7 +15,6 @@
   <!-- The "none" directive is equivalent to using both the noindex and nofollow tags simultaneously -->
   <meta name="robots" content="none, noarchive">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="theme-color" content="#000000">
 
   <link rel="icon" type="image/png" href="{% absolute_asset_url "sentry" "images/favicon.png" %}">
 

static/app/components/sidebar/index.tsx

@@ -444,7 +444,6 @@ const responsiveFlex = css`
 `;
 
 export const SidebarWrapper = styled('nav')<{collapsed: boolean}>`
-  background: ${p => p.theme.sidebar.background};
   background: ${p => p.theme.sidebarGradient};
   color: ${p => p.theme.sidebar.color};
   line-height: 1;

static/app/components/sidebar/sidebarItem.tsx

@@ -277,7 +277,7 @@ const getCollapsedBadgeStyle = ({collapsed, theme}) => {
     height: ${theme.sidebar.smallBadgeSize};
     border-radius: ${theme.sidebar.smallBadgeSize};
     line-height: ${theme.sidebar.smallBadgeSize};
-    box-shadow: 0 3px 3px ${theme.sidebar.background};
+    box-shadow: ${theme.sidebar.boxShadow};
   `;
 };
 

static/app/components/themeAndStyleProvider.tsx

@@ -1,4 +1,4 @@
-import {useEffect} from 'react';
+import {Fragment, useEffect} from 'react';
 import ReactDOM from 'react-dom';
 import {cache} from '@emotion/css'; // eslint-disable-line emotion/no-vanilla
 import {CacheProvider, ThemeProvider} from '@emotion/react'; // This is needed to set "speedy" = false (for percy)
@@ -29,7 +29,10 @@ function ThemeAndStyleProvider({children}: Props) {
       <GlobalStyles isDark={config.theme === 'dark'} theme={theme} />
       <CacheProvider value={cache}>{children}</CacheProvider>
       {ReactDOM.createPortal(
-        <meta name="color-scheme" content={config.theme} />,
+        <Fragment>
+          <meta name="color-scheme" content={config.theme} />
+          <meta name="theme-color" content={theme.sidebar.background} />
+        </Fragment>,
         document.head
       )}
     </ThemeProvider>

static/app/utils/theme.tsx

@@ -117,6 +117,16 @@ const darkShadows = {
   dropShadowHeavy: '0 4px 24px rgba(10, 8, 12, 0.36)',
 };
 
+/**
+ * Background used in the theme-color meta tag
+ * The colors below are an approximation of the colors used in the sidebar (sidebarGradient).
+ * Unfortunately the exact colors cannot be used, as the theme-color tag does not support linear-gradient()
+ */
+const sidebarBackground = {
+  light: '#2f1937',
+  dark: '#181622',
+};
+
 type BaseColors = typeof lightColors;
 
 const generateAliases = (colors: BaseColors) => ({
@@ -631,7 +641,7 @@ const commonTheme = {
   },
 
   sidebar: {
-    background: '#2f2936',
+    boxShadow: '0 3px 3px #2f2936',
     color: '#9586a5',
     divider: '#493e54',
     badgeSize: '22px',
@@ -704,8 +714,11 @@ export const lightTheme = {
   button: generateButtonTheme(lightColors, lightAliases),
   tag: generateTagTheme(lightColors),
   level: generateLevelTheme(lightColors),
-  sidebarGradient:
-    'linear-gradient(294.17deg,#2f1937 35.57%,#452650 92.42%,#452650 92.42%)',
+  sidebar: {
+    ...commonTheme.sidebar,
+    background: sidebarBackground.light,
+  },
+  sidebarGradient: `linear-gradient(294.17deg,${sidebarBackground.light} 35.57%,#452650 92.42%,#452650 92.42%)`,
   sidebarBorder: 'transparent',
 };
 
@@ -723,7 +736,11 @@ export const darkTheme: Theme = {
   button: generateButtonTheme(darkColors, darkAliases),
   tag: generateTagTheme(darkColors),
   level: generateLevelTheme(darkColors),
-  sidebarGradient: 'linear-gradient(180deg, #181622 0%, #1B1825 100%)',
+  sidebar: {
+    ...commonTheme.sidebar,
+    background: sidebarBackground.dark,
+  },
+  sidebarGradient: `linear-gradient(180deg, ${sidebarBackground.dark} 0%, #1B1825 100%)`,
   sidebarBorder: darkAliases.border,
 };
 

static/index.ejs

@@ -4,7 +4,6 @@
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <meta name="robots" content="NONE,NOARCHIVE" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="theme-color" content="#000000">
     <title><%= htmlWebpackPlugin.options.title || 'Sentry Dev'%></title>
     <script type="text/javascript">
     try {