Dark theme

[zophar53]

Not sure if this has been suggested in the past, but I didn't see it in the recent threads I saw. I think having a dark or night theme would be a great and (possibly?) easy thing to do. I'm not a coder, so I don't know what it would take on the back end, but I've heard from a few people I've shown the site to, and I personally enjoy a nice dark theme, so to have a dark/light theme option seems like a great addition. Thoughts?

[MetalFRO]

I will second this! I know the site has a color scheme that is part of the branding, but I use a night/dark theme on my phone for almost anything that supports it, because it's easier on my eyes. The ability to do something like that would be very helpful.

[mumboking]

I just tried modifying the CSS a little bit...
Looks alright, but some stuff has the colour defined by HTML, so I can't change that easily.

Probably missed out changing some stuff, but it's really just a concept.

Spoiler (hover to show)

Code:

/* Normal, standard links. */
a:link, a:visited
{
	color: #999;
	background-color: transparent;
	text-decoration: none;
}
a:hover
{
	color: #cc0000;
	background-color: transparent;
	text-decoration: none;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
	color: #999;
	background-color: transparent;
	text-decoration: none;
}
a.nav:hover
{
	font-weight: bold;
	color: #cc0000;
	background-color: transparent;
	text-decoration: underline;
}

/* Tables should show empty cells too. */
table
{
	empty-cells: show;
}

/* By default (td, body..) use Verdana in black. */
body
{
	color: #FFF;
	font-size: small;
	font-family: verdana, arial, helvetica, sans-serif;
	margin: 0	
}

td
{
	color: #FFF;
	font-size: small;
	font-family: verdana, arial, helvetica, sans-serif;
}


/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea
{
	font-size: 9pt;
	color: #fff;
	font-family: verdana, arial, helvetica, sans-serif;
	background-color: #111;
	border-color: #444;
}

/* Checkboxes shouldn't have a background color. */
input.check
{
	background-color: transparent;
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
	font-size: 8pt;
	font-weight: normal;
	color: #FFF;
	font-family: verdana, arial, helvetica, sans-serif;
	background-color: #111;
	border-color: #444;
}

/* Standard horizontal rule.. */
hr
{
	color: #cccccc;
	background-color: #cccccc;
}
/* A more colorful hr.. */
.hrcolor
{
	height: 1px;
	border: 0;
	color: #333333;
	background-color: #333333;
}

/* Still more colorful and larger horizontal hr.. */
.hrRFG
{
	height: 2px;
	border: 0;
	color: #CC0000;
	background-color: #CC0000;
}


/* A quote, perhaps from another post. */
.quote
{
	color: #000000;
	background-color: #CC6666;
	border: 1px solid #cc3333;
	margin: 2px;
	padding: 5px;
	font-size: 9pt;
}

/* A code block - maybe even PHP ;). */
.code
{
	color: #FFF;
	background-color: #333; 
	border: 1px solid white;
	margin: 1px;
	padding: 1px;
	font-size: x-small;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
	color: #fff;
	text-decoration: none;
	font-style: normal;
	font-weight: bold;
	font-size: x-small;
}

.quoteheader a:link, .quoteheader a:visited
{
	color: #000000;
	background-color: transparent;
	text-decoration: none;
}

/* Generally, those [?] icons. */
.help
{
	cursor: help;
	background-color: transparent;
}

/* /me uses this a lot. */
.meaction
{
	color: red;
	background-color: transparent;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
	width: 100%;
}

/* Highlighted text - such as search results. */
.highlight
{
	background-color: yellow;
	font-weight: bold;
	color: black;
}

/* Alternating backgrounds... */
.windowbg, .windowbg3
{
	color: #FFF;
	background-color: #222;
}
.windowbg2
{
	color: #FFF;
	background-color: #111;
}

/*Message Control... Hey, Bob, you have 2...*/
.fmessage
{
	font-style: normal;
	color: #CC0000;
	background-color: #EEEEEE;
}

/*Message Control*/.fmessage, .fmessage a:link, .fmessage a:visited
{
	font-weight: bold;
	font-style: normal;
	color: #ECECEC;
	background-color: transparent;
}
.fmessage a:hover
{
	font-weight:bold;
	font-style: normal;
	color: #CC0000;
	background-color: transparent;
} 
/* Titles - such as table headers. */
.titlebg, tr.titlebg td, .titlebg a:link, .titlebg a:visited, .titlebg2, tr.titlebg2 td, .titlebg2 a:link, .titlebg2 a:visited
{
	font-weight: bold;
	font-style: normal;
	color: #eeeeee;
	background-color: #CC0000;
}
.titlebg a:hover,.titlebg2 a:hover
{
	color: #ffffff; 
}

/* The category headers, page indexes, and such things. */
.catbg
{
	font-weight: bold;
	background-color: #222;
	background-image: linear-gradient(#333, #111);
	color: #fff;
}

/* The borders around things. */
.bordercolor
{
	background-color: #808080;
}
.tborder
{
	border: 1px solid #808080;
}

/* Default font sizes. */
.smalltext
{
	font-size: x-small;
}
.normaltext
{
	font-size: small;
}
.largetext
{
	font-size: large;
}

/* No image should have a border when linked */
a img{
	border: 0;
}

/*Headline Text Control*/
.headline, .headline a:link, .headline a:visited
{
	font-size: 14pt;
	font-weight: bold;
	color: #cc0000;
}

.headline a:hover
{
	color: #BBBBBB;		
}

/* Current Navigation Selected*/
.navbg, tr.navbg td, .navbg a:link, .navbg a:visited, .navbg a:hover
{
	font-weight: bold;
	font-style: normal;
	color: #CC0000;
	background-color: #222;
}

/* Navigation Background on Toggle*/
.navbg2, tr.navbg2 td, .navbg2 a:link, .navbg2 a:visited, .navbg2 a:hover
{
	font-weight: bold;
	font-style: normal;
	color: #CC0000;
	background-color: #111;
}

/* For the left bar*/
.leftbar
{
	background-color: #DDDDDD;
}

.bodybg
{
	background-color: #333;
}

.lightredbg
{
	background-color: #CC9999;
}

/* The background for the top. */
.topbg
{
	font-weight: bold;
	background-color: #666666;
	background-image: url(http://www.rfgeneration.com/bg.gif);
	color: #000000;
}

/* No Images Exist*/
.noimages
{
	font-weight: bold;
	font-style: normal;
	color: #555;
	background-color: #222;
}

.yesimg
{
	font-weight: bold;
	color: #009900; 
}

.noimg
{
	font-weight: bold;
	color: #993300;
}

table.warning
{
	border-style: dashed;
	border-color: #666666
}

/* Track Banner background */
.track
{
	background-color: #000000;
}

/* Dropdown Menu Controls */
#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #111;
}

/* For Profile Links */
a.windowbg2:link {color: #000000; text-decoration: none; }
a.windowbg2:visited  {color: #000000; text-decoration: none; }
a.windowbg2:hover  {color: #CC0000; text-decoration: none; }

/* Typeahead.js styles */
.tt-hint { 
	display: none;
}
.tt-dropdown-menu {
	min-width: 200px;
	border-width: 1px 1px 0;
	border-color: black;
	border-style: solid;
	text-align: left;
}
.tt-suggestion {
	color: #666666;
	background-color: #dddddd;
	border-bottom: 1px solid black;
	text-indent: 3px;
	font-weight: bold;
	padding: 1px 0;
}
.tt-suggestion > p {
	margin: 0;
}
.tt-is-under-cursor {
	color: #cc0000;
	background-color: #eeeeee;
}

[bickman2k]

I can put it on my board of things to do. It would probably be something optional once we move to an updated SMF version.

Which is also on the list of things to work on...

[Cryptid Collector]

You mean something that looks a bit like the YoYoGames forums but maybe with less green?

[img width=700 height=351]https://i.imgur.com/zk3cstn.png[/img]

[tactical_nuke]

This would be a top request for me. The current colors can be eye-straining at times. In the meantime, if you use Chrome, install an extension called "High Contrast" to turn down the brightness.

[Bear78]

I wouldn't mind a dark theme on the RFGen app also