Enabled Dark Mode in Console (#3129)

- Dark mode will be tied to system settings if not set
- Dark mode will be stored in Application storage once set

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

Author: bexsoft

portal-ui/package.json

@@ -10,7 +10,7 @@
     "local-storage-fallback": "^4.1.1",
     "lodash": "^4.17.21",
     "luxon": "^3.4.3",
-    "mds": "https://github.com/minio/mds.git#v0.12.1",
+    "mds": "https://github.com/minio/mds.git#v0.12.2",
     "react": "^18.1.0",
     "react-component-export-image": "^1.0.6",
     "react-copy-to-clipboard": "^5.0.2",

portal-ui/src/StyleHandler.tsx

@@ -31,18 +31,20 @@ const StyleHandler = ({ children }: IStyleHandler) => {
   const colorVariants = useSelector(
     (state: AppState) => state.system.overrideStyles,
   );
+  const darkMode = useSelector((state: AppState) => state.system.darkMode);
 
   let thm = undefined;
 
   if (colorVariants) {
     thm = generateOverrideTheme(colorVariants);
   }
 
-  // ThemeHandler is needed for MDS components theming. Eventually we will remove Theme Provider & use only mds themes.
   return (
     <Fragment>
       <GlobalStyles />
-      <ThemeHandler customTheme={thm}>{children}</ThemeHandler>
+      <ThemeHandler darkMode={darkMode} customTheme={thm}>
+        {children}
+      </ThemeHandler>
     </Fragment>
   );
 };

portal-ui/src/screens/Console/Common/DarkModeActivator/DarkModeActivator.tsx

@@ -0,0 +1,48 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { Button, DarkModeIcon } from "mds";
+import TooltipWrapper from "../TooltipWrapper/TooltipWrapper";
+import { useSelector } from "react-redux";
+import { AppState, useAppDispatch } from "../../../../store";
+import { setDarkMode } from "../../../../systemSlice";
+import { storeDarkMode } from "../../../../utils/stylesUtils";
+
+const DarkModeActivator = () => {
+  const dispatch = useAppDispatch();
+
+  const darkMode = useSelector((state: AppState) => state.system.darkMode);
+
+  const darkModeActivator = () => {
+    const currentStatus = !!darkMode;
+
+    dispatch(setDarkMode(!currentStatus));
+    storeDarkMode(!currentStatus ? "on" : "off");
+  };
+
+  return (
+    <TooltipWrapper tooltip={`${darkMode ? "Light" : "Dark"} Mode`}>
+      <Button
+        id={"dark-mode-activator"}
+        icon={<DarkModeIcon />}
+        onClick={darkModeActivator}
+      />
+    </TooltipWrapper>
+  );
+};
+
+export default DarkModeActivator;

portal-ui/src/screens/Console/Common/PageHeaderWrapper/PageHeaderWrapper.tsx

@@ -17,6 +17,7 @@
 import React, { Fragment } from "react";
 import { PageHeader } from "mds";
 import ObjectManagerButton from "../ObjectManager/ObjectManagerButton";
+import DarkModeActivator from "../DarkModeActivator/DarkModeActivator";
 
 interface IPageHeaderWrapper {
   label: React.ReactNode;
@@ -35,6 +36,7 @@ const PageHeaderWrapper = ({
       actions={
         <Fragment>
           {actions}
+          <DarkModeActivator />
           <ObjectManagerButton />
         </Fragment>
       }