[THEME] AndroidForums.com Stylish plug-in

sammyz · May 6, 2014

So I wanted a dark theme because I personally like dark themes rather than bright white everywhere.

If you haven't heard of stylish, it's a plug-in for Chrome and firefox. Basically, you edit the CSS of the website to however you like it, copy the edited CSS and paste it into the plugin. So I changed the colors to look like this:

Here's the code for Chrome:

Code:

body
{
	background: #000000;
	/* color: #fff; */
	/* font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; */
	margin: 0px 0px 0px 0px;
	
}
a:link, body_alink
{
	color: #003399;
}
a:visited, body_avisited
{
	color: #003399;
}
a:hover, a:active, body_ahover
{
	color: #000000;
}
.page
{
	background: #000000;
	color: #000000;
}
td, th, p, li
{
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tborder
{
	background: #000;
	color: #000000;
	border: 1px solid #7F8F2F;
}
.tcat
{
	background: #5A0F0F;
	color: #FFFFFF;
	font: 14px RobotoMedium, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tcat a:link, .tcat_alink
{
	color: #ffffff;
	text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
	color: #ffffff;
	text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
	color: #fff;
	text-decoration: underline;
}
.thead
{
	background: #000000;
	color: #FFFFFF;
	font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.thead a:link, .thead_alink
{
	color: #FFFFFF;
}
.thead a:visited, .thead_avisited
{
	color: #FFFFFF;
}
.thead a:hover, .thead a:active, .thead_ahover
{
	color: #FFFF00;
}
.tfoot
{
	background: #003399;
	color: #FFF;
}
.tfoot a:link, .tfoot_alink
{
	color: #FFF;
}
.tfoot a:visited, .tfoot_avisited
{
	color: #FFF;
}
.tfoot a:hover, .tfoot a:active, .tfoot_ahover
{
	color: #F5F5F5;
	text-decoration: underline;
}
.alt1, .alt1Active
{
	background: #0C0C0C;
	color: #000000;
	/* border-top: 1px solid #0F0; */
	/* border-left: 1px solid #0F0; */
}
.alt2, .alt2Active
{
	background: #1D1A1A;
	color: #FF0000;
	/* border-top: 1px solid #0F0; */
	/* border-left: 1px solid #0F0; */
	/* border-bottom: 1px solid #0F0; */
	/* border-right: 1px solid #0F0; */
}
.inlinemod
{
	background: #FFFFCC;
	color: #000000;
}
.wysiwyg
{
	background: #F5F5FF;
	color: #000000;
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	margin: 5px 10px 10px 10px;
	padding: 0px;
}
.wysiwyg a:link, .wysiwyg_alink
{
	color: #22229C;
}
.wysiwyg a:visited, .wysiwyg_avisited
{
	color: #22229C;
}
.wysiwyg a:hover, .wysiwyg a:active, .wysiwyg_ahover
{
	color: #FF4400;
}
textarea, .bginput
{
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	border:1px solid #000;
	padding:3px;
}
.bginput option, .bginput optgroup
{
	font-size: 10pt;
	font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.button
{
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	border:1px solid #CCC;
}
select
{
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	border:1px solid #CCC;
}
option, optgroup
{
	font-size: 11px;
	font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.smallfont
{
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.time
{
	color: #666686;
}
.navbar
{
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.highlight
{
	color: #FF0000;
	font-weight: bold;
}
.fjsel
{
	background: #3E5C92;
	color: #E0E0F6;
}
.fjdpth0
{
	background: #F7F7F7;
	color: #000000;
}
.panel
{
	background: #E4E7F5 url(../../images/gradients/gradient_panel.gif) repeat-x top left;
	color: #000000;
	padding: 10px;
	border: 2px outset;
}
.panelsurround
{
	background: #D1D4E0 url(../../images/gradients/gradient_panelsurround.gif) repeat-x top left;
	color: #000000;
}
legend
{
	color: #22229C;
	font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.vbmenu_control
{
	background: #5A0F0F;
	color: #FFFFFF;
	font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	padding: 3px 6px 3px 6px;
	white-space: nowrap;
}
.vbmenu_control a:link, .vbmenu_control_alink
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_control a:visited, .vbmenu_control_avisited
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover
{
	color: #FFFFFF;
	text-decoration: underline;
}
.vbmenu_popup
{
	background: #FFFFFF;
	color: #000000;
	border: 1px solid #0B198C;
}
.vbmenu_option
{
	background: #BBC7CE;
	color: #000000;
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	white-space: nowrap;
	cursor: pointer;
}
.vbmenu_option a:link, .vbmenu_option_alink
{
	color: #22229C;
	text-decoration: none;
}
.vbmenu_option a:visited, .vbmenu_option_avisited
{
	color: #22229C;
	text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
{
	color: #696969;
	text-decoration: none;
}
.vbmenu_hilite
{
	background: #8A949E;
	color: #696969;
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	white-space: nowrap;
	cursor: pointer;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink
{
	color: #696969;
	text-decoration: none;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited
{
	color: #696969;
	text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
{
	color: #696969;
	text-decoration: none;
}
/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }

/* ***** small padding on 'thead' elements ***** */
td.thead, th.thead, div.thead { padding: 4px; }

/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }

/* ***** de-emphasized text */
.shade, a.shade:link, a.shade:visited { color: #777777; text-decoration: none; }
a.shade:active, a.shade:hover { color: #FF4400; text-decoration: underline; }
.tcat .shade, .thead .shade, .tfoot .shade { color: #DDDDDD; }

/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }
@charset "UTF-8";

/*** Fonts ***/

@font-face {
    font-family: 'RobotoRegular';
    src: url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Regular-webfont.eot');
    src: url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'RobotoBold';
    src: url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Bold-webfont.eot');
    src: url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'RobotoBlack';
    src: url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Black-webfont.eot');
    src: url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Black-webfont.woff') format('woff'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Black-webfont.ttf') format('truetype'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Black-webfont.svg#RobotoBlack') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'RobotoMedium';
    src: url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Medium-webfont.eot');
    src: url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Medium-webfont.woff') format('woff'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Medium-webfont.ttf') format('truetype'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
    font-weight: normal;
    font-style: normal;

}
.postcontent { color: #33F;}

#section {
background: #0C0C0C;
}
.alt1, .alt1Active {
background: ;
color: #696969;
border-top: 1px solid #000;
border-left: 1px solid #000;
}
.alt2, .alt2Active {

color: #696969;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
}

For firefox:

Code:

@-moz-document url-prefix("http://androidforums.com/"), domain("androidforums.com"), domain("http://androidforums.com") {
body
{
	background: #000000;
	/* color: #fff; */
	/* font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; */
	margin: 0px 0px 0px 0px;
	
}
a:link, body_alink
{
	color: #003399;
}
a:visited, body_avisited
{
	color: #003399;
}
a:hover, a:active, body_ahover
{
	color: #000000;
}
.page
{
	background: #000000;
	color: #000000;
}
td, th, p, li
{
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tborder
{
	background: #000;
	color: #000000;
	border: 1px solid #7F8F2F;
}
.tcat
{
	background: #5A0F0F;
	color: #FFFFFF;
	font: 14px RobotoMedium, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tcat a:link, .tcat_alink
{
	color: #ffffff;
	text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
	color: #ffffff;
	text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
	color: #fff;
	text-decoration: underline;
}
.thead
{
	background: #000000;
	color: #FFFFFF;
	font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.thead a:link, .thead_alink
{
	color: #FFFFFF;
}
.thead a:visited, .thead_avisited
{
	color: #FFFFFF;
}
.thead a:hover, .thead a:active, .thead_ahover
{
	color: #FFFF00;
}
.tfoot
{
	background: #003399;
	color: #FFF;
}
.tfoot a:link, .tfoot_alink
{
	color: #FFF;
}
.tfoot a:visited, .tfoot_avisited
{
	color: #FFF;
}
.tfoot a:hover, .tfoot a:active, .tfoot_ahover
{
	color: #F5F5F5;
	text-decoration: underline;
}
.alt1, .alt1Active
{
	background: #0C0C0C;
	color: #000000;
	/* border-top: 1px solid #0F0; */
	/* border-left: 1px solid #0F0; */
}
.alt2, .alt2Active
{
	background: #1D1A1A;
	color: #FF0000;
	/* border-top: 1px solid #0F0; */
	/* border-left: 1px solid #0F0; */
	/* border-bottom: 1px solid #0F0; */
	/* border-right: 1px solid #0F0; */
}
.inlinemod
{
	background: #FFFFCC;
	color: #000000;
}
.wysiwyg
{
	background: #F5F5FF;
	color: #000000;
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	margin: 5px 10px 10px 10px;
	padding: 0px;
}
.wysiwyg a:link, .wysiwyg_alink
{
	color: #22229C;
}
.wysiwyg a:visited, .wysiwyg_avisited
{
	color: #22229C;
}
.wysiwyg a:hover, .wysiwyg a:active, .wysiwyg_ahover
{
	color: #FF4400;
}
textarea, .bginput
{
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	border:1px solid #000;
	padding:3px;
}
.bginput option, .bginput optgroup
{
	font-size: 10pt;
	font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.button
{
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	border:1px solid #CCC;
}
select
{
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	border:1px solid #CCC;
}
option, optgroup
{
	font-size: 11px;
	font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.smallfont
{
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.time
{
	color: #666686;
}
.navbar
{
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.highlight
{
	color: #FF0000;
	font-weight: bold;
}
.fjsel
{
	background: #3E5C92;
	color: #E0E0F6;
}
.fjdpth0
{
	background: #F7F7F7;
	color: #000000;
}
.panel
{
	background: #E4E7F5 url(../../images/gradients/gradient_panel.gif) repeat-x top left;
	color: #000000;
	padding: 10px;
	border: 2px outset;
}
.panelsurround
{
	background: #D1D4E0 url(../../images/gradients/gradient_panelsurround.gif) repeat-x top left;
	color: #000000;
}
legend
{
	color: #22229C;
	font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.vbmenu_control
{
	background: #5A0F0F;
	color: #FFFFFF;
	font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	padding: 3px 6px 3px 6px;
	white-space: nowrap;
}
.vbmenu_control a:link, .vbmenu_control_alink
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_control a:visited, .vbmenu_control_avisited
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover
{
	color: #FFFFFF;
	text-decoration: underline;
}
.vbmenu_popup
{
	background: #FFFFFF;
	color: #000000;
	border: 1px solid #0B198C;
}
.vbmenu_option
{
	background: #BBC7CE;
	color: #000000;
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	white-space: nowrap;
	cursor: pointer;
}
.vbmenu_option a:link, .vbmenu_option_alink
{
	color: #22229C;
	text-decoration: none;
}
.vbmenu_option a:visited, .vbmenu_option_avisited
{
	color: #22229C;
	text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
{
	color: #696969;
	text-decoration: none;
}
.vbmenu_hilite
{
	background: #8A949E;
	color: #696969;
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	white-space: nowrap;
	cursor: pointer;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink
{
	color: #696969;
	text-decoration: none;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited
{
	color: #696969;
	text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
{
	color: #696969;
	text-decoration: none;
}
/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }

/* ***** small padding on 'thead' elements ***** */
td.thead, th.thead, div.thead { padding: 4px; }

/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }

/* ***** de-emphasized text */
.shade, a.shade:link, a.shade:visited { color: #777777; text-decoration: none; }
a.shade:active, a.shade:hover { color: #FF4400; text-decoration: underline; }
.tcat .shade, .thead .shade, .tfoot .shade { color: #DDDDDD; }

/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }
@charset "UTF-8";

/*** Fonts ***/

@font-face {
    font-family: 'RobotoRegular';
    src: url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Regular-webfont.eot');
    src: url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'RobotoBold';
    src: url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Bold-webfont.eot');
    src: url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'RobotoBlack';
    src: url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Black-webfont.eot');
    src: url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Black-webfont.woff') format('woff'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Black-webfont.ttf') format('truetype'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Black-webfont.svg#RobotoBlack') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'RobotoMedium';
    src: url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Medium-webfont.eot');
    src: url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Medium-webfont.woff') format('woff'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Medium-webfont.ttf') format('truetype'),
         url('http://phandroid.s3.amazonaws.com/fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
    font-weight: normal;
    font-style: normal;

}
.postcontent { color: #33F;}

#section {
background: #0C0C0C;
}
.alt1, .alt1Active {
background: ;
color: #696969;
border-top: 1px solid #000;
border-left: 1px solid #000;
}
.alt2, .alt2Active {

color: #696969;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
}
}

I posted this so anyone here with better CSS knowledge than me could play with it

and so others could also enjoy it.
This really does need a little bit more work though.

jbutewicz · May 6, 2014

Little rough on the eyes but it's a good start.

I definitely use a dark theme where ever I can.

Unforgiven · May 6, 2014

I tossed this into computers & it.

sammyz · May 7, 2014

Unforgiven said:
I tossed this into computers & it.

I wasn't sure

there should be a web design category

Unforgiven · May 7, 2014

sammyz said:
I wasn't sure there should be a web design category

I debated too, but I figured in here it was less likely to moved into the Android Themes.

sammyz · May 7, 2014

Unforgiven said:
I debated too, but I figured in here it was less likely to moved into the Android Themes.

Lol, who would move it there? :rolleyes:

out of ideas · May 7, 2014

nice work. i might get bored and change the red to green and use it. or I might not. either way, thanks.

[THEME] AndroidForums.com Stylish plug-in

sammyz

LG Whiz Kid

jbutewicz

Newbie

Unforgiven

...eschew obfuscation...

sammyz

LG Whiz Kid

Unforgiven

...eschew obfuscation...

sammyz

LG Whiz Kid

out of ideas

Android Enthusiast