feat: Dark theme implementation for Sway Playground

[alexprimak24]

Closes #45

Videos may be a bit laggy as my PC is not quite powerful:)

Intro

Hey there, I've done a Dark Theme for Sway Playground by creating themeContext and then just made other components to know about the current state of theme.A bit below I'll explain all my steps in details, just wanted to say that I really want to have this working so I'm open for making changes and enhancing the implementation of the dark theme.

P.s. As you can see on the videos, in the PC version you have a button to switch between themes + on page load the theme automatically applies depending on your system preferences. On the Phone version, there is no switch button, but it renders the theme that is the same as your system preferences.

Implementation explanation

I think I'll start with explaining how I set up a theme and then I'll go through the components I've edited.

• themeContext.ts

Using React context API I created a context.It has a theme property (it has 2 states - light or dark), and setTheme - to set a theme (on page load or on SwitchThemeButton click).
Also created useThemeContext hook so we can make sure theme has been set up properly and with it we will be accessing theme and setTheme.

• SwitchThemeButton.tsx

The main functionality just a simple switch theme button, that sets the theme to an opposite one once clicked.
Other code is styling (sets a Moon Icon when the dark theme is set and a Sun Icon when the light theme is set).

• App.tsx

For some reason on github, it shows my changes kinda wrong.
The changes you see below is everything I've done in App.tsx:

import {Theme,ThemeContext} from './theme/themeContext'  //imported Theme and custom hook
const [theme,setTheme]=useState<Theme>('light'); // Current theme state

And wrapped my entire app with Theme Provider so all my components are aware of the current theme state:

return (
    <ThemeContext.Provider value={{setTheme,theme}}>
            //all the code in return
    </ThemeContext.Provider>
  );

Finally, depending on theme set the background color of our main div:

background: theme==='light' ? '#F1F1F1': 'black',

• Copyable.tsx

1. Imported custom useThemeContext hook with which accessed current theme state:

   const theme = useThemeContext().theme;

These steps will be repeated in many places, so instead of just writing these lines, again and again, keep in mind that step as Step 0

2. Depending on the theme, apply color to the div and ContentCopyIcon.

• SecondaryButton.tsx

1. Depending on the theme, apply color and bg color to the Button.

• shared.tsx

1. Created a BorderColor function which depending on a theme will change StyledBorder color.

2. DarkThemeStyling - this is styling for dropdowns and inputs for dark theme,

• ExampleDropdown.tsx & ToolchainDropdown.tsx

1. Imported DarkThemeStyling

2. Created a dropdownStyling which depending on the theme state will use styling from shared.tsx or will return nothing (default styling will be applied). And this styling we will pass to sx of FormControl.

3. Added MenuProps and removed background styling from Select components for styling purposes.

• LogView.tsx

1. Depending on the theme, change the color of LogView.

• SolidityEditor.tsx & SwayEditor.tsx & ComplexParameterInput.tsx

1. Imported another editor theme from AceEditor - tomorrow_night_bright

2. With useMemo depending on the theme's current state set themeStyle to tomorrow_night_bright | chrome

3. In the AceEditor component assign the theme: theme={themeStyle}

• DryrunSwitch.tsx

1. Depending on the theme, change the color of Switch and text close to it.

• FunctionCallAccordion.tsx

2. Depending on the theme, change the style of Accordion, ExpandMoreIcon, and FormLabel.

• FunctionParameters.tsx

1. I decided to create a custom TableCellComponent to avoid passing the same changes over and over again.

2. Replaced TableCellComponent instead of TableCell, but in the place of parameters input left TableCell to be able to input our parameters.

• FunctionToolbar.tsx

1. Depending on the theme, change the color of the title.

• InteractionDrawer.tsx

1. Depending on the theme, change the color of the background and text.

• ParameterInput.tsx

1. For that I used the same approach as for ExampleDropdown.tsx & ToolchainDropdown.tsx

• ResponceCard.tsx

1. As usual - just color and background styling depending on the current theme state.

background: theme === '' ? 'white' : 'transparent'

This line removed just a small white outline when dark theme is set.`

• ActionTollbar.tsx

1.Using useEffect hook on page load we check the system preferences of the user and set the theme state to user preferences.

As I didn't pass dependencies when useEffect should be called: it will be called only once - on page load.

2. {!isMobile && <SwitchThemeButton />} - check if we are not in the mobile version then we should be able to see SwitchThemeButton.

That is pretty much it.If something needs to be refactored or changed, will be glad to make edits <3

bandicam.2024-05-12.15-40-49-539.mp4

Phone.Sway.Playground.MP4

[sdankel]

Thank you for the contribution! This is looking really good. I have a few initial comments and I will dig in deeper on Monday.

In Dark Mode, I think all buttons other than compile should have a light gray color for the text rather than green. This highlights the compile button, which is the primary button on the page. It might look better for the compile button to have green text with a dark backrgound. I will experiment with it and test it out soon.

Thank you again!

[sdankel]

I noticed also that the theme button disappears when the "interact" drawer is open.

Edit: It is also missing in mobile view. You might need to put it in App.tsx rather than in the action toolbar to make sure it's above everything.

[alexprimak24]

Thank you for the contribution! This is looking really good. I have a few initial comments and I will dig in deeper on Monday.

In Dark Mode, I think all buttons other than compile should have a light gray color for the text rather than green. This highlights the compile button, which is the primary button on the page. It might look better for the compile button to have green text with a dark backrgound. I will experiment with it and test it out soon.

Thank you again!

Hey there, I'm really glad that you've reviewed my PR and liked my dark theme, thank you! I've made some changes you've commented on and waiting for your reply regarding dark theme buttons styling.

I tried some of the variants you've suggested and in the video, I also tried the text to be green on hover.

OnHoverGreen.mp4

[sdankel]

I like the look in the latest video you posted best (OnHoverGreen.mp4). A couple more comments on the style:

• Could we make the text of the disabled action button text a bit lighter? Darker than the enabled buttons, but light enough so that it's still easily readable.
• Could we match the style of the editor dropdown to light mode? That is, outlined in light grey rather than a green shadow. Like this (But with the arrows grey instead of green):

• When hovering over a secondary action button, could we make the background change color to dark green rather than the text color changing? That would mirror what happens in light mode. I think it's better for consistency with other buttons in the app for the background color to change on hover rather than the text color.

Something like this (using the colors from @fuel-ui/css):

• General note: We should use green sparingly, only where it's used in the current light mode. Where light mode has black, dark mode should have light. Where light mode has dark grey, dark mode should have light grey, etc. The fuel color scheme is mostly black and white with only a few hints of green where emphasis is desired. I believe the only green in the whole app is in the action toolbar buttons & spinner. Not at all in the "Interact" drawer.

[sdankel]

You might also want to look into MUI ThemeProvider since the app uses MUI extensively.

https://mui.com/material-ui/customization/dark-mode/

Here's an example of toggling the mode: https://mui.com/material-ui/customization/dark-mode/#toggling-color-mode

Actually using useFuelTheme is probably better. Here's an example in the documentation site:
https://github.com/FuelLabs/docs-hub/blame/e159d2edc4b4e4494904ac0b96e2b8591a414e97/src/hooks/useTheme.tsx

[alexprimak24]

Thank you for all the comments/suggestions I've read them all,will make changes during weekends and come back with an updated version!

[alexprimak24]

Good day! I think I've made all the changes you mentioned, tried to stick to black/white styling that time but if some colors need to be changed - I'll change them.

In App.tsx in return I only set background: themeColor('white4'),

[sdankel]

This is looking really good! I'll do another review of the code tomorrow. A couple things I noticed from the preview:

It's a bit hard to tell this is a toggle

The disabled compile button should be a darkened green

Needs a bit more contrast on the log timestamps to be easily readable

There are also some failing lints.

[sdankel]

As a heads up, I'm adding linting and formatting to CI.

You can copy the changes from package.json in this PR to run the lint + formatter scripts on this code, or wait until that PR is merged and merge from master to run them. There might be merge conflicts but they'll be simple things like changing 's to "s

npm run lint and npm run format

[alexprimak24]

Thank you for an update, woking on the changes 🫡

[alexprimak24]

Good day, I hope I didn't miss anything. Now it is looking way better than in my first commit)).Is there anything else I should change?

[sdankel]

Thanks for the quick turnaround. I left a couple more nits/questions, then I think it's ready to go 🚀

[alexprimak24]

I made some small changes, as you suggested.

Regarding dividers in dark mode, I could create a custom StyledDivider in useLog.tsx but with that approach, styling doesn't change even if the theme is changed.So I created StyledDivider in shared.tsx, and it works fine on theme change.What do you think about this approach, should I leave it like that or find another way?

[alexprimak24]

For the last commit - I just changed the color of the links, as they are quite hard to read.

[sdankel]

Sorry, I had a couple more comments from Friday that I forgot to post. I will go ahead and commit them if I can and then approve. Thanks for your hard work on this PR!

[alexprimak24]

Sorry, I had a couple more comments from Friday that I forgot to post. I will go ahead and commit them if I can and then approve. Thanks for your hard work on this PR!

Thank you so much, it was a please for me!