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

Search This thread
By:
Advanced…
GermainZ

GermainZ

Inactive Recognized Developer / Retired Forum Mod
Aug 3, 2012
6,170
8,805
Also check [USERSTYLE/THEME] XDA 2013 to 2010.
Click to expand...
Click to collapse

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.
Click to expand...
Click to collapse


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


Screenshots:
Check the userstyles.org page for before/after screenshots.
1.jpg2.jpg3.jpg


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.
Click to expand...
Click to collapse

~~
 
Last edited:
  • Like
Reactions: BeeWall, SteveMurphy, Jayedamina and 159 others
GermainZ

GermainZ

Inactive Recognized Developer / Retired Forum Mod
Aug 3, 2012
6,170
8,805
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: 
    [COLOR="Green"]/*[/COLOR]body{color:#f5f5f5!important;}[COLOR="Green"]*/[/COLOR]
    Similarly, you can comment a paragraph out:
    Code: 
    [COLOR="Green"]/*[/COLOR] All of this...
body{color:#f5f5f5!important;}
a{color:#33b5e5!important;}
...is commented out [COLOR="Green"]*/[/COLOR]
  • 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: 
    [COLOR="Violet"]@[/COLOR][COLOR="DeepSkyBlue"]rule[/COLOR] [COLOR="Red"]{[/COLOR]

[COLOR="DeepSkyBlue"]<content>[/COLOR]

[COLOR="Red"]}[/COLOR]
  • 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: 
    [COLOR="Red"]@-moz-document domain("xda-developers.com") {[/COLOR]

[COLOR="DeepSkyBlue"]...[/COLOR]

[COLOR="Red"]}[/COLOR]
    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: 
      [COLOR="Green"]/*[/COLOR]
/* 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}
[COLOR="Green"]*/[/COLOR]
    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") {

[COLOR="DeepSkyBlue"]...[/COLOR]

}
      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") {

[COLOR="DeepSkyBlue"]...[/COLOR]

/* 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;}
[color="Green"]/*[/color]
<the part you commented out>
[color="Green"]*/[/color]
#xda_global_wrapper{min-width:100%!important;}
ul{color:#f5f5f5!important;}

[COLOR="DeepSkyBlue"]...[/COLOR]

[color="Green"]<what you added goes here>[/color]

}
  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: 
      [COLOR="Green"]/*[/COLOR]
@-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;}

}
[COLOR="Green"]*/[/COLOR]
  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") {

[COLOR="DeepSkyBlue"]...[/COLOR]

[COLOR="Green"]:focus{outline:1px dotted #fff!important;background-color:#33b5e5!important;color:#fff!important;overflow:hidden!important;}[/COLOR]

[COLOR="DeepSkyBlue"]...[/COLOR]

}
  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") {

[COLOR="DeepSkyBlue"]...[/COLOR]

/* Username colors */
.posterName{color:[COLOR="Green"]#fff[/COLOR]!important;}
span[style*='color: blue']{color:[COLOR="Green"]#0df[/COLOR]!important;font-weight:bold!important;}
span[style*='color: indigo']{color:[COLOR="Green"]#93c[/COLOR]!important;}
span[style*='color: darkred']{color:[COLOR="Green"]#c00[/COLOR]!important;}
span[style*='color: red']{color:[COLOR="Green"]#f44[/COLOR]!important;}
span[style*="color: DarkOrange;"]{color:[COLOR="Green"]#f80[/COLOR]!important;font-weight:normal!important;}
span[style*="color: green;"]{color:[COLOR="Green"]#690[/COLOR]!important;}

[COLOR="DeepSkyBlue"]...[/COLOR]

}
    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") {

[COLOR="DeepSkyBlue"]...[/COLOR]

/* 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;}

[COLOR="DeepSkyBlue"]...[/COLOR]

}
  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: 
      [COLOR="Green"]/*[/COLOR]
@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');}
[COLOR="Green"]*/[/COLOR]
    2. Also comment line #19 out:
      Code: 
      [COLOR="Green"]/*[/COLOR]body,p,div,textarea{font-family:'Roboto'!important;}[COLOR="Green"]*/[/COLOR]
    3. To ENABLE Roboto fonts, simply uncomment/add them back:
      Code: 
      @-moz-document domain("xda-developers.com") {

[COLOR="DeepSkyBlue"]...[/COLOR]

@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');}

[COLOR="DeepSkyBlue"]...[/COLOR]

body,p,div,textarea{font-family:'Roboto'!important;}

[COLOR="DeepSkyBlue"]...[/COLOR]

}
Click to expand...
Click to collapse
~~
 
Last edited:
  • Like
Reactions: lance2355, yochananmarqos, olokos and 22 others
GermainZ

GermainZ

Inactive Recognized Developer / Retired Forum Mod
Aug 3, 2012
6,170
8,805
condandatcang said:
good. i thinks dark theme help battey saver thanks.
Click to expand...
Click to collapse

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.
 
Last edited:
GermainZ

GermainZ

Inactive Recognized Developer / Retired Forum Mod
Aug 3, 2012
6,170
8,805
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.
 
PVL_93_RU

PVL_93_RU

Senior Member
Apr 20, 2012
3,243
545
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

GermainZ

Inactive Recognized Developer / Retired Forum Mod
Aug 3, 2012
6,170
8,805
Fatal1ty_18_RUS said:
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
Click to expand...
Click to collapse

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.
 
  • Like
Reactions: prboy1969 and PVL_93_RU
GermainZ

GermainZ

Inactive Recognized Developer / Retired Forum Mod
Aug 3, 2012
6,170
8,805
New version. Also, I've uploaded it to userstyles.org. This should make installation much easier and stop making the style global for non Firefox users.
 
  • Like
Reactions: Myrrhman
GermainZ

GermainZ

Inactive Recognized Developer / Retired Forum Mod
Aug 3, 2012
6,170
8,805
Complete overhaul, updated OP:
09-04-2013:
Portal/Wiki are now themed as well.
Other minor tweaks.
Please note that:
Images aren't replaced yet (which means that some buttons are still orange-ish).
It'll be updated shortly (that is, as soon as I can) to address the above issue. Thanks for reporting any other problems :)
04-04-2013:
Complete overhaul:
Lighter colors are now used instead of pure black. Should be much more pleasant.
The layout in general is now almost similar to the original XDA, with different colors (e.g. no more missing borders).
Some small changes are still made compared to the original XDA layout to better suit the different colors.
Click to expand...
Click to collapse

Please report anything you think I might have missed :)
 
Last edited:
  • Like
Reactions: Myrrhman
GermainZ

GermainZ

Inactive Recognized Developer / Retired Forum Mod
Aug 3, 2012
6,170
8,805
More updates:
11-04-2013 (Update2):
Minor fix.
11-04-2013:
Various tweaks.
Fixed missing areas.
Started replacing images. All important images are now replaced, with more to come.
10-04-2013:
Body background changed to a slightly darker black.
More buttons are now colored.
Buttons should look better now.
Borders now have a dark color and shouldn't be flashy anymore or restrict user view.
Other minor changes.
Click to expand...
Click to collapse
 
  • Like
Reactions: Myrrhman
Primokorn

Primokorn

Senior Member
Nov 17, 2012
11,561
7,754
OnePlus 8 Pro
Easy to install and I love Dark themes! Thanks m8 :D

However I found a bug: check boxes are missing in the Settings profil.
I attach 2 pictures (with / without Dark XDA Theme)
 
  • Like
Reactions: GermainZ
You must log in or register to reply here.

Similar threads

H
  • Locked
(requests) From the Users to the Mods & Admins
Replies
6K
Views
604K
NotATreoFan
NotATreoFan
mikef
  • Locked
[CLOSED][GUIDE] - XDA New User Guide - Getting started on XDA
Replies
629
Views
471K
sd_shadow
sd_shadow
DaveShaw
The "Welcome to XDA" Thread
Replies
13K
Views
801K
KidCarter93
KidCarter93
NotATreoFan
[All XDA Members] Requests to Moderators and Admins
Replies
4K
Views
396K
Oswald Boelcke
Oswald Boelcke
Fallen Spartan
[All XDA Members] Feedback/Recommendations for XDA
Replies
4K
Views
260K
EllieCat
EllieCat

Top Liked Posts

24 Hours All time
  • There are no posts matching your filters.
  • 162
    GermainZ
    GermainZ
    Also check [USERSTYLE/THEME] XDA 2013 to 2010.
    Click to expand...
    Click to collapse

    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.
    Click to expand...
    Click to collapse


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


    Screenshots:
    Check the userstyles.org page for before/after screenshots.
    1.jpg2.jpg3.jpg


    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.
    Click to expand...
    Click to collapse

    ~~
    View
    25
    GermainZ
    GermainZ
    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: 
      [COLOR="Green"]/*[/COLOR]body{color:#f5f5f5!important;}[COLOR="Green"]*/[/COLOR]
      Similarly, you can comment a paragraph out:
      Code: 
      [COLOR="Green"]/*[/COLOR] All of this...
body{color:#f5f5f5!important;}
a{color:#33b5e5!important;}
...is commented out [COLOR="Green"]*/[/COLOR]
    • 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: 
      [COLOR="Violet"]@[/COLOR][COLOR="DeepSkyBlue"]rule[/COLOR] [COLOR="Red"]{[/COLOR]

[COLOR="DeepSkyBlue"]<content>[/COLOR]

[COLOR="Red"]}[/COLOR]
    • 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: 
      [COLOR="Red"]@-moz-document domain("xda-developers.com") {[/COLOR]

[COLOR="DeepSkyBlue"]...[/COLOR]

[COLOR="Red"]}[/COLOR]
      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: 
        [COLOR="Green"]/*[/COLOR]
/* 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}
[COLOR="Green"]*/[/COLOR]
      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") {

[COLOR="DeepSkyBlue"]...[/COLOR]

}
        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") {

[COLOR="DeepSkyBlue"]...[/COLOR]

/* 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;}
[color="Green"]/*[/color]
<the part you commented out>
[color="Green"]*/[/color]
#xda_global_wrapper{min-width:100%!important;}
ul{color:#f5f5f5!important;}

[COLOR="DeepSkyBlue"]...[/COLOR]

[color="Green"]<what you added goes here>[/color]

}
    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: 
        [COLOR="Green"]/*[/COLOR]
@-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;}

}
[COLOR="Green"]*/[/COLOR]
    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") {

[COLOR="DeepSkyBlue"]...[/COLOR]

[COLOR="Green"]:focus{outline:1px dotted #fff!important;background-color:#33b5e5!important;color:#fff!important;overflow:hidden!important;}[/COLOR]

[COLOR="DeepSkyBlue"]...[/COLOR]

}
    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") {

[COLOR="DeepSkyBlue"]...[/COLOR]

/* Username colors */
.posterName{color:[COLOR="Green"]#fff[/COLOR]!important;}
span[style*='color: blue']{color:[COLOR="Green"]#0df[/COLOR]!important;font-weight:bold!important;}
span[style*='color: indigo']{color:[COLOR="Green"]#93c[/COLOR]!important;}
span[style*='color: darkred']{color:[COLOR="Green"]#c00[/COLOR]!important;}
span[style*='color: red']{color:[COLOR="Green"]#f44[/COLOR]!important;}
span[style*="color: DarkOrange;"]{color:[COLOR="Green"]#f80[/COLOR]!important;font-weight:normal!important;}
span[style*="color: green;"]{color:[COLOR="Green"]#690[/COLOR]!important;}

[COLOR="DeepSkyBlue"]...[/COLOR]

}
      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") {

[COLOR="DeepSkyBlue"]...[/COLOR]

/* 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;}

[COLOR="DeepSkyBlue"]...[/COLOR]

}
    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: 
        [COLOR="Green"]/*[/COLOR]
@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');}
[COLOR="Green"]*/[/COLOR]
      2. Also comment line #19 out:
        Code: 
        [COLOR="Green"]/*[/COLOR]body,p,div,textarea{font-family:'Roboto'!important;}[COLOR="Green"]*/[/COLOR]
      3. To ENABLE Roboto fonts, simply uncomment/add them back:
        Code: 
        @-moz-document domain("xda-developers.com") {

[COLOR="DeepSkyBlue"]...[/COLOR]

@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');}

[COLOR="DeepSkyBlue"]...[/COLOR]

body,p,div,textarea{font-family:'Roboto'!important;}

[COLOR="DeepSkyBlue"]...[/COLOR]

}
    Click to expand...
    Click to collapse
    ~~
    View
    8
    GermainZ
    GermainZ
    Update:
    • Theme new
      Code: 
       formatting
[*]Minor fixes for black/dark text for the forums and the portal.
[/LIST]
    View
    6
    GermainZ
    GermainZ
    It_ler said:
    Any plans to make your dark xda theme compatible with new XDA 2015 style?
    Click to expand...
    Click to collapse
    Yes, although svetius said an official dark theme is planned so I'm waiting for a bit.
    View
    6
    GermainZ
    GermainZ
    Update:
    11-10-2013:
    Many minor fixes (DevDB, Wiki and more).
    Click to expand...
    Click to collapse
    View

New posts