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 January 12 2024 version 1.7.6


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.

Test

5 years ago
Permalink

Comment has been collapsed.

There is a test? omg i never studied 😱

5 years ago
Permalink

Comment has been collapsed.

That's why you bombed this semester.

5 years ago
Permalink

Comment has been collapsed.

Skin seem to broke with ESG any idea how to fix it

5 years ago
Permalink

Comment has been collapsed.

Works but ESG needs fixing

5 years ago
Permalink

Comment has been collapsed.

do you know whats wrong with it

5 years ago
Permalink

Comment has been collapsed.

If i recall there was a jquery conflict if you used greasemonkey, but tampermonkey was fine.

5 years ago
Permalink

Comment has been collapsed.

im using tampermonkey tho
https://i.imgur.com/yKbwhQ3.png

5 years ago
Permalink

Comment has been collapsed.

You might want to reinstall it then, but make sure you export everything to import later.

5 years ago
Permalink

Comment has been collapsed.

Deleted

This comment was deleted 5 years ago.

5 years ago
Permalink

Comment has been collapsed.

I fixed it thanks for the help

5 years ago
Permalink

Comment has been collapsed.

Please tell us that you'll be coming out with a fix for this "subscribed" eyesore?

View attached image.
4 years ago
Permalink

Comment has been collapsed.

Absolutely 😉

4 years ago
Permalink

Comment has been collapsed.

Version 1.5.6.3

  • RAchart fixes

Version 1.5.6.2

  • Christmas Calendar

Version 1.5.6.1

  • Subscribed discussion categories, Discussion bookmarks
4 years ago*
Permalink

Comment has been collapsed.

Looking good... Now if only there were a "Fixed width" option on Stylish, then it would be perfect!

Edit/
Not to nitpick but ain't the "Subscribed box" a wee bit lighter in color, or is it the other way around?

View attached image.
4 years ago*
Permalink

Comment has been collapsed.

No colors have changed just the extra background removed, it probably looks lighter because it is a gradient so the longer it is the more light color you will have near the top.

The stylus version i have been working on since forever currently has 100+ settings.

View attached image.
4 years ago
Permalink

Comment has been collapsed.

I don't get it... Where's the install button?
I need to get my grubby little hands on it!

Also, what I meant was the "Fixed width" option on Stylish is "broken".

View attached image.
4 years ago
Permalink

Comment has been collapsed.

Oops 😳 corrected now, as for the other version i'm crossing my fingers for this month.

4 years ago
Permalink

Comment has been collapsed.

Quick fix... Many thanks :)

View attached image.
4 years ago
Permalink

Comment has been collapsed.

Now available for testing SGv2 Dark with stylus options , Stylus required.

4 years ago
Permalink

Comment has been collapsed.

Test commenced...
Sets "Page Width to Fixed" so far so good ;)

View attached image.
4 years ago
Permalink

Comment has been collapsed.

Found something... If SGv2 Dark is enabled this add-on won't work.
When you try to enter the App ID the whole box just disappears.

4 years ago
Permalink

Comment has been collapsed.

Happens when RaChart Enhancer is loaded before SteamGifts Library Checker because they both use the same css id. You can correct by uninstalling RaChart Enhancer and then installing again, or wait for me to update to correct for that scenario.

4 years ago
Permalink

Comment has been collapsed.

View attached image.
4 years ago
Permalink

Comment has been collapsed.

That fix is was included in the update i pushed out last night ;)

4 years ago
Permalink

Comment has been collapsed.

Seems to work as advertised ;)

View attached image.
4 years ago
Permalink

Comment has been collapsed.

I have a tiny issue with the theme: in the RaChart Enhancer settings, the "Reset Colors" button pushes down the first checkbox option, so it overlaps with the second one (it doesn't happen with the default theme, but that's fairly obvious because the whole layout of that settings window is different). https://ibb.co/qrQSYyS

4 years ago
Permalink

Comment has been collapsed.

Updated with RAchart fixes

4 years ago
Permalink

Comment has been collapsed.

Perfect, thanks! :)

4 years ago
Permalink

Comment has been collapsed.

Well. Now my eyes wont fell. Thanks for help :D

4 years ago
Permalink

Comment has been collapsed.

Dropped support for userstyles.org, you will need to reinstall for github hosting.

Version 1.5.9

  • ESGST fixes, up to date as of v8.6.0

Version 1.6.0

  • esgst giveaway description popup
  • esgst settings
  • esgst tag button
  • esgst whitelist/blacklist highlight
  • esgst giveaway maker
  • esgst gridview popout heading
  • esgst group giveaway loader panel
4 years ago*
Permalink

Comment has been collapsed.

Version 1.6.1

  • esgst fixed elements
  • esgst subscribe button
  • esgst narrow sidebar
  • esgst gridview popout camera icon

ESGST up to date as of v8.7.2

3 years ago
Permalink

Comment has been collapsed.

Hi, I just switched from ESGST version to Stylus version of SGv2 Dark. I have 2 questions:

1) The Stylus shows there are 187 issues for SGv2 Dark. Is it normal?
2) When selecting the text, the color of the text becomes green which is good but if space is part of the selection, I can't see clearly if I have selected it or not(used to be white text and blue background). How can I change or improve that?

Thanks!

3 years ago
Permalink

Comment has been collapsed.

  1. this is normal, you can diasble the css linter if you don't wish to see.
  2. Seems background color and options for this were omitted when switched to github. I will correct that for the next version, if you wish to make changes in the meantime here is the code to change.
::-moz-selection {
    color: hsl(91, 45%, 38%);
    background: hsla(0, 0%, 43%, 0.5);
}
::selection {
    color: hsl(91, 45%, 38%);
    background: hsla(0, 0%, 43%, 0.5);
}
3 years ago
Permalink

Comment has been collapsed.

  1. Oh, I see. I have no problem with that if this is normal.
  2. I have added that 2 lines of code and it works like charm!

Thank you! All problem sovled!

3 years ago
Permalink

Comment has been collapsed.

Hi, again. Is it possible to remove/adjust the weird "square frame" on the bookmarked giveaway page? And the layout seems different from the main page?

View attached image.
3 years ago*
Permalink

Comment has been collapsed.

If i understand correctly that should be fixed in the next version. Since themes will be removed in the next esgst version i also added options for the selection colors, as well as giveaway enter buttons.

3 years ago
Permalink

Comment has been collapsed.

Sounds great! Looking forward to it! Thanks!

3 years ago
Permalink

Comment has been collapsed.

Hi, I used to have this installed directly in ESGST but since theme option will be removed I installed the script from greasyfork and I use tampermonkey.
I have fixed page width option to 1. But its still wide. Is there an option Im missing or is the feature broken?

3 years ago*
Permalink

Comment has been collapsed.

It is functional however there appears to be a alignment issue in firefox where the input for fixed page is actually in line with General Text, I will correct that for the next version.

3 years ago
Permalink

Comment has been collapsed.

General text fixed it. I have always thought fixed width was better. But now when I used wide for a day I kind of got used to it and thought it was better. At least in the disussions :)

3 years ago
Permalink

Comment has been collapsed.

Version 1.6.2

  • Changes for ESGST v8.7.4
  • Options for enter buttons, selection highlight, notifications
3 years ago
Permalink

Comment has been collapsed.

Thank you!!! Works great and looking awesome!!! 💯❗

3 years ago
Permalink

Comment has been collapsed.

Happy cake day

🍰

3 years ago
Permalink

Comment has been collapsed.

Thank you!!!

View attached image.
3 years ago*
Permalink

Comment has been collapsed.

Now that ESGST dropped themes, using the greasyfork script of this is causing a problem that didn't happen with the ESGST theme version.

User tags from ESGST that use dark text are basically unreadable now because of the text shadow (I think? I already have text shadow opacity set at 0 though). I don't know why this wasn't an issue on the ESGST version but is through the script.

There's also a black border around the notifications at the top (number of new messages, etc) which wasn't on the ESGST version, which I would like to get rid of but don't know how.

But that's nowhere near as important as making user tags with black text readable again.

Edit: setting text shadow transparency to -1 fixes the user tags being unreadable. As a new person to using the script version, it seems not very intuitive that a negative number is what turns it off rather than zero.

Tbh it would be helpful if there was a way to turn off text shadow opacity for ESGST user tags specifically, but keep the text shadow on otherwise. I don't know if that would be possible, especially now that the theme was removed from ESGST.

Example (without theme, then dark theme with text shadow opacity at zero):

View attached image.
View attached image.
3 years ago*
Permalink

Comment has been collapsed.

I'll see what i can come up with, did you miss the the explanation of the opacity in the OP or was it unclear?

3 years ago
Permalink

Comment has been collapsed.

The explanation is kind of confusing. "0 represents the default value(which is not shown)" makes it sound like 0 is off, because "not shown" sounds like text shadow would not be shown at all. That's the key part that caused confusion.

"Negative values make it more transparent and positive values make it less transparent starting from its default value." that part being after what I previously quoted, gave me the initial impression that:
it defaults to 0 (completely off), and then because I already had that impression for 0
positive values turn it on and make it stronger (sort of like going from normal text to bold text, but with the shadow instead)
negative values turn it on but with weaker amount the more negative (starting with just a little transparent, going to mostly invisible)

A was also tired though, so take my misinterpreting with a grain of salt. I was just going to check SG quickly before getting ready to go to sleep, and then all of a sudden there was no dark theme anymore. Which lead to me installing the script when I wasn't mentally at my best :/

The part where it says "0 represents the default value(which is not shown)" I think would have confused me no matter what though. "Not shown" would mean "off" to me no matter how I look at it.

3 years ago
Permalink

Comment has been collapsed.

Version 1.6.3

  • ESGST: reduce sidebar heading width
  • ESGST: pinned giveaways not hidden when filtered
  • ESGST: removed text shadow from tags, giveaway copy highlighter
3 years ago
Permalink

Comment has been collapsed.

Hey, which option would cause least amount of resources to run? Already have installed Tampermonkey and tried greasyfork, which works fine. Tried stylus version which might be better (had to to install just for this skin) and I like that I didn't even needed to reload page for it to work.

3 years ago
Permalink

Comment has been collapsed.

Stylus is the better option and uses next to nothing on resources.

3 years ago
Permalink

Comment has been collapsed.

Thanks for reply and all your hard work.

3 years ago
Permalink

Comment has been collapsed.

Since installing the Greasyfork version, sometimes the game titles which is almost expiring turns purple for some reason (including the clock and username), is there any fix for this? I tried looking around in the setting and couldn't find anything purple.

It might be because the game cover is purple? Anyways I'd appreciate if you could guide me to which option this belongs to :P

3 years ago
Permalink

Comment has been collapsed.

Steamgifts colors the clock and username from the dominant color of the cover picture. The script will apply that color to the game title if "Colored Name/Level" is set to 1, same thing applies on user profiles name/contributor level.

3 years ago
Permalink

Comment has been collapsed.

Thank you! Any way to use the default notification bubble thingy instead of the userstyle's? :)

3 years ago
Permalink

Comment has been collapsed.

notification bubble thingy

what is that?

3 years ago
Permalink

Comment has been collapsed.

View attached image.
3 years ago
Permalink

Comment has been collapsed.

Nothing specific for that but Navigation Text, Text Shadows and Text Shadow Opacity settings will affect it. Other than that you would have to edit changes which would need to be reapplied every update.

3 years ago
Permalink

Comment has been collapsed.

thank you SquishedPotatoe!!! I mean, my eyes thank you

3 years ago
Permalink

Comment has been collapsed.

Version 1.6.6

  • Adjustments for updated advertising areas

Version 1.6.5

  • Holiday Gift Box Event Corrections

Version 1.6.4

  • Holiday Gift Box Event
3 years ago*
Permalink

Comment has been collapsed.

Version 1.6.8

  • Ten years of Space Cat Event featured column hotfix

Version 1.6.7

  • Ten years of Space Cat Event
  • ESGST fixes
2 years ago*
Permalink

Comment has been collapsed.

Cheers for the update! 😎
...unfortunately it seems to have made the game category icons on a giveaway page lose their assigned colours and just show up as grey (they seem fine on other pages, like the homepage), here is with and without SGv2 Dark enabled:

View attached image.
View attached image.
2 years ago
Permalink

Comment has been collapsed.

I do override the default colors of the rating, if you change default color it should show correctly. I am not sure what the other categories are or the location from the picture.

2 years ago
Permalink

Comment has been collapsed.

My CSS skills are a bit rusty so bear with me... 😅 I used inspect on the wishlist icon on another giveaway, which is now grey instead of the blue it's supposed to be and it looks like the .featured__column:not(.featured__column--birthday) selector is over-riding the specified colour

View attached image.
View attached image.
2 years ago
Permalink

Comment has been collapsed.

Featured column got it 👍 correcting now, should be live in a few minutes.

2 years ago
Permalink

Comment has been collapsed.

Looks good, thanks for the quick fix! 😁

2 years ago
Permalink

Comment has been collapsed.

Thanks for this mate. Glad to see it's still getting the love it deserves.

2 years ago
Permalink

Comment has been collapsed.

Version 1.6.9

  • Holiday Event 2021
2 years ago
Permalink

Comment has been collapsed.

I can't edit the last line of my thread when using your "userstyles", I tested with the grey one too...

View attached image.
View attached image.
1 year ago
Permalink

Comment has been collapsed.

The text area should expand when you click on it, does it not ?

1 year ago
Permalink

Comment has been collapsed.

Nope, can't scroll either...

1 year ago
Permalink

Comment has been collapsed.

What browser ?

1 year ago
Permalink

Comment has been collapsed.

Google chrome

1 year ago
Permalink

Comment has been collapsed.

i'm not seeing this problem, which thread is it?

1 year ago
Permalink

Comment has been collapsed.

if the text area does not expand how are you seeing the links at the bottom?

1 year ago
Permalink

Comment has been collapsed.

Ehh what? What do you mean?
It expands but the last line is cut off...

You are confusing old man nate now ;)

1 year ago
Permalink

Comment has been collapsed.

ok i understand now, does a restart help or still cutt off ?

1 year ago
Permalink

Comment has been collapsed.

I restarted everything I could think of, same deal...

If I have the thread open and in edit mode, then disable and enable the userstyle it shows the whole post but as soon as I reload, its back to cutting off the last line... Does that make any sense?

1 year ago
Permalink

Comment has been collapsed.

For me its the opposite, it works when style is on and i click edit but if i click edit with the style off then turn on style the last line is cut off.

¯\(ツ)

1 year ago
Permalink

Comment has been collapsed.

Welp, what are we going to do then, because now I'm really confused?!

View attached image.
1 year ago
Permalink

Comment has been collapsed.

It is an interesting puzzle because the height is calculated by a script that SG uses but for some reason its different for you.

1 year ago
Permalink

Comment has been collapsed.

View attached image.
1 year ago
Permalink

Comment has been collapsed.

can i assume you are using the usercss and not the script and if i post some code you could paste it in ??

1 year ago
Permalink

Comment has been collapsed.

Yes to usercss and... Maybe I can figure it out, let's try ;)

1 year ago
Permalink

Comment has been collapsed.

Just have to paste after the last line

@-moz-document url-prefix("https://www.steamgifts.com/discussions/edit") { .page__inner-wrap.page__inner-wrap--narrow textarea { min-height: 100px; max-height: 95vh; } }

1 year ago
Permalink

Comment has been collapsed.

Oh hey, I got a bar to the right I can drag down now!

Seems like you fixed it!

View attached image.
1 year ago
Permalink

Comment has been collapsed.

Yeah the script re-enables the scrollbar once you are past the max height, now i just have to check if i can use that for all text areas.

1 year ago
Permalink

Comment has been collapsed.

Good luck?

Let me know if I can help, probably not but it's the thought that counts... Right? ;)

1 year ago
Permalink

Comment has been collapsed.

View attached image.
1 year ago
Permalink

Comment has been collapsed.

Version 1.7.1

  • Holiday Event 2022 Color Picker

Version 1.7.0

  • Lightbox styled
  • Sgtools deals page navigation styled
  • Textarea re-add scrollbar above height threshold
  • Corrected ESGST Active Discussions On Top heading length
  • Updated Github Wiki Steamgifts Integration styling
  • Corrected ESGST Entry History
1 year ago*
Permalink

Comment has been collapsed.

Version 1.7.5

  • Added fanatical pricing to green buttons

Version 1.7.4

  • Adjusted for steamtrades site changes
  • Added option for steamtrades page width
  • Removed border under ad sections

Version 1.7.3

  • Added fanatical savings to green buttons

Version 1.7.2

  • Adjusted for site changes
1 year ago*
Permalink

Comment has been collapsed.

Yo! Is it really safe to download? I'm using Chrome here and when I try to download it, it says "Stylus will be able to read and change my data on any website", wtf????? Since I use contact lens, white backgrounds really, really hurt my eyes after some minutes though...Thanks!

11 months ago
Permalink

Comment has been collapsed.

I never ever had Stylus do things i don't want. And i used it for very long, many years. Hope this helps.

6 months ago
Permalink

Comment has been collapsed.

Appreciated it!

6 months ago
Permalink

Comment has been collapsed.

Sign in through Steam to add a comment.