add light and dark mode toggle to home page

changelog/ENG-2726-implement-dark-mode.yaml

@@ -0,0 +1,4 @@
+type: Added
+description: Adds an (alpha) light/dark mode capability to the Admin UI Home page
+pr: 7430
+labels: []

clients/admin-ui/src/features/common/ThemeModeToggle.tsx

@@ -0,0 +1,26 @@
+import type { ThemeMode } from "fidesui";
+import { Icons, Segmented, useThemeMode } from "fidesui";
+
+// NOTE: This button is temporary, only for testing in dev.
+
+export const ThemeModeSegmented = () => {
+  const { mode, setMode } = useThemeMode();
+
+  return (
+    <Segmented
+      size="small"
+      value={mode}
+      onChange={(value) => setMode(value as ThemeMode)}
+      options={[
+        {
+          label: <Icons.Light size={14} />,
+          value: "light",
+        },
+        {
+          label: <Icons.Asleep size={14} />,
+          value: "dark",
+        },
+      ]}
+    />
+  );
+};

clients/admin-ui/src/flags.json

@@ -69,5 +69,12 @@
     "development": true,
     "test": false,
     "production": false
+  },
+  "alphaDarkMode": {
+    "label": "Alpha light and dark theme",
+    "description": "Enable switching themes on Home page",
+    "development": true,
+    "test": false,
+    "production": false
   }
 }

clients/admin-ui/src/home/HomeBanner.tsx

@@ -1,27 +1,35 @@
-import { ChakraFlex as Flex, ChakraText as Text } from "fidesui";
+import { Flex, Text, Title, useThemeMode } from "fidesui";
 import palette from "fidesui/src/palette/palette.module.scss";
 import * as React from "react";
 
 import { useFeatures } from "~/features/common/features";
 
 const HomeBanner = () => {
   const { systemsCount } = useFeatures();
+  const { resolvedMode } = useThemeMode();
+
+  // Read the background color directly from the theme config so it always
+  // matches the applied theme regardless of how Ant resolves CSS variables.
+  // Once we're using ant Layout globally, we won't need to hard-code the colors.
+  const bgColor =
+    resolvedMode === "dark"
+      ? palette.FIDESUI_BG_MINOS
+      : palette.FIDESUI_CORINTH;
+
   const hasSystems = systemsCount > 0;
 
   return (
-    <Flex background={palette.FIDESUI_CORINTH}>
-      <Flex flexDir="column" maxWidth="600px" padding="10" paddingBottom="16">
+    <Flex style={{ background: bgColor }}>
+      <Flex vertical className="max-w-[600px] p-10 pb-16">
         {hasSystems && (
           <>
-            <Text fontSize="3xl" fontWeight="semibold">
-              Welcome back!
-            </Text>
-            <Text marginTop="1" fontSize="lg" fontWeight="semibold">
+            <Title level={1}>Welcome back!</Title>
+            <Text strong size="lg" className="mt-1 block">
               {`${systemsCount} system${
                 systemsCount > 1 ? "s" : ""
               } currently under management`}
             </Text>
-            <Text marginTop="1" fontSize="sm">
+            <Text className="mt-1 block">
               {`Fides is currently managing privacy for ${systemsCount} system${
                 systemsCount > 1 ? "s" : ""
               }. From here you can continue adding and managing systems, process privacy requests or generate reports for your privacy compliance requirements.`}
@@ -30,13 +38,11 @@ const HomeBanner = () => {
         )}
         {!hasSystems && (
           <>
-            <Text fontSize="3xl" fontWeight="semibold">
-              Welcome to Fides!
-            </Text>
-            <Text marginTop="1" fontSize="lg" fontWeight="semibold">
+            <Title level={1}>Welcome to Fides!</Title>
+            <Text strong size="lg" className="mt-1 block">
               Start your privacy engineering journey today
             </Text>
-            <Text marginTop="1" fontSize="sm">
+            <Text className="mt-1 block">
               Step one in setting up your privacy engineering platform is adding
               the systems you need to manage. Use the links below to add and
               configure systems within Fides for data mapping and privacy

clients/admin-ui/src/home/HomeContainer.tsx

@@ -1,18 +1,68 @@
-import { ChakraFlex as Flex } from "fidesui";
+import {
+  ConfigProvider,
+  darkAntTheme,
+  defaultAntTheme,
+  Flex,
+  ThemeModeProvider,
+  useThemeMode,
+} from "fidesui";
+import palette from "fidesui/src/palette/palette.module.scss";
 import * as React from "react";
 
+import { useFlags } from "~/features/common/features";
 import Layout from "~/features/common/Layout";
+import { ThemeModeSegmented } from "~/features/common/ThemeModeToggle";
 
 import HomeBanner from "./HomeBanner";
 import HomeContent from "./HomeContent";
 
-const HomeContainer = () => (
-  <Layout title="Home" padded={false}>
-    <Flex direction="column" gap={10} pb={6}>
-      <HomeBanner />
-      <HomeContent />
-    </Flex>
-  </Layout>
-);
+const HomeContainerInner = () => {
+  const { resolvedMode } = useThemeMode();
+  const {
+    flags: { alphaDarkMode },
+  } = useFlags();
+
+  const activeTheme = resolvedMode === "dark" ? darkAntTheme : defaultAntTheme;
+  const bgColor =
+    resolvedMode === "dark"
+      ? palette.FIDESUI_BG_MINOS
+      : palette.FIDESUI_FULL_WHITE;
+
+  return (
+    <ConfigProvider theme={activeTheme}>
+      {/* this wrapping div can be removed once global theming is applied */}
+      <div className="min-h-full w-full" style={{ backgroundColor: bgColor }}>
+        <Layout title="Home" padded={false}>
+          <Flex vertical gap={40} className="pb-6">
+            {/* NOTE: temporary button placement for testing */}
+            {alphaDarkMode && (
+              <Flex className="absolute pl-2 pt-2">
+                <ThemeModeSegmented />
+              </Flex>
+            )}
+
+            <HomeBanner />
+            <HomeContent />
+          </Flex>
+        </Layout>
+      </div>
+    </ConfigProvider>
+  );
+};
+
+const HomeContainer = () => {
+  const {
+    flags: { alphaDarkMode },
+  } = useFlags();
+  return (
+    <ThemeModeProvider
+      defaultMode="light"
+      locked={!alphaDarkMode}
+      wrapperStyle={{ width: "100%" }}
+    >
+      <HomeContainerInner />
+    </ThemeModeProvider>
+  );
+};
 
 export default HomeContainer;

clients/admin-ui/src/home/HomeContent.tsx

@@ -1,4 +1,4 @@
-import { ChakraFlex as Flex, ChakraSimpleGrid as SimpleGrid } from "fidesui";
+import { Col, Flex, Row } from "fidesui";
 import NextLink from "next/link";
 import * as React from "react";
 import { useMemo } from "react";
@@ -27,20 +27,22 @@ const HomeContent = () => {
   );
 
   return (
-    <Flex paddingX={10} data-testid="home-content">
-      <SimpleGrid columns={{ md: 2, xl: 3 }} spacing="24px">
+    <Flex className="px-10" data-testid="home-content">
+      <Row gutter={[24, 24]} className="w-full">
         {list
           .sort((a, b) => (a.sortOrder > b.sortOrder ? 1 : -1))
           .map((item) => (
-            <NextLink href={item.href} key={item.key} className="flex">
-              <CalloutNavCard
-                title={item.name}
-                description={item.description}
-                color={item.color}
-              />
-            </NextLink>
+            <Col key={item.key} xs={24} md={12} xl={8}>
+              <NextLink href={item.href} className="flex h-full">
+                <CalloutNavCard
+                  title={item.name}
+                  description={item.description}
+                  color={item.color}
+                />
+              </NextLink>
+            </Col>
           ))}
-      </SimpleGrid>
+      </Row>
     </Flex>
   );
 };

clients/admin-ui/src/home/HomeLayout.tsx

@@ -1,4 +1,4 @@
-import { ChakraFlex as Flex } from "fidesui";
+import { Flex } from "fidesui";
 import Head from "next/head";
 import * as React from "react";
 import { ReactNode } from "react";
@@ -9,13 +9,13 @@ type HomeLayoutProps = {
 };
 
 const HomeLayout = ({ children, title }: HomeLayoutProps) => (
-  <Flex data-testid={title} direction="column" height="100%">
+  <Flex vertical data-testid={title} className="h-full">
     <Head>
       <title>Fides Admin UI - {title}</title>
       <meta name="description" content="Privacy Engineering Platform" />
       <link rel="icon" href="/favicon.ico" />
     </Head>
-    <Flex as="main" flexDirection="column" gap={10}>
+    <Flex vertical gap={40} component="main">
       {children}
     </Flex>
   </Flex>

clients/admin-ui/tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: ["selector", '[data-theme="dark"]'],
   content: [
     "./src/**/*.{js,ts,jsx,tsx,mdx}",
     "../fidesui/src/components/**/*.{js,ts,jsx,tsx,mdx}",

clients/fidesui/src/ant-theme/dark-theme.ts

@@ -0,0 +1,31 @@
+import { theme, ThemeConfig } from "antd";
+
+import palette from "../palette/palette.module.scss";
+import { defaultAntTheme } from "./default-theme";
+
+/**
+ * Dark mode theme for Ant Design components.
+ * Uses Ant Design's built-in darkAlgorithm for automatic dark color generation,
+ * with custom overrides to match the Fides brand palette.
+ */
+export const darkAntTheme: ThemeConfig = {
+  ...defaultAntTheme,
+  algorithm: theme.darkAlgorithm,
+  cssVar: true,
+  token: {
+    ...defaultAntTheme.token,
+    colorBgBase: palette.FIDESUI_BG_MINOS,
+    colorTextBase: palette.FIDESUI_CORINTH,
+    colorText: palette.FIDESUI_CORINTH,
+    colorTextHeading: palette.FIDESUI_CORINTH,
+    colorPrimary: palette.FIDESUI_CORINTH,
+    colorBgContainer: palette.FIDESUI_BG_MINOS,
+    colorBorder: "#3a3a3a",
+  },
+  components: {
+    ...defaultAntTheme.components,
+    Layout: {
+      bodyBg: palette.FIDESUI_BG_MINOS,
+    },
+  },
+};

clients/fidesui/src/ant-theme/index.ts

@@ -1,3 +1,4 @@
 // Main exports for Ant Design theme system
+export { darkAntTheme } from "./dark-theme";
 export { createDefaultAntTheme, defaultAntTheme } from "./default-theme";
 export type { ThemeConfig } from "antd/es";

clients/fidesui/src/hooks/index.ts

@@ -1,2 +1,4 @@
 export type { UseFormModalOptions } from "./useFormModal";
 export { useFormModal } from "./useFormModal";
+export type { ThemeMode, ThemeModeProviderProps } from "./useThemeMode";
+export { ThemeModeProvider, useThemeMode } from "./useThemeMode";