Dark mode for pub.dev

[vincevargadev]

It would be great if the pub.dev site supported dark mode (either with or without a switch).

Reading the site at night is annoying, especially if all other sites I need for development already support dark mode (which they do, for example GitHub, YouTube).

As it's (I suppose) a bigger design change, I assume it needs feedback/approval from the design team, but if you would be open to it, I could prepare some of the changes, so most color values can be just plugged in and the feature would get a jump start.

[Shweta0617]

@vincevargadev
I would like to contribute on this issue, please assign to me !!

[isoos]

@Shweta0617: I'm happy to help you, but this is not a small undertaking. Would you share what you'd like to get to do?

[vincevargadev]

@Shweta0617 I can't assign the issue to you, I just opened the issue.

[Shweta0617]

@isoos I tried dark mode in mobile app, but in websites like pub.dev i never tried dark mode. But, if someone guide me then probably i can complete the issue !!
thanks for asking (i searched today about "implementation of dark theme in website")

@vincevargadev
Okay, No Problem
can you tell me a dart project in which I can contribute?

[Fayiz-A]

JUST A SUGGESTION

This package is really good for implementing dark theme.

[vincevargadev]

@Fayiz-A That's a Flutter package, I don't think that would help with the dark theme for pub.dev.

Pub.dev is a simple HTML+CSS style webpage, so the dark theme changes would be implemented mainly with CSS (AFAIK). I think this guide could be a good start: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/

[Fayiz-A]

@vincevargadev Sorry for my ignorance. I thought it was written in flutter because I saw dart files in app/lib folder.

[gmpassos]

Same situation here. Everything that I use has Dark Mode (GitHub, Terminal, IDE, IntelliJ, Notes...). At night, when we open pub.dev, it's uncomfortable for the eyes.

[vandadnp]

This is by no means a perfect solution and only works if you have a browser with Reader mode such as Safari. What I do is just to open a pub.dev package site and go to reader mode to get this nice dark theme.

results.mov

[vincevargadev]

Just as info, here is the issue for dark mode on the docs, too: #3679

[AlexV525]

I've created a custom dark mode where some of the styles are learned from https://api.flutter.dev. Would like to submit a pull request if capable.

UserStyles: https://userstyles.world/style/15821/pub-dev-dark-mode
Gist: https://gist.github.com/AlexV525/57b3514e9412f2a481d858c629a459dc

Apply the style file using Stylus or other user style extensions with the domain pub.dev.

Screenshots

[leonidlist]

+1 upvote

[gmpassos]

Light theme is highly annoying.

IMHO, you should make the Dark theme the default (easier than a switch button).

[widgetizer]

I'd love it if pub.dev had a dark mode. I tell myself it eases eye strain, but it really just makes me feel like Batman.

[md-rifatkhan]

Issue created 3y ago, they might not interested to this.

Light theme is really annoying while everything in dark theme, most of programmer use dark mode..

[gmpassos]

Issue created 3y ago...

In the last three years, the use of Dark mode has increased significantly, making this pub.dev feature even more important.