Merge pull request #8830 from Ghommie/Ghommie-cit114

Ports the toggleable dark mode to the game!
2019-07-20 11:57:13 -07:00
parent 9f00a26eb4 29dcfa1160
commit 08fd6af7fc
24 changed files with 821 additions and 228 deletions
--- a/code/__DEFINES/colors.dm
+++ b/code/__DEFINES/colors.dm
@@ -3,26 +3,35 @@
 #define COLOR_INPUT_DISABLED "#F0F0F0"
 #define COLOR_INPUT_ENABLED "#D3B5B5"

-//#define COLOR_WHITE            "#EEEEEE"
-//#define COLOR_SILVER           "#C0C0C0"
-//#define COLOR_GRAY             "#808080"
+#define COLOR_DARKMODE_INFO_BUTTONS_BG "#40628A"
+#define COLOR_DARKMODE_ISSUE_BUTTON_BG "#ce4242"
+#define COLOR_DARKMODE_BACKGROUND "#202020"
+#define COLOR_DARKMODE_DARKBACKGROUND "#171717"
+#define COLOR_DARKMODE_TEXT "#f0f0f0"
+
+#define COLOR_WHITEMODE_INFO_BUTTONS_BG "#90b3dd"
+#define COLOR_WHITEMODE_ISSUE_BUTTON_BG "#ef7f7f"
+#define COLOR_WHITEMODE_BACKGROUND "#ffffff"
+#define COLOR_WHITEMODE_DARKBACKGROUND "#eeeeee"
+#define COLOR_WHITEMODE_TEXT "#000000"
+
 #define COLOR_FLOORTILE_GRAY   "#8D8B8B"
 #define COLOR_ALMOST_BLACK	   "#333333"
-//#define COLOR_BLACK            "#000000"
+#define COLOR_BLACK            "#000000"
 #define COLOR_RED              "#FF0000"
-//#define COLOR_RED_LIGHT        "#FF3333"
-//#define COLOR_MAROON           "#800000"
+#define COLOR_RED_LIGHT        "#FF3333"
+#define COLOR_MAROON           "#800000"
 #define COLOR_YELLOW           "#FFFF00"
-//#define COLOR_OLIVE            "#808000"
-//#define COLOR_LIME             "#32CD32"
+#define COLOR_OLIVE            "#808000"
+#define COLOR_LIME             "#32CD32"
 #define COLOR_GREEN            "#008000"
 #define COLOR_CYAN             "#00FFFF"
-//#define COLOR_TEAL             "#008080"
+#define COLOR_TEAL             "#008080"
 #define COLOR_BLUE             "#0000FF"
-//#define COLOR_BLUE_LIGHT       "#33CCFF"
-//#define COLOR_NAVY             "#000080"
+#define COLOR_BLUE_LIGHT       "#33CCFF"
+#define COLOR_NAVY             "#000080"
 #define COLOR_PINK             "#FFC0CB"
-//#define COLOR_MAGENTA          "#FF00FF"
+#define COLOR_MAGENTA          "#FF00FF"
 #define COLOR_PURPLE           "#800080"
 #define COLOR_ORANGE           "#FF9900"
 #define COLOR_BEIGE            "#CEB689"
--- a/code/__DEFINES/misc.dm
+++ b/code/__DEFINES/misc.dm
@@ -275,10 +275,6 @@ GLOBAL_LIST_INIT(pda_styles, list(MONO, VT, ORBITRON, SHARE))
 GLOBAL_LIST_INIT(pda_reskins, list(PDA_SKIN_CLASSIC = 'icons/obj/pda.dmi', PDA_SKIN_ALT = 'icons/obj/pda_alt.dmi',
 								PDA_SKIN_RUGGED = 'icons/obj/pda_rugged.dmi', PDA_SKIN_MODERN = 'icons/obj/pda_modern.dmi'))

-//Color Defines
-#define OOC_COLOR  "#002eb8"
-#define AOOC_COLOR "#b8002e"
-
 /////////////////////////////////////
 // atom.appearence_flags shortcuts //
 /////////////////////////////////////
--- a/code/controllers/subsystem/job.dm
+++ b/code/controllers/subsystem/job.dm
@@ -437,7 +437,7 @@ SUBSYSTEM_DEF(job)
 		if(job.custom_spawn_text)
 			to_chat(M, "<b>[job.custom_spawn_text]</b>")
 		if(CONFIG_GET(number/minimal_access_threshold))
-			to_chat(M, "<FONT color='blue'><B>As this station was initially staffed with a [CONFIG_GET(flag/jobs_have_minimal_access) ? "full crew, only your job's necessities" : "skeleton crew, additional access may"] have been added to your ID card.</B></font>")
+			to_chat(M, "<span class='notice'><B>As this station was initially staffed with a [CONFIG_GET(flag/jobs_have_minimal_access) ? "full crew, only your job's necessities" : "skeleton crew, additional access may"] have been added to your ID card.</B></span>")

 	if(job && H)
 		if(job.dresscodecompliant)// CIT CHANGE - dress code compliance
--- a/code/controllers/subsystem/ticker.dm
+++ b/code/controllers/subsystem/ticker.dm
@@ -229,7 +229,7 @@ SUBSYSTEM_DEF(ticker)
 			if(GLOB.secret_force_mode != "secret")
 				var/datum/game_mode/smode = config.pick_mode(GLOB.secret_force_mode)
 				if(!smode.can_start())
-					message_admins("\blue Unable to force secret [GLOB.secret_force_mode]. [smode.required_players] players and [smode.required_enemies] eligible antagonists needed.")
+					message_admins("<span class='notice'>Unable to force secret [GLOB.secret_force_mode]. [smode.required_players] players and [smode.required_enemies] eligible antagonists needed.</span>")
 				else
 					mode = smode

@@ -302,14 +302,14 @@ SUBSYSTEM_DEF(ticker)
 	round_start_time = world.time
 	SSdbcore.SetRoundStart()

-	to_chat(world, "<FONT color='blue'><B>Welcome to [station_name()], enjoy your stay!</B></FONT>")
+	to_chat(world, "<span class='notice'><B>Welcome to [station_name()], enjoy your stay!</B></span>")
 	SEND_SOUND(world, sound('sound/ai/welcome.ogg'))

 	current_state = GAME_STATE_PLAYING
 	Master.SetRunLevel(RUNLEVEL_GAME)

 	if(SSevents.holidays)
-		to_chat(world, "<font color='blue'>and...</font>")
+		to_chat(world, "<span class='notice'>and...</span>")
 		for(var/holidayname in SSevents.holidays)
 			var/datum/holiday/holiday = SSevents.holidays[holidayname]
 			to_chat(world, "<h4>[holiday.greet()]</h4>")
@@ -425,7 +425,7 @@ SUBSYSTEM_DEF(ticker)
 			m = pick(memetips)

 	if(m)
-		to_chat(world, "<font color='purple'><b>Tip of the round: </b>[html_encode(m)]</font>")
+		to_chat(world, "<span class='purple'><b>Tip of the round: </b>[html_encode(m)]</span>")

 /datum/controller/subsystem/ticker/proc/check_queue()
 	var/hpc = CONFIG_GET(number/hard_popcap)
--- a/code/datums/components/spooky.dm
+++ b/code/datums/components/spooky.dm
@@ -27,7 +27,7 @@
 		C.stuttering = 20
 		if((!istype(H.dna.species, /datum/species/skeleton)) && (!istype(H.dna.species, /datum/species/golem)) && (!istype(H.dna.species, /datum/species/android)) && (!istype(H.dna.species, /datum/species/jelly)))
 			C.adjustStaminaLoss(25) //boneless humanoids don't lose the will to live
-		to_chat(C, "<font color='red' size='4'><B>DOOT</B></span>")
+		to_chat(C, "<font color='red' size='4'><B>DOOT</B></font>")
 		spectral_change(H)

 	else //the sound will spook monkeys.
--- a/code/datums/datumvars.dm
+++ b/code/datums/datumvars.dm
@@ -1351,8 +1351,8 @@

 			if(amount != 0)
 				log_admin("[key_name(usr)] dealt [amount] amount of [Text] damage to [L] ")
-				var/msg = "<span class='notice'>[key_name(usr)] dealt [amount] amount of [Text] damage to [L] </span>"
-				message_admins(msg)
+				var/msg = "[key_name(usr)] dealt [amount] amount of [Text] damage to [L] </span>"
+				message_admins("<span class='notice'>[msg]</span>")
 				admin_ticket_log(L, msg)
 				vv_update_display(L, Text, "[newamt]")
 		else if(href_list["copyoutfit"])
--- a/code/game/mecha/equipment/tools/medical_tools.dm
+++ b/code/game/mecha/equipment/tools/medical_tools.dm
@@ -159,15 +159,15 @@
 			t1 = "*dead*"
 		else
 			t1 = "Unknown"
-	return {"<font color="[patient.health > 50 ? "blue" : "red"]"><b>Health:</b> [patient.stat > 1 ? "[t1]" : "[patient.health]% ([t1])"]</font><br />
-				<font color="[patient.bodytemperature > 50 ? "blue" : "red"]"><b>Core Temperature:</b> [patient.bodytemperature-T0C]&deg;C ([patient.bodytemperature*1.8-459.67]&deg;F)</font><br />
-				<font color="[patient.getBruteLoss() < 60 ? "blue" : "red"]"><b>Brute Damage:</b> [patient.getBruteLoss()]%</font><br />
-				<font color="[patient.getOxyLoss() < 60 ? "blue" : "red"]"><b>Respiratory Damage:</b> [patient.getOxyLoss()]%</font><br />
-				<font color="[patient.getToxLoss() < 60 ? "blue" : "red"]"><b>Toxin Content:</b> [patient.getToxLoss()]%</font><br />
-				<font color="[patient.getFireLoss() < 60 ? "blue" : "red"]"><b>Burn Severity:</b> [patient.getFireLoss()]%</font><br />
-				<font color="red">[patient.getCloneLoss() ? "Subject appears to have cellular damage." : ""]</font><br />
-				<font color="red">[patient.getBrainLoss() ? "Significant brain damage detected." : ""]</font><br />
-				<font color="red">[length(patient.get_traumas()) ? "Brain Traumas detected." : ""]</font><br />
+	return {"<font color="[patient.health > 50 ? "#3d5bc3" : "#c51e1e"]"><b>Health:</b> [patient.stat > 1 ? "[t1]" : "[patient.health]% ([t1])"]</font><br />
+				<font color="[patient.bodytemperature > 50 ? "#3d5bc3" : "#c51e1e"]"><b>Core Temperature:</b> [patient.bodytemperature-T0C]&deg;C ([patient.bodytemperature*1.8-459.67]&deg;F)</font><br />
+				<font color="[patient.getBruteLoss() < 60 ? "#3d5bc3" : "#c51e1e"]"><b>Brute Damage:</b> [patient.getBruteLoss()]%</font><br />
+				<font color="[patient.getOxyLoss() < 60 ? "#3d5bc3" : "#c51e1e"]"><b>Respiratory Damage:</b> [patient.getOxyLoss()]%</font><br />
+				<font color="[patient.getToxLoss() < 60 ? "#3d5bc3" : "#c51e1e"]"><b>Toxin Content:</b> [patient.getToxLoss()]%</font><br />
+				<font color="[patient.getFireLoss() < 60 ? "#3d5bc3" : "#c51e1e"]"><b>Burn Severity:</b> [patient.getFireLoss()]%</font><br />
+				<span class='danger'>[patient.getCloneLoss() ? "Subject appears to have cellular damage." : ""]</span><br />
+				<span class='danger'>[patient.getBrainLoss() ? "Significant brain damage detected." : ""]</span><br />
+				<span class='danger'>[length(patient.get_traumas()) ? "Brain Traumas detected." : ""]</span><br />
 				"}

 /obj/item/mecha_parts/mecha_equipment/medical/sleeper/proc/get_patient_reagents()
--- a/code/game/objects/items/devices/scanners.dm
+++ b/code/game/objects/items/devices/scanners.dm
@@ -621,7 +621,7 @@ SLIME SCANNER
 	to_chat(user, "Growth progress: [T.amount_grown]/[SLIME_EVOLUTION_THRESHOLD]")
 	if(T.effectmod)
 		to_chat(user, "<span class='notice'>Core mutation in progress: [T.effectmod]</span>")
-		to_chat(user, "<span_class = 'notice'>Progress in core mutation: [T.applied] / [SLIME_EXTRACT_CROSSING_REQUIRED]</span>")
+		to_chat(user, "<span class = 'notice'>Progress in core mutation: [T.applied] / [SLIME_EXTRACT_CROSSING_REQUIRED]</span>")
 	to_chat(user, "========================")


--- a/code/modules/admin/verbs/adminpm.dm
+++ b/code/modules/admin/verbs/adminpm.dm
@@ -6,7 +6,7 @@
 	set category = null
 	set name = "Admin PM Mob"
 	if(!holder)
-		to_chat(src, "<font color='red'>Error: Admin-PM-Context: Only administrators may use this command.</font>")
+		to_chat(src, "<span class='danger'>Error: Admin-PM-Context: Only administrators may use this command.</span>")
 		return
 	if( !ismob(M) || !M.client )
 		return
@@ -18,7 +18,7 @@
 	set category = "Admin"
 	set name = "Admin PM"
 	if(!holder)
-		to_chat(src, "<font color='red'>Error: Admin-PM-Panel: Only administrators may use this command.</font>")
+		to_chat(src, "<span class='danger'>Error: Admin-PM-Panel: Only administrators may use this command.</span>")
 		return
 	var/list/client/targets[0]
 	for(var/client/T)
@@ -37,7 +37,7 @@

 /client/proc/cmd_ahelp_reply(whom)
 	if(prefs.muted & MUTE_ADMINHELP)
-		to_chat(src, "<font color='red'>Error: Admin-PM: You are unable to use admin PM-s (muted).</font>")
+		to_chat(src, "<span class='danger'>Error: Admin-PM: You are unable to use admin PM-s (muted).</span>")
 		return
 	var/client/C
 	if(istext(whom))
@@ -48,7 +48,7 @@
 		C = whom
 	if(!C)
 		if(holder)
-			to_chat(src, "<font color='red'>Error: Admin-PM: Client not found.</font>")
+			to_chat(src, "<span class='danger'>Error: Admin-PM: Client not found.</span>")
 		return

 	var/datum/admin_help/AH = C.current_ticket
@@ -65,12 +65,12 @@
 //Fetching a message if needed. src is the sender and C is the target client
 /client/proc/cmd_admin_pm(whom, msg)
 	if(prefs.muted & MUTE_ADMINHELP)
-		to_chat(src, "<font color='red'>Error: Admin-PM: You are unable to use admin PM-s (muted).</font>")
+		to_chat(src, "<span class='danger'>Error: Admin-PM: You are unable to use admin PM-s (muted).</span>")
 		return

 	if(!holder && !current_ticket)	//no ticket? https://www.youtube.com/watch?v=iHSPf6x1Fdo
-		to_chat(src, "<font color='red'>You can no longer reply to this ticket, please open another one by using the Adminhelp verb if need be.</font>")
-		to_chat(src, "<font color='blue'>Message: [msg]</font>")
+		to_chat(src, "<span class='danger'>You can no longer reply to this ticket, please open another one by using the Adminhelp verb if need be.</span>")
+		to_chat(src, "<span class='notice'>Message: [msg]</span>")
 		return

 	var/client/recipient
@@ -95,14 +95,14 @@
 		if(!msg)
 			return
 		if(holder)
-			to_chat(src, "<font color='red'>Error: Use the admin IRC channel, nerd.</font>")
+			to_chat(src, "<span class='danger'>Error: Use the admin IRC channel, nerd.</span>")
 			return


 	else
 		if(!recipient)
 			if(holder)
-				to_chat(src, "<font color='red'>Error: Admin-PM: Client not found.</font>")
+				to_chat(src, "<span class='danger'>Error: Admin-PM: Client not found.</span>")
 				if(msg)
 					to_chat(src, msg)
 				return
@@ -118,12 +118,12 @@
 				return

 			if(prefs.muted & MUTE_ADMINHELP)
-				to_chat(src, "<font color='red'>Error: Admin-PM: You are unable to use admin PM-s (muted).</font>")
+				to_chat(src, "<span class='danger'>Error: Admin-PM: You are unable to use admin PM-s (muted).</span>")
 				return

 			if(!recipient)
 				if(holder)
-					to_chat(src, "<font color='red'>Error: Admin-PM: Client not found.</font>")
+					to_chat(src, "<span class='danger'>Error: Admin-PM: Client not found.</span>")
 				else
 					current_ticket.MessageNoRecipient(msg)
 				return
@@ -145,15 +145,15 @@
 	var/keywordparsedmsg = keywords_lookup(msg)

 	if(irc)
-		to_chat(src, "<font color='blue'>PM to-<b>Admins</b>: <span class='linkify'>[rawmsg]</span></font>")
+		to_chat(src, "<span class='notice'>PM to-<b>Admins</b>: <span class='linkify'>[rawmsg]</span></span>")
 		var/datum/admin_help/AH = admin_ticket_log(src, "<font color='red'>Reply PM from-<b>[key_name(src, TRUE, TRUE)] to <i>IRC</i>: [keywordparsedmsg]</font>")
 		ircreplyamount--
 		send2irc("[AH ? "#[AH.id] " : ""]Reply: [ckey]", rawmsg)
 	else
 		if(recipient.holder)
 			if(holder)	//both are admins
-				to_chat(recipient, "<font color='red'>Admin PM from-<b>[key_name(src, recipient, 1)]</b>: <span class='linkify'>[keywordparsedmsg]</span></font>")
-				to_chat(src, "<font color='blue'>Admin PM to-<b>[key_name(recipient, src, 1)]</b>: <span class='linkify'>[keywordparsedmsg]</span></font>")
+				to_chat(recipient, "<span class='danger'>Admin PM from-<b>[key_name(src, recipient, 1)]</b>: <span class='linkify'>[keywordparsedmsg]</span></span>")
+				to_chat(src, "<span class='notice'>Admin PM to-<b>[key_name(recipient, src, 1)]</b>: <span class='linkify'>[keywordparsedmsg]</span></span>")

 				//omg this is dumb, just fill in both their tickets
 				var/interaction_message = "<font color='purple'>PM from-<b>[key_name(src, recipient, 1)]</b> to-<b>[key_name(recipient, src, 1)]</b>: [keywordparsedmsg]</font>"
@@ -162,10 +162,10 @@
 					admin_ticket_log(recipient, interaction_message)

 			else		//recipient is an admin but sender is not
-				var/replymsg = "<font color='red'>Reply PM from-<b>[key_name(src, recipient, 1)]</b>: <span class='linkify'>[keywordparsedmsg]</span></font>"
-				admin_ticket_log(src, replymsg)
-				to_chat(recipient, replymsg)
-				to_chat(src, "<font color='blue'>PM to-<b>Admins</b>: <span class='linkify'>[msg]</span></font>")
+				var/replymsg = "Reply PM from-<b>[key_name(src, recipient, 1)]</b>: <span class='linkify'>[keywordparsedmsg]</span>"
+				admin_ticket_log(src, "<font color='red'>[replymsg]</font>")
+				to_chat(recipient, "<span class='danger'>[replymsg]</span>")
+				to_chat(src, "<span class='notice'>PM to-<b>Admins</b>: <span class='linkify'>[msg]</span></span>")

 			//play the receiving admin the adminhelp sound (if they have them enabled)
 			if(recipient.prefs.toggles & SOUND_ADMINHELP)
@@ -177,11 +177,11 @@
 					new /datum/admin_help(msg, recipient, TRUE)

 				to_chat(recipient, "<font color='red' size='4'><b>-- Administrator private message --</b></font>")
-				to_chat(recipient, "<font color='red'>Admin PM from-<b>[key_name(src, recipient, 0)]</b>: <span class='linkify'>[msg]</span></font>")
-				to_chat(recipient, "<font color='red'><i>Click on the administrator's name to reply.</i></font>")
-				to_chat(src, "<font color='blue'>Admin PM to-<b>[key_name(recipient, src, 1)]</b>: <span class='linkify'>[msg]</span></font>")
+				to_chat(recipient, "<span class='danger'>Admin PM from-<b>[key_name(src, recipient, 0)]</b>: <span class='linkify'>[msg]</span></span>")
+				to_chat(recipient, "<span class='danger'><i>Click on the administrator's name to reply.</i></span>")
+				to_chat(src, "<span class='notice'>Admin PM to-<b>[key_name(recipient, src, 1)]</b>: <span class='linkify'>[msg]</span></span>")

-				admin_ticket_log(recipient, "<font color='blue'>PM From [key_name_admin(src)]: [keywordparsedmsg]</font>")
+				admin_ticket_log(recipient, "<font color='purple'>PM From [key_name_admin(src)]: [keywordparsedmsg]</font>")

 				//always play non-admin recipients the adminhelp sound
 				SEND_SOUND(recipient, sound('sound/effects/adminhelp.ogg'))
@@ -200,20 +200,20 @@
 						return

 			else		//neither are admins
-				to_chat(src, "<font color='red'>Error: Admin-PM: Non-admin to non-admin PM communication is forbidden.</font>")
+				to_chat(src, "<span class='danger'>Error: Admin-PM: Non-admin to non-admin PM communication is forbidden.</span>")
 				return

 	if(irc)
 		log_admin_private("PM: [key_name(src)]->IRC: [rawmsg]")
 		for(var/client/X in GLOB.admins)
-			to_chat(X, "<font color='blue'><B>PM: [key_name(src, X, 0)]-&gt;IRC:</B> [keywordparsedmsg]</font>")
+			to_chat(X, "<span class='notice'><B>PM: [key_name(src, X, 0)]-&gt;IRC:</B> [keywordparsedmsg]</span>")
 	else
 		window_flash(recipient, ignorepref = TRUE)
 		log_admin_private("PM: [key_name(src)]->[key_name(recipient)]: [rawmsg]")
 		//we don't use message_admins here because the sender/receiver might get it too
 		for(var/client/X in GLOB.admins)
 			if(X.key!=key && X.key!=recipient.key)	//check client/X is an admin and isn't the sender or recipient
-				to_chat(X, "<font color='blue'><B>PM: [key_name(src, X, 0)]-&gt;[key_name(recipient, X, 0)]:</B> [keywordparsedmsg]</font>" )
+				to_chat(X, "<span class='notice'><B>PM: [key_name(src, X, 0)]-&gt;[key_name(recipient, X, 0)]:</B> [keywordparsedmsg]</span>" )



@@ -296,10 +296,10 @@
 	msg = emoji_parse(msg)

 	to_chat(C, "<font color='red' size='4'><b>-- Administrator private message --</b></font>")
-	to_chat(C, "<font color='red'>Admin PM from-<b><a href='?priv_msg=[stealthkey]'>[adminname]</A></b>: [msg]</font>")
-	to_chat(C, "<font color='red'><i>Click on the administrator's name to reply.</i></font>")
+	to_chat(C, "<span class='adminsay'>Admin PM from-<b><a href='?priv_msg=[stealthkey]'>[adminname]</A></b>: [msg]</span>")
+	to_chat(C, "<span class='adminsay'><i>Click on the administrator's name to reply.</i></span>")

-	admin_ticket_log(C, "<font color='blue'>PM From [irc_tagged]: [msg]</font>")
+	admin_ticket_log(C, "<font color='purple'>PM From [irc_tagged]: [msg]</font>")

 	window_flash(C, ignorepref = TRUE)
 	//always play non-admin recipients the adminhelp sound
--- a/code/modules/admin/verbs/randomverbs.dm
+++ b/code/modules/admin/verbs/randomverbs.dm
@@ -298,7 +298,7 @@
 		if(candidates.len)
 			ckey = input("Pick the player you want to respawn as a xeno.", "Suitable Candidates") as null|anything in candidates
 		else
-			to_chat(usr, "<font color='red'>Error: create_xeno(): no suitable candidates.</font>")
+			to_chat(usr, "<span class='danger'>Error: create_xeno(): no suitable candidates.</span>")
 	if(!istext(ckey))
 		return 0

--- a/code/modules/client/darkmode.dm
+++ b/code/modules/client/darkmode.dm
@@ -0,0 +1,117 @@
+//Darkmode preference by Kmc2000//
+
+/*
+This lets you switch chat themes by using winset and CSS loading, you must relog to see this change (or rebuild your browseroutput datum)
+Things to note:
+If you change ANYTHING in interface/skin.dmf you need to change it here:
+Format:
+winset(src, "window as appears in skin.dmf after elem", "var to change = currentvalue;var to change = desired value")
+How this works:
+I've added a function to browseroutput.js which registers a cookie for darkmode and swaps the chat accordingly. You can find the button to do this under the "cog" icon next to the ping button (top right of chat)
+This then swaps the window theme automatically
+Thanks to spacemaniac and mcdonald for help with the JS side of this.
+*/
+
+/client/proc/force_white_theme() //There's no way round it. We're essentially changing the skin by hand. It's painful but it works, and is the way Lummox suggested.
+	//Main windows
+	winset(src, "infowindow", "background-color = [COLOR_DARKMODE_DARKBACKGROUND];background-color = [COLOR_WHITEMODE_DARKBACKGROUND]")
+	winset(src, "infowindow", "text-color = [COLOR_DARKMODE_TEXT];text-color = [COLOR_WHITEMODE_TEXT]")
+	winset(src, "info", "background-color = [COLOR_DARKMODE_BACKGROUND];background-color = [COLOR_WHITEMODE_BACKGROUND]")
+	winset(src, "info", "text-color = [COLOR_DARKMODE_TEXT];text-color = [COLOR_WHITEMODE_TEXT]")
+	winset(src, "browseroutput", "background-color = [COLOR_DARKMODE_BACKGROUND];background-color = [COLOR_DARKMODE_INFO_BUTTONS_BG]")
+	winset(src, "browseroutput", "text-color = [COLOR_DARKMODE_TEXT];text-color = [COLOR_WHITEMODE_TEXT]")
+	winset(src, "outputwindow", "background-color = [COLOR_DARKMODE_BACKGROUND];background-color = [COLOR_WHITEMODE_DARKBACKGROUND]")
+	winset(src, "outputwindow", "text-color = [COLOR_DARKMODE_TEXT];text-color = [COLOR_WHITEMODE_TEXT]")
+	winset(src, "mainwindow", "background-color = [COLOR_DARKMODE_DARKBACKGROUND];background-color = [COLOR_WHITEMODE_DARKBACKGROUND]")
+	winset(src, "split", "background-color = [COLOR_DARKMODE_DARKBACKGROUND];background-color = [COLOR_WHITEMODE_BACKGROUND]")
+	//Buttons
+	winset(src, "changelog", "background-color = [COLOR_DARKMODE_INFO_BUTTONS_BG];background-color = [COLOR_WHITEMODE_INFO_BUTTONS_BG]")
+	winset(src, "changelog", "text-color = [COLOR_DARKMODE_TEXT];text-color = [COLOR_WHITEMODE_TEXT]")
+	winset(src, "rules", "background-color = [COLOR_DARKMODE_INFO_BUTTONS_BG];background-color = [COLOR_WHITEMODE_INFO_BUTTONS_BG]")
+	winset(src, "rules", "text-color = [COLOR_DARKMODE_TEXT];text-color = [COLOR_WHITEMODE_TEXT]")
+	winset(src, "wiki", "background-color = [COLOR_DARKMODE_INFO_BUTTONS_BG];background-color = [COLOR_WHITEMODE_INFO_BUTTONS_BG]")
+	winset(src, "wiki", "text-color = [COLOR_DARKMODE_TEXT];text-color = [COLOR_WHITEMODE_TEXT]")
+	winset(src, "forum", "background-color = [COLOR_DARKMODE_INFO_BUTTONS_BG];background-color = [COLOR_WHITEMODE_INFO_BUTTONS_BG]")
+	winset(src, "forum", "text-color = [COLOR_DARKMODE_TEXT];text-color = [COLOR_WHITEMODE_TEXT]")
+	winset(src, "github", "background-color = [COLOR_DARKMODE_INFO_BUTTONS_BG];background-color = [COLOR_WHITEMODE_INFO_BUTTONS_BG]")
+	winset(src, "github", "text-color = [COLOR_DARKMODE_TEXT];text-color = [COLOR_WHITEMODE_TEXT]")
+	winset(src, "report-issue", "background-color = [COLOR_DARKMODE_ISSUE_BUTTON_BG];background-color = [COLOR_WHITEMODE_ISSUE_BUTTON_BG]")
+	winset(src, "report-issue", "text-color = [COLOR_DARKMODE_TEXT];text-color = [COLOR_WHITEMODE_TEXT]")
+	//Status and verb tabs
+	winset(src, "output", "background-color = [COLOR_DARKMODE_DARKBACKGROUND];background-color = [COLOR_WHITEMODE_BACKGROUND]")
+	winset(src, "output", "text-color = [COLOR_DARKMODE_TEXT];text-color = [COLOR_WHITEMODE_TEXT]")
+	winset(src, "statwindow", "background-color = [COLOR_DARKMODE_BACKGROUND];background-color = [COLOR_WHITEMODE_DARKBACKGROUND]")
+	winset(src, "statwindow", "text-color = #eaeaea;text-color = [COLOR_WHITEMODE_TEXT]")
+	winset(src, "stat", "background-color = [COLOR_DARKMODE_DARKBACKGROUND];background-color = [COLOR_WHITEMODE_BACKGROUND]")
+	winset(src, "stat", "tab-background-color = [COLOR_DARKMODE_BACKGROUND];tab-background-color = [COLOR_WHITEMODE_DARKBACKGROUND]")
+	winset(src, "stat", "text-color = [COLOR_DARKMODE_TEXT];text-color = [COLOR_WHITEMODE_TEXT]")
+	winset(src, "stat", "tab-text-color = [COLOR_DARKMODE_TEXT];tab-text-color = [COLOR_WHITEMODE_TEXT]")
+	winset(src, "stat", "prefix-color = [COLOR_DARKMODE_TEXT];prefix-color = [COLOR_WHITEMODE_TEXT]")
+	winset(src, "stat", "suffix-color = [COLOR_DARKMODE_TEXT];suffix-color = [COLOR_WHITEMODE_TEXT]")
+	//Etc.
+	winset(src, "say", "background-color = [COLOR_DARKMODE_DARKBACKGROUND];background-color = [COLOR_WHITEMODE_DARKBACKGROUND]")
+	winset(src, "say", "text-color = [COLOR_DARKMODE_TEXT];text-color = [COLOR_WHITEMODE_TEXT]")
+	winset(src, "asset_cache_browser", "background-color = [COLOR_DARKMODE_BACKGROUND];background-color = [COLOR_WHITEMODE_DARKBACKGROUND]")
+	winset(src, "asset_cache_browser", "text-color = [COLOR_DARKMODE_TEXT];text-color = [COLOR_WHITEMODE_TEXT]")
+	winset(src, "tooltip", "background-color = [COLOR_DARKMODE_BACKGROUND];background-color = [COLOR_WHITEMODE_BACKGROUND]")
+	winset(src, "tooltip", "text-color = [COLOR_DARKMODE_TEXT];text-color = [COLOR_WHITEMODE_TEXT]")
+
+/client/proc/force_dark_theme() //Inversely, if theyre using white theme and want to swap to the superior dark theme, let's get WINSET() ing
+	//Main windows
+	winset(src, "infowindow", "background-color = [COLOR_WHITEMODE_DARKBACKGROUND];background-color = [COLOR_DARKMODE_DARKBACKGROUND]")
+	winset(src, "infowindow", "text-color = [COLOR_WHITEMODE_TEXT];text-color = [COLOR_DARKMODE_TEXT]")
+	winset(src, "info", "background-color = [COLOR_WHITEMODE_BACKGROUND];background-color = [COLOR_DARKMODE_BACKGROUND]")
+	winset(src, "info", "text-color = [COLOR_WHITEMODE_TEXT];text-color = [COLOR_DARKMODE_TEXT]")
+	winset(src, "browseroutput", "background-color = [COLOR_WHITEMODE_BACKGROUND];background-color = [COLOR_DARKMODE_BACKGROUND]")
+	winset(src, "browseroutput", "text-color = [COLOR_WHITEMODE_TEXT];text-color = [COLOR_DARKMODE_TEXT]")
+	winset(src, "outputwindow", "background-color = [COLOR_WHITEMODE_DARKBACKGROUND];background-color = [COLOR_DARKMODE_BACKGROUND]")
+	winset(src, "outputwindow", "text-color = [COLOR_WHITEMODE_TEXT];text-color = [COLOR_DARKMODE_TEXT]")
+	winset(src, "mainwindow", "background-color = [COLOR_WHITEMODE_DARKBACKGROUND];background-color = [COLOR_DARKMODE_DARKBACKGROUND]")
+	winset(src, "split", "background-color = [COLOR_WHITEMODE_BACKGROUND];background-color = [COLOR_DARKMODE_BACKGROUND]")
+	//Buttons
+	winset(src, "changelog", "background-color = [COLOR_WHITEMODE_INFO_BUTTONS_BG];background-color = [COLOR_DARKMODE_INFO_BUTTONS_BG]")
+	winset(src, "changelog", "text-color = [COLOR_WHITEMODE_TEXT];text-color = [COLOR_DARKMODE_TEXT]")
+	winset(src, "rules", "background-color = [COLOR_WHITEMODE_INFO_BUTTONS_BG];background-color = [COLOR_DARKMODE_INFO_BUTTONS_BG]")
+	winset(src, "rules", "text-color = [COLOR_WHITEMODE_TEXT];text-color = [COLOR_DARKMODE_TEXT]")
+	winset(src, "wiki", "background-color = [COLOR_WHITEMODE_INFO_BUTTONS_BG];background-color = [COLOR_DARKMODE_INFO_BUTTONS_BG]")
+	winset(src, "wiki", "text-color = [COLOR_WHITEMODE_TEXT];text-color = [COLOR_DARKMODE_TEXT]")
+	winset(src, "forum", "background-color = [COLOR_WHITEMODE_INFO_BUTTONS_BG];background-color = [COLOR_DARKMODE_INFO_BUTTONS_BG]")
+	winset(src, "forum", "text-color = [COLOR_WHITEMODE_TEXT];text-color = [COLOR_DARKMODE_TEXT]")
+	winset(src, "github", "background-color = [COLOR_WHITEMODE_INFO_BUTTONS_BG];background-color = [COLOR_DARKMODE_INFO_BUTTONS_BG]")
+	winset(src, "github", "text-color = [COLOR_WHITEMODE_TEXT];text-color = [COLOR_DARKMODE_TEXT]")
+	winset(src, "report-issue", "background-color = [COLOR_WHITEMODE_ISSUE_BUTTON_BG];background-color = [COLOR_DARKMODE_ISSUE_BUTTON_BG]")
+	winset(src, "report-issue", "text-color = [COLOR_WHITEMODE_TEXT];text-color = [COLOR_DARKMODE_TEXT]")
+	//Status and verb tabs
+	winset(src, "output", "background-color = [COLOR_WHITEMODE_DARKBACKGROUND];background-color = [COLOR_DARKMODE_BACKGROUND]")
+	winset(src, "output", "text-color = [COLOR_WHITEMODE_TEXT];text-color = [COLOR_DARKMODE_TEXT]")
+	winset(src, "statwindow", "background-color = [COLOR_WHITEMODE_DARKBACKGROUND];background-color = [COLOR_DARKMODE_DARKBACKGROUND]")
+	winset(src, "statwindow", "text-color = [COLOR_WHITEMODE_TEXT];text-color = [COLOR_DARKMODE_TEXT]")
+	winset(src, "stat", "background-color = [COLOR_WHITEMODE_BACKGROUND];background-color = [COLOR_DARKMODE_DARKBACKGROUND]")
+	winset(src, "stat", "tab-background-color = [COLOR_WHITEMODE_DARKBACKGROUND];tab-background-color = [COLOR_DARKMODE_BACKGROUND]")
+	winset(src, "stat", "text-color = [COLOR_WHITEMODE_TEXT];text-color = [COLOR_DARKMODE_TEXT]")
+	winset(src, "stat", "tab-text-color = [COLOR_WHITEMODE_TEXT];tab-text-color = [COLOR_DARKMODE_TEXT]")
+	winset(src, "stat", "prefix-color = [COLOR_WHITEMODE_TEXT];prefix-color = [COLOR_DARKMODE_TEXT]")
+	winset(src, "stat", "suffix-color = [COLOR_WHITEMODE_TEXT];suffix-color = [COLOR_DARKMODE_TEXT]")
+	//Etc.
+	winset(src, "say", "background-color = [COLOR_WHITEMODE_DARKBACKGROUND];background-color = [COLOR_DARKMODE_BACKGROUND]")
+	winset(src, "say", "text-color = [COLOR_WHITEMODE_TEXT];text-color = [COLOR_DARKMODE_TEXT]")
+	winset(src, "asset_cache_browser", "background-color = [COLOR_WHITEMODE_DARKBACKGROUND];background-color = [COLOR_DARKMODE_BACKGROUND]")
+	winset(src, "asset_cache_browser", "text-color = [COLOR_WHITEMODE_TEXT];text-color = [COLOR_DARKMODE_TEXT]")
+	winset(src, "tooltip", "background-color = [COLOR_WHITEMODE_BACKGROUND];background-color = [COLOR_DARKMODE_BACKGROUND]")
+	winset(src, "tooltip", "text-color = [COLOR_WHITEMODE_TEXT];text-color = [COLOR_DARKMODE_TEXT]")
+
+
+/datum/asset/simple/goonchat
+	verify = FALSE
+	assets = list(
+		"json2.min.js"             = 'code/modules/goonchat/browserassets/js/json2.min.js',
+		"errorHandler.js"          = 'code/modules/goonchat/browserassets/js/errorHandler.js',
+		"browserOutput.js"         = 'code/modules/goonchat/browserassets/js/browserOutput.js',
+		"fontawesome-webfont.eot"  = 'tgui/assets/fonts/fontawesome-webfont.eot',
+		"fontawesome-webfont.svg"  = 'tgui/assets/fonts/fontawesome-webfont.svg',
+		"fontawesome-webfont.ttf"  = 'tgui/assets/fonts/fontawesome-webfont.ttf',
+		"fontawesome-webfont.woff" = 'tgui/assets/fonts/fontawesome-webfont.woff',
+		"font-awesome.css"	       = 'code/modules/goonchat/browserassets/css/font-awesome.css',
+		"browserOutput.css"	       = 'code/modules/goonchat/browserassets/css/browserOutput.css',
+		"browserOutput_white.css"  = 'code/modules/goonchat/browserassets/css/browserOutput_white.css',
+	)
--- a/code/modules/client/preferences.dm
+++ b/code/modules/client/preferences.dm
@@ -29,7 +29,8 @@ GLOBAL_LIST_EMPTY(preferences_datums)

 	//game-preferences
 	var/lastchangelog = ""				//Saved changlog filesize to detect if there was a change
-	var/ooccolor = null
+	var/ooccolor = "#c43b23"
+	var/aooccolor = "#ce254f"
 	var/enable_tips = TRUE
 	var/tip_delay = 500 //tip delay in milliseconds

@@ -774,6 +775,8 @@ GLOBAL_LIST_EMPTY(preferences_datums)
 					dat += "<b>BYOND Membership Publicity:</b> <a href='?_src_=prefs;preference=publicity'>[(toggles & MEMBER_PUBLIC) ? "Public" : "Hidden"]</a><br>"
 				if(unlock_content || check_rights_for(user.client, R_ADMIN))
 					dat += "<b>OOC Color:</b> <span style='border: 1px solid #161616; background-color: [ooccolor ? ooccolor : GLOB.normal_ooc_colour];'>&nbsp;&nbsp;&nbsp;</span> <a href='?_src_=prefs;preference=ooccolor;task=input'>Change</a><br>"
+					dat += "<b>Antag OOC Color:</b> <span style='border: 1px solid #161616; background-color: [aooccolor ? aooccolor : GLOB.normal_aooc_colour];'>&nbsp;&nbsp;&nbsp;</span> <a href='?_src_=prefs;preference=aooccolor;task=input'>Change</a><br>"
+
 			dat += "</td>"
 			if(user.client.holder)
 				dat +="<td width='300px' height='300px' valign='top'>"
@@ -1951,6 +1954,11 @@ GLOBAL_LIST_EMPTY(preferences_datums)
 					if(new_ooccolor)
 						ooccolor = new_ooccolor

+				if("aooccolor")
+					var/new_aooccolor = input(user, "Choose your Antag OOC colour:", "Game Preference",ooccolor) as color|null
+					if(new_aooccolor)
+						aooccolor = new_aooccolor
+
 				if("bag")
 					var/new_backbag = input(user, "Choose your character's style of bag:", "Character Preference")  as null|anything in GLOB.backbaglist
 					if(new_backbag)
--- a/code/modules/client/verbs/aooc.dm
+++ b/code/modules/client/verbs/aooc.dm
@@ -1,3 +1,6 @@
+GLOBAL_VAR_INIT(AOOC_COLOR, null)//If this is null, use the CSS for OOC. Otherwise, use a custom colour.
+GLOBAL_VAR_INIT(normal_aooc_colour, "#ce254f")
+
 /client/verb/aooc(msg as text)
 	set name = "AOOC"
 	set desc = "An OOC channel exclusive to antagonists."
@@ -50,7 +53,7 @@
 	var/keyname = key
 	if(prefs.unlock_content)
 		if(prefs.toggles & MEMBER_PUBLIC)
-			keyname = "<font color='[prefs.ooccolor ? prefs.ooccolor : GLOB.antag_ooc_colour]'>[icon2html('icons/member_content.dmi', world, "blag")][keyname]</font>"
+			keyname = "<font color='[prefs.aooccolor ? prefs.aooccolor : GLOB.normal_aooc_colour]'>[icon2html('icons/member_content.dmi', world, "blag")][keyname]</font>"
 	//The linkify span classes and linkify=TRUE below make ooc text get clickable chat href links if you pass in something resembling a url

 	var/antaglisting = list()
@@ -74,23 +77,27 @@
 				else
 					to_chat(C, "<span class='adminobserverooc'><span class='prefix'>Antag OOC:</span> <EM>[keyname][holder.fakekey ? "/([holder.fakekey])" : ""]:</EM> <span class='message linkify'>[msg]</span></span>")
 			else
-				to_chat(C, "<font color='[GLOB.antag_ooc_colour]'><span class='ooc'><span class='prefix'>Antag OOC:</span> <EM>[holder.fakekey ? holder.fakekey : key]:</EM> <span class='message linkify'>[msg]</span></span></font>")
+				if(GLOB.AOOC_COLOR)
+					to_chat(C, "<font color='[GLOB.AOOC_COLOR]'><b><span class='prefix'>Antag OOC:</span> <EM>[holder.fakekey ? holder.fakekey : key]:</EM> <span class='message linkify'>[msg]</span></b></font>")
+				else
+					to_chat(C, "<span class='antagooc'><span class='prefix'>Antag OOC:</span> <EM>[holder.fakekey ? holder.fakekey : key]:</EM> <span class='message linkify'>[msg]</span></span>")
 		else if(!(key in C.prefs.ignoring))
-			to_chat(C, "<font color='[GLOB.antag_ooc_colour]'><span class='ooc'><span class='prefix'>Antag OOC:</span> <EM>[keyname]:</EM> <span class='message linkify'>[msg]</span></span></font>")
-
-GLOBAL_VAR_INIT(antag_ooc_colour, AOOC_COLOR)
+			if(GLOB.AOOC_COLOR)
+				to_chat(C, "<font color='[GLOB.AOOC_COLOR]'><b><span class='prefix'>Antag OOC:</span> <EM>[keyname]:</EM> <span class='message linkify'>[msg]</span></b></font>")
+			else
+				to_chat(C, "<span class='antagooc'><span class='prefix'>Antag OOC:</span> <EM>[keyname]:</EM> <span class='message linkify'>[msg]</span></span>")

 /client/proc/set_aooc(newColor as color)
 	set name = "Set Antag OOC Color"
 	set desc = "Modifies antag OOC Color"
 	set category = "Fun"
-	GLOB.antag_ooc_colour = sanitize_ooccolor(newColor)
+	GLOB.AOOC_COLOR = sanitize_ooccolor(newColor)

 /client/proc/reset_aooc()
 	set name = "Reset Antag OOC Color"
 	set desc = "Returns antag OOC Color to default"
 	set category = "Fun"
-	GLOB.antag_ooc_colour = AOOC_COLOR
+	GLOB.AOOC_COLOR = null

 /proc/toggle_aooc(toggle = null)
 	if(toggle != null) //if we're specifically en/disabling ooc
--- a/code/modules/client/verbs/ooc.dm
+++ b/code/modules/client/verbs/ooc.dm
@@ -1,3 +1,6 @@
+GLOBAL_VAR_INIT(OOC_COLOR, null)//If this is null, use the CSS for OOC. Otherwise, use a custom colour.
+GLOBAL_VAR_INIT(normal_ooc_colour, "#002eb8")
+
 /client/verb/ooc(msg as text)
 	set name = "OOC" //Gave this shit a shorter name so you only have to time out "ooc" rather than "ooc message" to use it --NeoFite
 	set category = "OOC"
@@ -66,9 +69,15 @@
 					else
 						to_chat(C, "<span class='adminobserverooc'><span class='prefix'>OOC:</span> <EM>[keyname][holder.fakekey ? "/([holder.fakekey])" : ""]:</EM> <span class='message linkify'>[msg]</span></span>")
 				else
-					to_chat(C, "<font color='[GLOB.normal_ooc_colour]'><span class='ooc'><span class='prefix'>OOC:</span> <EM>[holder.fakekey ? holder.fakekey : key]:</EM> <span class='message linkify'>[msg]</span></span></font>")
+					if(GLOB.OOC_COLOR)
+						to_chat(C, "<font color='[GLOB.OOC_COLOR]'><b><span class='prefix'>OOC:</span> <EM>[holder.fakekey ? holder.fakekey : key]:</EM> <span class='message linkify'>[msg]</span></b></font>")
+					else
+						to_chat(C, "<span class='ooc'><span class='prefix'>OOC:</span> <EM>[holder.fakekey ? holder.fakekey : key]:</EM> <span class='message linkify'>[msg]</span></span>")
 			else if(!(key in C.prefs.ignoring))
-				to_chat(C, "<font color='[GLOB.normal_ooc_colour]'><span class='ooc'><span class='prefix'>OOC:</span> <EM>[keyname]:</EM> <span class='message linkify'>[msg]</span></span></font>")
+				if(GLOB.OOC_COLOR)
+					to_chat(C, "<font color='[GLOB.OOC_COLOR]'><b><span class='prefix'>OOC:</span> <EM>[keyname]:</EM> <span class='message linkify'>[msg]</span></b></font>")
+				else
+					to_chat(C, "<span class='ooc'><span class='prefix'>OOC:</span> <EM>[keyname]:</EM> <span class='message linkify'>[msg]</span></span>")

 /proc/toggle_ooc(toggle = null)
 	if(toggle != null) //if we're specifically en/disabling ooc
@@ -99,19 +108,17 @@
 	else
 		GLOB.dooc_allowed = !GLOB.dooc_allowed

-GLOBAL_VAR_INIT(normal_ooc_colour, OOC_COLOR)
-
 /client/proc/set_ooc(newColor as color)
 	set name = "Set Player OOC Color"
 	set desc = "Modifies player OOC Color"
 	set category = "Fun"
-	GLOB.normal_ooc_colour = sanitize_ooccolor(newColor)
+	GLOB.OOC_COLOR = sanitize_ooccolor(newColor)

 /client/proc/reset_ooc()
 	set name = "Reset Player OOC Color"
 	set desc = "Returns player OOC Color to default"
 	set category = "Fun"
-	GLOB.normal_ooc_colour = OOC_COLOR
+	GLOB.OOC_COLOR = null

 /client/verb/colorooc()
 	set name = "Set Your OOC Color"
--- a/code/modules/goonchat/browserOutput.dm
+++ b/code/modules/goonchat/browserOutput.dm
@@ -82,6 +82,12 @@ GLOBAL_DATUM_INIT(iconCache, /savefile, new("tmp/iconCache.sav")) //Cache of ico
 		if("setMusicVolume")
 			data = setMusicVolume(arglist(params))

+		if("swaptodarkmode")
+			swaptodarkmode()
+
+		if("swaptolightmode")
+			swaptolightmode()
+
 	if(data)
 		ehjax_send(data = data)

@@ -240,3 +246,10 @@ GLOBAL_DATUM_INIT(iconCache, /savefile, new("tmp/iconCache.sav")) //Cache of ico

 		// url_encode it TWICE, this way any UTF-8 characters are able to be decoded by the Javascript.
 		C << output(url_encode(url_encode(message)), "browseroutput:output")
+
+
+/datum/chatOutput/proc/swaptolightmode() //Dark mode light mode stuff. Yell at KMC if this breaks! (See darkmode.dm for documentation)
+	owner.force_white_theme()
+
+/datum/chatOutput/proc/swaptodarkmode()
+	owner.force_dark_theme()
--- a/code/modules/goonchat/browserassets/css/browserOutput.css
+++ b/code/modules/goonchat/browserassets/css/browserOutput.css
@@ -7,16 +7,20 @@ html, body {
 	padding: 0;
 	margin: 0;
 	height: 100%;
-	color: #000000;
+	color: #f0f0f0;
 }
 body {
-	background: #E0E0E0; /*CIT CHANGE - darkens chatbox a lil*/
+	background: #171717;
    font-family: Verdana, sans-serif;
    font-size: 9pt;
+	font-color: #f0f0f0;
    line-height: 1.2;
 	overflow-x: hidden;
 	overflow-y: scroll;
-	word-wrap: break-word;
+	word-wrap: break-word;		
+	scrollbar-face-color:#1A1A1A;
+	scrollbar-track-color:#171717;
+	scrollbar-highlight-color:#171717;
 }

 em {
@@ -56,9 +60,9 @@ img.icon {
 	border-radius: 10px;
 }

-a {color: #0000ff;}
-a.visited {color: #ff00ff;}
-a:visited {color: #ff00ff;}
+a {color: #397ea5;}
+a.visited {color: #7c00e6;}
+a:visited {color: #7c00e6;}
 a.popt {text-decoration: none;}

 /*****************************************
@@ -89,21 +93,21 @@ a.popt {text-decoration: none;}
 	bottom: 0;
 	right: 0;
 	padding: 8px;
-	background: #ddd;
+	background: #202020;
 	text-decoration: none;
    font-variant: small-caps;
    font-size: 1.1em;
    font-weight: bold;
-	color: #333;
+	color: #a4bad6;
 }
-#newMessages:hover {background: #ccc;}
+#newMessages:hover {background: #171717;}
 #newMessages i {vertical-align: middle; padding-left: 3px;}
 #ping {
 	position: fixed;
 	top: 0;
-	right: 80px;
+	right: 115px;
 	width: 45px;
-	background: #ddd;
+	background: #202020;
 	height: 30px;
 	padding: 8px 0 2px 0;
 }
@@ -120,19 +124,19 @@ a.popt {text-decoration: none;}
 	right: 0;
 }
 #userBar .subCell {
-	background: #ddd;
+	background: #202020;
    height: 30px;
 	padding: 5px 0;
 	display: block;
-	color: #333;
+	color: #a4bad6;
 	text-decoration: none;
    line-height: 28px;
-    border-top: 1px solid #b4b4b4;
+    border-top: 1px solid #171717;
 }
-#userBar .subCell:hover {background: #ccc;}
+#userBar .subCell:hover {background: #202020;}
 #userBar .toggle {
 	width: 40px;
-    background: #ccc;
+    background: #202020;
    border-top: 0;
    float: right;
    text-align: center;
@@ -242,9 +246,9 @@ a.popt {text-decoration: none;}
 ******************************************/

 /* MOTD */
-.motd {color: #638500;	font-family: Verdana, sans-serif;}
-.motd h1, .motd h2, .motd h3, .motd h4, .motd h5, .motd h6 {color: #638500;	text-decoration: underline;}
-.motd a, .motd a:link, .motd a:visited, .motd a:active, .motd a:hover {color: #638500;}
+.motd {color: #a4bad6;	font-family: Verdana, sans-serif;}
+.motd h1, .motd h2, .motd h3, .motd h4, .motd h5, .motd h6 {color: #a4bad6;	text-decoration: underline;}
+.motd a, .motd a:link, .motd a:visited, .motd a:active, .motd a:hover {color: #a4bad6;}

 /* ADD HERE FOR BOLD */
 .bold, .name, .prefix, .ooc, .looc, .adminooc, .admin, .medal, .yell {font-weight: bold;}
@@ -255,88 +259,90 @@ a.popt {text-decoration: none;}
 /* OUTPUT COLORS */
 .highlight {background: yellow;}

-h1, h2, h3, h4, h5, h6	{color: #0000ff;font-family: Georgia, Verdana, sans-serif;}
-h1.alert, h2.alert		{color: #000000;}
+h1, h2, h3, h4, h5, h6	{color: #a4bad6;font-family: Georgia, Verdana, sans-serif;}
+h1.alert, h2.alert		{color: #a4bad6;}

 em						{font-style: normal;	font-weight: bold;}

-.ooc					{					font-weight: bold;}
+.ooc					{color: #cca300;	font-weight: bold;}
+.antagooc				{color: #ce254f;	font-weight: bold;}
 .adminobserverooc		{color: #0099cc;	font-weight: bold;}
-.adminooc				{color: #700038;	font-weight: bold;}
+.adminooc				{color: #3d5bc3;	font-weight: bold;}

-.adminsay   			{color: #FF4500;	font-weight: bold;}
-.admin					{color: #386aff;	font-weight: bold;}
+.adminsay   			{color: #ff4500;	font-weight: bold;}
+.admin					{color: #5975da;	font-weight: bold;}

 .name					{					font-weight: bold;}

 .say					{}
-.deadsay				{color: #5c00e6;}
+.deadsay				{color: #e2c1ff;}
 .binarysay    			{color: #20c20e; background-color: #000000; display: block;}
 .binarysay a  			{color: #00ff00;}
 .binarysay a:active, .binarysay a:visited {color: #88ff88;}
-.radio					{color: #008000;}
-.sciradio				{color: #993399;}
-.comradio				{color: #948f02;}
-.secradio				{color: #a30000;}
-.medradio				{color: #337296;}
-.engradio				{color: #fb5613;}
-.suppradio				{color: #a8732b;}
-.servradio				{color: #6eaa2c;}
-.syndradio				{color: #6d3f40;}
-.centcomradio			{color: #686868;}
-.aiprivradio			{color: #ff00ff;}
-.redteamradio           {color: #ff0000;}
-.blueteamradio          {color: #0000ff;}
+.radio					{color: #1ecc43;}
+.sciradio				{color: #c68cfa;}
+.comradio				{color: #5177ff;}
+.secradio				{color: #dd3535;}
+.medradio				{color: #57b8f0;}
+.engradio				{color: #f37746;}
+.suppradio				{color: #b88646;}
+.servradio				{color: #6ca729;}
+.syndradio				{color: #8f4a4b;}
+.centcomradio			{color: #2681a5;}
+.aiprivradio			{color: #d65d95;}
+.redteamradio           {color: #ff4444;}
+.blueteamradio          {color: #3434fd;}

 .yell					{					font-weight: bold;}

-.alert					{color: #ff0000;}
-h1.alert, h2.alert		{color: #000000;}
+.alert					{color: #d82020;}
+h1.alert, h2.alert		{color: #99aab5;}

 .emote					{					font-style: italic;}
 .selecteddna			{color: #ffffff; 	background-color: #001B1B}

-.attack					{color: #ff0000;}
-.disarm					{color: #990000;}
-.passive				{color: #660000;}
+.attack					{color: #e01c1c;}
+.disarm					{color: #b42525;}
+.passive				{color: #a00f0f;}

-.userdanger				{color: #ff0000;	font-weight: bold; font-size: 24px;}
-.danger					{color: #ff0000;}
-.warning				{color: #ff0000;	font-style: italic;}
-.alertwarning   {color: #FF0000;    font-weight: bold}
-.boldwarning			{color: #ff0000;	font-style: italic;	font-weight: bold}
-.announce 				{color: #228b22;	font-weight: bold;}
-.boldannounce			{color: #ff0000;	font-weight: bold;}
-.greenannounce			{color: #00ff00;	font-weight: bold;}
+.userdanger				{color: #c51e1e;	font-weight: bold; font-size: 24px;}
+.danger					{color: #c51e1e;}
+.warning				{color: #c51e1e;	font-style: italic;}
+.alertwarning			{color: #FF0000;    font-weight: bold}
+.boldwarning			{color: #c51e1e;	font-style: italic;	font-weight: bold}
+.announce 				{color: #c51e1e;	font-weight: bold;}
+.boldannounce			{color: #c51e1e;	font-weight: bold;}
+.greenannounce			{color: #059223;	font-weight: bold;}
 .rose					{color: #ff5050;}
-.info					{color: #0000CC;}
-.notice					{color: #000099;}
-.boldnotice				{color: #000099;	font-weight: bold;}
-.adminnotice			{color: #0000ff;}
+.info					{color: #6685f5;}
+.notice					{color: #6685f5;}
+.boldnotice				{color: #6685f5;	font-weight: bold;}
+.adminnotice			{color: #6685f5;}
 .adminhelp              {color: #ff0000;    font-weight: bold;}
-.unconscious			{color: #0000ff;	font-weight: bold;}
+.unconscious			{color: #a4bad6;	font-weight: bold;}
 .suicide				{color: #ff5050;	font-style: italic;}
-.green					{color: #03ff39;}
-.red                    {color: #FF0000}
-.blue                   {color: #215cff}
-.nicegreen				{color: #14a833;}
+.red					{color: #FF0000}
+.pink					{color: #ff70c1;}
+.blue					{color: #215cff}
+.green				{color: #059223;}
+.nicegreen				{color: #059223;}
 .userlove				{color: #FF1493;	font-style: italic; font-weight: bold;	text-shadow: 0 0 6px #ff6dbc;}
 .love					{color: #ff006a;	font-style: italic;	text-shadow: 0 0 6px #ff6d6d;}
-.shadowling				{color: #3b2769;}
-.cult					{color: #960000;}
+.shadowling			{color: #8e8a99;}
+.cult					{color: #aa1c1c;}

-.cultitalic				{color: #960000;	font-style: italic;}
-.cultbold				{color: #960000; font-style: italic; font-weight: bold;}
-.cultboldtalic				{color: #960000; font-weight: bold; font-size: 24px;}
+.cultitalic				{color: #aa1c1c;	font-style: italic;}
+.cultbold				{color: #aa1c1c; font-style: italic; font-weight: bold;}
+.cultboldtalic				{color: #aa1c1c; font-weight: bold; font-size: 24px;}

-.cultlarge				{color: #960000; font-weight: bold; font-size: 24px;}
-.narsie					{color: #960000; font-weight: bold; font-size: 120px;}
-.narsiesmall			{color: #960000; font-weight: bold; font-size: 48px;}
+.cultlarge				{color: #aa1c1c; font-weight: bold; font-size: 24px;}
+.narsie					{color: #aa1c1c; font-weight: bold; font-size: 120px;}
+.narsiesmall			{color: #aa1c1c; font-weight: bold; font-size: 48px;}
 .colossus				{color: #7F282A; font-size: 40px;}
-.hierophant				{color: #660099; font-weight: bold; font-style: italic;}
-.hierophant_warning		{color: #660099; font-style: italic;}
-.purple					{color: #5e2d79;}
-.holoparasite			{color: #35333a;}
+.hierophant				{color: #b441ee; font-weight: bold; font-style: italic;}
+.hierophant_warning		{color: #c56bf1; font-style: italic;}
+.purple					{color: #9956d3;}
+.holoparasite			{color: #88809c;}

 .revennotice			{color: #1d2953;}
 .revenboldnotice		{color: #1d2953;	font-weight: bold;}
@@ -344,11 +350,11 @@ h1.alert, h2.alert		{color: #000000;}
 .revenminor				{color: #823abb}
 .revenwarning			{color: #760fbb;	font-style: italic;}
 .revendanger			{color: #760fbb;	font-weight: bold; font-size: 24px;}
-.umbra					{color: #5000A0;}
-.umbra_emphasis			{color: #5000A0;	font-weight: bold;	font-style: italic;}
-.umbra_large			{color: #5000A0; font-size: 24px; font-weight: bold; font-style: italic;}
+.umbra					{color: #7c00e6;}
+.umbra_emphasis			{color: #7c00e6;	font-weight: bold;	font-style: italic;}
+.umbra_large			{color: #7c00e6; font-size: 24px; font-weight: bold; font-style: italic;}

-.deconversion_message	{color: #5000A0; font-size: 24px; font-style: italic;}
+.deconversion_message	{color: #a947ff; font-size: 24px; font-style: italic;}

 .brass					{color: #BE8700;}
 .heavy_brass			{color: #BE8700; font-weight: bold; font-style: italic;}
@@ -373,17 +379,17 @@ h1.alert, h2.alert		{color: #000000;}
 .neovgre				{color: #6E001A; font-weight: bold; font-style: italic;}
 .neovgre_small			{color: #6E001A;}

-.newscaster				{color: #800000;}
-.ghostalert				{color: #5c00e6;	font-style: italic; font-weight: bold;}
+.newscaster				{color: #c05d5d;}
+.ghostalert				{color: #6600ff;	font-style: italic; font-weight: bold;}

-.alien					{color: #543354;}
-.noticealien			{color: #00c000;}
-.alertalien				{color: #00c000;	font-weight: bold;}
-.changeling				{color: #800080;	font-style: italic;}
+.alien					{color: #855d85;}
+.noticealien			{color: #059223;}
+.alertalien				{color: #059223;	font-weight: bold;}
+.changeling				{color: #059223;	font-style: italic;}

-.spider					{color: #4d004d;}
+.spider					{color: #8800ff;}

-.interface				{color: #330033;}
+.interface				{color: #750e75;}

 .sans					{font-family: "Comic Sans MS", cursive, sans-serif;}
 .papyrus				{font-family: "Papyrus", cursive, sans-serif;}
@@ -394,29 +400,29 @@ h1.alert, h2.alert		{color: #000000;}
 .big					{font-size: 24px;}
 .reallybig				{font-size: 32px;}
 .extremelybig			{font-size: 40px;}
-.greentext				{color: #00FF00;	font-size: 24px;}
-.redtext				{color: #FF0000;	font-size: 24px;}
-.clown					{color: #FF69Bf;	font-size: 24px; font-family: "Comic Sans MS", cursive, sans-serif; font-weight: bold;}
+.greentext				{color: #059223;	font-size: 24px;}
+.redtext				{color: #c51e1e;	font-size: 24px;}
+.clown					{color: #ff70c1;	font-size: 24px; font-family: "Comic Sans MS", cursive, sans-serif; font-weight: bold;}
 .his_grace				{color: #15D512;	font-family: "Courier New", cursive, sans-serif; font-style: italic;}

 .icon 					{height: 1em;	width: auto;}

 .memo					{color: #638500;	text-align: center;}
 .memoedit				{text-align: center;	font-size: 16px;}
-.abductor				{color: #800080; font-style: italic;}
-.mind_control				{color: #A00D6F; font-size: 3; font-weight: bold; font-style: italic;}
+.abductor				{color: #c204c2; font-style: italic;}
+.mind_control			{color: #df3da9; font-size: 3; font-weight: bold; font-style: italic;}
 .slime					{color: #00CED1;}
 .drone					{color: #848482;}
 .monkey					{color: #975032;}
 .swarmer				{color: #2C75FF;}
 .resonate				{color: #298F85;}

-.monkeyhive				{color: #774704;}
-.monkeylead				{color: #774704;	font-size: 2;}
+.monkeyhive				{color: #a56408;}
+.monkeylead				{color: #af6805;	font-size: 2;}

 .connectionClosed, .fatalError {background: red; color: white; padding: 5px;}
 .connectionClosed.restored {background: green;}
-.internal.boldnshit {color: blue; font-weight: bold;}
+.internal.boldnshit {color: #3d5bc3; font-weight: bold;}

 /* HELPER CLASSES */
 .text-normal {font-weight: normal; font-style: normal;}
--- a/code/modules/goonchat/browserassets/css/browserOutput_white.css
+++ b/code/modules/goonchat/browserassets/css/browserOutput_white.css
@@ -0,0 +1,426 @@
+/*****************************************
+*
+* GLOBAL STYLES
+*
+******************************************/
+html, body {
+	padding: 0;
+	margin: 0;
+	height: 100%;
+	color: #000000;
+}
+body {
+	background: #fff;
+    font-family: Verdana, sans-serif;
+    font-size: 9pt;
+    line-height: 1.2;
+	overflow-x: hidden;
+	overflow-y: scroll;
+	word-wrap: break-word;
+}
+
+em {
+	font-style: normal;
+	font-weight: bold;
+}
+
+img {
+	margin: 0;
+	padding: 0;
+	line-height: 1;
+	-ms-interpolation-mode: nearest-neighbor;
+	image-rendering: pixelated;
+}
+img.icon {
+	height: 1em;
+	min-height: 16px;
+	width: auto;
+	vertical-align: bottom;
+}
+
+
+.r:before { /* "repeated" badge class for combined messages */
+	content: 'x';
+}
+.r {
+	display: inline-block;
+	min-width: 0.5em;
+	font-size: 0.7em;
+	padding: 0.2em 0.3em;
+	line-height: 1;
+	color: white;
+	text-align: center;
+	white-space: nowrap;
+	vertical-align: middle;
+	background-color: crimson;
+	border-radius: 10px;
+}
+
+a {color: #0000ff;}
+a.visited {color: #ff00ff;}
+a:visited {color: #ff00ff;}
+a.popt {text-decoration: none;}
+
+/*****************************************
+*
+* OUTPUT NOT RELATED TO ACTUAL MESSAGES
+*
+******************************************/
+#loading {
+	position: fixed;
+	width: 300px;
+	height: 150px;
+	text-align: center;
+	left: 50%;
+	top: 50%;
+	margin: -75px 0 0 -150px;
+}
+#loading i {display: block; padding-bottom: 3px;}
+
+#messages {
+	font-size: 13px;
+	padding: 3px;
+	margin: 0;
+	word-wrap: break-word;
+}
+#newMessages {
+	position: fixed;
+	display: block;
+	bottom: 0;
+	right: 0;
+	padding: 8px;
+	background: #ddd;
+	text-decoration: none;
+    font-variant: small-caps;
+    font-size: 1.1em;
+    font-weight: bold;
+	color: #333;
+}
+#newMessages:hover {background: #ccc;}
+#newMessages i {vertical-align: middle; padding-left: 3px;}
+#ping {
+	position: fixed;
+	top: 0;
+	right: 115px;
+	width: 45px;
+	background: #ddd;
+	height: 30px;
+	padding: 8px 0 2px 0;
+}
+#ping i {display: block; text-align: center;}
+#ping .ms {
+	display: block;
+	text-align: center;
+	font-size: 8pt;
+	padding-top: 2px;
+}
+#userBar {
+	position: fixed;
+	top: 0;
+	right: 0;
+}
+#userBar .subCell {
+	background: #ddd;
+    height: 30px;
+	padding: 5px 0;
+	display: block;
+	color: #333;
+	text-decoration: none;
+    line-height: 28px;
+    border-top: 1px solid #b4b4b4;
+}
+#userBar .subCell:hover {background: #ccc;}
+#userBar .toggle {
+	width: 40px;
+    background: #ccc;
+    border-top: 0;
+    float: right;
+    text-align: center;
+}
+#userBar .sub {clear: both; display: none; width: 160px;}
+#userBar .sub.scroll {overflow-y: scroll;}
+#userBar .sub.subCell {padding: 3px 0 3px 8px; line-height: 30px; font-size: 0.9em; clear: both;}
+#userBar .sub span {
+	display: block;
+	line-height: 30px;
+	float: left;
+}
+#userBar .sub i {
+	display: block;
+	padding: 0 5px;
+	font-size: 1.1em;
+	width: 22px;
+	text-align: center;
+	line-height: 30px;
+	float: right;
+}
+#userBar .sub input {
+	position: absolute;
+	padding: 7px 5px;
+	width: 121px;
+	line-height: 30px;
+	float: left;
+}
+#userBar .topCell {border-top: 0;}
+
+/* POPUPS */
+.popup {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	background: #ddd;
+}
+.popup .close {
+	position: absolute;
+	background: #aaa;
+	top: 0;
+	right: 0;
+	color: #333;
+	text-decoration: none;
+	z-index: 2;
+	padding: 0 10px;
+	height: 30px;
+	line-height: 30px;
+}
+.popup .close:hover {background: #999;}
+.popup .head {
+	background: #999;
+	color: #ddd;
+	padding: 0 10px;
+	height: 30px;
+	line-height: 30px;
+	text-transform: uppercase;
+	font-size: 0.9em;
+	font-weight: bold;
+	border-bottom: 2px solid green;
+}
+.popup input {border: 1px solid #999; background: #fff; margin: 0; padding: 5px; outline: none; color: #333;}
+.popup input[type=text]:hover, .popup input[type=text]:active, .popup input[type=text]:focus {border-color: green;}
+.popup input[type=submit] {padding: 5px 10px; background: #999; color: #ddd; text-transform: uppercase; font-size: 0.9em; font-weight: bold;}
+.popup input[type=submit]:hover, .popup input[type=submit]:focus, .popup input[type=submit]:active {background: #aaa; cursor: pointer;}
+
+.changeFont {padding: 10px;}
+.changeFont a {display: block; text-decoration: none; padding: 3px; color: #333;}
+.changeFont a:hover {background: #ccc;}
+
+.highlightPopup {padding: 10px; text-align: center;}
+.highlightPopup input[type=text] {display: block; width: 215px; text-align: left; margin-top: 5px;}
+.highlightPopup input.highlightColor {background-color: #FFFF00;}
+.highlightPopup input.highlightTermSubmit {margin-top: 5px;}
+
+/* ADMIN CONTEXT MENU */
+.contextMenu {
+	background-color: #ddd;
+	position: fixed;
+	margin: 2px;
+	width: 150px;
+}
+.contextMenu a {
+	display: block;
+	padding: 2px 5px;
+	text-decoration: none;
+	color: #333;
+}
+
+.contextMenu a:hover {
+	background-color: #ccc;
+}
+
+/* ADMIN FILTER MESSAGES MENU */
+.filterMessages {padding: 5px;}
+.filterMessages div {padding: 2px 0;}
+.filterMessages input {}
+.filterMessages label {}
+
+.icon-stack {height: 1em; line-height: 1em; width: 1em; vertical-align: middle; margin-top: -2px;}
+
+
+/*****************************************
+*
+* OUTPUT ACTUALLY RELATED TO MESSAGES
+*
+******************************************/
+
+/* MOTD */
+.motd {color: #638500;	font-family: Verdana, sans-serif;}
+.motd h1, .motd h2, .motd h3, .motd h4, .motd h5, .motd h6 {color: #638500;	text-decoration: underline;}
+.motd a, .motd a:link, .motd a:visited, .motd a:active, .motd a:hover {color: #638500;}
+
+/* ADD HERE FOR BOLD */
+.bold, .name, .prefix, .ooc, .looc, .adminooc, .admin, .medal, .yell {font-weight: bold;}
+
+/* ADD HERE FOR ITALIC */
+.italic, .italics,  .emote {font-style: italic;}
+
+/* OUTPUT COLORS */
+.highlight {background: yellow;}
+
+h1, h2, h3, h4, h5, h6	{color: #0000ff;font-family: Georgia, Verdana, sans-serif;}
+h1.alert, h2.alert		{color: #000000;}
+
+em						{font-style: normal;	font-weight: bold;}
+
+.ooc					{color: #002eb8;	font-weight: bold;}
+.antagooc				{color: #b8002e;	font-weight: bold;}
+.adminobserverooc		{color: #0099cc;	font-weight: bold;}
+.adminooc				{color: #700038;	font-weight: bold;}
+
+.adminsay   			{color: #ff4500;	font-weight: bold;}
+.admin					{color: #4473ff;	font-weight: bold;}
+
+.name					{					font-weight: bold;}
+
+.say					{}
+.deadsay				{color: #5c00e6;}
+.binarysay    			{color: #20c20e; background-color: #000000; display: block;}
+.binarysay a  			{color: #00ff00;}
+.binarysay a:active, .binarysay a:visited {color: #88ff88;}
+.radio					{color: #008000;}
+.sciradio				{color: #993399;}
+.comradio				{color: #948f02;}
+.secradio				{color: #a30000;}
+.medradio				{color: #337296;}
+.engradio				{color: #fb5613;}
+.suppradio				{color: #a8732b;}
+.servradio				{color: #6eaa2c;}
+.syndradio				{color: #6d3f40;}
+.centcomradio			{color: #686868;}
+.aiprivradio			{color: #ff00ff;}
+.redteamradio           {color: #ff0000;}
+.blueteamradio          {color: #0000ff;}
+
+.yell					{					font-weight: bold;}
+
+.alert					{color: #ff0000;}
+h1.alert, h2.alert		{color: #000000;}
+
+.emote					{					font-style: italic;}
+.selecteddna			{color: #ffffff; 	background-color: #001B1B}
+
+.attack					{color: #ff0000;}
+.disarm					{color: #990000;}
+.passive				{color: #660000;}
+
+.userdanger				{color: #ff0000;	font-weight: bold; font-size: 24px;}
+.danger					{color: #ff0000;}
+.warning				{color: #ff0000;	font-style: italic;}
+.alertwarning           	{color: #FF0000;    font-weight: bold}
+.boldwarning			{color: #ff0000;	font-style: italic;	font-weight: bold}
+.announce 				{color: #228b22;	font-weight: bold;}
+.boldannounce			{color: #ff0000;	font-weight: bold;}
+.greenannounce			{color: #00ff00;	font-weight: bold;}
+.rose					{color: #ff5050;}
+.info					{color: #0000CC;}
+.notice					{color: #000099;}
+.boldnotice				{color: #000099;	font-weight: bold;}
+.adminnotice			{color: #0000ff;}
+.adminhelp              {color: #ff0000;    font-weight: bold;}
+.unconscious			{color: #0000ff;	font-weight: bold;}
+.suicide				{color: #ff5050;	font-style: italic;}
+.green				{color: #03ff39;}
+.red					{color: #FF0000}
+.pink					{color: #FF69Bf;}
+.blue					{color: #0000FF}
+.nicegreen				{color: #14a833;}
+.userlove				{color: #FF1493;	font-style: italic; font-weight: bold;	text-shadow: 0 0 6px #ff6dbc;}
+.love					{color: #ff006a;	font-style: italic;	text-shadow: 0 0 6px #ff6d6d;}
+.shadowling				{color: #3b2769;}
+.cult					{color: #960000;}
+
+.cultitalic				{color: #960000;	font-style: italic;}
+.cultbold				{color: #960000; font-style: italic; font-weight: bold;}
+.cultboldtalic				{color: #960000; font-weight: bold; font-size: 24px;}
+
+.cultlarge				{color: #960000; font-weight: bold; font-size: 24px;}
+.narsie					{color: #960000; font-weight: bold; font-size: 120px;}
+.narsiesmall			{color: #960000; font-weight: bold; font-size: 48px;}
+.colossus				{color: #7F282A; font-size: 40px;}
+.hierophant				{color: #660099; font-weight: bold; font-style: italic;}
+.hierophant_warning		{color: #660099; font-style: italic;}
+.purple					{color: #5e2d79;}
+.holoparasite			{color: #35333a;}
+
+.revennotice			{color: #1d2953;}
+.revenboldnotice		{color: #1d2953;	font-weight: bold;}
+.revenbignotice			{color: #1d2953;	font-weight: bold; font-size: 24px;}
+.revenminor				{color: #823abb}
+.revenwarning			{color: #760fbb;	font-style: italic;}
+.revendanger			{color: #760fbb;	font-weight: bold; font-size: 24px;}
+.umbra					{color: #5000A0;}
+.umbra_emphasis			{color: #5000A0;	font-weight: bold;	font-style: italic;}
+.umbra_large			{color: #5000A0; font-size: 24px; font-weight: bold; font-style: italic;}
+
+.deconversion_message	{color: #5000A0; font-size: 24px; font-style: italic;}
+
+.brass					{color: #BE8700;}
+.heavy_brass			{color: #BE8700; font-weight: bold; font-style: italic;}
+.large_brass			{color: #BE8700; font-size: 24px;}
+.big_brass				{color: #BE8700; font-size: 24px; font-weight: bold; font-style: italic;}
+.ratvar					{color: #BE8700; font-size: 48px; font-weight: bold; font-style: italic;}
+.alloy					{color: #42474D;}
+.heavy_alloy			{color: #42474D; font-weight: bold; font-style: italic;}
+.nezbere_large			{color: #42474D; font-size: 24px; font-weight: bold; font-style: italic;}
+.nezbere				{color: #42474D; font-weight: bold; font-style: italic;}
+.nezbere_small			{color: #42474D;}
+.sevtug_large			{color: #AF0AAF; font-size: 24px; font-weight: bold; font-style: italic;}
+.sevtug					{color: #AF0AAF; font-weight: bold; font-style: italic;}
+.sevtug_small			{color: #AF0AAF;}
+.inathneq_large			{color: #1E8CE1; font-size: 24px; font-weight: bold; font-style: italic;}
+.inathneq				{color: #1E8CE1; font-weight: bold; font-style: italic;}
+.inathneq_small			{color: #1E8CE1;}
+.nzcrentr_large			{color: #DAAA18; font-size: 24px; font-weight: bold; font-style: italic;}
+.nzcrentr				{color: #DAAA18; font-weight: bold; font-style: italic;}
+.nzcrentr_small			{color: #DAAA18;}
+.neovgre_large			{color: #6E001A; font-size: 24px; font-weight: bold; font-style: italic;}
+.neovgre				{color: #6E001A; font-weight: bold; font-style: italic;}
+.neovgre_small			{color: #6E001A;}
+
+.newscaster				{color: #800000;}
+.ghostalert				{color: #5c00e6;	font-style: italic; font-weight: bold;}
+
+.alien					{color: #543354;}
+.noticealien			{color: #00c000;}
+.alertalien				{color: #00c000;	font-weight: bold;}
+.changeling				{color: #800080;	font-style: italic;}
+
+.spider					{color: #4d004d;}
+
+.interface				{color: #330033;}
+
+.sans					{font-family: "Comic Sans MS", cursive, sans-serif;}
+.papyrus				{font-family: "Papyrus", cursive, sans-serif;}
+.robot					{font-family: "Courier New", cursive, sans-serif;}
+
+.command_headset		{font-weight: bold; font-size: 24px;}
+.small					{font-size: 8px;}
+.big					{font-size: 24px;}
+.reallybig				{font-size: 32px;}
+.extremelybig			{font-size: 40px;}
+.greentext				{color: #00FF00;	font-size: 24px;}
+.redtext				{color: #FF0000;	font-size: 24px;}
+.clown					{color: #FF69Bf;	font-size: 24px; font-family: "Comic Sans MS", cursive, sans-serif; font-weight: bold;}
+.his_grace				{color: #15D512;	font-family: "Courier New", cursive, sans-serif; font-style: italic;}
+
+.icon 					{height: 1em;	width: auto;}
+
+.memo					{color: #638500;	text-align: center;}
+.memoedit				{text-align: center;	font-size: 16px;}
+.abductor				{color: #800080; font-style: italic;}
+.mind_control				{color: #A00D6F; font-size: 3; font-weight: bold; font-style: italic;}
+.slime					{color: #00CED1;}
+.drone					{color: #848482;}
+.monkey					{color: #975032;}
+.swarmer				{color: #2C75FF;}
+.resonate				{color: #298F85;}
+
+.monkeyhive				{color: #774704;}
+.monkeylead				{color: #774704;	font-size: 2;}
+
+.connectionClosed, .fatalError {background: red; color: white; padding: 5px;}
+.connectionClosed.restored {background: green;}
+.internal.boldnshit {color: blue; font-weight: bold;}
+
+/* HELPER CLASSES */
+.text-normal {font-weight: normal; font-style: normal;}
+.hidden {display: none; visibility: hidden;}
+
--- a/code/modules/goonchat/browserassets/html/browserOutput.html
+++ b/code/modules/goonchat/browserassets/html/browserOutput.html
@@ -5,7 +5,7 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 	<link rel="stylesheet" type="text/css" href="font-awesome.css" />
-	<link rel="stylesheet" type="text/css" href="browserOutput.css" />
+	<link id="sheetofstyles" rel="stylesheet" type="text/css" href="browserOutput_white.css" />
 	<link rel="stylesheet" type="text/css" href="spritesheet_chat.css" />
 	<script type="text/javascript" src="errorHandler.js"></script>
 	<script type="text/javascript" src="jquery.min.js"></script>
@@ -28,6 +28,9 @@
 			<i class="icon-circle" id="pingDot"></i>
 			<span class="ms" id="pingMs">--ms</span>
 		</div>
+		<div id="darkmodething">
+			<a href="#" class="subCell toggle" id="darkmodetoggle" title="Darkmode"><i class="icon-adjust"></i></a>
+		</div>
 		<div id="audio">
 			<a href="#" class="subCell toggle" id="toggleAudio" title="Audio"><i class="icon-volume-up"></i></a>
 		</div>
--- a/code/modules/goonchat/browserassets/js/browserOutput.js
+++ b/code/modules/goonchat/browserassets/js/browserOutput.js
@@ -35,6 +35,7 @@ var opts = {
 	'wasd': false, //Is the user in wasd mode?
 	'priorChatHeight': 0, //Thing for height-resizing detection
 	'restarting': false, //Is the round restarting?
+	'darkmode':false, //Are we using darkmode? If not WHY ARE YOU LIVING IN 2009???

 	//Options menu
 	'selectedSubLoop': null, //Contains the interval loop for closing the selected sub menu
@@ -394,6 +395,19 @@ function toHex(n) {
 	return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);
 }

+function swap() { //Swap to darkmode
+	if (opts.darkmode){
+		document.getElementById("sheetofstyles").href = "browserOutput_white.css";
+		opts.darkmode = false;
+		runByond('?_src_=chat&proc=swaptolightmode');
+	} else {
+		document.getElementById("sheetofstyles").href = "browserOutput.css";
+		opts.darkmode = true;
+		runByond('?_src_=chat&proc=swaptodarkmode');
+	}
+	setCookie('darkmode', (opts.darkmode ? 'true' : 'false'), 365);
+}
+
 function handleClientData(ckey, ip, compid) {
 	//byond sends player info to here
 	var currentData = {'ckey': ckey, 'ip': ip, 'compid': compid};
@@ -601,6 +615,7 @@ $(function() {
 		'shighlightColor': getCookie('highlightcolor'),
 		'smusicVolume': getCookie('musicVolume'),
 		'smessagecombining': getCookie('messagecombining'),
+		'sdarkmode': getCookie('darkmode'),
 	};

 	if (savedConfig.sfontSize) {
@@ -611,6 +626,9 @@ $(function() {
 		$("body").css('line-height', savedConfig.slineHeight);
 		internalOutput('<span class="internal boldnshit">Loaded line height setting of: '+savedConfig.slineHeight+'</span>', 'internal');
 	}
+	if(savedConfig.sdarkmode == 'true'){
+		swap();
+	}
 	if (savedConfig.spingDisabled) {
 		if (savedConfig.spingDisabled == 'true') {
 			opts.pingDisabled = true;
@@ -655,8 +673,6 @@ $(function() {
 			opts.messageCombining = true;
 		}
 	}
-
-
 	(function() {
 		var dataCookie = getCookie('connData');
 		if (dataCookie) {
@@ -823,7 +839,9 @@ $(function() {
 	$('#toggleOptions').click(function(e) {
 		handleToggleClick($subOptions, $(this));
 	});
-
+	$('#darkmodetoggle').click(function(e) {
+		swap();
+	});
 	$('#toggleAudio').click(function(e) {
 		handleToggleClick($subAudio, $(this));
 	});
@@ -895,7 +913,7 @@ $(function() {

 		$.ajax({
 			type: 'GET',
-			url: 'browserOutput.css',
+			url: 'browserOutput_white.css',
 			success: function(styleData) {
 				var blob = new Blob(['<head><title>Chat Log</title><style>', styleData, '</style></head><body>', $messages.html(), '</body>']);

--- a/code/modules/shuttle/ferry.dm
+++ b/code/modules/shuttle/ferry.dm
@@ -37,4 +37,4 @@
 			return
 		last_request = world.time
 		to_chat(usr, "<span class='notice'>Your request has been received by CentCom.</span>")
-		to_chat(GLOB.admins, "<b>FERRY: <font color='blue'>[ADMIN_LOOKUPFLW(usr)] (<A HREF='?_src_=holder;[HrefToken()];secrets=moveferry'>Move Ferry</a>)</b> is requesting to move the transport ferry to CentCom.</font>")
+		to_chat(GLOB.admins, "<b>FERRY: <font color='#3d5bc3'>[ADMIN_LOOKUPFLW(usr)] (<A HREF='?_src_=holder;[HrefToken()];secrets=moveferry'>Move Ferry</a>)</b> is requesting to move the transport ferry to CentCom.</font>")
--- a/icons/member_content.dmi
+++ b/icons/member_content.dmi
--- a/modular_citadel/code/modules/mentor/mentorpm.dm
+++ b/modular_citadel/code/modules/mentor/mentorpm.dm
@@ -3,7 +3,7 @@
 	set category = "Mentor"
 	set name = "Mentor PM"
 	if(!is_mentor())
-		to_chat(src, "<font color='red'>Error: Mentor-PM-Panel: Only Mentors and Admins may use this command.</font>")
+		to_chat(src, "<span class='danger'>Error: Mentor-PM-Panel: Only Mentors and Admins may use this command.</span>")
 		return
 	var/list/client/targets[0]
 	for(var/client/T)
@@ -27,24 +27,24 @@
 	else if(istype(whom,/client))
 		C = whom
 	if(!C)
-		if(is_mentor())	to_chat(src, "<font color='red'>Error: Mentor-PM: Client not found.</font>")
+		if(is_mentor())	to_chat(src, "<span class='danger'>Error: Mentor-PM: Client not found.</span>")
 		else		mentorhelp(msg)	//Mentor we are replying to left. Mentorhelp instead(check below)
 		return

 	if(is_mentor(whom))
-		to_chat(GLOB.admins | GLOB.mentors, "<font color='purple'>[src] has started replying to [whom]'s mhelp.</font color>")
+		to_chat(GLOB.admins | GLOB.mentors, "<font color='purple'>[src] has started replying to [whom]'s mhelp.</font>")

 	//get message text, limit it's length.and clean/escape html
 	if(!msg)
 		msg = input(src,"Message:", "Private message") as text|null
-		
+
 		if(!msg && is_mentor(whom))
-			to_chat(GLOB.admins | GLOB.mentors, "<font color='purple'>[src] has stopped their reply to [whom]'s mhelp.</font color>")
+			to_chat(GLOB.admins | GLOB.mentors, "<span class='purple'>[src] has stopped their reply to [whom]'s mhelp.</span>")
 			return

 		if(!C)
 			if(is_mentor())
-				to_chat(src, "<font color='red'>Error: Mentor-PM: Client not found.</font>")
+				to_chat(src, "<span class='danger'>Error: Mentor-PM: Client not found.</span>")
 			else
 				mentorhelp(msg)	//Mentor we are replying to has vanished, Mentorhelp instead (how the fuck does this work?let's hope it works,shrug)
 				return
@@ -54,8 +54,8 @@
 			return

 	msg = sanitize(copytext(msg,1,MAX_MESSAGE_LEN))
-	if(!msg && is_mentor(whom))	
-		to_chat(GLOB.admins | GLOB.mentors, "<font color='purple'>[src] has stopped their reply to [whom]'s mhelp.</font color>")
+	if(!msg && is_mentor(whom))
+		to_chat(GLOB.admins | GLOB.mentors, "<span class='purple'>[src] has stopped their reply to [whom]'s mhelp.</span>")
 		return

 	log_mentor("Mentor PM: [key_name(src)]->[key_name(C)]: [msg]")
@@ -65,21 +65,21 @@
 	var/show_char = CONFIG_GET(flag/mentors_mobname_only)
 	if(C.is_mentor())
 		if(is_mentor())//both are mentors
-			to_chat(C, "<font color='purple'>Mentor PM from-<b>[key_name_mentor(src, C, 1, 0, 0)]</b>: [msg]</font>")
-			to_chat(src, "<font color='green'>Mentor PM to-<b>[key_name_mentor(C, C, 1, 0, 0)]</b>: [msg]</font>")
+			to_chat(C, "<span class='purple'>Mentor PM from-<b>[key_name_mentor(src, C, 1, 0, 0)]</b>: [msg]</span>")
+			to_chat(src, "<span class='green'>Mentor PM to-<b>[key_name_mentor(C, C, 1, 0, 0)]</b>: [msg]</font>")

-		else		//recipient is an mentor but sender is not
-			to_chat(C, "<font color='purple'>Reply PM from-<b>[key_name_mentor(src, C, 1, 0, show_char)]</b>: [msg]</font>")
-			to_chat(src, "<font color='brown'>Mentor PM to-<b>[key_name_mentor(C, C, 1, 0, 0)]</b>: [msg]</font>")
+		else		//recipient is a mentor but sender is not
+			to_chat(C, "<span class='purple'>Reply PM from-<b>[key_name_mentor(src, C, 1, 0, show_char)]</b>: [msg]</span>")
+			to_chat(src, "<span class='pink'>Mentor PM to-<b>[key_name_mentor(C, C, 1, 0, 0)]</b>: [msg]</span>")

 	else
-		if(is_mentor())	//sender is an mentor but recipient is not.
-			to_chat(C, "<font color='purple'>Mentor PM from-<b>[key_name_mentor(src, C, 1, 0, 0)]</b>: [msg]</font>")
-			to_chat(src, "<font color='brown'>Mentor PM to-<b>[key_name_mentor(C, C, 1, 0, show_char)]</b>: [msg]</font>")
+		if(is_mentor())	//sender is a mentor but recipient is not.
+			to_chat(C, "<span class='purple'>Mentor PM from-<b>[key_name_mentor(src, C, 1, 0, 0)]</b>: [msg]</span>")
+			to_chat(src, "<span class='pink'>Mentor PM to-<b>[key_name_mentor(C, C, 1, 0, show_char)]</b>: [msg]</span>")

 	//we don't use message_Mentors here because the sender/receiver might get it too
 	var/show_char_sender = !is_mentor() && CONFIG_GET(flag/mentors_mobname_only)
 	var/show_char_recip = !C.is_mentor() && CONFIG_GET(flag/mentors_mobname_only)
 	for(var/client/X in GLOB.mentors | GLOB.admins)
 		if(X.key!=key && X.key!=C.key)	//check client/X is an Mentor and isn't the sender or recipient
-			to_chat(X, "<B><font color='brown'>Mentor PM: [key_name_mentor(src, X, 0, 0, show_char_sender)]-&gt;[key_name_mentor(C, X, 0, 0, show_char_recip)]:</B> <font color ='blue'> [msg]</font>") //inform X
+			to_chat(X, "<B><span class='pink'>Mentor PM: [key_name_mentor(src, X, 0, 0, show_char_sender)]-&gt;[key_name_mentor(C, X, 0, 0, show_char_recip)]:</span></B> <span class='blue'>[msg]</span>") //inform X
--- a/modular_citadel/interface/skin.dmf
+++ b/modular_citadel/interface/skin.dmf
@@ -54,7 +54,7 @@ window "mainwindow"
 		size = 640x440
 		anchor1 = none
 		anchor2 = none
-		background-color = #272727
+		background-color = #eeeeee
 		is-default = true
 		saved-params = "pos;size;is-minimized;is-maximized"
 		icon = 'icons\\ss13_64.png'
@@ -66,7 +66,7 @@ window "mainwindow"
 		size = 637x440
 		anchor1 = 0,0
 		anchor2 = 100,100
-		background-color = #272727
+		background-color = #eeeeee
 		saved-params = "splitter"
 		left = "mapwindow"
 		right = "infowindow"
@@ -78,7 +78,7 @@ window "mainwindow"
 		size = 200x200
 		anchor1 = none
 		anchor2 = none
-		background-color = #272727
+		background-color = #ffffff
 		is-visible = false
 		saved-params = ""
 	elem "tooltip"
@@ -87,7 +87,7 @@ window "mainwindow"
 		size = 999x999
 		anchor1 = none
 		anchor2 = none
-		background-color = #272727
+		background-color = #ffffff
 		is-visible = false
 		saved-params = ""

@@ -98,7 +98,6 @@ window "mapwindow"
 		size = 640x480
 		anchor1 = none
 		anchor2 = none
-		background-color = #272727
 		saved-params = "pos;size;is-minimized;is-maximized"
 		is-pane = true
 	elem "map"
@@ -120,7 +119,7 @@ window "infowindow"
 		size = 640x480
 		anchor1 = none
 		anchor2 = none
-		background-color = #272727
+		background-color = #eeeeee
 		saved-params = "pos;size;is-minimized;is-maximized"
 		is-pane = true
 	elem "info"
@@ -129,7 +128,6 @@ window "infowindow"
 		size = 640x445
 		anchor1 = 0,0
 		anchor2 = 100,100
-		background-color = #272727
 		saved-params = "splitter"
 		left = "statwindow"
 		right = "outputwindow"
@@ -140,8 +138,7 @@ window "infowindow"
 		size = 104x20
 		anchor1 = 3,0
 		anchor2 = 19,0
-		text-color = #ffffff
-		background-color = #40628a
+		background-color = #90b3dd
 		saved-params = "is-checked"
 		text = "Changelog"
 		command = "changelog"
@@ -151,8 +148,7 @@ window "infowindow"
 		size = 100x20
 		anchor1 = 19,0
 		anchor2 = 34,0
-		text-color = #ffffff
-		background-color = #40628a
+		background-color = #90b3dd
 		saved-params = "is-checked"
 		text = "Rules"
 		command = "rules"
@@ -162,8 +158,7 @@ window "infowindow"
 		size = 100x20
 		anchor1 = 34,0
 		anchor2 = 50,0
-		text-color = #ffffff
-		background-color = #40628a
+		background-color = #90b3dd
 		saved-params = "is-checked"
 		text = "Wiki"
 		command = "wiki"
@@ -173,8 +168,7 @@ window "infowindow"
 		size = 100x20
 		anchor1 = 50,0
 		anchor2 = 66,0
-		text-color = #ffffff
-		background-color = #40628a
+		background-color = #90b3dd
 		saved-params = "is-checked"
 		text = "Forum"
 		command = "forum"
@@ -184,8 +178,7 @@ window "infowindow"
 		size = 100x20
 		anchor1 = 66,0
 		anchor2 = 81,0
-		text-color = #ffffff
-		background-color = #40628a
+		background-color = #90b3dd
 		saved-params = "is-checked"
 		text = "GitHub"
 		command = "github"
@@ -196,8 +189,7 @@ window "infowindow"
 		anchor1 = 81,0
 		anchor2 = 97,0
 		font-size = 8
-		text-color = #ffffff
-		background-color = #40628a
+		background-color = #ef7f7f
 		saved-params = "is-checked"
 		text = "Report Issue"
 		command = "report-issue"
@@ -209,7 +201,7 @@ window "outputwindow"
 		size = 640x480
 		anchor1 = none
 		anchor2 = none
-		background-color = #272727
+		background-color = #eeeeee
 		saved-params = "pos;size;is-minimized;is-maximized"
 		titlebar = false
 		statusbar = false
@@ -223,9 +215,9 @@ window "outputwindow"
 		size = 595x20
 		anchor1 = 0,100
 		anchor2 = 100,100
-		font-size = 10
 		background-color = #d3b5b5
 		is-default = true
+		border = sunken
 		saved-params = "command"
 	elem "say"
 		type = BUTTON
@@ -233,8 +225,7 @@ window "outputwindow"
 		size = 37x20
 		anchor1 = 100,100
 		anchor2 = none
-		text-color = #ffffff
-		background-color = #272727
+		background-color = #eeeeee
 		saved-params = "is-checked"
 		text = "Chat"
 		command = ".winset \"say.is-checked=true ? input.command=\"!say \\\"\" : input.command=\""
@@ -246,7 +237,7 @@ window "outputwindow"
 		size = 640x456
 		anchor1 = 0,0
 		anchor2 = 100,100
-		background-color = #272727
+		background-color = #ffffff
 		is-visible = false
 		is-disabled = true
 		saved-params = ""
@@ -257,8 +248,6 @@ window "outputwindow"
 		size = 640x456
 		anchor1 = 0,0
 		anchor2 = 100,100
-		text-color = #40628a
-		background-color = #272727
 		is-default = true
 		saved-params = ""

@@ -269,7 +258,7 @@ window "statwindow"
 		size = 640x480
 		anchor1 = none
 		anchor2 = none
-		background-color = #272727
+		background-color = #eeeeee
 		saved-params = "pos;size;is-minimized;is-maximized"
 		is-pane = true
 	elem "stat"
@@ -278,14 +267,9 @@ window "statwindow"
 		size = 640x480
 		anchor1 = 0,0
 		anchor2 = 100,100
-		text-color = #ffffff
-		background-color = #383838
 		is-default = true
 		saved-params = ""
-		tab-text-color = #ffffff
-		tab-background-color = #272727
-		prefix-color = #ebebeb
-		suffix-color = #ebebeb
+		tab-background-color = #eeeeee

 window "preferences_window"
 	elem "preferences_window"
@@ -294,7 +278,6 @@ window "preferences_window"
 		size = 1280x1000
 		anchor1 = none
 		anchor2 = none
-		background-color = none
 		is-visible = false
 		saved-params = "pos;size;is-minimized;is-maximized"
 		statusbar = false
@@ -304,7 +287,6 @@ window "preferences_window"
 		size = 960x1000
 		anchor1 = 0,0
 		anchor2 = 75,100
-		background-color = none
 		saved-params = ""
 	elem "character_preview_map"
 		type = MAP
--- a/tgstation.dme
+++ b/tgstation.dme
@@ -1453,6 +1453,7 @@
 #include "code\modules\client\client_colour.dm"
 #include "code\modules\client\client_defines.dm"
 #include "code\modules\client\client_procs.dm"
+#include "code\modules\client\darkmode.dm"
 #include "code\modules\client\message.dm"
 #include "code\modules\client\player_details.dm"
 #include "code\modules\client\preferences.dm"