Replies: 1 comment 6 replies
-
|
The meta function export from every route that needs custom meta is not a React component, in that case, React context can't be used. I assume Remix will call it from the REAL |
Beta Was this translation helpful? Give feedback.
-
|
Here is the code of my function useDarkMode() {
const [darkMode, setDarkMode] = useState(false);
useEffect(() => {
const darkMode = localStorage.getItem("darkMode");
if (darkMode === null) {
const darkModeQuery = window.matchMedia("prefers-color-scheme: dark");
const handleQueryUpdate = (event: MediaQueryListEvent) => {
if (localStorage.getItem("darkMode") !== null) {
return;
}
if (event.matches) {
setDarkMode(true);
} else {
setDarkMode(false);
}
};
darkModeQuery.addEventListener("change", handleQueryUpdate);
return () => {
darkModeQuery.removeEventListener("change", handleQueryUpdate);
};
} else {
setDarkMode(darkMode === "true");
}
}, []);
const toggleDarkMode = useEvent(() => {
setDarkMode(!darkMode);
localStorage.setItem("darkMode", !darkMode ? "true" : "false");
});
return { darkMode, toggleDarkMode };
}
// 2. pass value here to change theme-color
export const meta: MetaFunction = ({props}) => ({
charset: "utf-8",
title: "Sean's Blog",
viewport: "width=device-width,initial-scale=1, shrink-to-fit=no",
"theme-color": props.dark ? 'darkcolor' : 'lightcolor'
});
export default function App() {
const { darkMode, toggleDarkMode } = useDarkMode();
return (
<!-- 1. change colours by toggle the dark class on and off -->
<html lang="en" className={clsx({ "h-full": true, dark: darkMode })}>
<head>
<Meta dark={darkMode}/>
<Links />
</head>
<body className="h-full bg-white p-7 text-gray-900 dark:bg-slate-900 dark:text-white">
<Header darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
} |
Beta Was this translation helpful? Give feedback.
-
|
If you implement dark mode using a cookie to store the user preference, you don’t need most of that code |
Beta Was this translation helpful? Give feedback.
-
Hi, I'm a bit confused. Do you mean to say, 'If you do implement dark mode using a cookie?' I'm using Remix with indie-stack which uses tailwind as the CSS solution. To toggle dark mode manually in tailwind, I set the Here I quote tailwind's doc:
With the approach of using cookies to store user preferences, the difficulty I can think of is that when the server renders my site, I can read user stored preferences from cookie in order to set I am not good at writing English, if that causes confusion, I'm terribly sorry. |
Beta Was this translation helpful? Give feedback.
-
|
I got the cookie solution from kent C Dodds's blog. I'll try that. Thanks for the replies. |
Beta Was this translation helpful? Give feedback.
-
|
Yes, I think @sergiodxa meant "If you DO use cookies". Anyway, glad you got it working. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I'm implementing light/dark mode in my blog using Remix. The light/dark data is not persistent, so the server always renders the default light mode. when the page lands on the browser, I want to use js to progressive enhance the experience by reading the mode data from localStorage, if it isn't set yet, use the light/dark mode of the system. the reader can also toggle between light and dark, data will be persistent to localStorage.
The thing is if I only adjust the page background colour base on mode data, there will be a white area appear at the top of the browser(I'm using safari on an iPhone, but I think it applies to another browser), turn out I should also change
theme-colorin the meta, so the colour of the top area of my browser will adjust accordingly with the current light/dark mode.The light/dark is a state inside the
Rootcomponent. As far as I am concerned, there is no way for me to pass it to theMetacomponent which makes adjusting the meta dynamically possible.I really want to keep light/dark mode data as a state of my component rather than a part of the URL. This is how many blogs do nowadays.
Beta Was this translation helpful? Give feedback.
All reactions