Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,813,956 Members 43,293 Now Online
XDA Developers Android and Mobile Development Forum

[USERSTYLE/THEME] Dark XDA + (Universal) Mods/Tweaks!

Tip us?
 
GermainZ
Old
(Last edited by GermainZ; 9th March 2014 at 03:18 PM.)
#1  
GermainZ's Avatar
Forum Moderator / Recognized Developer - OP
Thanks Meter 6,425
Posts: 5,490
Join Date: Aug 2012
Default [USERSTYLE/THEME] Dark XDA + (Universal) Mods/Tweaks!

Quote:
Check post #2 for modifications and tweaks!

Turns xda-developers.com dark. Although the user style is applied to all XDA pages (portal, forums, wiki) and suits them all, it's fully optimized for the forums.

Make sure you're using the "XDA 2013 Beta" forum theme (you can check/change your theme in the Forum's footer). Also compatible with "XDA 2013 Beta - 1024" with minor bugs (nav bar icons appearing when they shouldn't).

Non firefox users: Some things aren't correctly applied for Chrome/Other browsers. These include:
  • Some borders are much darker than what they should be.

This theme is mainly tested on Firefox. Minimal testing is done on Chrome, to ensure nothing breaks.

Quote:
Download:
Grab it from userstyles.org:
Dark XDA: http://userstyles.org/styles/81480/d...a?r=1358184811
Dark XDA, Customizable Colors Version: http://userstyles.org/styles/96703/d...-custom-colors
Check the bottom of the post for alternate downloads.


Screenshots:
Check the userstyles.org page for before/after screenshots.
Click image for larger version

Name:	1.jpg
Views:	2975
Size:	76.9 KB
ID:	2095570Click image for larger version

Name:	2.jpg
Views:	2066
Size:	83.0 KB
ID:	2095571Click image for larger version

Name:	3.jpg
Views:	1802
Size:	89.5 KB
ID:	2095572


Installation:
You'll need Stylish (Stylish for Firefox | Stylish for Chrome | Stylish for Opera | Stylish for Safari) or a similar add-on to apply the userstyle.


FAQ:
Q: Is all of XDA themed?
A: That's the goal, but I might have missed something.

Q: I found a part that isn't themed!
A: Let me know, post a link to the page and I'll fix it.

Q: Are the ads removed?
A: No. Ads are themed, tho, where possible. The screenshots show no ads because of my addons.

Q: How can I be notified of updates?
A: Stylish should automatically check & download updates (unless you have that option turned off). Otherwise I'll post in this thread whenever I update, so you can also subscribe if you want.

Q: Can I check the source code?
A: It's available on userstyles.org, just click the "Show Code" button.

Q: Are there any risks?
A: Risks are explained here, and you can check the code to make sure it's clean.

Q: Can I change the colors? I like orange/brown/poo/red/violet/pink/rainbows more!
A: Yes, use the customizable version.

Thanks:
  • @iamareebjamal for theming close to 100 icons;
  • @Quinny899 for providing some icons;
  • @SMillerNL for his criticism and help;
  • @SMillerNL and TeamFun for hosting the sprites on their website (http://team-fun.eu)
  • @laufersteppenwolf, @eagleeyetom, and all early testers;
  • And you!

Thanks for reporting anything I might have missed, and sharing your impressions and suggestions.
~~
The Following 159 Users Say Thank You to GermainZ For This Useful Post: [ Click to Expand ]
 
GermainZ
Old
(Last edited by GermainZ; 6th July 2013 at 01:12 AM.)
#2  
GermainZ's Avatar
Forum Moderator / Recognized Developer - OP
Thanks Meter 6,425
Posts: 5,490
Join Date: Aug 2012
Quote:
Tweaks/Modifications:


Index:
  1. General notes;
  2. Notes for non Firefox users;
  3. Modifications:
    1. Enable rounded corners;
    2. Disable Disqus element theming;
    3. Keyboard accessibility additions; *
    4. Custom username colors; *
    5. Toggle signatures tweak (all signatures are replaced with a "Toggle Signature" text; you can click it to show/hide the signature); *
    6. Enable/Disable Roboto font. *
* Universal tweaks - you can use them alone, without the whole theme. See the General Notes below for more information

General Notes:
  • To comment a line, wrap it in "/* */", for example:
    Code:
    body{color:#f5f5f5!important;}
    Would become:
    Code:
    /*body{color:#f5f5f5!important;}*/
    Similarly, you can comment a paragraph out:
    Code:
    /* All of this...
    body{color:#f5f5f5!important;}
    a{color:#33b5e5!important;}
    ...is commented out */
  • I might refer to an at-rule block in the instructions.
    At-rules starts with a '@', followed by an identifier.
    A block starts with a { and ends with a matching }.
    So an at-rule block would look like this:
    Code:
    @rule {
    
    <content>
    
    }
  • You'll need to reapply these modifications after every update. That being said, it shouldn't take longer than a minute for it all.
  • Some modifications/tweaks can be used without the whole theme (actually, all of them can - but these will not touch your default colors/layout). To use them as standalone userstyles, simply create a new userstyle in Stylish, give it a title, and paste the code after removing any "..." from it (used to denote extra content). Non Firefox users, also see the notes below.

Notes For Non Firefox Users:
  • Stylish for your browser may strip comments out. That means line numbers will not be correct anymore.
    That being said, examples are always provided so you should be able to just search for the portion you're looking for.
  • Stylish does not support @-moz-document rules. This means you'll need to remove the lines in red from your pasted code:
    Code:
    @-moz-document domain("xda-developers.com") {
    
    ...
    
    }
    After doing that, add "xda-developers.com" to the domains list, usually accessed using a button just above the script's area.


Modifications:
  1. Enable rounded corners:
    1. Comment lines #17->26 out, by changing this:
      Code:
      /* Holofied corners */
      .jumpToTop,#forumSearch_form .forumSearch_advanced,.postContent blockquote,.pagenavControls td,input.bginput,#thanksTable .alt2,.searchContainer,.searchResult .alt,#sidepanel_less-threadSearch #sidepanel_less-searchInput,#username_box,.pagenavControls .alt2,.pagenavControls .alt1:active,.pagenavControls .alt1,.pagenavControls .goto_nav,#sidepanel_less-threadSearch,#sidepanel-threadSearch #sidepanel-searchInput,#threadPoll,.postControls .postbitFunction,#postLegend,.postControls .selectedButton,.postControls .postbitFunction:hover,.postControls .postbitMultiquote:hover,.tabControl_editDevice_Button,.forumbox .forumbox-header,.forumbox .content,.social_group_message,#user_avatar.alt2,#profilepic img,.btn-silver,.btn-yellow,#vB-widget #vb_login_submit,#vB-widget #vb_login_username,#vB-widget #vb_login_password,.quickReplyTable .panelsurround,.controlbar,.quickReplyTable .tcat,#pageContainer .button,input[type=button],input[type=submit],.xdabutton,#navtab_findDevice #s,#xda_header_login #navbar_username,#xda_header_login #navbar_password{border-radius:2px!important}
      #quicklinks_menu,#navtab_findDevice #results{border-radius: 0 0 2px 2px !important}
      .quickReplyTable .editorControlsTable,#rssbox h3,#content_container #link_bar,.sidebox h3{border-radius: 2px 2px 0 0 !important}
      #navtab_searchForums #gsc-input,.tborder td:first-child,.postButtonLeft,#threadslist .threadsTable td:first-child,.moreUserInfoButton .buttonLeft,#posts .postHeader .postTitle {border-radius: 2px 0 0 2px !important}
      .tborder td:last-child,.postButtonRight,#threadslist .threadsTable td:last-child,#posts .postHeader .submitAsTip,.moreUserInfoButton .buttonRight {border-radius: 0 2px 2px 0 !important}
      #thanksTable .alt1 {border-radius: 0 0 2px 2px !important}
      #thanksTable .collapseCell {border-radius: 0 2px 0 0 !important}
      .tborder td:only-child {border-radius: 2px 2px 0 2px !important}
      .ToolTip {border-radius: 0 2px 2px 2px !important}
      to this:
      Code:
      /*
      /* Holofied corners */
      .jumpToTop,#forumSearch_form .forumSearch_advanced,.postContent blockquote,.pagenavControls td,input.bginput,#thanksTable .alt2,.searchContainer,.searchResult .alt,#sidepanel_less-threadSearch #sidepanel_less-searchInput,#username_box,.pagenavControls .alt2,.pagenavControls .alt1:active,.pagenavControls .alt1,.pagenavControls .goto_nav,#sidepanel_less-threadSearch,#sidepanel-threadSearch #sidepanel-searchInput,#threadPoll,.postControls .postbitFunction,#postLegend,.postControls .selectedButton,.postControls .postbitFunction:hover,.postControls .postbitMultiquote:hover,.tabControl_editDevice_Button,.forumbox .forumbox-header,.forumbox .content,.social_group_message,#user_avatar.alt2,#profilepic img,.btn-silver,.btn-yellow,#vB-widget #vb_login_submit,#vB-widget #vb_login_username,#vB-widget #vb_login_password,.quickReplyTable .panelsurround,.controlbar,.quickReplyTable .tcat,#pageContainer .button,input[type=button],input[type=submit],.xdabutton,#navtab_findDevice #s,#xda_header_login #navbar_username,#xda_header_login #navbar_password{border-radius:2px!important}
      #quicklinks_menu,#navtab_findDevice #results{border-radius: 0 0 2px 2px !important}
      .quickReplyTable .editorControlsTable,#rssbox h3,#content_container #link_bar,.sidebox h3{border-radius: 2px 2px 0 0 !important}
      #navtab_searchForums #gsc-input,.tborder td:first-child,.postButtonLeft,#threadslist .threadsTable td:first-child,.moreUserInfoButton .buttonLeft,#posts .postHeader .postTitle {border-radius: 2px 0 0 2px !important}
      .tborder td:last-child,.postButtonRight,#threadslist .threadsTable td:last-child,#posts .postHeader .submitAsTip,.moreUserInfoButton .buttonRight {border-radius: 0 2px 2px 0 !important}
      #thanksTable .alt1 {border-radius: 0 0 2px 2px !important}
      #thanksTable .collapseCell {border-radius: 0 2px 0 0 !important}
      .tborder td:only-child {border-radius: 2px 2px 0 2px !important}
      .ToolTip {border-radius: 0 2px 2px 2px !important}
      */
    2. This will restore corners to their default state. Prior versions of Dark XDA also rounded some additional corners. If you want these back, continue to the next step. If not, you're done!
    3. Just before the end of this block:
      Code:
      @-moz-document domain("xda-developers.com") {
      
      ...
      
      }
      Add this:
      Code:
      input[type='text'],input[type='password'],input[type='email'],input[type='search']{border-radius:5px!important;}
      textarea{border-radius:5px!important;}
      select{border-radius:0px!important;}
      input, input.button{border-radius:5px!important;}
      input.bginput{border-radius:5px!important;}
      td .alt2{border-radius:3px!important;}
      #usercss #content_container #link_bar{border-radius:10px 10px 0px 0px!important;}
      #profile_tabs ul.tab_list{border-radius:10px 10px 0px 0px!important;}
      #profile_tabs{border-radius:10px 10px!important;}
      td.tcat{border-radius:6px 6px 0px 3px!important;}
      .reportFilterTab{border-radius:0px!important;}
      img[src$="multiquote_on.png"],img[src$="multiquote_off.png"]{border-radius:3px!important;}
      td#navtab_searchForums input#gsc-submit{border-radius:0px 3px 3px 0px!important;}
      td#navtab_searchForums a#advancedsearch{border-radius:3px!important;}
      td#navtab_findDevice div#icon{border-radius:0px 3px 3px 0px!important;}
      div.forumSearch_button{border-radius:0px 3px 3px 0px!important;}
      div.forumSearch_advanced{border-radius:3px!important;}
      #sidepanel_less-threadSearch #sidebar_less-search-go-forum{border-radius:0px 3px 3px 0px!important;}
      #sidepanel-threadSearch #advancedSearch{border-radius:3px!important;}
      #sidepanel-threadSearch #header-search2-go{border-radius:0px 3px 3px 0px!important;}
      #sidepanel_less-threadSearch #sidebar_less-search-go{border-radius:0px 3px 3px 0px!important;}
      #sidepanel_less-threadSearch #sidebar_less-search-advancedSearch{border-radius:3px!important;}
    4. The final result would look like this:
      Code:
      @-moz-document domain("xda-developers.com") {
      
      ...
      
      /* Global changes */
      body{background-color:#111!important;color:#f5f5f5!important;}
      div.page .tborder{background-color:#222!important;}
      a{color:#33B5E5!important;text-shadow:none!important;}
      *{border-color:#292929!important;outline:none!important;}
      /*
      <the part you commented out>
      */
      #xda_global_wrapper{min-width:100%!important;}
      ul{color:#f5f5f5!important;}
      
      ...
      
      <what you added goes here>
      
      }
  2. Disable Disqus elements theming:
    You might want to do this if it's applying to other websites you visit.
    1. Simply comment this part, at the very end of the userstyle:
      Code:
      @-moz-document domain("disqus.com") {
      
      body.dark .textarea-wrapper .textarea, body.dark .input-wrapper input{background-color:#333!important;color:#f5f5f5!important;}
      .textarea-wrapper{background:#555!important;box-shadow:0px 0px 0px 2px #555 inset!important;}
      .postbox .post-actions {background-color:transparent!important;}
      .btn{background-color:transparent!important; box-shadow:none!important;}
      .btn:hover{color:#09c!important;}
      .dropdown-menu{background-color:#333!important;}
      .dropdown-menu a{color:#f5f5f5!important;}
      .alert {background-color:#333!important;}
      
      }
    2. The result would look like this:
      Code:
      /*
      @-moz-document domain("disqus.com") {
      
      body.dark .textarea-wrapper .textarea, body.dark .input-wrapper input{background-color:#333!important;color:#f5f5f5!important;}
      .textarea-wrapper{background:#555!important;box-shadow:0px 0px 0px 2px #555 inset!important;}
      .postbox .post-actions {background-color:transparent!important;}
      .btn{background-color:transparent!important; box-shadow:none!important;}
      .btn:hover{color:#09c!important;}
      .dropdown-menu{background-color:#333!important;}
      .dropdown-menu a{color:#f5f5f5!important;}
      .alert {background-color:#333!important;}
      
      }
      */
  3. Keyboard accessibility additions: *
    1. To have a visual indicator of the currently focus item, add this around the beginning of the userstyle (e.g. just after line #15):
      Code:
      :focus{outline:1px dotted #fff!important;background-color:#33b5e5!important;color:#fff!important;overflow:hidden!important;}
    2. Final result:
      Code:
      @-moz-document domain("xda-developers.com") {
      
      ...
      
      :focus{outline:1px dotted #fff!important;background-color:#33b5e5!important;color:#fff!important;overflow:hidden!important;}
      
      ...
      
      }
  4. Custom username colors: *
    1. If you don't like the current username colors, you can easily change them. Look for this part in the userstyle:
      Code:
      @-moz-document domain("xda-developers.com") {
      
      ...
      
      /* Username colors */
      .posterName{color:#fff!important;}
      span[style*='color: blue']{color:#0df!important;font-weight:bold!important;}
      span[style*='color: indigo']{color:#93c!important;}
      span[style*='color: darkred']{color:#c00!important;}
      span[style*='color: red']{color:#f44!important;}
      span[style*="color: DarkOrange;"]{color:#f80!important;font-weight:normal!important;}
      span[style*="color: green;"]{color:#690!important;}
      
      ...
      
      }
    2. Modify it to fit your needs. Simply change the hex color codes to whatever you like. You can use the #RGB or #RRGGBB notation. To find and preview colors, you can use a website like color-hex.com.
  5. Toggle Signature addition: *
    This tweak will collapse all signatures, and show a simple "Toggle Signature" text instead. You can then press the signature area to show/hide the signature. This allows you to view a user's signature whenever you want, without taking all your screen's space.
    1. Simply add this anywhere in the main block (e.g. line #23):
      Code:
      /* Toggle Signature */
      .postsig{height:12px!important;overflow:hidden!important;}
      .postsig:before{display:block!important;content:"Toggle Signature"!important;text-align:right!important;width:100%!important;}
      .postsig:active:before{display:none!important;}
      .postsig:active{height:auto!important;display:block!important;}
    2. Final result:
      Code:
      @-moz-document domain("xda-developers.com") {
      
      ...
      
      /* Toggle Signature */
      .postsig{height:12px!important;overflow:hidden!important;}
      .postsig:before{display:block!important;content:"Toggle Signature"!important;text-align:right!important;width:100%!important;}
      .postsig:active:before{display:none!important;}
      .postsig:active{height:auto!important;display:block!important;}
      
      ...
      
      }
  6. Disable Roboto font: *
    1. Newer versions of this theme will try to use the Roboto font. To disable this, comment these lines out (line #5 -> #9):
      Code:
      /*
      @font-face{font-family:'Roboto';font-style:normal;font-weight:100;src:local('Roboto Thin'),local('Roboto-Thin'),url(http://themes.googleusercontent.com/static/fonts/roboto/v8/vzIUHo9z-oJ4WgkpPOtg1_esZW2xOQ-xsNqO47m55DA.woff) format('woff');}
      @font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto Regular'),local('Roboto-Regular'),url(http://themes.googleusercontent.com/static/fonts/roboto/v8/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');}
      @font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(http://themes.googleusercontent.com/static/fonts/roboto/v8/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}
      @font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(http://themes.googleusercontent.com/static/fonts/roboto/v8/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format('woff');}
      @font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(http://themes.googleusercontent.com/static/fonts/roboto/v8/OLffGBTaF0XFOW1gnuHF0YbN6UDyHWBl620a-IRfuBk.woff) format('woff');}
      */
    2. Also comment line #19 out:
      Code:
      /*body,p,div,textarea{font-family:'Roboto'!important;}*/
    3. To ENABLE Roboto fonts, simply uncomment/add them back:
      Code:
      @-moz-document domain("xda-developers.com") {
      
      ...
      
      @font-face{font-family:'Roboto';font-style:normal;font-weight:100;src:local('Roboto Thin'),local('Roboto-Thin'),url(http://themes.googleusercontent.com/static/fonts/roboto/v8/vzIUHo9z-oJ4WgkpPOtg1_esZW2xOQ-xsNqO47m55DA.woff) format('woff');}
      @font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto Regular'),local('Roboto-Regular'),url(http://themes.googleusercontent.com/static/fonts/roboto/v8/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');}
      @font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(http://themes.googleusercontent.com/static/fonts/roboto/v8/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}
      @font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(http://themes.googleusercontent.com/static/fonts/roboto/v8/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format('woff');}
      @font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(http://themes.googleusercontent.com/static/fonts/roboto/v8/OLffGBTaF0XFOW1gnuHF0YbN6UDyHWBl620a-IRfuBk.woff) format('woff');}
      
      ...
      
      body,p,div,textarea{font-family:'Roboto'!important;}
      
      ...
      
      }
~~
The Following 25 Users Say Thank You to GermainZ For This Useful Post: [ Click to Expand ]
 
eagleeyetom
Old
#3  
eagleeyetom's Avatar
Developer Committee / Senior Moderator / XDA Portal Team
Thanks Meter 11,325
Posts: 6,089
Join Date: Jan 2011
Location: Somewhere in Poland

 
DONATE TO ME
Great!
Looks amazing and give some nice colors! Keep it up!
 
condandatcang
Old
#4  
Member
Thanks Meter 13
Posts: 67
Join Date: Dec 2012
good. i thinks dark theme help battey saver thanks.
 
GermainZ
Old
(Last edited by GermainZ; 22nd December 2012 at 08:17 PM.)
#5  
GermainZ's Avatar
Forum Moderator / Recognized Developer - OP
Thanks Meter 6,425
Posts: 5,490
Join Date: Aug 2012
Quote:
Originally Posted by condandatcang View Post
good. i thinks dark theme help battey saver thanks.
It depends on the monitor. LCD displays use slightly more power for black when compared to white (newer LCDs, however, change the backlight intensity depending on the image, so black might be better in that case), but I personally prefer darker webpages.
 
GermainZ
Old
#6  
GermainZ's Avatar
Forum Moderator / Recognized Developer - OP
Thanks Meter 6,425
Posts: 5,490
Join Date: Aug 2012
I've updated the userstyle; the link is still the same. I've also started to comment the code.

Some of the changes:
  • Moderator names should be lighter;
  • Unread/Read threads should be clearly distinguishable now;
  • Some areas that still had light text on light backgrounds should be fixed;
  • Other minor changes.
 
Fatal1ty_18_RUS
Old
#7  
Fatal1ty_18_RUS's Avatar
Senior Member
Thanks Meter 436
Posts: 2,920
Join Date: Apr 2012
Location: Moscow
Shouldn't it be orange with black instead of blue/cyan? I like how Dark thrme in XDA app looks and thr forum would looks AMAZING with same theme
 
GermainZ
Old
#8  
GermainZ's Avatar
Forum Moderator / Recognized Developer - OP
Thanks Meter 6,425
Posts: 5,490
Join Date: Aug 2012
Quote:
Originally Posted by Fatal1ty_18_RUS View Post
Shouldn't it be orange with black instead of blue/cyan? I like how Dark thrme in XDA app looks and thr forum would looks AMAZING with same theme
I'm keeping it black/cyan for now. The final release should have customizable colors, so you'll be able to pick your own.

Meanwhile, you can change the hex codes (#09c, #07a, #023, I might have used some others but these are the most used) and replace them with orange-ish values.
Just copy/paste the userstyle in a text editor (e.g. Notepad, Notepad++), press CTRL+H (might vary depending on the editor; you want the "Search & Replace" feature), put #09c, #07a or #023 in the "Search for:" field and an orange color hex code in the "Replace by:" field. You can use this website to pick and preview hex colors.
The Following 2 Users Say Thank You to GermainZ For This Useful Post: [ Click to Expand ]
 
bobaz
Old
#9  
Junior Member
Thanks Meter 1
Posts: 15
Join Date: Feb 2011
Location: Gdańsk
Love it! But I would love it more, if it would be orange .
 
GermainZ
Old
(Last edited by GermainZ; 2nd July 2013 at 03:19 PM.)
#10  
GermainZ's Avatar
Forum Moderator / Recognized Developer - OP
Thanks Meter 6,425
Posts: 5,490
Join Date: Aug 2012
Quote:
Originally Posted by bobaz View Post
Love it! But I would love it more, if it would be orange .
Read the above comment ^_^

Tags
css, dark, style, theme, xda
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes