✨ feat(themes): implement theme switching

dashpresshq · Jul 13, 2024 · a060a50 · a060a50
1 parent 532e379
commit a060a50
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -71,7 +71,6 @@
     "jsonwebtoken": "^8.5.1",
     "knex": "^2.3.0",
     "latest-version": "^7.0.0",
-    "lodash": "^4.17.21",
     "microseconds": "^0.2.0",
     "mustache": "^4.2.0",
     "nanoid": "^4.0.0",
@@ -129,7 +128,6 @@
     "@types/cryptr": "^4.0.1",
     "@types/formidable": "^3.4.5",
     "@types/jsonwebtoken": "^8.5.8",
-    "@types/lodash": "^4.14.182",
     "@types/microseconds": "^0.2.0",
     "@types/node": "^18.0.0",
     "@types/nodemailer": "^6.4.6",

diff --git a/src/frontend/_layouts/portal/index.ts b/src/frontend/_layouts/portal/index.ts
@@ -0,0 +1 @@
+export { APP_THEMES, usePortalThemes, usePortalThemesSelection } from "./main";
diff --git a/src/frontend/_layouts/portal/main.ts b/src/frontend/_layouts/portal/main.ts
@@ -0,0 +1,14 @@
+import { useTheme } from "next-themes";
+
+import { noop } from "@/shared/lib/noop";
+
+export const usePortalThemes = () => {
+  noop();
+};
+
+export const APP_THEMES = ["light", "dark"];
+
+export const usePortalThemesSelection = () => {
+  const { themes } = useTheme();
+  return themes;
+};
diff --git a/src/frontend/_layouts/useAppTheme.ts b/src/frontend/_layouts/useAppTheme.ts
@@ -2,6 +2,8 @@
 /* eslint-disable no-bitwise */
 import { useAppConfiguration } from "@/frontend/hooks/configuration/configuration.store";
 
+import { usePortalThemes } from "./portal";
+
 type ThreeNumbers = readonly [number, number, number];
 
 function hexToRgb(hex$1: string): ThreeNumbers {
@@ -67,6 +69,8 @@ function hexToOklch(hex: string) {
 export const useAppTheme = () => {
   const themeColor = useAppConfiguration("theme_color");
 
+  usePortalThemes();
+
   document.documentElement.style.setProperty(
     "--app-primary",
     hexToOklch(themeColor.data.primary)

diff --git a/src/frontend/components/app/roots.tsx b/src/frontend/components/app/roots.tsx
@@ -4,6 +4,7 @@ import type { ReactNode } from "react";
 import { LinguiProvider } from "translations/utils";
 
 import { PortalProvider } from "@/frontend/_layouts/app/portal";
+import { APP_THEMES } from "@/frontend/_layouts/portal";
 import { GoogleTagManager } from "@/frontend/_layouts/scripts/GoogleTagManager";
 import { QueryProvider } from "@/frontend/lib/data/QueryClient";
 
@@ -18,9 +19,7 @@ export function ApplicationRoot({
   translation?: Messages;
 }) {
   return (
-    <ThemeProvider
-      themes={["light", "dark"].sort((a, b) => a.localeCompare(b))}
-    >
+    <ThemeProvider themes={APP_THEMES}>
       <LinguiProvider translation={translation}>
         <QueryProvider>
           <Toaster />

diff --git a/src/frontend/components/ui/calendar.tsx b/src/frontend/components/ui/calendar.tsx
@@ -29,7 +29,7 @@ function Calendar({ className, classNames, ...props }: CalendarProps) {
         head_cell: "text-muted rounded-md w-8 font-normal text-[0.8rem]",
         row: "flex w-full mt-2",
         cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-primary [&:has([aria-selected].day-outside)]:bg-primary/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          "[&:has([aria-selected].day-outside)]:bg-primary/50 relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-primary [&:has([aria-selected].day-range-end)]:rounded-r-md",
           props.mode === "range"
             ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
             : "[&:has([aria-selected])]:rounded-md"

diff --git a/src/frontend/views/account/Preferences/index.tsx b/src/frontend/views/account/Preferences/index.tsx
@@ -5,6 +5,7 @@ import languages from "translations/languages";
 
 import { SchemaForm } from "@/components/app/form/schema";
 import { SectionBox } from "@/components/app/section-box";
+import { usePortalThemesSelection } from "@/frontend/_layouts/portal";
 import { useDomainMessages } from "@/frontend/lib/crud-config";
 import { LANG_DOMAINS } from "@/frontend/lib/crud-config/lang-domains";
 import { useSetPageDetails } from "@/frontend/lib/routing/usePageDetails";
@@ -39,7 +40,9 @@ export const LANGUAGE_PREFERENCES_FORM_SCHEMA: IAppliedSchemaFormConfig<{
 };
 
 export function UserPreferences() {
-  const { theme, setTheme, themes } = useTheme();
+  const { theme, setTheme } = useTheme();
+  const themes = usePortalThemesSelection();
+
   const domainMessages = useDomainMessages(LANG_DOMAINS.ACCOUNT.PREFERENCES);
   const router = useRouter();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { APP_THEMES, usePortalThemes, usePortalThemesSelection } from "./main";