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

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

frontend/src/desktop/components/BackendHealthIndicator.tsx

@@ -1,12 +1,6 @@
 import React, { useMemo, useCallback } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  Box,
-  Tooltip,
-  useMantineTheme,
-  useComputedColorScheme,
-  rem,
-} from "@mantine/core";
+import { Box, Tooltip, useMantineTheme, rem } from "@mantine/core";
 import { useBackendHealth } from "@app/hooks/useBackendHealth";
 
 interface BackendHealthIndicatorProps {
@@ -18,7 +12,6 @@ export const BackendHealthIndicator: React.FC<BackendHealthIndicatorProps> = ({
 }) => {
   const { t } = useTranslation();
   const theme = useMantineTheme();
-  const colorScheme = useComputedColorScheme("light");
   const { status, isOnline, checkHealth } = useBackendHealth();
 
   const label = useMemo(() => {
@@ -60,14 +53,7 @@ export const BackendHealthIndicator: React.FC<BackendHealthIndicatorProps> = ({
   );
 
   return (
-    <Tooltip
-      label={label}
-      position="left"
-      offset={12}
-      withArrow
-      withinPortal
-      color={colorScheme === "dark" ? undefined : "dark"}
-    >
+    <Tooltip label={label} position="left" offset={12} withArrow withinPortal>
       <Box
         component="span"
         className={className ? `${className}` : undefined}
@@ -82,10 +68,7 @@ export const BackendHealthIndicator: React.FC<BackendHealthIndicatorProps> = ({
           height: rem(12),
           borderRadius: "50%",
           backgroundColor: dotColor,
-          boxShadow:
-            colorScheme === "dark"
-              ? "0 0 0 2px rgba(255, 255, 255, 0.18)"
-              : "0 0 0 2px rgba(0, 0, 0, 0.08)",
+          boxShadow: "var(--status-dot-ring)",
           cursor: "pointer",
           display: "inline-block",
           outline: "none",

frontend/src/desktop/components/rightRail/RightRailFooterExtensions.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo } from "react";
-import { Box, Tooltip, rem, useComputedColorScheme } from "@mantine/core";
+import { Box, Tooltip, rem } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import {
   connectionModeService,
@@ -18,7 +18,6 @@ interface RightRailFooterExtensionsProps {
 
 function ConnectionStatusDot() {
   const { t } = useTranslation();
-  const colorScheme = useComputedColorScheme("light");
   const [connectionMode, setConnectionMode] = useState<ConnectionMode | null>(
     null,
   );
@@ -84,14 +83,7 @@ function ConnectionStatusDot() {
   }, [connectionMode, selfHostedState, isOnline, t]);
 
   return (
-    <Tooltip
-      label={label}
-      position="left"
-      offset={12}
-      withArrow
-      withinPortal
-      color={colorScheme === "dark" ? undefined : "dark"}
-    >
+    <Tooltip label={label} position="left" offset={12} withArrow withinPortal>
       <Box
         component="span"
         role="status"
@@ -109,10 +101,7 @@ function ConnectionStatusDot() {
           height: rem(10),
           borderRadius: "50%",
           backgroundColor: color,
-          boxShadow:
-            colorScheme === "dark"
-              ? "0 0 0 2px rgba(255, 255, 255, 0.15)"
-              : "0 0 0 2px rgba(0, 0, 0, 0.07)",
+          boxShadow: "var(--status-dot-ring)",
           display: "inline-block",
           cursor: "pointer",
           outline: "none",