frontend: Dark Mode - Allowing Overrides

frontend/packages/core/src/AppLayout/drawer.tsx

@@ -18,7 +18,6 @@ import { useAppContext } from "../Contexts";
 import { useNavigate } from "../navigation";
 import type { PopperItemProps } from "../popper";
 import { Popper, PopperItem } from "../popper";
-import { THEME_VARIANTS } from "../Theme/colors";
 
 import { filterHiddenRoutes, routesByGrouping, sortedGroupings, workflowByRoute } from "./utils";
 
@@ -30,9 +29,7 @@ const DrawerPanel = styled(MuiDrawer)(({ theme }: { theme: Theme }) => ({
     top: "unset",
     width: "inherit",
     backgroundColor:
-      theme.palette.mode === THEME_VARIANTS.light
-        ? theme.palette.contrastColor
-        : theme.palette.background.paper,
+      theme.palette.mode === "light" ? theme.palette.contrastColor : theme.palette.background.paper,
     boxShadow: `0px 5px 15px ${alpha(theme.palette.primary[400], 0.2)}`,
     position: "relative",
     display: "flex",

frontend/packages/core/src/AppLayout/theme-switcher.tsx

@@ -6,26 +6,25 @@ import get from "lodash/get";
 
 import { useUserPreferences } from "../Contexts";
 import { Select } from "../Input";
-import { THEME_VARIANTS } from "../Theme/colors";
 
 const ThemeSwitcher = () => {
   const { preferences, dispatch } = useUserPreferences();
 
   const options = [
     {
-      label: THEME_VARIANTS.light,
+      label: "Light",
       startAdornment: <LightModeIcon />,
     },
     {
-      label: THEME_VARIANTS.dark,
+      label: "Dark",
       startAdornment: <DarkModeIcon />,
     },
   ];
 
   const handleOnChange = (value: string) => {
     dispatch({
       type: "SetPref",
-      payload: { key: "theme", value },
+      payload: { key: "theme", value: value.toUpperCase() },
     });
   };
 

frontend/packages/core/src/AppProvider/index.tsx

@@ -13,11 +13,12 @@ import { FEATURE_FLAG_POLL_RATE, featureFlags } from "../flags";
 import Landing from "../landing";
 import type { ClutchError } from "../Network/errors";
 import NotFound from "../not-found";
+import { Theme } from "../Theme";
+import type { ThemeOverrides } from "../Theme/types";
 
 import { registeredWorkflows } from "./registrar";
 import ShortLinkProxy, { ShortLinkBaseRoute } from "./short-link-proxy";
 import ShortLinkStateHydrator from "./short-link-state-hydrator";
-import { Theme } from "./themes";
 import type { ConfiguredRoute, Workflow, WorkflowConfiguration } from "./workflow";
 import ErrorBoundary from "./workflow";
 
@@ -76,14 +77,16 @@ interface ClutchAppProps {
     [key: string]: () => WorkflowConfiguration;
   };
   configuration: UserConfiguration;
-  appConfiguration: AppConfiguration;
+  appConfiguration?: AppConfiguration;
   children?: ClutchAppChild | ClutchAppChild[];
+  themeOverrides?: ThemeOverrides;
 }
 
 const ClutchApp = ({
   availableWorkflows,
   configuration: userConfiguration,
   appConfiguration,
+  themeOverrides,
   children,
 }: ClutchAppProps) => {
   const [workflows, setWorkflows] = React.useState<Workflow[]>([]);
@@ -161,7 +164,7 @@ const ClutchApp = ({
   return (
     <Router>
       <UserPreferencesProvider>
-        <Theme>
+        <Theme overrides={themeOverrides}>
           <div id="App">
             <ApplicationContext.Provider value={appContextValue}>
               <ShortLinkContext.Provider value={shortLinkProviderProps}>

frontend/packages/core/src/Charts/linearTimeline.tsx

@@ -10,7 +10,7 @@ import {
   YAxis,
 } from "recharts";
 
-import { useTheme } from "../AppProvider/themes";
+import { useTheme } from "../Theme";
 
 import { calculateDomainEdges, calculateTicks, localTimeFormatter } from "./helpers";
 import type { CustomTooltipProps, LinearTimelineData, LinearTimelineStylingProps } from "./types";
@@ -92,9 +92,9 @@ const LinearTimeline = ({
           style={{
             backgroundColor:
               stylingProps?.tooltipBackgroundColor ||
-              theme.colors.charts.linearTimeline.tooltipBackgroundColor,
+              theme.chartColors.linearTimeline.tooltipBackgroundColor,
             color:
-              stylingProps?.tooltipTextColor || theme.colors.charts.linearTimeline.tooltipTextColor,
+              stylingProps?.tooltipTextColor || theme.chartColors.linearTimeline.tooltipTextColor,
           }}
         >
           {localTimeFormatter(payload[0].value)}
@@ -111,9 +111,9 @@ const LinearTimeline = ({
         <CartesianGrid
           fill={
             stylingProps?.gridBackgroundColor ??
-            theme.colors.charts.linearTimeline.gridBackgroundColor
+            theme.chartColors.linearTimeline.gridBackgroundColor
           }
-          stroke={stylingProps?.gridStroke ?? theme.colors.charts.linearTimeline.gridStroke}
+          stroke={stylingProps?.gridStroke ?? theme.chartColors.linearTimeline.gridStroke}
         />
         <XAxis
           dataKey={xAxisDataKey}

frontend/packages/core/src/Charts/pie.tsx

@@ -95,11 +95,11 @@ interface PieChartState {
 }
 
 const ChartLabelPrimary = styled("text")(({ theme }: { theme: Theme }) => ({
-  fill: theme.colors.charts.pie.labelPrimary,
+  fill: theme.chartColors.pie.labelPrimary,
 }));
 
 const ChartLabelSecondary = styled("text")(({ theme }: { theme: Theme }) => ({
-  fill: theme.colors.charts.pie.labelSecondary,
+  fill: theme.chartColors.pie.labelSecondary,
 }));
 
 const renderActiveShape = (props, options) => {