Add: add dark mode theming

src/web/App.tsx

@@ -63,7 +63,7 @@ class App extends React.Component<{}> {
 
   render() {
     return (
-      <ThemeProvider defaultColorScheme="light">
+      <ThemeProvider defaultColorScheme="auto">
         <GlobalStyles />
         <ErrorBoundary message={_('An error occurred on this page')}>
           <GmpContext.Provider value={gmp}>

src/web/components/chart/Donut.tsx

@@ -4,7 +4,6 @@
  */
 
 import React, {type Ref} from 'react';
-import {color as d3color, type HSLColor, type RGBColor} from 'd3-color';
 import styled from 'styled-components';
 import {hasValue, isDefined} from 'gmp/utils/identity';
 import Group from 'web/components/chart/base/Group';
@@ -74,8 +73,8 @@ const margin = {
   left: 20,
 };
 
-const emptyColor = Theme.lightGray;
-const darkEmptyColor = (d3color(emptyColor) as HSLColor | RGBColor).darker();
+const emptyColor = 'var(--gsa-lightGray)';
+const darkEmptyColor = 'var(--gsa-darkEmptyColor)';
 
 const EmptyDonut = ({
   left,

src/web/components/chart/base/Label.tsx

@@ -14,7 +14,7 @@ const Label = forwardRef<SVGElement, LabelProps>(
       ref={ref as React.Ref<SVGTextElement>}
       className="pie-label"
       dy=".33em"
-      fill={Theme.dialogGray} // to have labels a bit visible on white background
+      fill={Theme.pieLabel} // to have labels a bit visible on white background
       fontSize={Theme.Font.default}
       fontWeight="bold"
       textAnchor="middle"

src/web/components/chart/donut/Arc3d.tsx

@@ -49,11 +49,21 @@ const Arc3d = <TData extends Arc3dData = Arc3dData>({
   onDataClick,
 }: Arc3dProps<TData>) => {
   const {color = Theme.lightGray, toolTip} = data;
-  let d3Color = d3color(String(color));
-  if (!d3Color) {
-    d3Color = d3color(Theme.lightGray);
+  let darker: any;
+  const colorStr = String(color);
+  if (colorStr.startsWith('var(')) {
+    if (colorStr === Theme.lightGray) {
+      darker = 'var(--gsa-lightGray-darker)';
+    } else {
+      darker = color;
+    }
+  } else {
+    let d3Color = d3color(colorStr);
+    if (!d3Color) {
+      d3Color = d3color('#e5e5e5');
+    }
+    darker = d3Color ? d3Color.darker() : '#e5e5e5';
   }
-  const darker = (d3Color as HSLColor | RGBColor).darker();
   return (
     <ToolTip content={toolTip}>
       {({targetRef, hide, show}) => (

src/web/components/dialog/DialogCloseButton.tsx

@@ -15,6 +15,7 @@ interface StyledCloseButtonProps {
 }
 
 interface DialogCloseButtonProps {
+  className?: string;
   title?: string;
   size?: IconSizeType;
   onClick?: () => void;
@@ -25,7 +26,7 @@ const StyledCloseButton = styled.div<StyledCloseButtonProps>`
   font-weight: bold;
   font-size: 12px;
   font-family: ${Theme.Font.default};
-  color: ${Theme.darkGreen};
+  color: ${Theme.mediumGray};
   cursor: pointer;
   border-radius: 2px;
   padding: 0;
@@ -36,7 +37,8 @@ const StyledCloseButton = styled.div<StyledCloseButtonProps>`
   height: ${props => props.$height};
   line-height: ${props => props.$lineHeight};
   :hover {
-    border: 1px solid ${Theme.darkGreen};
+    border: 1px solid ${Theme.mediumGray};
+    color: ${Theme.black};
   }
   & * {
     height: inherit;
@@ -45,6 +47,7 @@ const StyledCloseButton = styled.div<StyledCloseButtonProps>`
 `;
 
 const DialogCloseButton = ({
+  className,
   title,
   size = 'medium',
   onClick,
@@ -55,6 +58,7 @@ const DialogCloseButton = ({
 
   return (
     <StyledCloseButton
+      className={className}
       $height={height}
       $lineHeight={height}
       $width={width}

src/web/components/icon/DynamicIcon.tsx

@@ -32,16 +32,14 @@ export interface DynamicIconProps<TValue = string | undefined> extends Omit<
   onClick?: (value: TValue) => void | Promise<void>;
 }
 
-const inheritColor = undefined;
-
 export function DynamicIcon<TValue = string | undefined>({
   icon: Icon,
   ariaLabel,
   size = 'small',
   active = true,
   title,
   loadingTitle,
-  color = 'black',
+  color: rawColor = 'black',
   value,
   variant = 'transparent',
   dataTestId,
@@ -50,6 +48,7 @@ export function DynamicIcon<TValue = string | undefined>({
   onClick,
   ...restProps
 }: Readonly<DynamicIconProps<TValue>>) {
+  const color = rawColor === 'black' ? Theme.black : rawColor;
   const [_] = useTranslation();
   const [loading, setLoading] = useState(false);
   const {width, height} = useIconSize(size);
@@ -146,9 +145,9 @@ export function DynamicIcon<TValue = string | undefined>({
    * - SVG icons not from Lucide package
    */
 
-  const svgIconsStyle = !isLucide
-    ? {fill: !active ? 'var(--mantine-color-gray-5)' : inheritColor}
-    : inheritColor;
+  const svgIconsStyle: React.CSSProperties = {
+    fill: !active ? 'var(--mantine-color-gray-5)' : 'currentColor',
+  };
 
   if (forceStatic || (active && !isDefined(onClick))) {
     return renderSpanIcon(

src/web/components/icon/Icon.tsx

@@ -54,7 +54,7 @@ const StyledDiv = styled.div<StyledDivProps>`
   & svg path {
     fill: ${props => {
       const {$active = true} = props;
-      return $active ? undefined : Theme.inputBorderGray;
+      return $active ? Theme.black : Theme.inputBorderGray;
     }};
   }
 `;

src/web/components/icon/test/DynamicIcon.test.tsx

@@ -6,6 +6,7 @@
 import {describe, test, expect, testing} from '@gsa/testing';
 import {screen, within, render, fireEvent} from 'web/testing';
 import DynamicIcon from 'web/components/icon/DynamicIcon';
+import Theme from 'web/utils/Theme';
 
 const MockIcon = props => <svg {...props} data-testid="mock-icon" />;
 
@@ -115,7 +116,7 @@ describe('DynamicIcon', () => {
         selector: 'svg',
       });
 
-      expect(svgElement).toHaveAttribute('color', 'black');
+      expect(svgElement).toHaveAttribute('color', Theme.black);
     });
 
     test('renders Lucide icon with custom size and color', () => {
@@ -183,7 +184,7 @@ describe('DynamicIcon', () => {
       const nonLucideIcon = screen.getByTestId('non-lucide-icon');
       expect(nonLucideIcon).toBeVisible();
       const svg = nonLucideIcon.querySelector('svg');
-      expect(svg).toHaveStyle('fill: black');
+      expect(svg).toHaveStyle(`fill: ${Theme.black}`);
     });
 
     test('renders non-Lucide icon with custom size and color', () => {

src/web/components/layout/GlobalStyles.jsx

@@ -7,6 +7,96 @@ import {createGlobalStyle} from 'styled-components';
 import Theme from 'web/utils/Theme';
 
 const GlobalStyles = createGlobalStyle`
+  :root, html {
+    --gsa-lightGreen: #A1DDBA;
+    --gsa-green: #11ab51;
+    --gsa-lightGray: #e5e5e5;
+    --gsa-mediumDarkGray: #c2c2c2;
+    --gsa-mediumGray: #7F7F7F;
+    --gsa-darkGray: #4C4C4C;
+    --gsa-white: #fff;
+    --gsa-dialogGray: #f3f3f3;
+    --gsa-inputBorderGray: #bfbfbf;
+    --gsa-black: #000;
+    --gsa-loginButtonGray: #4c4c4d;
+    --gsa-loginButtonHover: #212121;
+    --gsa-lightRed: #fdf2f2;
+    --gsa-mediumLightRed: #f4b1b2;
+    --gsa-warningRed: #e5393d;
+    --gsa-darkRed: #c12c30;
+    --gsa-errorRed: #c83814;
+    --gsa-complianceYes: #4cb045;
+    --gsa-complianceNo: #D80000;
+    --gsa-complianceIncomplete: orange;
+    --gsa-complianceUndefined: silver;
+    --gsa-lightBlue: #d6e6fd;
+    --gsa-mediumBlue: #77acf7;
+    --gsa-blue: #0a53b8;
+    --gsa-severityLowBlue: #4f91c7;
+    --gsa-severityWarnYellow: #f0a519;
+    --gsa-severityClassLog: #DDDDDD;
+    --gsa-severityClassLow: #A0C5F9;
+    --gsa-severityClassMedium: #F3B865;
+    --gsa-severityClassHigh: #F0868A;
+    --gsa-severityClassCritical: #C12C30;
+    --gsa-statusNewGreen: #99be48;
+    --gsa-statusRunGreen: #70c000;
+    --gsa-paleGreen: #99BE48;
+    --gsa-darkGreen: #074320;
+    --gsa-darkGreenTransparent: rgba(7, 67, 32, 0.8);
+    --gsa-darkEmptyColor: #b5b5b5;
+    --gsa-lightGray-darker: #c5c5c5;
+    --gsa-shadowColor: rgba(0, 0, 0, 0.15);
+    --gsa-pieLabel: #f3f3f3;
+  }
+
+  html[data-mantine-color-scheme="dark"] {
+    --gsa-lightGreen: #2d8253;
+    --gsa-green: #1ebd60;
+    --gsa-lightGray: #2b2c30;
+    --gsa-mediumDarkGray: #45474f;
+    --gsa-mediumGray: #a6a7ab;
+    --gsa-darkGray: #dcdcdc;
+    --gsa-white: #1A1B1E;
+    --gsa-dialogGray: #101113;
+    --gsa-inputBorderGray: #373A40;
+    --gsa-black: #C1C2C5;
+    --gsa-loginButtonGray: #2C2E33;
+    --gsa-loginButtonHover: #373A40;
+    --gsa-lightRed: #2c0e0e;
+    --gsa-mediumLightRed: #722c2c;
+    --gsa-warningRed: #ff6b6b;
+    --gsa-darkRed: #fa5252;
+    --gsa-errorRed: #fa5252;
+    --gsa-complianceYes: #2b8a3e;
+    --gsa-complianceNo: #e03131;
+    --gsa-complianceIncomplete: #e8590c;
+    --gsa-complianceUndefined: #495057;
+    --gsa-lightBlue: #182438;
+    --gsa-mediumBlue: #1c7ed6;
+    --gsa-blue: #4dabf7;
+    --gsa-severityLowBlue: #1c7ed6;
+    --gsa-severityWarnYellow: #fcc419;
+    --gsa-severityClassLog: #373a40;
+    --gsa-severityClassLow: #228be6;
+    --gsa-severityClassMedium: #f76707;
+    --gsa-severityClassHigh: #e03131;
+    --gsa-severityClassCritical: #c92a2a;
+    --gsa-statusNewGreen: #37b24d;
+    --gsa-statusRunGreen: #2b8a3e;
+    --gsa-paleGreen: #5c7cfa;
+    --gsa-darkGreen: #a1ddba;
+    --gsa-darkGreenTransparent: rgba(161, 221, 186, 0.8);
+    --gsa-darkEmptyColor: #141416;
+    --gsa-lightGray-darker: #1e1f22;
+    --gsa-shadowColor: rgba(0, 0, 0, 0.6);
+    --gsa-pieLabel: #ffffff;
+  }
+
+  html[data-mantine-color-scheme="dark"] [data-testid="login-logo"] {
+    filter: invert(1) brightness(2);
+  }
+
   html {
     box-sizing: border-box;
   }
@@ -20,6 +110,7 @@ const GlobalStyles = createGlobalStyle`
     font-family: ${Theme.Font.default};
     font-size: ${Theme.Font.defaultSize};
     color: ${Theme.black};
+    background-color: ${Theme.dialogGray};
   }
 
   a:link {

src/web/components/structure/Header.tsx

@@ -63,7 +63,7 @@ const Header = () => {
     <AppHeader
       ianaTimeZone={timezone}
       isLoggedIn={isLoggedIn}
-      isThemeSwitchVisible={false}
+      isThemeSwitchVisible={true}
       languageSwitch={<LanguageSwitch />}
       logo={logoComponent}
       logoLink="/dashboards"

src/web/components/structure/__tests__/Header.test.tsx

@@ -49,7 +49,7 @@ describe('Header tests', () => {
       name: 'Switch color theme',
     });
 
-    expect(themeSwitch).not.toBeInTheDocument();
+    expect(themeSwitch).toBeInTheDocument();
 
     await waitFor(() => {
       const logo = screen.getByTestId('Enterprise150');

src/web/components/tab/Tab.tsx

@@ -52,7 +52,7 @@ const StyledDiv = styled.div<{$activeTab?: boolean; disabled?: boolean}>`
     background-color: ${props =>
       props.$activeTab
         ? 'var(--app-navigation-link-active-background)'
-        : 'var(--mantine-color-gray-1, Theme.white)'};
+        : Theme.lightGray};
     color: ${props =>
       props.$activeTab
         ? 'var(--app-navigation-link-active-color)'

src/web/pages/login/LoginForm.tsx

@@ -30,7 +30,7 @@ interface LoginFormProps {
 
 const Paper = styled(Layout)`
   background: ${Theme.white};
-  box-shadow: 0px 14px 22px ${Theme.mediumGray};
+  box-shadow: 0px 14px 22px var(--gsa-shadowColor, ${Theme.mediumGray});
   border-radius: 3px;
   padding: 4rem;
   width: 30rem;