WebUI Dark Mode (#8137)

webui/package.json

@@ -41,6 +41,7 @@
     "react-router-dom": "^6.20.1",
     "react-simple-code-editor": "^0.13.1",
     "react-syntax-highlighter": "^15.5.0",
+    "react-toggle-dark-mode": "^1.1.1",
     "rehype-raw": "^7.0.0",
     "rehype-react": "^8.0.0",
     "rehype-wrap": "^1.1.0",

webui/src/lib/components/auth/credentials.jsx

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, {useContext, useState} from "react";
 
 import Modal from "react-bootstrap/Modal";
 import Table from "react-bootstrap/Table";
@@ -9,6 +9,7 @@ import {useAPIWithPagination} from "../../hooks/api";
 import {ClipboardButton, DataTable, AlertError, FormattedDate, Loading} from "../controls";
 import {ConfirmationButton} from "../modals";
 import {Paginator} from "../pagination";
+import {AppContext} from "../../hooks/appContext";
 
 
 export const CredentialsTable = ({userId, currentAccessKey, refresh, after, onPaginate}) => {
@@ -62,6 +63,9 @@ export const CredentialsTable = ({userId, currentAccessKey, refresh, after, onPa
 export const CredentialsShowModal = ({ credentials, show, onHide }) => {
     if (!credentials) return <></>;
 
+    const {state} = useContext(AppContext);
+    const buttonVariant = state.settings.darkMode ? "outline-light" : "outline-dark";
+
     return (
         <Modal show={show} onHide={onHide} size="lg">
             <Modal.Header closeButton>
@@ -75,14 +79,14 @@ export const CredentialsShowModal = ({ credentials, show, onHide }) => {
                         <td><strong>Access Key ID</strong></td>
                         <td><code>{credentials.access_key_id}</code></td>
                         <td>
-                            <ClipboardButton variant="outline-dark" tooltip="Copy to clipboard" text={credentials.access_key_id}/>
+                            <ClipboardButton variant={buttonVariant} tooltip="Copy to clipboard" text={credentials.access_key_id}/>
                         </td>
                     </tr>
                     <tr>
                         <td><strong>Secret Access Key</strong></td>
                         <td><code>{credentials.secret_access_key}</code></td>
                         <td>
-                            <ClipboardButton variant="outline-dark" tooltip="Copy to clipboard" text={credentials.secret_access_key}/>
+                            <ClipboardButton variant={buttonVariant} tooltip="Copy to clipboard" text={credentials.secret_access_key}/>
                         </td>
                     </tr>
                     </tbody>

webui/src/lib/components/darkModeToggle.tsx

@@ -0,0 +1,26 @@
+import React, {FC, useContext} from "react";
+import {DarkModeSwitch} from "react-toggle-dark-mode";
+import {AppActionType, AppContext} from "../hooks/appContext";
+
+const DarkModeToggle: FC = () => {
+    const {state, dispatch} = useContext(AppContext);
+
+    const toggleDarkMode = (isOn: boolean) => {
+        dispatch({
+            type: AppActionType.setDarkMode,
+            value: isOn,
+        });
+    };
+
+    return (
+        <DarkModeSwitch
+            style={{marginRight: '2rem'}}
+            checked={state.settings.darkMode}
+            onChange={toggleDarkMode}
+            size={28}
+            sunColor={"white"}
+        />
+    );
+};
+
+export default DarkModeToggle;

webui/src/lib/components/layout.tsx

@@ -1,19 +1,24 @@
-import React, {FC, useState} from "react";
+import React, {FC, useContext, useState} from "react";
 import { Outlet, useOutletContext } from "react-router-dom";
 import { StorageConfigProvider } from "../hooks/storageConfig";
-
 import TopNav from './navbar';
+import { AppContext } from "../hooks/appContext";
 
 type LayoutOutletContext = [(isLoggedIn: boolean) => void];
 
 const Layout: FC<{logged: boolean}> = ({ logged }) => {
     const [isLogged, setIsLogged] = useState(logged ?? true);
+
+    // handle global dark mode here
+    const {state} = useContext(AppContext);
+    document.documentElement.setAttribute('data-bs-theme', state.settings.darkMode ? 'dark' : 'light')
+
     return (
         <>
             <TopNav logged={isLogged}/>
             <div className="main-app">
                 <StorageConfigProvider>
-                    <Outlet context={[setIsLogged] satisfies LayoutOutletContext} />
+                    <Outlet context={[setIsLogged] satisfies LayoutOutletContext}/>
                 </StorageConfigProvider>
             </div>
         </>

webui/src/lib/components/navbar.jsx

@@ -3,6 +3,7 @@ import useUser from '../hooks/user'
 import {auth, config} from "../api";
 import {useRouter} from "../hooks/router";
 import {Link} from "./nav";
+import DarkModeToggle from "./darkModeToggle";
 import {useAPI} from "../hooks/api";
 import {Navbar, Nav, NavDropdown} from "react-bootstrap";
 import Container from "react-bootstrap/Container";
@@ -76,7 +77,7 @@ const TopNav = ({logged = true}) => {
         );
     }
     return (
-        <Navbar variant="dark" bg="dark" expand="md">
+        <Navbar variant="dark" bg="dark" expand="md" className="border-bottom">
             <Container fluid={true}>
                 <Link component={Navbar.Brand} href="/">
                     <img src="/logo.png" alt="lakeFS" className="logo"/>
@@ -91,6 +92,7 @@ const TopNav = ({logged = true}) => {
                         <TopNavLink href="/auth">Administration</TopNavLink>
                     </Nav>
 
+                    <DarkModeToggle/>
                     <NavUserInfo/>
                 </Navbar.Collapse>
             </Container>

webui/src/lib/components/repository/ObjectsDiff.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useContext} from "react";
 import {useAPI} from "../../hooks/api";
 import {objects} from "../../api";
 import ReactDiffViewer, {DiffMethod} from "react-diff-viewer-continued";
@@ -7,6 +7,7 @@ import {humanSize} from "./tree";
 import Alert from "react-bootstrap/Alert";
 import {InfoIcon} from "@primer/octicons-react";
 import {useStorageConfig} from "../../hooks/storageConfig";
+import {AppContext} from "../../hooks/appContext";
 
 const maxDiffSizeBytes = 120 << 10;
 const supportedReadableFormats = ["txt", "text", "csv", "tsv", "yaml", "yml", "json"];
@@ -74,6 +75,8 @@ const NoContentDiff = ({left, right, diffType}) => {
 }
 
 const ContentDiff = ({config, repoId, path, leftRef, rightRef, leftSize, rightSize, diffType}) => {
+    const {state} = useContext(AppContext);
+
     const left = leftRef && useAPI(async () => objects.get(repoId, leftRef, path, config.pre_sign_support_ui),
         [repoId, leftRef, path]);
     const right = rightRef && useAPI(async () => objects.get(repoId, rightRef, path, config.pre_sign_support_ui),
@@ -89,6 +92,7 @@ const ContentDiff = ({config, repoId, path, leftRef, rightRef, leftSize, rightSi
             oldValue={left && left.response}
             newValue={right && right.response}
             splitView={false}
+            useDarkTheme={state.settings.darkMode}
             compareMethod={DiffMethod.WORDS}/>
     </div>;
 }

webui/src/lib/components/repository/commits.jsx

@@ -6,18 +6,19 @@ import {MetadataRow, MetadataUIButton} from "../../../pages/repositories/reposit
 import {Link} from "../nav";
 import dayjs from "dayjs";
 import Card from "react-bootstrap/Card";
-import React from "react";
+import React, {useContext} from "react";
+import {AppContext} from "../../hooks/appContext";
 
 
 const CommitActions = ({ repo, commit }) => {
-
-  const buttonVariant = "outline-dark";
+  const {state} = useContext(AppContext);
+  const buttonVariant = state.settings.darkMode ? "outline-light" : "outline-dark";
 
   return (
     <div>
       <ButtonGroup className="commit-actions">
         <LinkButton
-          buttonVariant="outline-dark"
+          buttonVariant={buttonVariant}
           href={{pathname: '/repositories/:repoId/objects', params: {repoId: repo.id}, query: {ref: commit.id}}}
           tooltip="Browse commit objects">
           <BrowserIcon/>

webui/src/lib/hooks/appContext.tsx

@@ -0,0 +1,63 @@
+import React, { createContext, useReducer } from "react";
+
+type AppContextType = {
+    settings: AppContext;
+};
+
+type AppContext = {
+    darkMode: boolean;
+};
+
+const localStorageKeys = {
+    darkMode: 'darkMode',
+};
+
+enum AppActionType {
+    setDarkMode = 'setDarkMode',
+}
+
+interface Action {
+    type: AppActionType;
+    value: boolean;
+}
+
+const initialLocalSettings: AppContext = {
+    darkMode: window.localStorage.getItem(localStorageKeys.darkMode) === String(true),
+};
+
+const initialAppContext: AppContextType = {
+    settings: initialLocalSettings,
+};
+
+const appContextReducer = (state: AppContextType, action: Action) => {
+    switch (action.type) {
+        case AppActionType.setDarkMode:
+            window.localStorage.setItem(localStorageKeys.darkMode, String(action.value));
+            return {...state, settings: {...state.settings, darkMode: action.value}};
+        default:
+            return state;
+    }
+}
+
+type ContextType = {
+    state: AppContextType,
+    dispatch: React.Dispatch<Action>,
+};
+
+const AppContext = createContext<ContextType>({
+    state: initialAppContext,
+    dispatch: () => null
+});
+
+// @ts-expect-error - it doesn't like the "children" prop
+const WithAppContext: React.FC = ({children}) => {
+    const [state, dispatch] = useReducer(appContextReducer, initialAppContext);
+
+    return (
+        <AppContext.Provider value={{state, dispatch}}>
+            {children}
+        </AppContext.Provider>
+    )
+}
+
+export { WithAppContext, AppContext, AppActionType };