Theres already a great light colored premade custom css out there if you dont mind most of your site white and light grey. Personally, i usually use subeta at night, and it blinds me.

For others, i have taken this tweakable css and tweaked it a lot more, and came up with something for people that prefer a darker color palette. Pretty much everything is black and grey, with an accent color. It supports facebook cover photos (or banners 315px in height) In this preview image i have my accent color as a dark red and my banner image is my chemical romance. Feel free to change, i have the code labeled where to change the color at and where to stick your new banner.

note: im not a coding wizard. If it looks weird on your screen i probably dont know how to fix it. Also, i only tested it on my laptop. IDK how this will look for everyone else... but since the base code i used HAS been tested on stuff it probably looks fine! :)

okay anyways here is the code im using right now complete with ad blocking and other random tweaks [spoiler=Dark Layout Plus Tweaks] >span[style] { border: 20px solid red; position:absolute !important; left: 50px !important; top: 50px !important; z-index: 1; }

/CHANGE BANNER HERE/ body { background-image: url(http://files.fbcoverstreet.com/content/1wYMTSMjvvI9mtioUAWw4g94BsBTrBiavqSoG4lhZTItVL85V83YHeyUweLjR32u.jpg); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; background-color: ; color: ; }

{

margin-left: auto; margin-right: auto; position: relative; min-width: 1200px; width: 94% !important; background-color: transparent; padding-top: 152px; }

{ background: url(http://i1097.photobucket.com/albums/g342/fallensamuraigfx/customCSS/Space/postcard_03b_zps43c13fee.png:original) no-repeat scroll 0 0 transparent; top: 20px; height: 104px; width: 257px; }

{ height: 160px; width: auto; margin:0; padding: 0; z-index: 2; }

-ban-main { background-image: transparent; height: 749px; width: 922px; border: 0; margin:0; padding: 0; }

, -logo, -right, -left, -rrc, -ban { display: none; margin:0; padding: 0; }

{ margin-left: 200px !important; background: ; padding: 10px; margin: 0; border-radius: 0px 10px 10px 10px; margin-right: 0px; padding-top: 20px; }

/ACCENT COLOR/ a:link, a:visited, a:hover { color: ; }

{ position: relative !important; bottom: 0px !important; }

/* ------------------------------------ Sidebar ------------------------------------ */

{ width: 200px; background-color: transparent !important; background-image: none !important ; margin-top: -20px; padding: 0px; color: !important; }

/ACCENT COLOR/ a:link, a:hover, a:visited { color: ; }

/* ------------------------------------ Sidebar Top ------------------------------------ */ -btn-dash, -btn-events { display : block; }

-top { backgound-image: none !important; background-color: transparent !important; position: absolute; top: 1px; height: 22px; left: 10px; width: 200px; }

-btn-dash{ background-image: url(http://i1097.photobucket.com/albums/g342/fallensamuraigfx/customCSS/Space/dashboard_zpsf00b30d3.png); position: relative; margin: 0px; height: 19px; width: 99px; opacity: 0.8; background-position: 0px 0px !important; }

-btn-events { background-image: url(http://i1097.photobucket.com/albums/g342/fallensamuraigfx/customCSS/Space/events_zps3bd1650f.png); position: relative; height: 19px; width: 99px; opacity: 0.8; right: 10px; }

-btn-events.sidebar-btn-active, -btn-events:hover { background-position: 0px 0px !important; opacity: 1; }

-btn-dash.sidebar-btn-active, -btn-dash:hover { background-position: 0px 0px !important; opacity: 1; }

/* ------------------------------------ Sidebar Top Bubble ------------------------------------ */

-bubble-wrapper { left: 215px; position: absolute; top: 142px; width: 200px; z-index: 7000; }

.events-bubble, { border-radius: 7px 7px 7px 7px; font-size: 10px; margin-bottom: 15px; padding: 8px; position: relative; }

.events-bubble { background-color: ; color: ; }

.events-bubble a:link, .events-bubble a:visited{ color: !important; }

.events-bubble:after { border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); border-style: solid; border-width: 10px 0 0 12px; bottom: auto; content: ""; display: block; left: -12px; position: absolute; top: 10px; width: 0; }

.events-bubble b:nth-child(odd) { display: block; margin-bottom: 0px; } .events-bubble b:nth-child(n+2) { display: inline-block !important; margin-bottom: 0px; }

.events-bubble:after { border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); }

.events-bubble-scroll .events-bubble:after { border-color: rgba(255, 255, 255, 0); }

-counter { font-size: 12px !important; }

/event bubble/ -counter-wrapper { background-color: ; position: abosolute; right: 18px; top: 5px; z-index: 1; width: auto !important; height: 13px; padding-right: 3px !important; padding-left: 3px !important; opacity: 1; }

/* ------------------------------------ Sidebar Inner/Widget ------------------------------------ */

-inner { position: relative; width: 200px; margin-top: 20px; height: auto !important; min-height: 50px !important; padding-bottom: 1px; background-color: !important; background-image: none !important; border-radius: 10px 0px 0px 10px; }

.sidebar-widget { width: 185px; margin-left: auto; margin-right: auto; margin-bottom: 20px; border-top: 2px solid ; border-bottom: 2px solid ; border-right: 0px !important; border-left: 0px !important; background-image: none !important; }

.sidebar-widget .sidebar-widget-contents { border: 0px; overflow: hidden; background-image: none !important; background-color: ; padding: 0px; }

.sidebar-widget .sidebar-widget-sep { height: 1px; background-color: ; }

.sidebar-widget .sidebar-widget-header { background-color: ; font-face: tahoma; font-size: 11px; font-weight: normal; color: ; opacity: 1; line-height: 20px; margin: 0; padding-left : 2px; position: relative; border: 0px; }

.sidebar-inner-active { display : block !important ; }

.sidebar-widget .sidebar-widget-arrow { background-image : url(http://i1097.photobucket.com/albums/g342/fallensamuraigfx/customCSS/Space/minus_zps51350c50.gif); opacity: 1 !important; top: 5px; background-position: center center; background-repeat: no-repeat; }

.sidebar-widget .sidebar-widget-arrow-closed { background-image : url(http://i1097.photobucket.com/albums/g342/fallensamuraigfx/customCSS/Space/plus_zps36a2ad74.gif); opacity: 1 !important; top: 5px; background-position: center center; background-repeat: no-repeat; }

/* ------------------------------------ Sidebar Inner/ Dashboard Events ------------------------------------ */

-inner-dash a.event-remove-cat { background-image: url(http://i1097.photobucket.com/albums/g342/fallensamuraigfx/customCSS/Space/delete_zps5f79eba5.png) !important; background-position: center center; background-repeat: no-repeat; left: 165px !important; padding: 0px; margin: 0px; }

-inner-dash .event-remove { background-image: url(http://i1097.photobucket.com/albums/g342/fallensamuraigfx/customCSS/Space/delete_zps5f79eba5.png) !important; background-position: center center; background-repeat: no-repeat; left: 165px !important; padding: 0px; margin: 0px; }

.x-js-events .sidebar-widget-contents p { margin: 0; padding: 5px 25px 5px 5px !important; width: 185px !important; color: ; }

.x-js-events .sidebar-widget-contents h2 { font-size: 11px !important; font-weight: normal !important; font-style: italic; padding: 0; margin : 0; padding-left: 2px; font-weight: normal; background-image: none !important; background-color: ; }

.x-js-events .sidebar-widget-contents .x-odd{ background-color: !important;

}

.x-js-events .x-even { background-color: ; background-image: none !important; }

.sidebar-widget-contents{ padding-left: 2px !important; }

/* ------------------------------------ Sidebar Inner/ Events Events ------------------------------------ */

-inner-events a.event-remove-cat { background-image: url(http://i1097.photobucket.com/albums/g342/fallensamuraigfx/customCSS/Space/delete_zps5f79eba5.png) !important; background-position: center center; background-repeat: no-repeat; top: 2px; left: 155px !important; padding: 0px; margin: 0px; }

-inner-events .sidebar-widget-contents p { font-size: 10px; position: relative; width: 140px !important; margin-left: 3px !important; }

-inner-events .sidebar-widget-contents .event-sep { background-color: !important; margin-left: auto; margin-right: auto; width: 90%; opacity: 0.1; }

-inner-events a.event-remove { background-image: url(http://i1097.photobucket.com/albums/g342/fallensamuraigfx/customCSS/Space/delete_zps5f79eba5.png) !important; background-position: center center; background-repeat: no-repeat; display: block; position: absolute; right: -24px; }

-inner-events .sidebar-widget-contents p, .x-js-events .sidebar-widget-contents p { font-size: 10px; margin: 3px; position: relative; width: 155px !important; }

.x-js-wardrobe .sidebar-widget-contents img { margin-left: 30px !important; margin-top: 5px!important; }

/* Menu */

.menu-btn:hover { background-color: rgba(0,0,0,.4) !important; border-radius: 5px !important; }

div#menu p#menu-time { background: url(http://i1097.photobucket.com/albums/g342/fallensamuraigfx/customCSS/Space/clock-222222-60_zpsef37e4b6.png); margin: 0; padding-top: 3px; padding-bottom: 5px; border-radius: 5px; border: 0px !important;

position: relative; left: 346px; top: 73px; width: 114px; height: auto;

color: ; letter-spacing: 0px; font-size: 18px; font-weight: normal !important; font-family: Century Gothic !important; }

div#menu { background: none; position: absolute; right: 0px; top: 0px; width: 100% !important; height: 160px; margin: 0; padding: 0px; border: 0px solid red; }

ul#menu-ul { position: absolute; border: 0px solid yellow; right: 30px; top: 58px; width: 655px; height: 36px; clear: both; margin-right: 30; padding: 0; }

ul#menu-ul .menu-btn-left,ul#menu-ul .menu-btn-right { display: none; }

.menu-btn { border: 0px solid purple; margin: 0px; padding: 0px; }

-btn-subeta-css { background-image: url(http://i1097.photobucket.com/albums/g342/fallensamuraigfx/customCSS/Space/explore_05_zpsd6957637.png) !important; position: absolute; top: 10px; left: 0px; width: 111px; height: 36px; z-index: 1 !important; }

ul#menu-ul -btn-interact-css, -btn-interact a.item { background-image: url(http://i1097.photobucket.com/albums/g342/fallensamuraigfx/customCSS/Space/interact_zpsc70ab590.png); position: absolute; top: 10px; left: 136px; width: 111px; height: 36px; z-index: 1 !important; }

ul#menu-ul -btn-commerce-css, -btn-commerce a.item { background-image: url(http://i1097.photobucket.com/albums/g342/fallensamuraigfx/customCSS/Space/shops_zps7e2e44ab.png); position: absolute; top: 10px; left: 272px; width: 111px; height: 36px; }

ul#menu-ul -btn-personal-css, -btn-personal a.item { background-image: url(http://i1097.photobucket.com/albums/g342/fallensamuraigfx/customCSS/Space/personal_zps99640ff6.png); position: absolute; top: 10px; left: 408px; width: 111px; height: 36px; }

ul#menu-ul -btn-cs-css, -btn-cs a.item { background-image: url(http://i1097.photobucket.com/albums/g342/fallensamuraigfx/customCSS/Space/cash_zps00ce3d47.png); position: absolute; top: 10px; left: 544px; width: 111px; height: 36px; }

ul#menu-ul li.menu-btn ul { margin: 0; background-color: ; border: 0px solid ; padding-top: 5px !important; padding-bottom: 5px !important; padding: 0px; top: 40px; left: -22px; width: 144px; border-radius: 5px; }

ul#menu-ul li.menu-btn ul li { border-bottom: 0px dotted ; margin: 0; padding: 1px; }

ul#menu-ul li.menu-btn ul li:hover, ul#menu-ul li.menu-btn ul li:hover a { background: ; color: ; }

ul#menu-ul li.menu-btn ul li a, ul#menu-ul li.menu-btn ul li:hover ul li a { width: 99%; color: ; line-height: 10px; letter-spacing: 0pt; background: none; }

ul#menu-ul li.menu-btn ul li { color: ; }

ul#menu-ul li.menu-btn ul li a:hover, ul#menu-ul li.menu-btn ul li ul li a:hover { background: none; color: ; border: none; }

ul#menu-ul li.menu-btn ul li ul { position: absolute; top: 0px; left: 140px; width: 144px !important; background-color: ; padding-left: 5px; padding-right: 5px; }

ul#menu-ul li.menu-btn ul li ul li{ border-bottom: 1px dashed ; color: ; }

ul#menu-ul li.menu-btn ul li ul li a:link, ul#menu-ul li.menu-btn ul li ul li a:visited{ color: ; }

ul#menu-ul li.menu-btn ul li ul li:hover{ color: ; }

ul#menu-ul li.menu-btn ul li ul li a { width: auto; }

ul#menu-ul li#menu-btn-commerce-css ul li ul li a,ul#menu-ul li#menu-btn-personal-css ul li ul li a { display: inline !important; }

ul#menu-ul li.menu-btn { background: none; position: absolute; left: 0px; width: 111px; height: 36px; margin: 0; padding: 0; }

ul#menu-ul li.menu-btn a.item cufon.cufon canvas { visibility: hidden; }

ul#menu-ul li.menu-btn a.item { display: block; left: 0px; height: 30px !important; margin: 0; padding: 0; }

ul#menu-ul li.menu-btn a.item:hover { color: ; border-bottom: none; }

/------------------------ Bookmarks -------------------------/

{ background: transparent !important; border-right: 0px solid !important; position: absolute !important; right: -35px !important; top: 50px !important; width: 28px !important; }

.bookmark { background-color: rgba(255,255,255,0.3);

border-radius: 5px 5px 5px 5px; border: 0px; }

.first { margin-top: 0px !important; }

.first a.link { color: black !important; }

/------------------------ News -------------------------/

.ui.grid {margin: 0 !important;} h2.ui.header {text-align:center;font-weight:normal;}

/* Forums */

.post { background-color: rgba(255, 255, 255, 0.05)!important; }

.ui.table tbody tr:nth-child(2n) { background-color: rgba(243, 243, 243, 1); }

.post.action { background-color: rgba(238, 238, 238, 1) !important; color: !important; }

.ui.label { background-color: rgba(219, 219, 219, 1)!important; background-image: none !important; color: !important; }

.ui.attached.header { background-color: ; color: ;

}

.spoiler_click { background-color: !important; }

/ACCENT COLOR/ .ui.tertiary.inverted.segment { background-color: !important; }

/* Tables */

table { color: ; }

.sp-table { background-color:; border: 1px solid ; }

.sp-sub { background-color: !important; border: 1px solid ; }

.sp-header { background-color: ; color: ; border: 0px; }

.sp-row { border: 0px; }

.sp-cells { background-color: ; }

.inventory_menu { border-color: ; background-color: ; color: ; }

.itemtype { background-color: ; border-color: ; }

.

ok this is so nice! thank you so much for putting this out! aa!

im so glad someone other than me will enjoy this lol. i was worried nobody would find this.

Don't need anything done but thanks for offering your services! (: