SteamGifts v2 Dark Userstyle


Bright/light sites can be hard on the eyes so for us ocular challenged people i created a darker version. Works on www.steamgifts.com, www.steamtrades.com, www.sgtools.info . Compatible with most scripts found in the addon registry..

Also check out my other style SG Dark Grey.

Note: Style is now hosted on github as userstyles.org is no longer supported.


Install Stylus for either Firefox, Chrome or Opera and then install the style using one of these methods:

📦 Install the usercss which supports automatic updates and customization.
📦 Install manually from GitHub with no customization. The style is in Mozilla format.
📦 Install script which supports automatic updates but no customization.
📦 Install script from greasyfork which supports automatic updates and customization has settings menu via slide tab top right corner.


Last updated November 19 2024 version 1.7.7


Instructions for script version on greasyfork

Hover over tab in top right corner click Dark/Light to toggle between the two, click settings to access settings. (see pic below)

Settings

Save button apply and save color choices.
Reset button resets current theme back to the default Dark theme.
Cancel button closes settings without changing anything.

  • Steamgifts featured background image will be used if "Featured Background" is set to on(1 = on, 0 = off), otherwise it will apply a gradient of the color you chose.
  • Entering "water" or "halloween" (without quotation marks) into any theme input area will set that theme to the included water or halloween theme.
  • Settings tab (top right corner) colored according to "Header/Footer" for background, "Navigation Text" for text.
  • Colored "Names/Levels" (1 = on, 0 = off), Color is generated from game picture on featured giveaway or player avatar on profiles/SG++ Hover info.
  • Text shadow opacity setting has a range from -1(transparent) to 1(opaque) where 0 represents the default value(which is not shown).
    Negative values make it more transparent and positive values make it less transparent starting from its default value.

Hotkeys

  • Shift+Alt+1 = switch to theme #1
  • Shift+Alt+2 = switch to theme #2
  • Shift+Alt+3 = switch to theme #3
  • Shift+Alt+X = bring up settings menu
  • Shift+Alt+C = toggle current theme on or off

Screenshots

Screenshot Album

View attached image.
View attached image.
View attached image.
View attached image.
View attached image.
View attached image.
View attached image.
View attached image.
View attached image.
9 years ago*

Comment has been collapsed.

Just wanted to say, thank you for the update! I didn't know there was one until I had to disable it to check something. Also thank you for the script version!

9 years ago
Permalink

Comment has been collapsed.

Playing with submit button again, any thoughts ?

View attached image.
9 years ago
Permalink

Comment has been collapsed.

make dark blue font colour for hover?
like usernames

9 years ago
Permalink

Comment has been collapsed.

can you also dark the block giveaway pop-up screen?
thanks in advance :)

View attached image.
9 years ago
Permalink

Comment has been collapsed.

Thx pop-ups fix for greasemonkey added to next update.

9 years ago
Permalink

Comment has been collapsed.

thanks a bunch...
you are an eye-saver :D

9 years ago
Permalink

Comment has been collapsed.

you are awesome :D

View attached image.
9 years ago*
Permalink

Comment has been collapsed.

ooppss... i don't know but pop-up windows is again white...
sorry for messing stuff, dunno how i did it... =\
i think something about changing in colour scheme of pop-up window was with that green button which is responsible for manual changing of white/dark themes.

9 years ago
Permalink

Comment has been collapsed.

That would explain it as i have not updated with these fixes yet. Speaking of the theme button there will be some fixes for that as well so that it does not change between pages, more performance for firefox users plus scrollbar fixes for chrome users.....and much more

9 years ago
Permalink

Comment has been collapsed.

OMG!
i love you!

P.S. just updated... missed issue that my monkey hadn't updated userscript :O

9 years ago
Permalink

Comment has been collapsed.

astonishing!
thanks a ton for this style

9 years ago
Permalink

Comment has been collapsed.

+100 billion

I love this. Thank you!

9 years ago
Permalink

Comment has been collapsed.

Nice, I like the darker background. Thanks for this!

9 years ago
Permalink

Comment has been collapsed.

My eyes thank you;D

9 years ago
Permalink

Comment has been collapsed.

The updated version looks great! Thank you so much!

9 years ago
Permalink

Comment has been collapsed.

bug?
this is popping up white since yesterday at the bottom of page

View attached image.
9 years ago
Permalink

Comment has been collapsed.

not a bug, it did not exist before so it never was styled

9 years ago
Permalink

Comment has been collapsed.

oooh...okay..

9 years ago
Permalink

Comment has been collapsed.

I shall proceed to upload the changes, stay tuned for spooky friday the 13th up date.

View attached image.
9 years ago
Permalink

Comment has been collapsed.

yay!

View attached image.
9 years ago
Permalink

Comment has been collapsed.

And updated, enjoy

9 years ago
Permalink

Comment has been collapsed.

Cool. Thanks!

View attached image.
9 years ago
Permalink

Comment has been collapsed.

cheers mate b(^.^)d

9 years ago
Permalink

Comment has been collapsed.

<3

9 years ago
Permalink

Comment has been collapsed.

This is so much better! Thank you!

9 years ago
Permalink

Comment has been collapsed.

Edit : well now its ok, restarting my whole computer made the thing work (don't know why, but since it work i don't care :D)

Thanks a lot for that, my eyes will thank you :D

9 years ago*
Permalink

Comment has been collapsed.

Deleted

This comment was deleted 5 years ago.

9 years ago
Permalink

Comment has been collapsed.

The script version needs to be toggled on with the hidden button in the top right corner
Now set to dark by default, only needs a page reload.

View attached image.
9 years ago*
Permalink

Comment has been collapsed.

I absolutely love it!

View attached image.
9 years ago*
Permalink

Comment has been collapsed.

it's not so dark now :(

View attached image.
9 years ago
Permalink

Comment has been collapsed.

I use it with f.lux software. it looks good to me ..

View attached image.
9 years ago
Permalink

Comment has been collapsed.

View attached image.
9 years ago
Permalink

Comment has been collapsed.

View attached image.
9 years ago
Permalink

Comment has been collapsed.

View attached image.
9 years ago
Permalink

Comment has been collapsed.

lets hope squishedpotato makes exception for you
there there fab..
forget that..

View attached image.
9 years ago
Permalink

Comment has been collapsed.

View attached image.
9 years ago
Permalink

Comment has been collapsed.

I can upload an updated version of the original if you need. Be warned that version used a lot of shadows which lagged scrolling, more so on firefox than chrome.

All other versions are on greasyfork, stylish does not keep older versions

9 years ago*
Permalink

Comment has been collapsed.

yes please :D
i will keep it until a darker version comes out <3

9 years ago
Permalink

Comment has been collapsed.

Original version with site updates, not tested your milage may vary. This is not a script version, i will upload that at a later date.

pastebin

9 years ago
Permalink

Comment has been collapsed.

nice. looks great. thank you! <3

9 years ago
Permalink

Comment has been collapsed.

THANK YOU VERY MUCH!

This new skin is easier on the eyes, GreasyFork worked like a charm on Google Chrome.

9 years ago
Permalink

Comment has been collapsed.

Well I will be using this from now on, good job.

9 years ago
Permalink

Comment has been collapsed.

My eyes!
They don't hurt any more!
IT'S A MIRACLE!

Nah, but seriously. Great job!

9 years ago
Permalink

Comment has been collapsed.

Updated with some changes for steamgifts++

9 years ago
Permalink

Comment has been collapsed.

Looks awesome, thanks

View attached image.
9 years ago
Permalink

Comment has been collapsed.

As someone who's very sensitive to light I sincerely thank you.

9 years ago
Permalink

Comment has been collapsed.

Anyone can help me?

Can i have only the code for change the upper bar (Gyveways - Trades - Sales... .............. Account).

Thank you.

9 years ago
Permalink

Comment has been collapsed.

everything in the navbar? that is a lot of changes

9 years ago
Permalink

Comment has been collapsed.

I have a problem to read black text on grey background, but i prefer the white background for the GA list...

If is't possible, i want to change only the navbar like the SGv2 Dark.... but the code isn't easy for me...

Thank you.

9 years ago
Permalink

Comment has been collapsed.

will take some time to get it together for now here is the text color

.nav__button { color: white !important; }
9 years ago
Permalink

Comment has been collapsed.

thank you very much!!!!

It's work very good!

9 years ago*
Permalink

Comment has been collapsed.

here is the rest not including dropdown menus pastebin

9 years ago
Permalink

Comment has been collapsed.

Thanks... very thanks.

I try this too :)

9 years ago
Permalink

Comment has been collapsed.

As someone who spends many hours at his computer, I extend my gratuitous thanks for making one more site just that much more tolerable for my eyes.
Well done!

9 years ago
Permalink

Comment has been collapsed.

Cool skin. Thx a lot!

9 years ago
Permalink

Comment has been collapsed.

Updated with some changes for "User Hover Info" in steamgifts++

9 years ago
Permalink

Comment has been collapsed.

The text on the green giveaway level button is hardly readable. It doesn't need shadow or needs to change the texts color. Great work BTW!

9 years ago
Permalink

Comment has been collapsed.

Changed it a bit

9 years ago
Permalink

Comment has been collapsed.

Thanks. Now it's perfect!

9 years ago
Permalink

Comment has been collapsed.

Updated with some changes to buttons and some borders

9 years ago
Permalink

Comment has been collapsed.

those glowing group and wishlist buttons look weird, especially if they are next to a level one:

View attached image.
9 years ago
Permalink

Comment has been collapsed.

That is an error on the stylish version, it should look like the level on the giveaway list. However i think i will tweak the level buttons a bit, something like this.

It is now corrected to how it should have been, tweaks to the level buttons(if needed) will be at a later date.

View attached image.
9 years ago*
Permalink

Comment has been collapsed.

I think I have an older version of this, changing to the current decreases contrast, it looks like a grey veil put on the whole page. Is there maybe some singular code responsive for that, or have all the colors been altered?

Found a way to make the text whiter but that doesn't help too much with the overall look. Like the dark theme a lot and would prefer to use the updated version.

9 years ago
Permalink

Comment has been collapsed.

No singular code for that i'm afraid, i plan to revisit this later for now you can try this

9 years ago
Permalink

Comment has been collapsed.

Guess it's mostly the bg colors and outlining, Thanks for the link, that ver seems also a bit different, the page is somewhat stretched there vertically, and I haven't found the text color setting. (actually I know pretty much nothing about css..).

Rather going to keep the newest one and change the background-colors manually. Have all except the one for the main thread/comment, could you point me to where that is defined?

9 years ago
Permalink

Comment has been collapsed.

I think this is what you are looking for

.page__heading + div:not(.notification):not(.poll):not(.page__heading):not(.table), .page__heading + div ~ div:not(.notification):not(.pagination):not(.page__heading):not(.table__heading), .comments {
background-color: rgba(46, 52, 53, 0.3) !important;
background-image: none !important;
-webkit-box-shadow: 0px 0px 20px 1px black !important;
border-radius: 4px;
border: 1px solid #333844 !important;
margin-top: 8px;
margin-bottom: 8px;
padding: 5px 10px;
text-shadow: 1px 1px 1px black;
}

or the comment children ?

.ajax.comment__child:not(.highlight) {
-webkit-box-shadow: 1px 1px 0 #404349 inset, 0 7px 7px rgba(95, 95, 95, 0.3) inset !important;
background-color: rgba(61, 72, 77, 0.20) !important;
border: 1px solid #3C4352 !important;
box-shadow: 1px 1px 0 #404349 inset, 0 7px 7px rgba(95, 95, 95, 0.3) inset !important;
}
9 years ago*
Permalink

Comment has been collapsed.

ah, thanks a lot. That was it. Set that darker too and now it looks overall pretty similar to the one I had. (Also removed the reduced picture opacity.)

A few tables and similar were previously not covered (like still bright) with the old one, looks now a lot better, thanks for your effort. Do you use some program to edit that? Can't really imagine writing all that completely manually.

9 years ago
Permalink

Comment has been collapsed.

Manually ;) and here is the table which is used for example on the discussion page

.table {
background-color: rgba(46, 52, 53, 0.3) !important;
background-image: none;
-webkit-box-shadow: 0px 0px 20px 1px black !important;
border-radius: 4px;
border: 1px solid #333844;
margin-top: 8px;
padding: 5px 10px;
text-shadow: 1px 1px black;
}
9 years ago
Permalink

Comment has been collapsed.

How do you know where/what to change then? I've tried using the browser-debugger, but it's way too complicated and for example doesn't show where the text being yellow in the table is defined (unless I look at the wrong place that is)

and when we are already at it ;-) could you please tell me, where the color for the highlighting explanatory text when hovering over the buttons (whitelist/steam profile..) on the profile page is? (I like the old blue better ;-D )

9 years ago
Permalink

Comment has been collapsed.

I use the browser of course to find what to change and test changes live.

Right click on what you want to inspect should be on or near what you are looking for, helps if you know what your are looking at as well.

View attached image.
9 years ago
Permalink

Comment has been collapsed.

ahh, Firefox debugger has the old original color listed there, guess it's not taking the css override into account, that confused me a bit

Edit:
and found that profile button hover tooltip stuff ^^

    .sidebar__shortcut-tooltip-absolute {
        border: 1px solid #E0C82E;
        color: #333333;
        font-size: 12px;
        background-image: -webkit-linear-gradient(#F1F185 0px, #EBEB65 20px);
        box-shadow: 0 6px 15px rgba(0, 185, 178, 1),0 3px 6px rgba(0, 185, 178, 1),0 3px 6px rgba(0, 185, 178, 1),0 3px 8px rgba(0, 185, 178, 1),0 1px 3px rgba(0, 185, 178, 1);
        font-weight: 800;
        text-shadow: 1px 1px 2px #FFF;
}
9 years ago*
Permalink

Comment has been collapsed.

Sign in through Steam to add a comment.