uBlock Origin dark theme

[Thorin-Oakenpants]

discussion continued from gorhill/uBlock#3342

sample from @overdodactyl with a a couple of original colors pasted in

• red/green/ (and yellow I assume) seem way too dark. Nothing wrong with the original colors
• grey colors - obviously we can;t use grey anymore, but please do not use red if you are (it's a bit confusing to me if this is happening or not) - use shades of blue (use the same saturation/luminosity etc as red, just switch around the RGB values to get the two shades (light/dark)
• color blind version needs testing

[overdodactyl]

Thanks @Thorin-Oakenpants!

Appreciate the ideas! I was definitely a bit too hast getting a first draft up on the repo.

I agree the colors are too dark. I used a similar color, but neglected to account for the opacity in the original ones onto the white background.

Blue's a good idea to replace grey with (it's not in the screenshot, but I had a lighter grey that blended in a little too well)

Also neglected to look at color blind version...back to work!

[overdodactyl]

Here's a look with the same red and green colors and blue instead of grey:

[Thorin-Oakenpants]

but neglected to account for the opacity

That's what I originally suspected/said in the other comment, but I edited that post to just point to here. That all looks good. Don't forget that yellow one :)

PS: I just turned on color blind friendly and I have no idea (they're all too close for my eyes). I think you will want some help with that. There are PS filters for testing the three main types (I have one somewhere, so sing out if you need it). From ages ago all I remember is that blue-color-blindness is rare (1%) and only affects men (yay for them!), The main one is red-green. Maybe ask on reddit so you can pimp yourself again xD :)

[overdodactyl]

Got the yellow one covered :)

I'll play around with the color blind friendly version a bit, but you're probably right about needing help with that one. If I can't find the PS filters, I'll let you know, thanks! Nothing ever seems to be easy ¯_(ツ)_/¯

Haha and when in doubt, always turn to Reddit :P

[Thorin-Oakenpants]

Well TBH the PS filter I have from around 16 (sixteen!!) years ago (so may not work in your PS version) simply shows you what the colors would look like if you were X type of color blind. I used it more for changing the colors used, so no color-blind friendly option was needed. Here we just need to make sure the colors in the friendly version don't change (I think, since they lack red/green)

Just had a look around and I think I ditched that plugin in some purge years ago. We've come along way in 16 years .. there are online color simulators - http://www.color-blindness.com/coblis-color-blindness-simulator/

[Thorin-Oakenpants]

checkin' needed - did you cover the 6 colors in the mouseover in the cells (showing the three light ones below, if the mouse is hovered that 1/3rd cell bit becomes dark)

[overdodactyl]

Thanks for that website @Thorin-Oakenpants! Had a little too much fun just playing around with that and uploading different photos haha.

Since I'm using the same colors as uBO (when taking into account opacity), I think I should be able to just do the same thing for the color blind friendly version and not have to worry too much.

In the original version I posted I had not done the hover colors, but they are now taken care of as well :)

[Thorin-Oakenpants]

Excellent ... you may take the day off tomorrow :)

[Thorin-Oakenpants]

rather than add a new issue...
https://raw.githubusercontent.com/overdodactyl/ShadowFox/master/userContent-files/webextension-tweaks/decentraleyes.css

double ; at end of the last two element properties

[overdodactyl]

Good catch @Thorin-Oakenpants, thanks! All fixed :)

[Thorin-Oakenpants]

Hmmm .. so I thought I might darken a few things - I'm not using anything except some tweaks to my speed dial extension and a couple of chrome changes (removed context menu items etc)

to userContent I added the root item variables and then the uBo css contents, and I still don't get the original colors (eg as per pasted in the first pic). Is there some opacity setting that needs applying?

Edit: eg

  /* Darker Red */
  blah blah { background-color: #ab0000 !important;}
  /* Lighter Red */
  blah blah { background-color: #dda0a2 !important;}

The colors used in the original uBo are

/* bright red   - C00000
   light red    - DD9090
   bright green - 3CB43C
   light green  - 90D090
   light yellow - DDD090
   dark grey    - 8D8D8D -> translate to blue
   light grey   - D5D5D5 -> translate to blue
*/

So I swapped out the two red ones, but eg they still are show darkened - I assume by the backgriund underneath? PS: I also get the bottom right column items non darkened - it makes me scream!

[overdodactyl]

Welcome to the dark side! :)

I just made a slight change for the sidebar colors to lighten them up a bit, but didn't change the main ones. Instead of using uBO's original colors and having to deal with finding the right opacity, I took a screenshot and used PS to get the hex color and used an opacity of one. It seems to be a pretty good match for me. Here's with and without styling (I think I have all the colors in here):

The colors admittedly look different in those screenshots, but I think it's partially an optical illusion from having a dark vs. light background.

If they are overlayed on one another, it seems to be a decent match:

I'll keep playing with it, but I don't think it's tooo far off. Is this different than what you're seeing?

As for the bottom column, I have no clue what could be causing that! I'll see if I can figure something out, but it's bizarre it's happening for only some (maybe an odd OS quirk?)

[Thorin-Oakenpants]

Yeah .. I'm not getting those colors at all - maybe tomorrow I will pastebin you the code I added - everything is so dark on dark

Edit: the code came directly from here as of about 6 hrs ago

[overdodactyl]

Feel free to send me a pastebin!

If you don't want to post it on here, I can give you an email or something of the sort

[Thorin-Oakenpants]

no need to leave this open .. I'll sort out using some shadowfox stuff down the track when I have time :) I've actually become accustomed to light panel dropdowns (on my mostly dark webpages) where the contrast is better - also, I al soooo used to uM and uBo colors etc and I rely on and use these extensions A LOT

[overdodactyl]

Makes sense! Feel free to let me know at any point down the road if there are any issues you come across that need to be addressed :)

I uploaded a "first draft" of uMatrix yesterday (still needs a little playing with), but interestingly the matrix colors were not at all effected by a darker background, so luckily I didn't even have to touch those (and there's no gray noops to deal with either).

[Belmaj]

Makes sense! Feel free to let me know at any point down the road if there are any issues you come across that need to be addressed :)

I uploaded a "first draft" of uMatrix yesterday (still needs a little playing with), but interestingly the matrix colors were not at all effected by a darker background, so luckily I didn't even have to touch those (and there's no gray noops to deal with either).

hello sir can i ask how to apply dark theme in ublock origin im using chrome can you answer my question sir?