Hopscotch Web Explorer

pro tip: compress images to reduce file size :)

Final screenshots for now

100% brightness

80% + contrast

I think this is 75% no contrast

original dark mode (40%)


So I put both images (75% + contrast and 75% I think) over each other as a comparison and I can definitely say that the contrast definitely helps a lot. It helps to bring out the darker colors in the thumbnails much better.

Less gray and more vibrance is probably the way to go with this because of Hopscotch’s design language, so I would probably take the contrast approach for sure if thumbnails will be darkened.


What do you think has the best balance between vibrance and brightness (or the lack of in a dark mode)

I’m kinda leaning towards 75% + contrast


Honestly, I still lean towards 100% brightness. :sweat_smile:

Maybe I’m just biased due to nostalgic feelings, or my room is well lit or whatnot. Honestly, I’m always a fan of preserving the original colors, too, because it’s what the creator of the project intends you to see. That’s really the main reason why I’ve always preferred the full brightness.

Other than this, I’ve got lights in my room, as well as a mini lamp right next to my laptop. So I’ll analyze this from both a dark room and a lit room perspective.

With this aside…

So the thing with contrast is that it makes the darks darker, deviating from the regular Hopscotch built-in color scheme. I’m not sure if that’s an intentional design choice to brand the app via the use of specific color usage in project drafts, but if so, then maybe contrast isn’t a good choice. Otherwise, I think it makes the thumbnails look deeper and more vibrant, which matches with the dark theme more, in my opinion.

With this being said, for a dark mode user, the contrast also helps make the lighter colors just a bit darker, compensating with saturation. So I think that works out great.

However, for someone in a well-lit room, I think the brightness should be a little bit higher for them, too. I think 80% is bright enough, but getting to the point where it might be a little too bright for someone in a dark room.

I think it’d be a good compensation to go with 77.5%, with or without contrast added. I know it may seem like a minor interval, but I think it strikes a good balance between both users.


Screenshot from 2021-07-16 08-48-55
extremely minor visual bug, chromium

1 Like

*on linux

must really not like those pixel-perfect widths.

I think it’s the font rendering, don’t really have time to fix though


Hey, just wanted to follow up with you. I was just wondering if these theme changes will be implemented soon, before your internship term ends? The rethemes you started look beautiful.

1 Like

It got lost when we had to detangle one of the PRs (which grew from 9 commits to 50 commits :o). I haven’t put it back since but we’ll see.


Ahh okay, I see. Yes, I think that would be great to see!



@Awesome_E How do I make a GitHub Page a WebClip

  1. That happens sometimes because the proxy server goes down, so the error is correct in that case.

  2. What do you mean by web clip. An iframe?

1 Like

A app like you did

@Awesome_E read post above

1 Like

@Awesome_E In the web builder does it search the parameter values of rules? I’m searching for the 1 message name I didn’t make a variable and can’t seem to find anything other than where I broadcast it. I know there is at least 1 rules which responds to it.


I thought I made a fix so that it would behave as you wanted (searches rules), but idk if it works.


Man the codebase on the modded version feels ancient after all the changes I made to create the official web explorer :sweat_smile:

I realized that even more after I decided to make a couple touch-ups to this version…

  • faster card loading because height calculations were lagging somehow before, but this has been mitigated
  • channel and avatar colors, as well as some padding/sizing adjustments to resemble the official explorer a bit more
  • X-ray should now factor in hashtag channel spam (note: some projects that have 3 hashtags or more will still show up because the title expression is lower priority than some other checks)

I wish I could make a Hs site on my iPad. I have no PC lol


This is the percentage of projects hidden by x-ray on the web explorer out of all projects shown on screen. X-ray attempts to hide projects based on a set criteria, which includes title, words in thumbnail, etc, and you can see what it has hidden by tapping the target button on the bottom left then tapping on the eye


Oh cool! Ok, thanks!

If 85% of recent projects out of the sample size you chose are truly spam, then that’s a little scary… Do you think it’s possible to collect xray analytics to see when the spam started? (For instance, with a script, move back a month, collect xray data, move back a month, etc. and graph it, or does that count as mass data collection? It would be interesting to see!)

If this isn’t possible, then I totally understand lol