http://userstyles.org/ allows you to modify webpages.
It is available for Firefox and Chrome. I have only tested the style below on Firefox desktop. My style tones-down the white background and makes other changes to make twitter easier on the eye.
Install the Stylish addon then write a new style via pasting everything below (starting at @namespace) into your new style. If you want a different background color, change the top three color entries (#E3E3E3) to the color of your choice. Check back here for future updates. Tweet questions to @2045singularity.
If anything looks wonky let me know. 17th May 2014.
I will not be updating this pastebin version any more.
See latest version at:
http://userstyles.org/styles/101446/twitter-easy-eye-no-white-background
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document regexp("http(s)?://([^.]*\\\\.|)twitter\\\\.com/(?!widget).*")
{
/*Singularity Utopia Style ---- @2045singularity */
html, body, #doc, #page-outer
{
background: #E3E3E3;
}
.Grid--withGutter
{
background: #E3E3E3;
}
.ProfileHeaderCard-screennameLink:hover
{
background: #E3E3E3 !important;
box-shadow: none !important;
}
.ProfilePage .AppContent
{
background: none;
}
.ProfileCanopy-navBar
{
background: none;
}
.ProfileNav-item--userActions
{
background: none;
}
.ProfileTweet
{
transition: all 0.5s ease-in-out;
border-color: #C5CFD7;
border-style: solid;
border-width: 1px 1px 2px 1px;
border-radius: 3px 3px 5px 5px !important;
margin: 5px 0 5px 0 !important;
}
.ProfileTweet:hover
{
border-color:#A8A7B5;
box-shadow:#A5A4B3 0px 1px 7px;
}
.StreamToggler
{
border: none;
padding-bottom:4px;
}
.Container
{
background: white;
}
#widget
{
background:none;
}
.ProfileCard
{
border: 1px solid #CACBD2;
background-color: #FFF2E3;
border-radius: 4px 4px 12px 12px;
border-bottom-width:2px;
margin-bottom:6px;
}
.ProfilePage
{
min-width:900px;
max-width:998px;
margin: 0 auto auto auto;
}
.global-nav-inner
{
background: none repeat scroll 0% 0% #F0ECE1;
box-shadow: inset white 0px 0px 3px 0px, rgba(34, 34, 34, 0.2) 0px 0px 20px;
}
A.StreamToggler-link.u-textUserColor.js-nav
{
margin-top:5px;
}
/* TWEETS - TWEETS AND REPLIES */
.ProfileHeading-toggleItem
{
margin-right: 15px !important;
}
.ProfileHeading-toggleItem.is-active
{
border-bottom: 3px solid #CFCFCF;
border-radius: 20px 22px 4px 19px;
background: #EDEDED;
padding: 15px 15px 15px 15px;
margin-right: 15px;
margin-bottom:10px !important;
transition: all 0.3s ease-in-out;
}
.ProfileHeading-toggleItem.is-active:hover
{
border-radius: 22px 20px 19px 4px;
color:#514970;
}
.ProfileHeading-content
{
background:none !important;
border:none;
}
.ProfileHeading-toggleItem.u-textUserColor.js-nav
{
transition: all 0.2s ease-in-out;
padding: 15px;
border-radius: 13px 17px 4px 13px;
margin: 3px 5px 7px 0px;
border-bottom: 3px solid transparent;
}
.ProfileHeading-toggleItem.u-textUserColor.js-nav:hover
{
background: #FFFBE3;
color:darkblue !important;
box-shadow: inset white 0px 0px 1px, lightgrey 0px 2px 8px;
border-bottom: 3px solid #B1AEBD;
}
.ProfileHeading-toggleItem.u-textUserColor.js-nav:active
{
background: #FFE2B3;
border-bottom: 3px solid orange;
}
.ProfileHeading-toggleItem.u-textUserColor.js-nav:focus
{
background: #FFE2B3;
border-bottom: 3px solid orange;
}
.ProfileNav-item.is-active .ProfileNav-stat, .ProfileNav-stat:hover, .ProfileNav-stat:focus
{
border-radius: 0px;
background: #fff;
}
#global-actions A.js-nav:hover
{
background: #EBF4FF;
box-shadow: inset #fff 0px 0px 0px 1px;
}
.ProfileNav-stat--link:hover, .ProfileNav-stat--link:focus
{
background: #EBF4FF;
box-shadow: inset #fff 0px 0px 0px 1px;
}
.ProfileNav-stat--moreLink:hover, .ProfileNav-stat--moreLink:focus
{
margin-top: 7px;
padding-top:7px;
background:#FFFBE3;
border-radius: 15px !important;
}
A.ProfileHeaderCard-nameLink.u-textInheritColor.js-nav:hover
{
background:none;
color:grey !important;
transition: all 0.5s ease-in-out;
box-shadow:none !important;
}
.GridTimeline-footerIcon
{
background-color: #F5F8FA;
padding: 8px 5px 2px 14px;
border-radius: 20px;
}
.GridTimeline-footer:before
{
background:none;
}
.ProfileCanopy-header.u-bgUserColor
{
border-radius: 0px 0px 8px 8px !important;
}
.btn:hover
{
box-shadow: white 0px 0px 1px 0px;
}
#global-new-tweet-button:hover
{
border: 1px solid transparent !important;
border-radius:2px;
}
.tweet-btn:hover, .tweet-btn:active, .tweet-btn.active
{
border:1px solid transparent !important;
}
.btn:hover, .follow-combo.open .btn-user-actions, .dropdown.open .user-dropdown
{
border-color: #8FD0FF;
}
A.js-nav.js-initial-focus
{
background:none;
}
A.account-group.js-account-group.js-action-profile.js-user-profile-link.js-nav
{
background:none !important;
}
.u-bgUserColorLightest
{
background: #F5EEE4 !important;
border-color:#CCCCCC !important;
box-shadow: inset #F5EEE4 0px 0px 12px 13px;
}
.ProfileTweetbox
{
background: #F5EEE4 !important;
}
#page-container .content:hover
{
background: none !important;
}
/* NUMBER OF NEW TWEETS - 10etc new Tweets - notifications too */
.new-tweets-bar
{
font-size: 13pt;
font-weight: bold;
word-spacing:5px;
letter-spacing:1px;
background: #F5F2EB;
padding: 14px 0px 13px 0px;
border-color: #E0E0E0;
font-family:arial;
text-shadow: white 0px 0px 1px;
transition: all 0.05s ease-in-out;
color: #CC0003;
font-style:italic;
}
.new-tweets-bar:hover
{
background: #BBEDCA;
border-color: #ABD9B9;
color: #001866;
}
.new-tweets-bar:active
{
background: #FFE4A8;
border-color: #EDCA9A;
color: #470024;
}
.stream
{
box-shadow: #BFBFBF 0px 60px 30px -40px;
}
/* COG DROP */
.small-user-dropdown
{
margin-right:-1px !important;
padding: 0 2px 0 5px !important;
}
.small-user-dropdown:hover
{
background: #fff !important;
border-radius:2px !important;
}
.UserActions .user-dropdown
{
color: #2D648F;
transition: all 0.4s ease-in-out;
margin: 1px 11px 0px 0px;
padding: 0 3px 0 8px;
border: 1px solid transparent;
}
.UserActions .user-dropdown:hover
{
color: #CF003B;
background:#FFF9CF;
box-shadow: #A3A3A3 0px 0px 1px 0px, lightgrey 0px 0px 1px 0px;
}
.ProfileSidebar .Footer-item, .ProfileSidebar .Footer-link
{
color: #3B3F63;
}
.ProfileClusterFollow
{
background:none;
border:none;
}
.ProfileClusterFollow-closeButton
{
padding:8px 18px 8px 18px;
margin-top: -11px;
border-radius: 7px;
background: white;
border:1px solid #9FA8CC;
}
.ProfileClusterFollow-closeButton:hover
{
background: #B0FFDB;
box-shadow:#BCD1CE 0px 2px 4px;
border-color: grey;
}
.ProfileClusterFollow-header
{
padding: 0px 33px 0px 0px;
}
.primary-btn:hover
{
border-color: transparent !important;
}
.primary-btn.retweet-action:focus
{
box-shadow: inset blue 0px 0px 1px 0px;
}
.related li
{
border: 1px solid #CECECE;
border-radius: 8px;
background: white;
}
}
/* include this too so you are sure you have not missed anything, the end. */