diff --git a/src/events/components/events.ts b/src/events/components/events.ts index e468c577e21d..bafc56678c4b 100644 --- a/src/events/components/events.ts +++ b/src/events/components/events.ts @@ -206,10 +206,10 @@ function getReferrer(documentReferrer: string) { } function getColorModePreference() { - // color mode is set as attributes on , we'll use that information + // color mode is set as attributes on , we'll use that information // along with media query checking rather than parsing the cookie value // set by github.com - let color_mode_preference = document.querySelector('body')?.dataset.colorMode + let color_mode_preference = document.querySelector('html')?.dataset.colorMode if (color_mode_preference === 'auto') { if (window.matchMedia('(prefers-color-scheme: light)').matches) { diff --git a/src/frame/pages/app.tsx b/src/frame/pages/app.tsx index 96e1fff37dc2..1edbe30c49d9 100644 --- a/src/frame/pages/app.tsx +++ b/src/frame/pages/app.tsx @@ -32,28 +32,28 @@ const MyApp = ({ Component, pageProps, languagesContext }: MyAppProps) => { // @media (prefers-color-scheme: dark) [data-color-mode=auto][data-dark-theme=dark] { // --color-canvas-default: black; // } - // body { + // html { // background-color: var(--color-canvas-default); // } // // So if that `[data-color-mode][data-dark-theme=dark]` isn't present - // on the body, but on a top-level wrapping `
` then the `` + // on the html, but on a top-level wrapping `
` then the `` // doesn't get the right CSS. // Normally, with Primer you make sure you set these things in the - // `` tag and you can use `_document.tsx` for that but that's + // `` tag and you can use `_document.tsx` for that but that's // only something you can do in server-side rendering. So, - // we use a hook to assure that the `` tag has the correct + // we use a hook to assure that the `` tag has the correct // dataset attribute values. - const body = document.querySelector('body') - if (body) { - // Note, this is the same as setting `` - // But you can't do `body.dataset['color-mode']` so you use the + const html = document.querySelector('html') + if (html) { + // Note, this is the same as setting `` + // But you can't do `html.dataset['color-mode']` so you use the // camelCase variant and you get the same effect. - // Appears Next.js can't modify after server rendering: + // Appears Next.js can't modify after server rendering: // https://stackoverflow.com/a/54774431 - body.dataset.colorMode = theme.css.colorMode - body.dataset.darkTheme = theme.css.darkTheme - body.dataset.lightTheme = theme.css.lightTheme + html.dataset.colorMode = theme.css.colorMode + html.dataset.darkTheme = theme.css.darkTheme + html.dataset.lightTheme = theme.css.lightTheme } }, [theme])