feat: add dark mode

[kaf-lamed-beyt]

fixes #1702

Hi @lidel, This is what I have so far. I'm currently using an approach involving a Context Provider to access the theme value across the entire application.

I'm also adding the styles individually in index.css by targeting the data-theme attribute. This is nice, but it can be quite tasking, hence my move towards a custom context hook. This would allow us to dynamically change colors across components in the application.

I ran into a slight blocker though. App.js uses a legacy React pattern — a class-based component which makes it a bit difficult to use the hook in this component, so I resorted to using the value from localStorage which is outside of the component/app life-cycle. So even if the value of theme in localStorage changes, the color — based on the ternary operation below — of the header won't change, because we do not trigger a re-render. Which is what the hook helps us achieve.

<div
     className="flex items-center ph3 ph4-l"
      style={{
         WebkitAppRegion: "drag",
          height: 75,
          background: currentTheme === "dark" ? "red" : "#F0F6FA",
          paddingTop: "20px",
          paddingBottom: "15px",
        }}
>

So, my question now is if it is possible to refactor App.js into a function-based component

[welcome]

Thank you for submitting this PR!
A maintainer will be here shortly to review it.
We are super grateful, but we are also overloaded! Help us by making sure that:

• The context for this PR is clear, with relevant discussion, decisions
  and stakeholders linked/mentioned.

• Your contribution itself is clear (code comments, self-review for the
  rest) and in its best form. Follow the code contribution
  guidelines
  if they apply.

Getting other community members to do a review would be great help too on complex PRs (you can ask in the chats/forums). If you are unsure about something, just leave us a comment.
Next steps:

• A maintainer will triage and assign priority to this PR, commenting on
  any missing things and potentially assigning a reviewer for high
  priority items.

• The PR gets reviews, discussed and approvals as needed.

• The PR is merged by maintainers when it has been approved and comments addressed.

We currently aim to provide initial feedback/triaging within two business days. Please keep an eye on any labelling actions, as these will indicate priorities and status of your contribution.
We are very grateful for your contribution!

[kaf-lamed-beyt]

Hi @lidel, kindly take a look at this when you get the chance. Thanks.

[SgtPooki]

So, my question now is if it is possible to refactor App.js into a function-based component

@kaf-lamed-beyt I would love for all components in ipfs-webui to be functional components. That is the direction we're moving. However, since that will likely be a significant change, we should probably do that as a separate PR.

You can see an example of a simple function component that is also using redux-bundler-react at

ipfs-webui/src/explore/explore-page-renderer.jsx

Line 32 in 7fbb51b

export default connect(

[kaf-lamed-beyt]

Oh! Thanks for the feedback, @SgtPooki! I'll take a look at the file you pointed me to now.

So, from the looks of things now, are you suggesting that i use the manual approach of targeting each element based on the styles in [data-theme="dark|light"] in index.css?

We can always keep the hook.

[lidel]

💭 the space in the left NavBar is limited especially in ipfs-desktop where UI acts as native app. and window height is limited by default.

we want to add diagnostics screen at some point

perhaps it is better to move this toggle to top right corner where we already have two items:

thoughts?

[kaf-lamed-beyt]

oh, yeah! that sounds goood, @lidel!

i originally thought of placing it there, but couldn't locate the icons in the code. I'll try looking for them and update the theme toggle's position