Change colors mid-game

Sara377544
21 Sept 2023, 00:26

I wanted to change colors of background+text to signal that in-game its either day or its night.

I'm just not sure how you change the background as well as all the text color in the game.
(Also if anyone has recommendations for colors for the day/night feel free to throw them in. I just want them to be pretty without making it illegible.)


Jennifer Wren
29 Sept 2023, 09:53

There is a list of possible actions if you press the plus sign when the tabs are set to "run script". In the first uppermost list is "change background colour" and "change foreground (meaning text) colour". Choose those both one at a time, and press add. Then, in the drop down menu in each script, choose a colour, one for each.
You can see how they are written, afterwards, by switching from tabs to script mode by clicking the box in the script tab with arrows in it. Click it again and you are back in tabs.
Maybe, you know most of that, or maybe I can't explain it well, but that is how you change the colours.
Colour blends will not change and change back, or else I haven't found out how, but solid backgrounds and text change just like that.


DeepDredux
12 Oct 2023, 23:21

What Jennifer recommended above will work in most cases, but if you want even more customization than what the Quest editor gives you by default, I found it easiest to edit the html directly:

// Update UI theme
    JS.setCss ("#endWaitLink", "color:"+game.defaultlinkforeground)
    JS.setCss ("#txtCommandDiv", "color:"+game.defaultlinkforeground)
    JS.setCss ("#mapLabel", "color:"+panestextlabelcolor+";background:"+paneslabelcolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#mapAccordion", "background:"+panesacordiancolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#inventoryLabel", "color:"+panestextlabelcolor+";background:"+paneslabelcolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#inventoryAccordion", "color:"+panestextcolor+";background:"+panesacordiancolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#statusVarsLabel", "color:"+panestextlabelcolor+";background:"+paneslabelcolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#statusVarsAccordion", "color:"+panestextcolor+";background:"+panesacordiancolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#placesObjectsLabel", "color:"+panestextlabelcolor+";background:"+paneslabelcolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#placesObjectsAccordion", "color:"+panestextcolor+";background:"+panesacordiancolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#compassLabel", "color:"+panestextlabelcolor+";background:"+paneslabelcolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#compassAccordion", "background:"+panesacordiancolor+";border:1px solid "+panesbordercolor)
    JS.eval ("$('.ui-state-default').css('background','"+panescolor+"')")
    JS.eval ("$('.ui-button-text').css('color','"+panesverbcolor+"')")
    JS.eval ("$('button').css('border-color', '"+panesbordercolor+"')")
   
    // Change color of ALL text currently onscreen
    JS.setCss ("div#divOutput span", "color:"+game.defaultforeground)
    JS.setCss ("div#divOutput a", "color:"+game.defaultlinkforeground)

    // Edit Pop-Up Modal Theming (if you have it)
    JS.eval ("$('.ui-widget-content').css({'background': '"+panesacordiancolor+"', 'color': '"+panestextcolor+"'});")
    JS.eval ("$('.ui-dialog-buttonpane').css({'background': '"+panesacordiancolor+"', 'color': '"+panestextcolor+"'});")
    JS.eval ("$('textarea').css({'background': '"+game.defaultbackground+"', 'color': '"+game.defaultforeground+"'});")
    if (not game.questplatform="webplayer") {
      JS.eval ("$('button.ui-dialog-titlebar-close').css({'background' : '#dfeffc url(\"images/ui-bg_glass_85_dfeffc_1x400.png\") 50% 50% repeat-x', 'border-color' : '#a6c9e2'});")
    }
    else {
      // Remove image calls and default just to colors so no errors are thrown in web player version
      JS.eval ("$('button.ui-dialog-titlebar-close').css({'background' : '#dfeffc', 'border-color' : '#a6c9e2'});")
    }
    
    // Hover & Active Rules:
    JS.eval ("$('button').not('ui-button-disabled').hover(function(){$(this).css({'background' : '"+buttonHoverColor+"'});}, function(){$(this).css({'background' : '"+panescolor+"'});});")
    JS.eval ("$('button').mousedown(function(){$(this).css({'border-style' : 'inset', 'background' : '"+buttonActiveColor+"', 'color' : '"+buttontextclickcolor+"'});});")
    JS.eval ("$('button').mouseup(function(){$(this).css({'border-style' : 'solid', 'background' : '"+buttonHoverColor+"', 'color' : '"+panesverbcolor+"'});});")
    JS.eval ("$('button').mouseleave(function(){$(this).css({'border-style' : 'solid', 'background' : '"+panescolor+"', 'color' : '"+panesverbcolor+"'});});")
    if (not game.questplatform="webplayer") {
      JS.eval ("$('button.ui-dialog-titlebar-close').hover(function(){$(this).css({'background' : '#d0e5f5 url(\"images/ui-bg_glass_75_d0e5f5_1x400.png\") 50% 50% repeat-x'});}, function(){$(this).css({'background' : '#dfeffc url(\"images/ui-bg_glass_85_dfeffc_1x400.png\") 50% 50% repeat-x'});});")
    }
    else {
      // Remove image calls and default just to colors so no errors are thrown in web player version
      JS.eval ("$('button.ui-dialog-titlebar-close').hover(function(){$(this).css({'background' : '#d0e5f5'});}, function(){$(this).css({'background' : '#dfeffc'});});")
    }
    JS.eval ("$('div#compassAccordion button').click(function(){$(this).css({'background' : '"+panescolor+"'});});")
    JS.eval ("$('div#gamePanesRunning h3').hover(function(){$(this).css({'background' : '"+labelHoverColor+"'});}, function(){$(this).css({'background' : '"+paneslabelcolor+"'});});")

    // Edit .hoverlinkclass color value to change hover color of links
    JS.eval ("$('#hoverlinkID').remove()")
    JS.eval ("$('<style id=hoverlinkID>').prop('type','text/css').html('.hoverlinkclass {color: "+game.linkHoverColor+" !important;}').appendTo('head')")
    JS.eval ("$('.cmdlink').hover(function(){$(this).addClass('hoverlinkclass');}, function(){$(this).removeClass('hoverlinkclass');});")

To revert the theme back to Quest's default theming, use the following variables for the script above:

game.defaultbackground = "SeaShell"
game.MapBGColor = "White"
game.defaultforeground = "Black"
game.marginscolour = "White"
game.defaultlinkforeground = "Blue"
panestextcolor = "black"
panestextlabelcolor = "#e17009"
panesverbcolor = "#2e6e9e"
buttontextclickcolor = "#e17009"
panesbordercolor = "#a6c9e2"
if (not game.questplatform="webplayer") {
        // If not webplayer, use more detailed buttons that come by default
        panescolor = "#dfeffc url(\"images/ui-bg_glass_85_dfeffc_1x400.png\") 50% 50% repeat-x"
        panesacordiancolor = "#fcfdfd url(\"images/ui-bg_inset-hard_100_fcfdfd_1x100.png\") 50% bottom repeat-x"
        paneslabelcolor = "#f5f8f9 url(\"images/ui-bg_inset-hard_100_f5f8f9_1x100.png\") 50% 50% repeat-x"
        buttonHoverColor = "#d0e5f5 url(\"images/ui-bg_glass_75_d0e5f5_1x400.png\") 50% 50% repeat-x"
        buttonActiveColor = "#f5f8f9 url(\"images/ui-bg_inset-hard_100_f5f8f9_1x100.png\") 50% 50% repeat-x"
        labelHoverColor = "#d0e5f5 url(\"images/ui-bg_glass_75_d0e5f5_1x400.png\") 50% 50% repeat-x"
}
else {
        // Remove image calls and default just to colors so no errors are thrown in web player version
        panescolor = "#dfeffc"
        panesacordiancolor = "#fcfdfd"
        paneslabelcolor = "#f5f8f9"
        buttonHoverColor = "#d0e5f5"
        buttonActiveColor = "#f5f8f9"
        labelHoverColor = "#d0e5f5"
 }
game.linkHoverColor = "#0066FF"

You can pick whatever colors you like for the variables above to change the UI around as you please. If there's something you want to change that I missed, use the "HTML Tools" button when playing on the Desktop Version (or F12 on the web version) to bring up the Inspect Element interface where you can click around and find what other HTML you'd like to change.

As for what colors to use, I find the following HTML color reference helpful: https://www.w3schools.com/colors/colors_names.asp