({ Component, pageProps, languagesContext }: MyAppProps)
| 21 | } |
| 22 | |
| 23 | const MyApp = ({ Component, pageProps, languagesContext }: MyAppProps) => { |
| 24 | const { theme } = useTheme() |
| 25 | |
| 26 | useEffect(() => { |
| 27 | initializeEvents() |
| 28 | initializeExperiments() |
| 29 | }, []) |
| 30 | |
| 31 | useEffect(() => { |
| 32 | // The CSS from primer looks something like this: |
| 33 | // |
| 34 | // @media (prefers-color-scheme: dark) [data-color-mode=auto][data-dark-theme=dark] { |
| 35 | // --color-canvas-default: black; |
| 36 | // } |
| 37 | // body { |
| 38 | // background-color: var(--color-canvas-default); |
| 39 | // } |
| 40 | // |
| 41 | // So if that `[data-color-mode][data-dark-theme=dark]` isn't present |
| 42 | // on the body, but on a top-level wrapping `<div>` then the `<body>` |
| 43 | // doesn't get the right CSS. |
| 44 | // Normally, with Primer you make sure you set these things in the |
| 45 | // `<body>` tag and you can use `_document.tsx` for that but that's |
| 46 | // only something you can do in server-side rendering. So, |
| 47 | // we use a hook to assure that the `<body>` tag has the correct |
| 48 | // dataset attribute values. |
| 49 | const body = document.querySelector('body') |
| 50 | if (body) { |
| 51 | // Note, this is the same as setting `<body data-color-mode="...">` |
| 52 | // But you can't do `body.dataset['color-mode']` so you use the |
| 53 | // camelCase variant and you get the same effect. |
| 54 | // Appears Next.js can't modify <body> after server rendering: |
| 55 | // https://stackoverflow.com/a/54774431 |
| 56 | body.dataset.colorMode = theme.css.colorMode |
| 57 | body.dataset.darkTheme = theme.css.darkTheme |
| 58 | body.dataset.lightTheme = theme.css.lightTheme |
| 59 | } |
| 60 | }, [theme]) |
| 61 | |
| 62 | return ( |
| 63 | <> |
| 64 | <Head> |
| 65 | <meta charSet="utf-8" /> |
| 66 | <title>GitHub Documentation</title> |
| 67 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 68 | |
| 69 | {/* The value in these "/cb-xxxxx" prefixes aren't important. They |
| 70 | just need to be present. They help the CDN cache the asset |
| 71 | for infinity. |
| 72 | Just remember, if you edit these images on disk, remember to |
| 73 | change these numbers |
| 74 | */} |
| 75 | <link rel="alternate icon" type="image/png" href="/assets/cb-600/images/site/favicon.png" /> |
| 76 | <link rel="icon" type="image/svg+xml" href="/assets/cb-803/images/site/favicon.svg" /> |
| 77 | |
| 78 | <meta |
| 79 | name="google-site-verification" |
| 80 | content="OgdQc0GZfjDI52wDv1bkMT-SLpBUo_h5nn9mI9L22xQ" |
nothing calls this directly
no test coverage detected