Save light/dark setting

fileformat · fileformat · commit d9ce6dde177d · 2024-10-04T20:25:09.000-04:00
diff --git a/app/components/AuthButton.tsx b/app/components/AuthButton.tsx
@@ -1,9 +1,9 @@
 import { Link as RemixLink, useRouteLoaderData } from "@remix-run/react";
 import { PiUserCircle, PiUserCircleFill } from "react-icons/pi";
-import { User } from "~/types/User";
+import { RootLoaderData } from "~/types/RootLoaderData";
 
 export function AuthButton() {
-    const user = useRouteLoaderData<User|null>("root");
+    const { user } = useRouteLoaderData<RootLoaderData>("root") as unknown as RootLoaderData;
 
     let authImage:JSX.Element = <PiUserCircle title={"Not logged in"} />;
     if (user) {
diff --git a/app/components/ColorSchemeToggle.tsx b/app/components/ColorSchemeToggle.tsx
@@ -1,24 +1,33 @@
 import React from "react";
+import { default as UnencryptedCookies } from 'js-cookie';
+import { RootLoaderData } from "~/types/RootLoaderData";
+import { useRouteLoaderData } from "@remix-run/react";
 
-function getColorScheme() {
+function getColorScheme(defaultTheme?: "light" | "dark") {
 
   if (typeof window === 'undefined') {
-    return 'light';
+    defaultTheme = defaultTheme || 'light';
+    console.log("getColorScheme: window is undefined: ", defaultTheme);
+    return defaultTheme;
   }
 
   if (document.documentElement.hasAttribute('data-bs-theme')) {
+    console.log("getColorScheme: data-bs-theme: ", document.documentElement.getAttribute('data-bs-theme'));
     return document.documentElement.getAttribute('data-bs-theme');
   }
 
   if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    console.log("getColorScheme: dark");
     return 'dark';
   } else {
+    console.log("getColorScheme: light");
     return 'light';
   }
 }
 
 export function ColorSchemeToggle() {
-  const [ currentScheme, setColorScheme ] = React.useState(getColorScheme());
+  const { theme } = useRouteLoaderData<RootLoaderData>("root") as unknown as RootLoaderData;
+  const [ currentScheme, setColorScheme ] = React.useState(getColorScheme(theme));
 
   const onClick = (scheme: 'light' | 'dark' | 'auto') => {
     if (scheme == 'auto') {
@@ -28,6 +37,8 @@ export function ColorSchemeToggle() {
         scheme = 'light';
       }
     }
+    UnencryptedCookies.set('color-theme', scheme, { path: '/' });
+    localStorage.setItem('color-theme', scheme);
     document.documentElement.setAttribute('data-bs-theme', scheme);
     setColorScheme(scheme);
   }
diff --git a/app/root.tsx b/app/root.tsx
@@ -12,9 +12,13 @@ import { Footer } from "~/components/Footer";
 import { LoaderFunctionArgs } from "@remix-run/node";
 
 import { authenticator } from "~/services/auth.server";
+import { RootLoaderData } from "./types/RootLoaderData";
 
-export async function loader({ request }: LoaderFunctionArgs) {
-  return await authenticator.isAuthenticated(request);
+export async function loader({ request }: LoaderFunctionArgs):Promise<RootLoaderData> {
+  return {
+    theme: request.headers.get("Cookie")?.includes("color-theme=dark") ? "dark" : "light",
+    user: await authenticator.isAuthenticated(request),
+  }
 }
 
 export function Layout({ children }: { children: React.ReactNode }) {
@@ -23,6 +27,13 @@ export function Layout({ children }: { children: React.ReactNode }) {
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script dangerouslySetInnerHTML={{ __html:`
+          if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.setAttribute('data-bs-theme', 'dark');
+          } else {
+            document.documentElement.setAttribute('data-bs-theme', 'light');
+          }`}}
+        />
         <link
           href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
           rel="stylesheet"
diff --git a/app/routes/links._index.tsx b/app/routes/links._index.tsx
@@ -11,6 +11,7 @@ import { regex_link } from "~/db/schema";
 import { authenticator } from "~/services/auth.server";
 import { AdminIcon } from "~/components/AdminIcon";
 import LinksTable from "~/components/LinksTable";
+import { RootLoaderData } from "~/types/RootLoaderData";
 
 export const meta: MetaFunction = () => {
     return [
@@ -28,12 +29,9 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
     const links = await dborm.select().from(regex_link).orderBy(desc(regex_link.rxl_created_at)).limit(100);
 
-    const user = authenticator.isAuthenticated(request);
-
-
     // Commit the session and return the message
     return json(
-        { links, message, user },
+        { links, message },
         {
             headers: {
                 "Set-Cookie": await cookieStorage.commitSession(session),
@@ -42,7 +40,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
     );
 }
 export default function Index() {
-    const user = useRouteLoaderData<User | null>("root");
+    const { user } = useRouteLoaderData<RootLoaderData>("root") as unknown as RootLoaderData;
     const data = useLoaderData<typeof loader>();
 
     const message = data.message as AlertMessage | undefined;
diff --git a/app/types/RootLoaderData.ts b/app/types/RootLoaderData.ts
@@ -0,0 +1,6 @@
+import { User } from "./User";
+
+export type RootLoaderData = {
+    user: User|null;
+    theme: "light" | "dark";
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -1,24 +1,33 @@`
`1`	`1`	`import React from "react";`
	`2`	`+import { default as UnencryptedCookies } from 'js-cookie';`
	`3`	`+import { RootLoaderData } from "~/types/RootLoaderData";`
	`4`	`+import { useRouteLoaderData } from "@remix-run/react";`
`2`	`5`
`3`		`-function getColorScheme() {`
	`6`	`+function getColorScheme(defaultTheme?: "light" \| "dark") {`
`4`	`7`
`5`	`8`	`if (typeof window === 'undefined') {`
`6`		`- return 'light';`
	`9`	`+ defaultTheme = defaultTheme \|\| 'light';`
	`10`	`+ console.log("getColorScheme: window is undefined: ", defaultTheme);`
	`11`	`+ return defaultTheme;`
`7`	`12`	`}`
`8`	`13`
`9`	`14`	`if (document.documentElement.hasAttribute('data-bs-theme')) {`
	`15`	`+ console.log("getColorScheme: data-bs-theme: ", document.documentElement.getAttribute('data-bs-theme'));`
`10`	`16`	`return document.documentElement.getAttribute('data-bs-theme');`
`11`	`17`	`}`
`12`	`18`
`13`	`19`	`if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {`
	`20`	`+ console.log("getColorScheme: dark");`
`14`	`21`	`return 'dark';`
`15`	`22`	`} else {`
	`23`	`+ console.log("getColorScheme: light");`
`16`	`24`	`return 'light';`
`17`	`25`	`}`
`18`	`26`	`}`
`19`	`27`
`20`	`28`	`export function ColorSchemeToggle() {`
`21`		`- const [ currentScheme, setColorScheme ] = React.useState(getColorScheme());`
	`29`	`+ const { theme } = useRouteLoaderData<RootLoaderData>("root") as unknown as RootLoaderData;`
	`30`	`+ const [ currentScheme, setColorScheme ] = React.useState(getColorScheme(theme));`
`22`	`31`
`23`	`32`	`const onClick = (scheme: 'light' \| 'dark' \| 'auto') => {`
`24`	`33`	`if (scheme == 'auto') {`
`@@ -28,6 +37,8 @@ export function ColorSchemeToggle() {`
`28`	`37`	`scheme = 'light';`
`29`	`38`	`}`
`30`	`39`	`}`
	`40`	`+ UnencryptedCookies.set('color-theme', scheme, { path: '/' });`
	`41`	`+ localStorage.setItem('color-theme', scheme);`
`31`	`42`	`document.documentElement.setAttribute('data-bs-theme', scheme);`
`32`	`43`	`setColorScheme(scheme);`
`33`	`44`	`}`