Chore/remove usage of mantine color scheme (Stirling-Tools#6108)

Remove instances of `colorScheme === "dark" ?` in the app and rely on
the theme.css' light and dark variables instead.

Author: EthanHealy01

frontend/.prettierignore

@@ -1,4 +1,6 @@
 dist/
+# Tauri/Cargo build output (binary assets named *.js etc. confuse Prettier)
+src-tauri/target/
 node_modules/
 public/vendor/
 public/pdfjs*/

frontend/src/core/components/fileEditor/AddFileCard.tsx

@@ -1,10 +1,10 @@
 import React, { useRef, useState } from "react";
-import { Button, Group, useMantineColorScheme } from "@mantine/core";
+import { Button, Group } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import AddIcon from "@mui/icons-material/Add";
 import { useFilesModalContext } from "@app/contexts/FilesModalContext";
 import LocalIcon from "@app/components/shared/LocalIcon";
-import { useLogoAssets } from "@app/hooks/useLogoAssets";
+import { Wordmark } from "@app/components/shared/Wordmark";
 import styles from "@app/components/fileEditor/FileEditor.module.css";
 import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
 import { useFileActionIcons } from "@app/hooks/useFileActionIcons";
@@ -24,9 +24,7 @@ const AddFileCard = ({
   const { t } = useTranslation();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { openFilesModal } = useFilesModalContext();
-  const { colorScheme } = useMantineColorScheme();
   const [isUploadHover, setIsUploadHover] = useState(false);
-  const { wordmark } = useLogoAssets();
   const terminology = useFileActionTerminology();
   const icons = useFileActionIcons();
 
@@ -98,9 +96,9 @@ const AddFileCard = ({
         <div className={styles.addFileContent}>
           {/* Stirling PDF Branding */}
           <Group gap="xs" align="center">
-            <img
-              src={colorScheme === "dark" ? wordmark.white : wordmark.grey}
+            <Wordmark
               alt="Stirling PDF"
+              muted
               style={{ height: "2.2rem", width: "auto" }}
             />
           </Group>

frontend/src/core/components/fileManager/EmptyFilesState.tsx

@@ -1,25 +1,17 @@
 import React, { useState } from "react";
-import {
-  Button,
-  Group,
-  Text,
-  Stack,
-  useMantineColorScheme,
-} from "@mantine/core";
+import { Button, Group, Text, Stack } from "@mantine/core";
 import HistoryIcon from "@mui/icons-material/History";
 import { useTranslation } from "react-i18next";
 import { useFileManagerContext } from "@app/contexts/FileManagerContext";
 import LocalIcon from "@app/components/shared/LocalIcon";
-import { useLogoAssets } from "@app/hooks/useLogoAssets";
+import { Wordmark } from "@app/components/shared/Wordmark";
 import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
 import { useFileActionIcons } from "@app/hooks/useFileActionIcons";
 
 const EmptyFilesState: React.FC = () => {
   const { t } = useTranslation();
-  const { colorScheme } = useMantineColorScheme();
   const { onLocalFileClick } = useFileManagerContext();
   const [isUploadHover, setIsUploadHover] = useState(false);
-  const { wordmark } = useLogoAssets();
   const terminology = useFileActionTerminology();
   const icons = useFileActionIcons();
 
@@ -65,9 +57,9 @@ const EmptyFilesState: React.FC = () => {
 
         {/* Stirling PDF Logo */}
         <Group gap="xs" align="center">
-          <img
-            src={colorScheme === "dark" ? wordmark.white : wordmark.grey}
+          <Wordmark
             alt="Stirling PDF"
+            muted
             style={{ height: "2.2rem", width: "auto" }}
           />
         </Group>

frontend/src/core/components/shared/LogoIcon.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { useMantineColorScheme } from "@mantine/core";
+import { useLogoPath } from "@app/hooks/useLogoPath";
+
+interface LogoIconProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  alt?: string;
+}
+
+export function LogoIcon({ alt = "", ...props }: LogoIconProps) {
+  const { colorScheme } = useMantineColorScheme();
+  const logoPaths = useLogoPath();
+  const src = colorScheme === "dark" ? logoPaths.dark : logoPaths.light;
+  return <img src={src} alt={alt} {...props} />;
+}

frontend/src/core/components/shared/TextInput.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef } from "react";
-import { useMantineColorScheme } from "@mantine/core";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import styles from "@app/components/shared/textInput/TextInput.module.css";
 
@@ -61,8 +60,6 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
     },
     ref,
   ) => {
-    const { colorScheme } = useMantineColorScheme();
-
     const handleClear = () => {
       if (onClear) {
         onClear();
@@ -79,7 +76,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
         {icon && (
           <span
             className={styles.icon}
-            style={{ color: colorScheme === "dark" ? "#FFFFFF" : "#6B7382" }}
+            style={{ color: "var(--search-text-and-icon-color)" }}
           >
             {icon}
           </span>
@@ -99,8 +96,8 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
           aria-label={ariaLabel}
           onFocus={onFocus}
           style={{
-            backgroundColor: colorScheme === "dark" ? "#4B525A" : "#FFFFFF",
-            color: colorScheme === "dark" ? "#FFFFFF" : "#6B7382",
+            backgroundColor: "var(--input-bg)",
+            color: "var(--search-text-and-icon-color)",
             paddingRight: shouldShowClearButton ? "40px" : "12px",
             paddingLeft: icon ? "40px" : "12px",
           }}
@@ -111,7 +108,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
             type="button"
             className={styles.clearButton}
             onClick={handleClear}
-            style={{ color: colorScheme === "dark" ? "#FFFFFF" : "#6B7382" }}
+            style={{ color: "var(--search-text-and-icon-color)" }}
             aria-label="Clear input"
           >
             <LocalIcon icon="close-rounded" width="1.25rem" height="1.25rem" />

frontend/src/core/components/shared/Wordmark.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { useMantineColorScheme } from "@mantine/core";
+import { useLogoAssets } from "@app/hooks/useLogoAssets";
+
+interface WordmarkProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  alt?: string;
+  muted?: boolean;
+}
+
+export function Wordmark({ alt = "", muted = false, ...props }: WordmarkProps) {
+  const { colorScheme } = useMantineColorScheme();
+  const isDark = colorScheme === "dark";
+  const { wordmark } = useLogoAssets();
+
+  // light: black text (standard) or grey text (muted)
+  // dark:  white text for both variants
+  const src = isDark ? wordmark.white : muted ? wordmark.grey : wordmark.black;
+
+  return <img src={src} alt={alt} {...props} />;
+}

frontend/src/core/components/tools/FullscreenToolSurface.tsx

@@ -1,19 +1,14 @@
 import { useState, useRef } from "react";
-import {
-  ActionIcon,
-  ScrollArea,
-  Switch,
-  useMantineColorScheme,
-} from "@mantine/core";
+import { ActionIcon, ScrollArea, Switch } from "@mantine/core";
 import DoubleArrowIcon from "@mui/icons-material/DoubleArrow";
 import { useTranslation } from "react-i18next";
 import ToolSearch from "@app/components/tools/toolPicker/ToolSearch";
 import FullscreenToolList from "@app/components/tools/FullscreenToolList";
 import { ToolRegistryEntry } from "@app/data/toolsTaxonomy";
 import { ToolId } from "@app/types/toolId";
 import { useFocusTrap } from "@app/hooks/useFocusTrap";
-import { useLogoPath } from "@app/hooks/useLogoPath";
-import { useLogoAssets } from "@app/hooks/useLogoAssets";
+import { LogoIcon } from "@app/components/shared/LogoIcon";
+import { Wordmark } from "@app/components/shared/Wordmark";
 import { Tooltip } from "@app/components/shared/Tooltip";
 import "@app/components/tools/ToolPanel.css";
 import { ToolPanelGeometry } from "@app/hooks/tools/useToolPanelGeometry";
@@ -52,7 +47,6 @@ const FullscreenToolSurface = ({
   geometry,
 }: FullscreenToolSurfaceProps) => {
   const { t } = useTranslation();
-  const { colorScheme } = useMantineColorScheme();
   const [isExiting, setIsExiting] = useState(false);
   const surfaceRef = useRef<HTMLDivElement>(null);
   const isRTL =
@@ -62,9 +56,6 @@ const FullscreenToolSurface = ({
   useFocusTrap(surfaceRef, !isExiting);
 
   const brandAltText = t("home.mobile.brandAlt", "Stirling PDF logo");
-  const brandIconSrc = useLogoPath();
-  const { wordmark } = useLogoAssets();
-  const brandTextSrc = colorScheme === "dark" ? wordmark.white : wordmark.black;
 
   const handleExit = () => {
     const prefersReducedMotion = window.matchMedia(
@@ -118,13 +109,8 @@ const FullscreenToolSurface = ({
       >
         <header className="tool-panel__fullscreen-header">
           <div className="tool-panel__fullscreen-brand">
-            <img
-              src={brandIconSrc}
-              alt=""
-              className="tool-panel__fullscreen-brand-icon"
-            />
-            <img
-              src={brandTextSrc}
+            <LogoIcon className="tool-panel__fullscreen-brand-icon" />
+            <Wordmark
               alt={brandAltText}
               className="tool-panel__fullscreen-brand-text"
             />

frontend/src/core/components/tools/convert/ConvertSettings.tsx

@@ -6,7 +6,6 @@ import {
   Divider,
   UnstyledButton,
   useMantineTheme,
-  useMantineColorScheme,
 } from "@mantine/core";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { useTranslation } from "react-i18next";
@@ -64,7 +63,6 @@ const ConvertSettings = ({
 }: ConvertSettingsProps) => {
   const { t } = useTranslation();
   const theme = useMantineTheme();
-  const { colorScheme } = useMantineColorScheme();
   const { setSelectedFiles } = useFileSelection();
   const { state, selectors } = useFileState();
   const activeFiles = state.files.ids;
@@ -339,14 +337,8 @@ const ConvertSettings = ({
               padding: "0.5rem 0.75rem",
               border: `0.0625rem solid ${theme.colors.gray[4]}`,
               borderRadius: theme.radius.sm,
-              backgroundColor:
-                colorScheme === "dark"
-                  ? theme.colors.dark[5]
-                  : theme.colors.gray[1],
-              color:
-                colorScheme === "dark"
-                  ? theme.colors.dark[2]
-                  : theme.colors.gray[6],
+              backgroundColor: "var(--select-placeholder-bg)",
+              color: "var(--select-placeholder-text)",
               cursor: "not-allowed",
             }}
           >
@@ -360,10 +352,7 @@ const ConvertSettings = ({
               <KeyboardArrowDownIcon
                 style={{
                   fontSize: "1rem",
-                  color:
-                    colorScheme === "dark"
-                      ? theme.colors.dark[2]
-                      : theme.colors.gray[6],
+                  color: "var(--select-placeholder-text)",
                 }}
               />
             </Group>

frontend/src/core/components/tools/convert/GroupedFormatDropdown.tsx

@@ -8,7 +8,6 @@ import {
   Popover,
   UnstyledButton,
   useMantineTheme,
-  useMantineColorScheme,
 } from "@mantine/core";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import CloudOutlinedIcon from "@mui/icons-material/CloudOutlined";
@@ -47,7 +46,6 @@ const GroupedFormatDropdown = ({
 }: GroupedFormatDropdownProps) => {
   const [dropdownOpened, setDropdownOpened] = useState(false);
   const theme = useMantineTheme();
-  const { colorScheme } = useMantineColorScheme();
 
   const groupedOptions = useMemo(() => {
     const groups: Record<string, FormatOption[]> = {};
@@ -100,18 +98,12 @@ const GroupedFormatDropdown = ({
             borderRadius: theme.radius.sm,
             backgroundColor: disabled
               ? theme.colors.gray[1]
-              : colorScheme === "dark"
-                ? theme.colors.dark[6]
-                : theme.white,
+              : "var(--dropdown-trigger-bg)",
             cursor: disabled ? "not-allowed" : "pointer",
             width: "100%",
             color: disabled
-              ? colorScheme === "dark"
-                ? theme.colors.dark[1]
-                : theme.colors.dark[7]
-              : colorScheme === "dark"
-                ? theme.colors.dark[0]
-                : theme.colors.dark[9],
+              ? "var(--dropdown-trigger-text-disabled)"
+              : "var(--dropdown-trigger-text)",
           }}
         >
           <Group justify="space-between">
@@ -123,10 +115,7 @@ const GroupedFormatDropdown = ({
                 fontSize: "1rem",
                 transform: dropdownOpened ? "rotate(180deg)" : "rotate(0deg)",
                 transition: "transform 0.2s ease",
-                color:
-                  colorScheme === "dark"
-                    ? theme.colors.dark[2]
-                    : theme.colors.gray[6],
+                color: "var(--dropdown-trigger-icon)",
               }}
             />
           </Group>
@@ -138,9 +127,8 @@ const GroupedFormatDropdown = ({
           maxWidth: "90vw",
           maxHeight: "40vh",
           overflow: "auto",
-          backgroundColor:
-            colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
-          border: `0.0625rem solid ${colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4]}`,
+          backgroundColor: "var(--dropdown-panel-bg)",
+          border: `0.0625rem solid var(--dropdown-panel-border)`,
         }}
       >
         <Stack gap="md">
@@ -149,8 +137,8 @@ const GroupedFormatDropdown = ({
               <Text
                 size="sm"
                 fw={600}
-                c={colorScheme === "dark" ? "dark.2" : "gray.6"}
                 mb="xs"
+                style={{ color: "var(--dropdown-group-label)" }}
               >
                 {groupName}
               </Text>

frontend/src/core/hooks/useLogoAssets.ts

@@ -15,16 +15,16 @@ export function useLogoAssets() {
       folder,
       folderPath,
       getAssetPath: (name: string) => `${folderPath}/${name}`,
+      wordmark: {
+        black: `${folderPath}/StirlingPDFLogoBlackText.svg`,
+        grey: `${folderPath}/StirlingPDFLogoGreyText.svg`,
+        white: `${folderPath}/StirlingPDFLogoWhiteText.svg`,
+      },
       tooltipLogo: `${folderPath}/logo-tooltip.svg`,
       firstPage: `${folderPath}/Firstpage.png`,
       favicon: `${folderPath}/favicon.ico`,
       logo192: `${folderPath}/logo192.png`,
       logo512: `${folderPath}/logo512.png`,
-      wordmark: {
-        white: `${folderPath}/StirlingPDFLogoWhiteText.svg`,
-        black: `${folderPath}/StirlingPDFLogoBlackText.svg`,
-        grey: `${folderPath}/StirlingPDFLogoGreyText.svg`,
-      },
       manifestHref:
         logoVariant === "classic"
           ? `${BASE_PATH}/manifest-classic.json`