Thanks @legallyfree - it's on our radar for future releases, so thanks for the additional vote.

Additional context for anyone who comes across this issue:

• We'd very much like to include a dark-mode option in Web UI (and, by extension, Desktop)
• Current timeline would involve including this work in a larger-scale revisiting of Web UI/Desktop, likely in Q2/3 2021
• If anyone is interested in PRing something earlier, contributions are most welcome!

If someone wants to work on this:

• speed up your work by copying colors generated by https://darkreader.org for now
  • we can refine and bubble up them to https://github.com/ipfs-shipyard/ipfs-css later

Hello,
Any news on this ?
Thanks

Photosensitive user here; I sadly just had to uninstall the desktop app due to the blindingly-bright screen with no dark mode option. Support for dark mode would be greatly appreciated! I'll be sticking to the CLI for now 😊

The colors are pretty spread out in the js files. Guess a theme-switch button will really be needed -- no easy path with only changing a CSS file with @media (prefers-color-scheme). Well, I mean, you can do the same query with JS, but if you're changing the JS you might as well add a button.

But then there are CSS files. Maybe it's easier to not add a button after all, or otherwise we'd have to move them to JS to make them conditional on manual dark/light selection -- because Firefox doesn't do @container with custom properties yet.

If someone wants to work on this:

• speed up your work by copying colors generated by https://darkreader.org for now

  • we can refine and bubble up them to https://github.com/ipfs-shipyard/ipfs-css later

hi @lidel, can you assign this to me so I can attempt it

Sure, feel free to work on this and ping when PR is ready for review.

In case its useful for testing, you can force brave and google chrome to run in dark mode via --force-dark-mode i think

Alright, I'll do this too

#2322 is a good start but missed some key parts of UI that makes it unusable on systems with Dark Mode preference. Below feedback based on bafybeichbsr7jzwnqnlyb3tqjk6unhrwzwe74rnsnhi6hn3ovtr3tx6yk4 (latest master branch, https://github.com/ipfs/ipfs-webui/actions/runs/13554420729/job/37885554927#step:11:7).

@SgtPooki @kaf-lamed-beyt mind reverting until below are addressed? or is the plan to address below before next release?

1. status page → graph contrast is too high

   

2. status page → Tutorial:

   

3. Status page → Addresses

   

4. Context menus and all modals on Files screen:

   
   
   
   etc.

5. Explore landing screen has white box:

   

6. Exploring DAG is unreadable:

   

7. Peers screen → Add connection modal is unreadable

   

8. Settings screen → Add pinning service and IPNS modals are unreadable:

   
   

Ah! Crap! I missed all those modals and context menus.

I'll try opening a new PR for these, @lidel, if that's okay. It is mostly just updates to the respective styles if I'm not mistaken.

For the addresses UI, I couldn't reproduce that. Is there a way you got the addresses to show? Do I have to include some type of input or somn'?

Kindly walk me through, thanks.

FYI I reverted the dark mode changes so if you could throw that back together with the additional fixes that would be great.

For the addresses UI, I couldn't reproduce that. Is there a way you got the addresses to show? Do I have to include some type of input or somn'?

The addresses should show after your node has been running for a little bit and then you just click the little ^ Advanced toggle to show the other windows

Definitely. I'll get to it, @SgtPooki

@SgtPooki, I'm done with the updates... I'm guessing I'd need to create a new PR, yeah?

@lidel, looking at the explore page... I think it depends on this package ipld-explorer-components/pages. I couldn't find the exact components rendering the UI on that route and on /explore/[cid]

@kaf-lamed-beyt ipld-explorer-components live in https://github.com/ipfs/ipld-explorer-components/ – open a companion PR in that repo.

alright, thanks! I'll set that up.

but, wait... @lidel, how would you suggest I go about this? Will I include the theme context I already have here in that repo? how does it work? can you walk me through?

but, wait... @lidel, how would you suggest I go about this? Will I include the theme context I already have here in that repo? how does it work? can you walk me through?

@kaf-lamed-beyt I think what we would need to do is add some CSS to ipld-explorer-components with a parent selector of [data-theme='dark'] to handle the display.. and we can leave it at that. It should then get the config from ipfs-webui and display things with the appropriate theme

alright, that sounds good @SgtPooki. I'll get to it and let you know if I run into any blocker(s).

@SgtPooki, I've opened a PR in the explorer-components repo.