WebUI Dark Mode #8137
WebUI Dark Mode #8137
Conversation
itaigilo
added
area/UI
| @@ -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", | |||
There was a problem hiding this comment.
The UI component of the toggle button.
| @@ -1,19 +1,24 @@ | |||
| import React, {FC, useState} from "react"; | |||
| import React, {FC, useContext, useState} from "react"; | |||
There was a problem hiding this comment.
Lint is inconsistent in the WebUI code -
I tried to avoid messing these, but in some files it was a bit too much.
| ); | ||
| return ( | ||
| <Router> | ||
| <WithAppContext> |
There was a problem hiding this comment.
Besides lint changes, the only change in this file is adding wrapping with WithAppContext.
| ); | ||
| return !inline && hasLang ? ( | ||
| <SyntaxHighlighter | ||
| style={state.settings.darkMode ? dark : syntaxHighlightStyle} |
There was a problem hiding this comment.
Excluding lint, this line is the only change in this file.
E2E Test Results - DynamoDB Local - Local Block Adapter |
E2E Test Results - Quickstart |
webui/src/styles/globals.css
Outdated
There was a problem hiding this comment.
When using named colors, the data-bs-theme knows how to handle dark-mode - which doesn't work when using #rrggbb colors.
I changed all the rgb colors to have the closest named color -
There are some left-overs which are ones with no close named color and that I couldn't find where they are used.
There was a problem hiding this comment.
The color palette are brand colors. I think this requires the participation of @keren-lakeFS in this decision.
Please make sure that this is approved by marketing (due to changes of the default palette)
| } | ||
|
|
||
| const initialLocalSettings: AppContext = { | ||
| darkMode: window.localStorage.getItem(localStorageKeys.darkMode) === String(true), |
| const appContextReducer = (state: AppContextType, action: Action) => { | ||
| switch (action.type) { | ||
| case AppActionType.setDarkMode: | ||
| window.localStorage.setItem(localStorageKeys.darkMode, String(action.value)); |
| @@ -222,7 +223,7 @@ const TagList = ({ repo, after, prefix, onPaginate }) => { | |||
| </ActionsBar> | |||
| {content} | |||
| <div className={"mt-2"}> | |||
| A tag is an immutable pointer to a single commit. <a href="https://docs.lakefs.io/understand/object-model.html#identifying-commits" target="_blank" rel="noopener noreferrer">Learn more.</a> | |||
| A tag is an immutable pointer to a single commit. <a href="https://docs.lakefs.io/understand/object-model.html#tags" target="_blank" rel="noopener noreferrer">Learn more.</a> | |||
There was a problem hiding this comment.
| A tag is an immutable pointer to a single commit. <a href="https://docs.lakefs.io/understand/object-model.html#tags" target="_blank" rel="noopener noreferrer">Learn more.</a> | |
| A tag is an immutable pointer to a single commit. <a href="https://docs.lakefs.io/understand/model.html#tags" target="_blank" rel="noopener noreferrer">Learn more.</a> |
| @@ -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"> | |||
There was a problem hiding this comment.
@N-o-Z I've added the "border-bottom" for extra separation. It's un-noticeable in Light mode, so no real need for extra distinction here.
Closes #8118.
Change Description
Adds a Dark Mode to the WebUI,
Activated by a button (located at the right of the top-bar).
The user's selected mode is saved on the local-storage (of the browser), making it persistent per-browser.
Demo
Dark.Mode.mp4
Testing Details
Tested manually on Chrome and Firefox.
It still requires some more QA, to validate parts of the UI I'm less familiar with.
Additional info
Still open: