{
+ let state = false
+ const listeners = new Set<() => void>()
+ return {
+ get: () => state,
+ sub: (l: () => void) => (listeners.add(l), () => listeners.delete(l)),
+ set: (action: boolean | ((prev: boolean) => boolean)) => {
+ const val = typeof action === "function" ? action(state) : action
+ if (val !== state) {
+ state = val
+ listeners.forEach(l => l())
+ }
+ },
+ }
+}
+
+const store = createStore()
+
+export const useMenu = () => ({
+ menu: useSyncExternalStore(store.sub, store.get, store.get),
+ setMenu: store.set,
+})
diff --git a/src/nextra-theme-docs.css b/src/nextra-theme-docs.css
index 83c80ae83c..9b3d03e932 100644
--- a/src/nextra-theme-docs.css
+++ b/src/nextra-theme-docs.css
@@ -2958,3 +2958,10 @@ kbd._border._gap-1 {
color: hsl(var(--color-neu-500));
}
}
+
+:root {
+ --nextra-bg: 251, 251, 249;
+}
+.dark {
+ --nextra-bg: 15, 15, 12;
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 5bf5b37f4c..fc634b1f52 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -8,6 +8,8 @@ import "@/docs.css"
import "@/globals.css"
import "@/app/colors.css"
+import { useMenu } from "../components/use-menu"
+
const gaId = process.env.NEXT_PUBLIC_GA_ID
// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
@@ -17,14 +19,18 @@ function handleRouteChange(url: string) {
export default function App({ Component, pageProps }: AppProps) {
const router = useRouter()
+
useEffect(() => {
if (!gaId) return
router.events.on("routeChangeComplete", handleRouteChange)
return () => {
router.events.off("routeChangeComplete", handleRouteChange)
}
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
+ const menu = useMenu()
+
return (
<>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0fa60628ec..094a02221c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -220,6 +220,7 @@ const config: Config = {
})
}),
tailwindMediaHover(),
+ prefersContrastPlugin(),
scrollStartPlugin(),
scrollviewFadePlugin(),
browserPlugin,
@@ -236,6 +237,12 @@ function tailwindMediaHover() {
})
}
+function prefersContrastPlugin() {
+ return plugin(({ addVariant }) => {
+ addVariant("contrast-more", "@media (prefers-contrast: more)")
+ })
+}
+
function scrollStartPlugin() {
return plugin(({ addBase, matchUtilities, theme }) => {
addBase({