• After 15+ years, we've made a big change: Android Forums is now Early Bird Club. Learn more here.

[THEME] AndroidForums.com Stylish plug-in

sammyz

LG Whiz Kid
  • Jun 3, 2011
    8,842
    2,504
    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:

    8B6K3.png


    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.
     
    • Like
    Reactions: PlayfulGod

    BEST TECH IN 2023

    We've been tracking upcoming products and ranking the best tech since 2007. Thanks for trusting our opinion: we get rewarded through affiliate links that earn us a commission and we invite you to learn more about us.

    Smartphones