Support for `theme-color` #78

shuding · 2022-01-06T23:04:07Z

Safari 15 uses this meta tag to indicate the UI color of the address bar etc., and usually we need to switch it upon theme changes. The media query only works with the system preferences rather than per-site settings via next-themes, so it might be a good add-on for this lib to automatically update it.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color

pacocoursey · 2022-01-06T23:09:59Z

You can set theme-color to a CSS variable, which will update correctly on Safari! On iOS it will update instantly alongside changes to the CSS variable, on macOS it will only update when you refocus the tab.

<meta name="theme-color" content="var(--bg)">

If we were to add it to next-themes (and not use the CSS variable trick above), how we would determine which color to set? Maybe consumers could provide a --theme-color CSS variable, which next-themes would read the current value of (getComputedStyle) and update the meta tag accordingly.

shuding · 2022-01-07T00:21:23Z

Oh I didn’t know that it works with variables, then it almost solves my problem.

If building this into the lib, I can see a themeColor option with these possible values:

themeColor: { dark: '#000', light: '#fff' }: provide the theme color for each theme
themeColor: 'red': always use this theme color
themeColor: 'var(—-bg)': if using a variable, we can compute the color upon every theme change. The variable needs to be specified at the root level
themeColor: { dark: 'var(—-bg)', reduced: '#fff' }: mixed use case too

nifte · 2022-02-22T05:49:54Z

@pacocoursey Using the meta tag method you mentioned doesn't seem to be working in the latest Safari/iOS. I still need to refresh the page to see the browser theme change.

I'm setting the css variable like this (I use class mode with Tailwind):

html { --bg: white; }
html.dark { --bg: black; }

Any suggestions?

heychazza · 2022-03-05T16:37:39Z

Facing the same thing myself.

pacocoursey · 2022-05-15T20:28:34Z

Since the CSS variable trick no longer seems to work, I'd recommend implementing this manually in your code with something like this:

const { resolvedTheme } = useTheme();

return (
  <Head>
    <meta name="theme-color" value={resolvedTheme === 'dark' ? '#000' : '#fff'}
  </Head>
)

I plan to add this for v1 of next-themes though, and I like the API that @shuding suggested above!

<ThemeProvider
  themeColor={{ dark: '#000', light: '#fff' }}
  // or
  themeColor="var(--theme-color)" // vars must be on the same element as data-theme is applied, which right is now always html aka :root
  // or
  themeColor={{ dark: 'var(--dark-bg)', light: '#fff' }}
/>

pacocoursey · 2022-05-17T13:00:30Z

This is available in the v1 beta:

yarn add next-themes@beta

EryouHao · 2022-12-25T01:07:51Z

Hi @pacocoursey , when v1 release? like this feature.

AdisonCavani · 2023-03-12T20:56:19Z

@pacocoursey v1 is not published on NPM.

aulianza · 2023-08-11T01:15:28Z

i solve this problem using this approach:

const { resolvedTheme } = useTheme();

  useEffect(() => {
    let themeColorMeta = document.querySelector(
      'meta[name="theme-color"]',
    ) as HTMLMetaElement;

    if (!themeColorMeta) {
      themeColorMeta = document.createElement('meta');
      themeColorMeta.name = 'theme-color';
      document.head.appendChild(themeColorMeta);
    }

    themeColorMeta.content = resolvedTheme === 'dark' ? '#171717' : '#fff';
  }, [resolvedTheme]);

may this help!

NavOrange · 2023-08-25T14:52:30Z

For Next.js 13 app router

app/layout.tsx

export const metadata = {
  // ...
  themeColor: '#f8fafc',
}

export default RootLayout() {
  <html suppressHydrationWarning className="dark">
    <head>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              try {
                if (localStorage.theme === 'dark' || ((!('theme' in localStorage) || localStorage.theme === 'system') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                  document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0B1120')
                }
              } catch (_) {}
            `,
          }}
        />
      </head>
  </html>
}

components/toggle-theme.tsx

const { resolvedTheme } = useTheme()

useEffect(() => {
  if (resolvedTheme === 'dark') {
    document
      .querySelector('meta[name="theme-color"]')!
      .setAttribute('content', '#0B1120')
  } else {
    document
      .querySelector('meta[name="theme-color"]')!
      .setAttribute('content', '#f8fafc')
  }
}, [resolvedTheme])

refer https://github.com/tailwindlabs/tailwindcss.com/blob/master/src/pages/_document.js#L31

shawnlong636 · 2023-08-28T05:12:11Z

Is a fix being worked on for this so we don’t need to add custom logic to ensure automatic color switching on Safari?

trm217 · 2023-08-28T06:54:39Z

@shawnlong636 Could you elaborate? Do you have the issue with the v1 branch?

alex-grover · 2023-10-05T04:04:36Z

confirming this is working for me with the 1.0.0-beta.0 release

is there any plan to release that as a full version? happy to help test, it looks like the changes are fairly small

theonlyway · 2023-11-11T14:09:58Z

Any timeline on when v1 will be released?

spacecat · 2024-03-14T16:09:26Z

This one did not make it to v0.3.0? 🤔
I'm still targeting the beta in my project ( "next-themes": "1.0.0-beta.0", ) which is not ideal. Hoping to see v1 soon! Or just this particular very needed feature in v0.3.1 😉

pacocoursey · 2024-03-14T17:19:15Z

Planning to add this in v1, which is still upcoming.

monecchi · 2024-06-15T01:04:29Z

@pacocoursey Hi there! How to achieve the proposed themeColor solution? I've installed next-themes@beta, current version 0.3.0-beta.1, but it seems <ThemeProvider /> has no themeColor props.

spacecat · 2024-06-23T21:54:13Z

@monecchi you can do something like this:

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider
      attribute="class"
      themes={[
        "light",
        "dark",
      ]}
      themeColor={{
        light: "hsl(0 0% 100%)",
        dark: "hsl(216 13% 15%)",
      }}
    >
      <SidebarLeftMobileProvider>
        <SidebarRightMobileProvider>
           <UserProvider>{children}</UserProvider>
        </SidebarRightMobileProvider>
      </SidebarLeftMobileProvider>
    </ThemeProvider>
  );
}

I'm using "next-themes": "1.0.0-beta.0",

monecchi · 2024-06-24T06:19:55Z

Thanks @spacecat! I'll give it a try! It seems the beta version I installed 0.3.0-beta.1 might be the issue...

Also, thanks @NavOrange! I've tested your solution and it worked flawlessly! While developing a PWA with the Window Controls Overlay feature enabled in manifest.json (on Desktop), the window native controls background color inherits the theme-color value, so switching the theme (light / dark) was breaking the UI. That saved my day!

spacecat · 2024-06-24T10:24:31Z

@spacecat yes, most likely it has got to do with the npm package version.

spacecat · 2024-11-28T12:24:08Z

Hi @pacocoursey ,

just following up on this issue as I'm currently upgrading all of my npm packages in my project.

I was just wondering if you see this feature included in a stable release some time in the near future?

Thanks!

pacocoursey added the enhancement New feature or request label Feb 1, 2022

pacocoursey added the v1 Planned for v1 label Feb 20, 2022

pacocoursey mentioned this issue May 15, 2022

[v1] Add themeColor prop #114

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support for `theme-color` #78

Support for `theme-color` #78

shuding commented Jan 6, 2022

pacocoursey commented Jan 6, 2022 •

edited

Loading

shuding commented Jan 7, 2022 •

edited

Loading

nifte commented Feb 22, 2022

heychazza commented Mar 5, 2022

pacocoursey commented May 15, 2022

pacocoursey commented May 17, 2022 •

edited

Loading

EryouHao commented Dec 25, 2022

AdisonCavani commented Mar 12, 2023

aulianza commented Aug 11, 2023

NavOrange commented Aug 25, 2023

shawnlong636 commented Aug 28, 2023

trm217 commented Aug 28, 2023

alex-grover commented Oct 5, 2023

theonlyway commented Nov 11, 2023

spacecat commented Mar 14, 2024 •

edited

Loading

pacocoursey commented Mar 14, 2024

monecchi commented Jun 15, 2024 •

edited

Loading

spacecat commented Jun 23, 2024 •

edited

Loading

monecchi commented Jun 24, 2024

spacecat commented Jun 24, 2024

spacecat commented Nov 28, 2024 •

edited

Loading

Support for theme-color #78

Support for theme-color #78

Comments

shuding commented Jan 6, 2022

pacocoursey commented Jan 6, 2022 • edited Loading

shuding commented Jan 7, 2022 • edited Loading

nifte commented Feb 22, 2022

heychazza commented Mar 5, 2022

pacocoursey commented May 15, 2022

pacocoursey commented May 17, 2022 • edited Loading

EryouHao commented Dec 25, 2022

AdisonCavani commented Mar 12, 2023

aulianza commented Aug 11, 2023

NavOrange commented Aug 25, 2023

shawnlong636 commented Aug 28, 2023

trm217 commented Aug 28, 2023

alex-grover commented Oct 5, 2023

theonlyway commented Nov 11, 2023

spacecat commented Mar 14, 2024 • edited Loading

pacocoursey commented Mar 14, 2024

monecchi commented Jun 15, 2024 • edited Loading

spacecat commented Jun 23, 2024 • edited Loading

monecchi commented Jun 24, 2024

spacecat commented Jun 24, 2024

spacecat commented Nov 28, 2024 • edited Loading

Support for `theme-color` #78

Support for `theme-color` #78

pacocoursey commented Jan 6, 2022 •

edited

Loading

shuding commented Jan 7, 2022 •

edited

Loading

pacocoursey commented May 17, 2022 •

edited

Loading

spacecat commented Mar 14, 2024 •

edited

Loading

monecchi commented Jun 15, 2024 •

edited

Loading

spacecat commented Jun 23, 2024 •

edited

Loading

spacecat commented Nov 28, 2024 •

edited

Loading