Liquid Quartz

This is a bookmarklet that sets a dark background colour on Kongregate game pages. The goal of this script is to dim nearly all the elements on the page, so as not to distract the player with bright lights, while keeping the chat box and achievement tabs legible.

The script works on Chrome 23 and IE 9, but doesn’t work at all only partially works in Firefox. The reason is this script relies on the $ and $$ functions that are defined in Kongregate’s javascripts. Apparently, Firefox doesn’t allow bookmarklets to access those. EDIT: This did not work in the “javascript:” URL version, but works in the bookmarklet version. However, still only half of it works in Firefox, because Firefox rejects my modifications to the CSS rules, throwing “Error: SecurityError: The operation is insecure.” This rule modification is required for dynamically inserted elements, like chat messages, to use the dark style. Firefox-compatible version to come later.

EDIT (Dec. 11, 2012): I updated the script to version 2, which colourizes more elements.

—> Instructions to install the script here <—

——————————————————————–

Below is purely for academic interest only. Maybe you will learn something? The original source code (unfortunately garbled, thanks a lot WordPress) before minification:

/**
 * Changes an existing element's style (newly created elements won't be affected)
 */ 
function Sty(sel,obj){
  var a=$(sel);
  for(var i=0;i<a.length;i++){
    for(var j in obj){
      a[i].style[j]=obj[j]
    }
  }
}

/**
 * Changes the CSS rule.
 */ 
function aCSS(r,def) {
  var sss=document.styleSheets;
  if (sss){
  for (var i=0;i<sss.length;i++){
    if (sss[i].cssRules || sss[i].rules) {
      if (sss[i].addRule){ /* IE + cHrome */
         /* For IE9, add it to the LAST stylesheet 
          * For Google Chrome, add it to the FIRST stylesheet 
          * TODO: Optimize this.
          */
        sss[i].addRule(r,def,0);
      }
      else if (sss[i].insertRule){ /* FF + Chrome + IE 9 */ 
        sss[i].insertRule(r+'{'+def+'}', 0);
        break;
      }
    }
  }
  }
}

var o0 = {"backgroundColor":"#000","color":"#ccc"}; /* BLACK */
var o1 = {"backgroundColor":"#111","color":"#ccc"}; /* DARKEST GRAY*/
/* var oT = {"color":"#ccc"}; /* TEXT ONLY */

var s0 = "background-color:#000;color:#ccc"; /* BLACK */
var s1 = "background:#111;color:#ccc;"; /* DARKEST GRAY */
var s2 = s1 + ";border-color:#333"; /* DARKEST GRAY + OUTLINE */
var s3 = "background-color:#113;color:#ccc"; /* DARK BLUE */

/* Main backgrounds */
Sty("#primarywrap", o0);
Sty("#secondary_wrap", o1);
Sty("#subwrap,#footer,#footer a", o0);

/* Border around game and chat - use bg-COLOR to preserve images */
Sty("#maingame,#quicklinks li,#kong_game_ui ul.main_tabs", o1);
/* TABs */
aCSS("#kong_game_ui ul.main_tabs li.tab a.active",s0);

/* CHAT */
Sty("#chat_container,.tabpane", o0);

/* Room name (not tab) */
Sty(".room_name",{"color":"#eee"});
/* Room tab */
aCSS("#kong_game_ui .chat_room_tab.active a",s1);
/*Sty("#kong_game_ui .chat_room_tab.active a",o1);*/
/* user list */
Sty(".chat_message_window,.users_in_room",o1);
aCSS("#kong_game_ui .user_row .username","color:#ccc");
/* chat messages */
aCSS("#kong_game_ui .chat_message_window .whisper", s3); /* dark blue*/
aCSS("#kong_game_ui .chat_message_window .even", s0);
aCSS("#kong_game_ui .chat_message_window .error_msg", "background-color:#311"); /* dark red */
Sty(".chat_input",o1);

/* GAME INFO tab */
aCSS(".cntrToggle",s1);
aCSS(".panel_handle a","color:#ccc");

/* ACHIEVEMENTS tab */
aCSS("#kong_game_ui .accomplishment_vtabpane_content", s2);
/* active vs inactive achievements - make them same colors for simplicity */
aCSS("#kong_game_ui ul.accomplishment_vtabs li.vtab a", s1);
aCSS("#kong_game_ui ul.accomplishment_vtabs li.vtab a.active", s2);
aCSS("#kong_game_ui .chat_promotion",s1);

/* USER INFO tab */
aCSS("#kong_game_ui .tabpane .contents_inner",s1);

/* boxes below game */
Sty(".cntrMidlight",{"backgroundColor":"#000","borderColor":"#333"});
Sty("#gameinfo .game_details",o0);
Sty("#comments_list",o0);
Sty(".comment",o1);
Sty(".comment_reply",o0);
Sty("#comment_content_0, #comment_content_1",{"backgroundColor":"#222","color":"#ccc","borderColor":"#333"});

/* sidebar/ads + recommended games */
Sty("#gamespotlight_container",o0);
Sty(".game",{"color":"#ccc"});