diff --git a/code/modules/goonchat/browserassets/js/browserOutput.js b/code/modules/goonchat/browserassets/js/browserOutput.js
index 93a498fd06..b6fdf2c276 100644
--- a/code/modules/goonchat/browserassets/js/browserOutput.js
+++ b/code/modules/goonchat/browserassets/js/browserOutput.js
@@ -35,7 +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???
+ 'colorPreset': 0, // index in the color presets list.
//Options menu
'selectedSubLoop': null, //Contains the interval loop for closing the selected sub menu
@@ -73,6 +73,14 @@ var opts = {
};
+// Array of names for chat display color presets.
+// If not set to normal, a CSS file `browserOutput_${name}.css` will be added to the head.
+var colorPresets = [
+ 'normal',
+ 'light',
+ 'dark'
+]
+
function clamp(val, min, max) {
return Math.max(min, Math.min(val, max))
}
@@ -96,6 +104,12 @@ if (typeof String.prototype.trim !== 'function') {
};
}
+function updateColorPreset() {
+ var el = $("#colorPresetLink")[0];
+ el.href = "browserOutput_"+colorPresets[opts.colorPreset]+".css";
+ runByond('?_src_=chat&proc=colorPresetPost&preset='+colorPresets[opts.colorPreset]);
+}
+
// Linkify the contents of a node, within its parent.
function linkify(parent, insertBefore, text) {
var start = 0;
@@ -395,19 +409,6 @@ 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};
@@ -615,7 +616,7 @@ $(function() {
'shighlightColor': getCookie('highlightcolor'),
'smusicVolume': getCookie('musicVolume'),
'smessagecombining': getCookie('messagecombining'),
- 'sdarkmode': getCookie('darkmode'),
+ 'scolorPreset': getCookie('colorpreset'),
};
if (savedConfig.sfontSize) {
@@ -626,9 +627,6 @@ $(function() {
$("body").css('line-height', savedConfig.slineHeight);
internalOutput('
Loaded line height setting of: '+savedConfig.slineHeight+'', 'internal');
}
- if(savedConfig.sdarkmode == 'true'){
- swap();
- }
if (savedConfig.spingDisabled) {
if (savedConfig.spingDisabled == 'true') {
opts.pingDisabled = true;
@@ -654,6 +652,13 @@ $(function() {
opts.highlightColor = savedConfig.shighlightColor;
internalOutput('
Loaded highlight color of: '+savedConfig.shighlightColor+'', 'internal');
}
+
+ if (savedConfig.scolorPreset) {
+ opts.colorPreset = Number(savedConfig.scolorPreset);
+ updateColorPreset();
+ internalOutput('
Loaded color preset of: '+colorPresets[opts.colorPreset]+'', 'internal');
+ }
+
if (savedConfig.smusicVolume) {
var newVolume = clamp(savedConfig.smusicVolume, 0, 100);
$('#adminMusic').prop('volume', newVolume / 100);
@@ -839,9 +844,6 @@ $(function() {
$('#toggleOptions').click(function(e) {
handleToggleClick($subOptions, $(this));
});
- $('#darkmodetoggle').click(function(e) {
- swap();
- });
$('#toggleAudio').click(function(e) {
handleToggleClick($subAudio, $(this));
});
@@ -992,6 +994,13 @@ $(function() {
opts.messageCount = 0;
});
+ $('#changeColorPreset').click(function() {
+ opts.colorPreset = (opts.colorPreset+1) % colorPresets.length;
+ updateColorPreset();
+ setCookie('colorpreset', opts.colorPreset, 365);
+ internalOutput('
Changed color preset to: '+colorPresets[opts.colorPreset]);
+ });
+
$('#musicVolumeSpan').hover(function() {
$('#musicVolumeText').addClass('hidden');
$('#musicVolume').removeClass('hidden');
diff --git a/modular_citadel/interface/skin.dmf b/modular_citadel/interface/skin.dmf
index c5b5138609..1a6eb17336 100644
--- 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 = #eeeeee
+ background-color = #242424
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 = #eeeeee
+ background-color = #272727
saved-params = "splitter"
left = "mapwindow"
right = "infowindow"
@@ -78,7 +78,7 @@ window "mainwindow"
size = 200x200
anchor1 = none
anchor2 = none
- background-color = #ffffff
+ background-color = #272727
is-visible = false
saved-params = ""
elem "tooltip"
@@ -87,7 +87,7 @@ window "mainwindow"
size = 999x999
anchor1 = none
anchor2 = none
- background-color = #ffffff
+ background-color = #272727
is-visible = false
saved-params = ""
@@ -119,7 +119,7 @@ window "infowindow"
size = 640x480
anchor1 = none
anchor2 = none
- background-color = #eeeeee
+ background-color = #242424
saved-params = "pos;size;is-minimized;is-maximized"
is-pane = true
elem "info"
@@ -128,6 +128,7 @@ window "infowindow"
size = 640x445
anchor1 = 0,0
anchor2 = 100,100
+ background-color = #272727
saved-params = "splitter"
left = "statwindow"
right = "outputwindow"
@@ -138,7 +139,8 @@ window "infowindow"
size = 104x20
anchor1 = 3,0
anchor2 = 19,0
- background-color = #90b3dd
+ text-color = #a4BaD6
+ background-color = #40628a
saved-params = "is-checked"
text = "Changelog"
command = "changelog"
@@ -148,7 +150,8 @@ window "infowindow"
size = 100x20
anchor1 = 19,0
anchor2 = 34,0
- background-color = #90b3dd
+ text-color = #a4BaD6
+ background-color = #40628a
saved-params = "is-checked"
text = "Rules"
command = "rules"
@@ -158,7 +161,8 @@ window "infowindow"
size = 100x20
anchor1 = 34,0
anchor2 = 50,0
- background-color = #90b3dd
+ text-color = #a4BaD6
+ background-color = #40628a
saved-params = "is-checked"
text = "Wiki"
command = "wiki"
@@ -168,7 +172,8 @@ window "infowindow"
size = 100x20
anchor1 = 50,0
anchor2 = 66,0
- background-color = #90b3dd
+ text-color = #a4BaD6
+ background-color = #40628a
saved-params = "is-checked"
text = "Forum"
command = "forum"
@@ -178,7 +183,8 @@ window "infowindow"
size = 100x20
anchor1 = 66,0
anchor2 = 81,0
- background-color = #90b3dd
+ text-color = #a4BaD6
+ background-color = #40628a
saved-params = "is-checked"
text = "GitHub"
command = "github"
@@ -189,7 +195,8 @@ window "infowindow"
anchor1 = 81,0
anchor2 = 97,0
font-size = 8
- background-color = #ef7f7f
+ text-color = #a4BaD6
+ background-color = #A92c2c
saved-params = "is-checked"
text = "Report Issue"
command = "report-issue"
@@ -201,7 +208,7 @@ window "outputwindow"
size = 640x480
anchor1 = none
anchor2 = none
- background-color = #eeeeee
+ background-color = #272727
saved-params = "pos;size;is-minimized;is-maximized"
titlebar = false
statusbar = false
@@ -225,7 +232,8 @@ window "outputwindow"
size = 37x20
anchor1 = 100,100
anchor2 = none
- background-color = #eeeeee
+ text-color = #a4BaD6
+ background-color = #272727
saved-params = "is-checked"
text = "Chat"
command = ".winset \"say.is-checked=true ? input.command=\"!say \\\"\" : input.command=\""
@@ -237,7 +245,7 @@ window "outputwindow"
size = 640x456
anchor1 = 0,0
anchor2 = 100,100
- background-color = #ffffff
+ background-color = #272727
is-visible = false
is-disabled = true
saved-params = ""
@@ -248,6 +256,8 @@ window "outputwindow"
size = 640x456
anchor1 = 0,0
anchor2 = 100,100
+ text-color = #a4bad6
+ background-color = #272727
is-default = true
saved-params = ""
@@ -258,7 +268,7 @@ window "statwindow"
size = 640x480
anchor1 = none
anchor2 = none
- background-color = #eeeeee
+ background-color = #242424
saved-params = "pos;size;is-minimized;is-maximized"
is-pane = true
elem "stat"
@@ -267,9 +277,14 @@ window "statwindow"
size = 640x480
anchor1 = 0,0
anchor2 = 100,100
+ text-color = #a4bad6
+ background-color = #272727
is-default = true
saved-params = ""
- tab-background-color = #eeeeee
+ tab-text-color = #a4bad6
+ tab-background-color = #242424
+ prefix-color = #a4bad6
+ suffix-color = #a4bad6
window "preferences_window"
elem "preferences_window"