Make dark scroll bar in dark theme in Chromium-based browsers (github…

…#29928) Co-authored-by: Kevin Heis <[email protected]>
ebfork · Nov 13, 2023 · 7f54d69 · 7f54d69
1 parent fb16ee9
commit 7f54d69
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git 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 <body>, we'll use that information
+  // color mode is set as attributes on <html>, 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
@@ -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 `<div>` then the `<body>`
+    // on the html, but on a top-level wrapping `<div>` then the `<html>`
     // doesn't get the right CSS.
     // Normally, with Primer you make sure you set these things in the
-    // `<body>` tag and you can use `_document.tsx` for that but that's
+    // `<html>` 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 `<body>` tag has the correct
+    // we use a hook to assure that the `<html>` tag has the correct
     // dataset attribute values.
-    const body = document.querySelector('body')
-    if (body) {
-      // Note, this is the same as setting `<body data-color-mode="...">`
-      // 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 `<html data-color-mode="...">`
+      // 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 <body> after server rendering:
+      // Appears Next.js can't modify <html> 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])