feat: dark theme

client/package.json

@@ -41,6 +41,7 @@
     "react-markdown": "^8.0.7",
     "react-oidc-context": "^3.3.0",
     "react-router-dom": "^7.8.1",
+    "tsd-ui": "github:tsd-ui/tsd-ui#v0.1.0",
     "usehooks-ts": "^3.1.1",
     "victory": "^37.3.4",
     "yup": "^0.32.11"

client/src/app/App.tsx

@@ -2,19 +2,33 @@ import type React from "react";
 import { Outlet } from "react-router-dom";
 import "./App.css";
 
+import { ThemeProvider, type ThemeMode } from "tsd-ui";
+
+import { useLocalStorage } from "@app/hooks/useStorage";
+
 import { NotificationsProvider } from "./components/NotificationsContext";
 import { DefaultLayout } from "./layout";
 
 import "@patternfly/patternfly/patternfly.css";
 import "@patternfly/patternfly/patternfly-addons.css";
+import "@patternfly/patternfly/patternfly-charts.css";
+
+export const STORAGE_KEY = "theme-preference";
 
 const App: React.FC = () => {
+  const [mode, setMode] = useLocalStorage<ThemeMode>({
+    key: STORAGE_KEY,
+    defaultValue: "system",
+  });
+
   return (
-    <NotificationsProvider>
-      <DefaultLayout>
-        <Outlet />
-      </DefaultLayout>
-    </NotificationsProvider>
+    <ThemeProvider mode={mode} setMode={setMode}>
+      <NotificationsProvider>
+        <DefaultLayout>
+          <Outlet />
+        </DefaultLayout>
+      </NotificationsProvider>
+    </ThemeProvider>
   );
 };
 

client/src/app/layout/header.tsx

@@ -34,6 +34,8 @@ import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon";
 import BarsIcon from "@patternfly/react-icons/dist/js/icons/bars-icon";
 import ExternalLinkAltIcon from "@patternfly/react-icons/dist/js/icons/external-link-alt-icon";
 
+import { ThemeSelector } from "tsd-ui";
+
 import { isAuthRequired } from "@app/Constants";
 import useBranding from "@app/hooks/useBranding";
 import { oidcSignoutArgs } from "@app/oidc";
@@ -182,6 +184,9 @@ export const HeaderApp: React.FC = () => {
                     </DropdownList>
                   </Dropdown>
                 </ToolbarItem>
+                <ToolbarItem>
+                  <ThemeSelector />
+                </ToolbarItem>
               </ToolbarGroup>
 
               {/* toolbar items to show at mobile sizes */}
@@ -191,6 +196,9 @@ export const HeaderApp: React.FC = () => {
                 gap={{ default: "gapNone", md: "gapMd" }}
                 visibility={{ lg: "hidden" }}
               >
+                <ToolbarItem>
+                  <ThemeSelector />
+                </ToolbarItem>
                 <ToolbarItem>
                   <Dropdown
                     isOpen={isKebabDropdownOpen}

client/src/app/pages/home/components/MonitoringSection.tsx

@@ -28,6 +28,7 @@ import {
   Stack,
   StackItem,
 } from "@patternfly/react-core";
+import { t_global_text_color_link_default } from "@patternfly/react-tokens";
 
 import { severityList } from "@app/api/model-utils";
 import type { ExtendedSeverity } from "@app/api/models";
@@ -154,8 +155,13 @@ export const MonitoringSection: React.FC = () => {
                           }
                           tickLabelComponent={
                             <ChartLabel
-                              className="pf-v6-c-button pf-m-link pf-m-inline"
-                              style={[{ fill: "#0066cc" }]}
+                              style={[
+                                {
+                                  fill: t_global_text_color_link_default.var,
+                                  textDecoration: "underline",
+                                  cursor: "pointer",
+                                },
+                              ]}
                               events={{
                                 onClick: (event) => {
                                   // biome-ignore lint/suspicious/noExplicitAny: allowed