From 0f3ab19f6f023b76c2d5420408dc5ee3d59a63c7 Mon Sep 17 00:00:00 2001 From: sam Date: Wed, 25 Sep 2024 15:14:48 +0200 Subject: [PATCH] feat: remove dark mode toggle, switch to prefers-color-scheme This means it's not possible to manually change the theme, but all major operating systems support global dark mode now, so it shouldn't be a huge problem. Will re-add the dark mode toggle if the Sec-CH-Prefers-Color-Scheme header gets added to Firefox and Safari. --- Foxnouns.Frontend/app/app.scss | 21 ++-------- .../app/components/nav/BaseNavbar.tsx | 4 +- .../app/components/nav/Navbar.tsx | 38 ++----------------- Foxnouns.Frontend/app/root.tsx | 9 ++--- .../app/routes/$username/route.tsx | 2 +- .../routes/auth.callback.discord/route.tsx | 2 +- .../app/routes/auth.log-in/route.tsx | 2 +- .../app/routes/auth.welcome/route.tsx | 2 +- .../app/routes/dark-mode/route.tsx | 9 ++++- 9 files changed, 25 insertions(+), 64 deletions(-) diff --git a/Foxnouns.Frontend/app/app.scss b/Foxnouns.Frontend/app/app.scss index c7b7086..3d3b499 100644 --- a/Foxnouns.Frontend/app/app.scss +++ b/Foxnouns.Frontend/app/app.scss @@ -1,20 +1,7 @@ -$font-family-sans-serif: - "FiraGO", - system-ui, - -apple-system, - "Segoe UI", - Roboto, - "Helvetica Neue", - "Noto Sans", - "Liberation Sans", - Arial, - sans-serif, - "Apple Color Emoji", - "Segoe UI Emoji", - "Segoe UI Symbol", - "Noto Color Emoji" !default; - -@import "bootstrap/scss/bootstrap"; +@use "bootstrap/scss/bootstrap" with ( + $color-mode-type: media-query, + $font-family-sans-serif: ("FiraGO", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), +); @import "@fontsource/firago/400.css"; @import "@fontsource/firago/400-italic.css"; diff --git a/Foxnouns.Frontend/app/components/nav/BaseNavbar.tsx b/Foxnouns.Frontend/app/components/nav/BaseNavbar.tsx index f87b941..ec5b8f5 100644 --- a/Foxnouns.Frontend/app/components/nav/BaseNavbar.tsx +++ b/Foxnouns.Frontend/app/components/nav/BaseNavbar.tsx @@ -3,9 +3,9 @@ import { Nav, Navbar } from "react-bootstrap"; import { Link } from "@remix-run/react"; import Logo from "~/components/nav/Logo"; -export default function BaseNavbar({ children, theme }: { children?: ReactNode; theme: string }) { +export default function BaseNavbar({ children }: { children?: ReactNode; }) { return ( - + diff --git a/Foxnouns.Frontend/app/components/nav/Navbar.tsx b/Foxnouns.Frontend/app/components/nav/Navbar.tsx index 3f8beae..c35366f 100644 --- a/Foxnouns.Frontend/app/components/nav/Navbar.tsx +++ b/Foxnouns.Frontend/app/components/nav/Navbar.tsx @@ -1,19 +1,16 @@ import { Link, useFetcher } from "@remix-run/react"; import Meta from "~/lib/api/meta"; -import { User, UserSettings } from "~/lib/api/user"; +import { User } from "~/lib/api/user"; import { Nav, NavDropdown } from "react-bootstrap"; -import { BrightnessHigh, BrightnessHighFill, MoonFill } from "react-bootstrap-icons"; import { useTranslation } from "react-i18next"; import BaseNavbar from "~/components/nav/BaseNavbar"; export default function MainNavbar({ user, - settings, }: { meta: Meta; user?: User; - settings: UserSettings; }) { const fetcher = useFetcher(); const { t } = useTranslation(); @@ -38,39 +35,10 @@ export default function MainNavbar({ {t("navbar.log-in")} ); - - const ThemeIcon = - settings.dark_mode === null - ? BrightnessHigh - : settings.dark_mode - ? MoonFill - : BrightnessHighFill; - - const theme = settings.dark_mode ? "dark" : "light"; - + return ( - + {userMenu} - - - {t("navbar.theme")} - - } - align="end" - > - - {t("navbar.theme-auto")} - - - {t("navbar.theme-dark")} - - - {t("navbar.theme-light")} - - - ); } diff --git a/Foxnouns.Frontend/app/root.tsx b/Foxnouns.Frontend/app/root.tsx index e7caee7..7f281cb 100644 --- a/Foxnouns.Frontend/app/root.tsx +++ b/Foxnouns.Frontend/app/root.tsx @@ -57,7 +57,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => { }; export function Layout({ children }: { children: ReactNode }) { - const { locale, settings } = useRouteLoaderData("root") || { + const { locale } = useRouteLoaderData("root") || { meta: { users: { total: 0, @@ -77,7 +77,6 @@ export function Layout({ children }: { children: ReactNode }) { return ( @@ -119,10 +118,10 @@ export function ErrorBoundary() { - {data?.meUser && data?.settings && data?.meta ? ( - + {data?.meUser && data?.meta ? ( + ) : ( - + )} {errorElem} diff --git a/Foxnouns.Frontend/app/routes/$username/route.tsx b/Foxnouns.Frontend/app/routes/$username/route.tsx index c9515f7..b8ff310 100644 --- a/Foxnouns.Frontend/app/routes/$username/route.tsx +++ b/Foxnouns.Frontend/app/routes/$username/route.tsx @@ -13,7 +13,7 @@ import PronounLink from "~/components/PronounLink"; export const meta: MetaFunction = ({ data }) => { const { user } = data!; - return [{ title: `@${user.username} - pronouns.cc` }]; + return [{ title: `@${user.username} • pronouns.cc` }]; }; export const loader = async ({ request, params }: LoaderFunctionArgs) => { diff --git a/Foxnouns.Frontend/app/routes/auth.callback.discord/route.tsx b/Foxnouns.Frontend/app/routes/auth.callback.discord/route.tsx index b6dde62..75cdc5e 100644 --- a/Foxnouns.Frontend/app/routes/auth.callback.discord/route.tsx +++ b/Foxnouns.Frontend/app/routes/auth.callback.discord/route.tsx @@ -21,7 +21,7 @@ import ErrorAlert from "~/components/ErrorAlert"; import i18n from "~/i18next.server"; export const meta: MetaFunction = ({ data }) => { - return [{ title: `${data?.meta.title || "Log in"} - pronouns.cc` }]; + return [{ title: `${data?.meta.title || "Log in"} • pronouns.cc` }]; }; export const shouldRevalidate: ShouldRevalidateFunction = ({ actionResult }) => { diff --git a/Foxnouns.Frontend/app/routes/auth.log-in/route.tsx b/Foxnouns.Frontend/app/routes/auth.log-in/route.tsx index 226b859..a974de9 100644 --- a/Foxnouns.Frontend/app/routes/auth.log-in/route.tsx +++ b/Foxnouns.Frontend/app/routes/auth.log-in/route.tsx @@ -21,7 +21,7 @@ import ErrorAlert from "~/components/ErrorAlert"; import { User } from "~/lib/api/user"; export const meta: MetaFunction = ({ data }) => { - return [{ title: `${data?.meta.title || "Log in"} - pronouns.cc` }]; + return [{ title: `${data?.meta.title || "Log in"} • pronouns.cc` }]; }; export const shouldRevalidate: ShouldRevalidateFunction = ({ actionResult }) => { diff --git a/Foxnouns.Frontend/app/routes/auth.welcome/route.tsx b/Foxnouns.Frontend/app/routes/auth.welcome/route.tsx index 341da15..3925fed 100644 --- a/Foxnouns.Frontend/app/routes/auth.welcome/route.tsx +++ b/Foxnouns.Frontend/app/routes/auth.welcome/route.tsx @@ -7,7 +7,7 @@ import { Link, useLoaderData } from "@remix-run/react"; import { Button } from "react-bootstrap"; export const meta: MetaFunction = ({ data }) => { - return [{ title: `${data?.meta.title || "Welcome"} - pronouns.cc` }]; + return [{ title: `${data?.meta.title || "Welcome"} • pronouns.cc` }]; }; export const loader = async ({ request }: LoaderFunctionArgs) => { diff --git a/Foxnouns.Frontend/app/routes/dark-mode/route.tsx b/Foxnouns.Frontend/app/routes/dark-mode/route.tsx index 1a20d86..a3f82e1 100644 --- a/Foxnouns.Frontend/app/routes/dark-mode/route.tsx +++ b/Foxnouns.Frontend/app/routes/dark-mode/route.tsx @@ -4,6 +4,13 @@ import serverRequest, { getCookie, writeCookie } from "~/lib/request.server"; // Handles theme switching // Remix itself handles redirecting back to the original page after the setting is set +// +// Note: this function is currently unused. Bootstrap only lets us switch themes with either prefers-color-scheme +// *or* a programmatic switch using data-bs-theme, not both. +// If the Sec-CH-Prefers-Color-Scheme header (https://caniuse.com/mdn-http_headers_sec-ch-prefers-color-scheme) +// is added to Firefox and Safari, the dark mode setting should be reworked to use it instead. +// As it stands, using prefers-color-scheme is the only way +// to respect the operating system's dark mode setting without using JavaScript. export const action: ActionFunction = async ({ request }) => { const body = await request.formData(); const theme = (body.get("theme") as string | null) || "auto"; @@ -13,7 +20,7 @@ export const action: ActionFunction = async ({ request }) => { await serverRequest("PATCH", "/users/@me/settings", { token, body: { - dark_mode: theme === "auto" ? null : theme === "dark" ? true : false, + dark_mode: theme === "auto" ? null : theme === "dark", }, });