Facebook Black Theme (IDE Theme)

Posted on November 20, 2012 by Michael Jasper — 2 Comments ↓

Using the Google Chrome plugin Stylish, users can add custom CSS to be applied to any domain. I’ve created a dark CSS theme for Facebook, called FaceBook IDE

Within Stylish (found in the Chome menu bar):

Write a new style
Paste the theme into the box
Add the domain “facebook.com” into the “applies to” field

The theme should automatically apply to your Facebook news feed. This theme is still in development, and has areas on other Facebook pages, which are not yet styled.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

body{

background-color:#222;

font-family: consolas;

}

#blueBar{

background-color:#000;

border:0px;

}

#contentCol{

background-color:#3f3f3f;

}

.uiSideNav .item,

.uiSideNav .subitem {

color:#eaeaac;

}

.uiSideNav .item, .uiSideNav .subitem {

border-bottom: 0px;

}

.shareRedesignText, .shareRedesignContainer, .shareRedesign .shareMediaVideo {

color:#f0dfaf;

background-color: #333;

}

.uiStream .uiAttachmentDesc, .uiStream .uiStreamPassive, .uiStream .uiStreamRobotextBeforeMessage, .uiStream .uiAdminAttribution {

color: #7a987a;

}

.-cx-PRIVATE-uiList__lightBorder > li {

border-color: #333;

border-style: solid;

}

.hasLeftCol #contentCol {

border-left: 0px;

}

.uiStreamRedesign .uiStreamMessage .messageBody {

color:#7a987a;

}

.uiSideNav .selectedItem .item, .uiSideNav .selectedItem .item:hover, .uiSideNav ul .selectedItem .subitem, .uiSideNav ul .selectedItem .subitem:hover {

background-color: #3f3f3f;

font-weight: bold;

}.uiStream .uiStreamMessage {

color: #7a987a;

}

.shareRedesignText, .shareRedesignContainer, .shareRedesign .shareMediaVideo,

.UFIRow {

background-color: #333;

border:1px solid #2b2b2b;

color:#7a987a;

}

.UFIArrow{

display:none;

}

.uiStream .uiStreamHeader {

background-color: #333;

border-top: 0px;

}

.uiTypeahead .wrap {

border: solid #111;

border-width: 0 1px;

background-color: #222;

}

.uiTypeahead .textInput{

color:#999;

}

.uiTypeahead {

border:0px;

}

#fbNotificationsJewel.west a.jewelButton:active, #fbNotificationsJewel.west a.jewelButton:focus, #fbNotificationsJewel.west a.jewelButton:hover,#fbMessagesJewel a.jewelButton:active, #fbMessagesJewel a.jewelButton:focus, #fbMessagesJewel a.jewelButton:hover,#fbRequestsJewel a.jewelButton:active, #fbRequestsJewel a.jewelButton:focus, #fbRequestsJewel a.jewelButton:hover ,#pageLogo a:hover, #pageLogo a:focus, #pageLogo a:active {

background-color: #7a987a;

}

.-cx-PRIVATE-uiSquareImage__large{

border:1px #222 solid;

}

.uiSideNav .item:hover, .uiSideNav .item:active, .uiSideNav .item:focus, .uiSideNav .subitem:hover, .uiSideNav .subitem:active, .uiSideNav .subitem:focus, .uiSideNav .highlighted .item:hover, .uiSideNav ul .highlighted .subitem:hover {

background-color: #111;

}

#navSearch .uiTypeahead {

background:#222;

border: 1px solid #222;

-webkit-border-radius: 2px;

border-top: 1px solid #222;

}

#navSearch .uiTypeahead input{

background:#222;

color:#999;

}

#navSearch .uiSearchInput {

-webkit-border-radius: 1px;

border-top: 1px solid #222;

}

.uiSearchInput button {

background-color:#222;

}

.fbReminders .fbRemindersStory .fbRemindersTitle {

color: #7a987a;

}

.uiHeaderSection, .uiSideHeader{

background-color:#222;

}

.hasLeftCol #mainContainer {

border-right: 0px;

}

.fbFeedTicker .fbFeedTickerStory {

background: #3f3f3f;

border-bottom: 1px solid #111;

border-top: 1px solid #E9E9E9;

line-height: 14px;

color:#7a987a;

}

.fbPhotoSnowlift .rhc {

background-color: #000 !important;

}

.fbPhotosPhotoCaption{

color: #7a987a;

}

.fbPhotoSnowliftContainer {

border:1px solid #333;

}

.uiSideNavCount {

background-color: black;

color: #EAEAEA;

}

.homeWiderContent .uiStreamStory {

border-top:1px solid #222;

}

._2yg {

border: 0px;

}

._4y {

background-color: #111;

border-top: 0px;

}

.UIActionLinks_bottom a, .UIActionLinks_bottom button.as_link, .UIActionLinks_bottom .uiLinkButton input, .UIActionLinks_bottom .uiLinkButton input:hover {

color: #C89191;

}

Updates:

11/21/2012

darkened modal popup for photos
pinkified like links

Tagged with: CSS, design, facebook
Posted in Client Side

Aqiul Colombowala

Quite neat! The ticker text is unreadable though, without a mouse hover.
NoBigGovDuh

Stop using -webkit for border radius. Every browser supports the uprefixed version.