Add dark mode theme to the UI #3677

joshri · 2023-05-09T03:12:22Z

Closes #3670

Adds dark mode switch that remembers your selection plus dark mode design.
Footer JSX and styling changed to have background inside content.
Sign in background changed and animation removed.
A ton of small changes to accommodate dark mode where we weren't prepared

Screen.Recording.2023-05-10.at.3.51.16.PM.mov

Toastify update:

Colors guide:

black and white switch as you'd expect.
neutral00 - neutral40 reverse order, which means neutral20 stays the same.
primary switches with primary10 NOT primary20. Primary20 was not being used, but I used it for an override on dark mode disabled buttons. It's used in one tiny lil thing in Enterprise which I'll address if I need to.
primaryLight05 was only being used to hide text in the Nav when collapsed - in dark mode it switches to a color that does the same. I believe it's being used for something in Enterprise and needs to be addressed. primaryLight10 was not being used in OSS so I've left it as is for now.
alertLight is what was being used in OSS for all error stuff, it switches to alertDark for dark mode.
backGray, which was being used for the top bar, now switches to the CorporateCharcoal purple-ish color used all over dark mode. (#32324B)
whiteToPrimary is for when you need white to switch to the CorporateCharcoal
grayToPrimary changes neutral30 to primary10
blueWithOpacity is a special override to emulate the hover effect on Nav items in the dark mode DataTable
Every other color is not used and so they're not changed here. When/if they come up in Enterprise, they'll be adjusted or removed accordingly.

opudrovs · 2023-05-09T09:59:57Z

I know it's a draft but the tests are failing with message:

 error  AlertProps not found in '@material-ui/lab'  import/named

You might want to look into it earlier.

opudrovs · 2023-05-09T10:00:15Z

toastify notifications are not taking on my :root variable overrides

Does it mean they are positioned incorrectly?

opudrovs · 2023-05-09T10:01:12Z

filter icon bg is too light in dark mode

The icon's BG is not transparent? Wow.

opudrovs · 2023-05-09T10:02:27Z

Ah, maybe this AlertProps error is related to the following message you removed:

// eslint-disable-next-line

I wonder why it was added before.

opudrovs · 2023-05-09T10:09:28Z

Haha, I like the light/dark mode switch! ✨

opudrovs · 2023-05-09T10:30:22Z

Tested it locally, the dark mode looks very cool in general! 🎉 Great job!

opudrovs · 2023-05-09T10:32:22Z

Unrelated: I understood (again) that I hate horizontal scrolling in the dark mode too, but there is nothing we can do about it. 😅

opudrovs · 2023-05-09T10:34:14Z

As for me, the command text and icon are not very readable on the dark grey background. Not sure what color would work for the command? White? Lighter blue?

opudrovs · 2023-05-09T10:38:22Z

underline on inputs in dark mode is black. The override is located on a :before pseudo class and is giving me trouble

Just FYI, underline on login inputs are black for me only if not hovered or focused, otherwise they are white on hover and blue on focus. And when autofilled they acquire light background.

opudrovs · 2023-05-09T10:48:30Z

A minor issue related to underlined inputs, probably: inactive checkboxes are not visible:

joshri · 2023-05-09T16:36:08Z

From design feedback:

I will be attempting to change the table row highlight color to the slightly transparent blue used in the nav

Yaml view header will be changed to a more consistent purple-ish

JamWils · 2023-05-10T13:14:19Z

Important notes written up by @LappleApple: #2948 (comment)

joshri · 2023-05-10T14:55:31Z

Updated toastify to get access to their theme prop:

Screen.Recording.2023-05-10.at.10.52.12.AM.mov

jpellizzari

UI Looks fantastic 👍 .

I saw some repeated logic and I have a couple questions.

jpellizzari · 2023-05-11T18:54:30Z

ui/components/DataTable/DataTable.tsx

@@ -374,7 +374,10 @@ export const DataTable = styled(UnstyledDataTable)`
    transition: background 0.5s ease-in-out;
  }
  .MuiTableRow-root:not(.MuiTableRow-head):hover {
-    background: ${(props) => props.theme.colors.neutral10};
+    background: ${(props) =>
+      props.theme.colors.black === "#fff"


I assume this is checking to see if we are in dark mode. Can we instead do props.theme.name === 'dark' or something like that?

Added a new field to the DefaultTheme type called mode that uses the ThemeTypes enum

ui/components/DataTable/DataTable.tsx

jpellizzari · 2023-05-11T18:58:11Z

ui/components/Logo.tsx

@@ -13,14 +14,16 @@ type Props = {
 };

 function Logo({ className, link, collapsed }: Props) {
+  const { settings } = React.useContext(AppContext);
+  const dark = settings.theme === ThemeTypes.Dark;


We are repeating this in multiple places. Can we put this in a reusable hook?:

Suggested change

const dark = settings.theme === ThemeTypes.Dark;

const theme = useGetThemeSetting()

if (theme === ThemeTypes.Dark) {

...

}

Added useInDarkMode hook which returns a boolean

ui/components/YamlView.tsx

jpellizzari · 2023-05-11T19:57:39Z

ui/contexts/AppContext.tsx

@@ -10,15 +10,22 @@ type AppState = {
  detailModal: DetailViewProps;
 };

+export enum ThemeTypes {


jpellizzari · 2023-05-11T19:58:05Z

ui/images/signInWheelDark.svg

🔥 🔥 🔥

ui/pages/SignIn.tsx

opudrovs · 2023-05-11T20:02:25Z

ui/components/ChipGroup.tsx

+      {chips.length > 0 && (
+        <Chip
+          label="Clear All"
+          className="filter-options-chip"


💡 It would be cleaner to have filter-options-chip class in ChipGroup too if possible. It is not supposed to know about a class name in DataTable.

removed class and just moved the bg color into the component itself...not sure why it was added originally. Looked in enterprise too for a reason and I don't see one. Should be okay.

opudrovs

Tested it locally, works and looks great! 🎉

… color inherit

…ill a little polishing left to do

… toastify, signin eye icon

…lter dialog button, and detail modal background

…overrides for disabled checkbox and input

…treamline colors a bit

jpellizzari

LGTM 👍

jpellizzari · 2023-05-15T15:41:13Z

ui/components/Logo.tsx

-        <Link to={link || V2Routes.Automations}>
-          <img src={images.logotype} />
+        <Link to={link}>
+          <img src={dark ? images.logotypeLight : images.logotype} />


joshri added the area/ui Issues that require front-end work label May 9, 2023

joshri requested a review from opudrovs May 9, 2023 03:12

lasomethingsomething mentioned this pull request May 10, 2023

Support dark mode in the UI - OSS #2948

Closed

joshri force-pushed the dark-mode branch from 78fc727 to 11033a0 Compare May 10, 2023 14:57

joshri marked this pull request as ready for review May 10, 2023 20:02

joshri force-pushed the dark-mode branch from 6035e71 to b21d619 Compare May 11, 2023 15:59

joshri changed the title ~~Dark mode draft~~ Dark mode OSS May 11, 2023

jpellizzari reviewed May 11, 2023

View reviewed changes

This comment was marked as duplicate.

Sign in to view

opudrovs reviewed May 11, 2023

View reviewed changes

opudrovs approved these changes May 11, 2023

View reviewed changes

joshri added 6 commits May 15, 2023 11:15

theme edits and styles-provider component

9ee7106

add toggleDarkMode

d400cdb

localStorage

6b7a63b

brackets on children prop and one color prop fix

f1d32f1

fix places where theme was inline or imported, use mode variable

b2daf1b

add mode to test-utils

a98facb

joshri added 13 commits May 15, 2023 11:15

reverse some colors in dark mode, footer adjustments, nav icon button…

b875c45

… color inherit

add initial switch plus greyToPrimary color

26ea8e8

defaultChecked for dark mode switch

78e3a09

backgrounds, sign in, graph, nav text, switch icons, detail modal. St…

6a1bfeb

…ill a little polishing left to do

new yaml colorization, sync dropdown, alerts in dark mode plus failed…

b131000

… toastify, signin eye icon

adds window mock to test-utils, plus various fixes to yaml header, fi…

ea2b8ce

…lter dialog button, and detail modal background

alert type error, update toastify for theme access

bf2f53b

get new app detail styling in dark mode, style switch for dark mode, …

51788d0

…overrides for disabled checkbox and input

lint

f36e560

unify spelling of "gray" and remove all uses of backGray to try and s…

3b627e5

…treamline colors a bit

add theme enum, option to override in yaml view

9e06771

useInDarkMode hook, add mode field to theme

5c35036

snaps

3b94b80

joshri force-pushed the dark-mode branch from 9b8c141 to 3b94b80 Compare May 15, 2023 15:16

chip group tests

0d9fc94

joshri changed the title ~~Dark mode OSS~~ Add dark mode theme to the UI May 15, 2023

jpellizzari approved these changes May 15, 2023

View reviewed changes

joshri merged commit f69ed59 into main May 15, 2023

joshri deleted the dark-mode branch May 15, 2023 15:46

This was referenced May 24, 2023

Updates for 0.24.0-rc.1 #3718

Merged

Updates for 0.24.0 #3723

Merged

-  const dark = settings.theme === ThemeTypes.Dark;
+  const theme = useGetThemeSetting()
+  if (theme === ThemeTypes.Dark) {
+  ...
+  }

Add dark mode theme to the UI #3677

Add dark mode theme to the UI #3677

Uh oh!

Conversation

joshri commented May 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

opudrovs commented May 9, 2023

Uh oh!

opudrovs commented May 9, 2023

Uh oh!

opudrovs commented May 9, 2023

Uh oh!

opudrovs commented May 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

opudrovs commented May 9, 2023

Uh oh!

opudrovs commented May 9, 2023

Uh oh!

opudrovs commented May 9, 2023

Uh oh!

opudrovs commented May 9, 2023

Uh oh!

opudrovs commented May 9, 2023

Uh oh!

opudrovs commented May 9, 2023

Uh oh!

joshri commented May 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JamWils commented May 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

joshri commented May 10, 2023

Uh oh!

jpellizzari left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

This comment was marked as duplicate.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

opudrovs left a comment

Choose a reason for hiding this comment

Uh oh!

jpellizzari left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

joshri commented May 9, 2023 •

edited

Loading

opudrovs commented May 9, 2023 •

edited

Loading

joshri commented May 9, 2023 •

edited

Loading

JamWils commented May 10, 2023 •

edited

Loading