sam/Foxnouns.NET
sam/Foxnouns.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

feat: remove dark mode toggle, switch to prefers-color-scheme

Browse source 
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.
This commit is contained in:
sam 2024-09-25 15:14:48 +02:00
parent 862a64840e
commit 0f3ab19f6f
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
9 changed files with 25 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Foxnouns.Frontend/app/components/nav/BaseNavbar.tsx
View file

@ -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 (
<Navbar expand="lg" className={`mb-4 mx-2 bg-${theme}`} color={theme} variant={theme}>
<Navbar expand="lg" className={`mb-4 mx-2`}>
<Navbar.Brand to="/" as={Link}>
<Logo />
</Navbar.Brand>

38
Foxnouns.Frontend/app/components/nav/Navbar.tsx
View file

@ -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")}
</Nav.Link>
);
const ThemeIcon =
settings.dark_mode === null
? BrightnessHigh
: settings.dark_mode
? MoonFill
: BrightnessHighFill;
const theme = settings.dark_mode ? "dark" : "light";
return (
<BaseNavbar theme={theme}>
<BaseNavbar>
{userMenu}
<fetcher.Form method="POST" action="/dark-mode">
<NavDropdown
title={
<>
<ThemeIcon /> {t("navbar.theme")}
</>
}
align="end"
>
<NavDropdown.Item as="button" name="theme" value="auto" type="submit">
{t("navbar.theme-auto")}
</NavDropdown.Item>
<NavDropdown.Item as="button" name="theme" value="dark" type="submit">
{t("navbar.theme-dark")}
</NavDropdown.Item>
<NavDropdown.Item as="button" name="theme" value="light" type="submit">
{t("navbar.theme-light")}
</NavDropdown.Item>
</NavDropdown>
</fetcher.Form>
</BaseNavbar>
);
}