Twitch.tv - Dark / Black / Customisable Theme

Added by SirFist@userstyles, Created: Nov 20, 2012, Updated: Jul 18, 2015
  • With the style applied
  • With the style applied (Generated screenshot)
  • Without the style applied (Generated screenshot)
Base Style
Divide Chat
Colour Fixes
Force Color (If Chosen Above)
Twitch Faces
Broadcast Title
Chat Font Family
Chat Font Size
Chat Line Height
Chat Size
Button Options
Old Moderator Icon
Icon Sets
Disable Turbo Colours
Chat Room Selector
BetterTTV Fixes
Turbo Icon Colour
Mod Icon Colour

Description:

Style is pretty dead, use http://frankerfacez.com/. Advanced options within it has most of the same options as offered by this userstyle as well as a number of things CSS alone couldn't reliably offer.

A customisable dark / black / white / gray interface for twitch.tv. Contains font options, icon hiding, etc.

Please note that due to this style having settings it will not in fact automatically update. Check back in if Twitch breaks or if it's been a while since you updated.

More info
This style is pretty much dead, use http://frankerfacez.com/. Advanced options within it has most of the same options as offered by this userstyle.

I may make a version for simply controlling things frankerfacez doesn't but it is far from a priority.

-----------


Use http://frankerfacez.com/ or https://nightdev.com/betterttv/ if you want something that's actively maintained but somewhat more bloated than a userstyle.


Current Issues:
I'm playing chinese monster hunter frontier. Everything else can get fucked, tbh.


• Chat status icons are messing with text.
• Hidden sidebar has problems on pages that aren't a normal channel.
• Pop out styles outside of small controls may be broken.
• Some heights are not as they should be, nothing that is immediately eye destroying though.



Please note that due to this style having settings it will not in fact automatically update. Check back in if Twitch breaks or if it's been a while since you updated. Userstyles should remember your settings for when you update.

Change Log (ddmmyyyy)
19/07/2015 @ 04:19 - Disabled left sidebar hiding as it breaks things.
26/01/2015 @ 13:51 - Button hiding updated, probably still breaks as there's nothing standard about it.
26/12/2014 @ 12:49 - Fixed mentioning colours
16/12/2014 @ 13:22 - Fixed /me other issues still present. Blame Monster Hunter.
24/09/2014 @ 09:15 - Moved divide option to its own drop down. I had been too lazy to set this up and it probably meant more work overall. God bless america.
24/09/2014 @ 05:30 - Updated styles for new twitch stuff. Updated line height. Updated chat buttons. etc.
21/09/2014 @ 06:45 - A FFZ thing.
08/08/2014 @ 06:45 - A thing.
15/05/2014 @ 09:26 - Name highlighting for black etc.
07/08/2014 @ 01:19 - Jesus christ twitch the fuck are you doing.
06/08/2014 @ 12:40 - Archives. Icons. V i d e o g a m e s.
02/08/2014 @ 05:45 - Chat text entry box fixed.
01/08/2014 @ 09:33 - Fixed undivided modes. I am bad at copy pasting.
26/07/2014 @ 11:44 - Host mode support. Fixed widen chat. Removed outlines around icons and buttons on black.
23/07/2014 @ 11:47 - Updated true black to not have divided message backgrounds.


http://pastebin.com/k6qbpx9U

Support
If you need or want to contact me to report problems or for any other reason you can do so on the SpeedRunsLive IRC (as sirfist), on http://twitch.tv/sirfist or via http://twitter.com/sirfist.

The code being a complete mess is not actually a problem and is in fact a feature.

Faces problem info
For Twitch face fixes go here http://freestyler.ws/style/81466/twitch-faces-for-dark-style. This fix is no longer updated, read the style's description for a guide on fixing them yourself, it's probably not worth the effort due to the frequency of twitch's changes. A greasemonkey script or similar would be needed to properly fix faces.

Options Rundown
Master Style
Overall theme for twitch. Makes it black, gray etc. as selected.

Colour Fixes
Colour fixes forces certain colours in chat to be replaced outright. There is also a 'Force **** Colour' option that will let you manually select what colour is being used to replace the various text colours. Turbo colour changes are further down the options.

Twitch Faces
Some basic twitch face options. Simply removes or replaces all faces with FrankerZ.

Broadcast Title
Adjusts the text information above the stream. Options are default behaviour or to have it hidden at the top the video player itself at the top and to only appear on hovering.

Font Options, Left Sidebar, Button Options, Old Moderator Icon, Icon sets
Should be obvious. Hiding mod icons is built into twitch if you have mod no so those options are gone.

Disable Turbo Colours
This option forces all 'turbo' colours to be white/black/custom colour in place of whatever a turbo subscriber has set it to. This prevents obnoxious colours appearing or invisible text.

Icon Colours
Should be obvious.

Chat Room Selector
Customises the chat room selection options that now appear at the top of a twitch stream's chat. Options are pretty obvious - Off / On / No visual cues for invites.

Help
Please note that due to this style having settings it will not in fact automatically update. Check back in if Twitch breaks or if it's been a while since you updated.

BetterTTV support is minimal as the author has not provided an option to disable his own CSS changes. Hassle him for that if you want flawless support, I will not be doing so as I do not actually use the extension myself.

For font choice see http://cssfontstack.com/ for a better idea of what you want to use. Please note that although Helvetica is the default font on Twitch, Windows does not in fact ship with it and thus on the majority of Windows based PCs will revert to Arial.

The Twitch default turbo icon colour is "#6441A5"

The divided chat styles divide the chat by adding a different background colour to every other line of text in chat (dark/light/dark/light/etc.).

Hiding the left sidebar hides the sidebar based on preference but only within actual stream pages.

Chat size simply resizes the chat a set percent up to 125% of original size.

Known Bugs
Some font settings will result in wasted space after usernames if the user types an overly long word or has an exceptionally long username.

There's almost certainly issues involved with any partner only functions, I can't fix these as I do not have a twitch partnership and don't have access to any pages associated with these functions.

Notes:
[ ** ] Highlight the top of the stream to see the description.
[ *** ] Turbo colours are not included in lightening due to how many potential colour values there are. Use this option in conjunction with block turbo colours if you are having issues with unreadable names.

Miscellaneous
Should you feel so inclined feel, free to follow my Twitch http://www.twitch.tv/sirfist/.

Installs:
Applies to:
http://.*twitch.tv/directory.*, twitch.tv, twitchtv.com

Related styles:

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.