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

9
Foxnouns.Frontend/app/routes/dark-mode/route.tsx
View file

@ -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<UserSettings>("PATCH", "/users/@me/settings", {
token,
body: {
dark_mode: theme === "auto" ? null : theme === "dark" ? true : false,
dark_mode: theme === "auto" ? null : theme === "dark",
},
});