☰

Chess.com Game Preview Styling

Applies custom styling to Chess.com board components.

  1. // ==UserScript==
  2. // @name         Chess.com Game Preview Styling
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.6
  5. // @description  Applies custom styling to Chess.com board components.
  6. // @author       SaberSpeed77
  7. // @match        https://www.chess.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=chess.com
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. const imgs = new Map([
  14.   /* White Pieces */
  15.   ["wp", ""],
  16.   ["wn", ""],
  17.   ["wb", ""],
  18.   ["wr", ""],
  19.   ["wq", ""],
  20.   ["wk", ""],
  21.  
  22.   /* Black Pieces */
  23.   ["bp", ""],
  24.   ["bn", ""],
  25.   ["bb", ""],
  26.   ["br", ""],
  27.   ["bq", ""],
  28.   ["bk", ""],
  29. ]);
  30.  
  31. /* Background */
  32. const background = "";
  33.  
  34. /*========= ↑ STYLE / CODE ↓ =========*/
  35.  
  36. const styleElement = document.createElement("style");
  37. const CSS = `
  38. *:not(svg) {
  39.   --theme-piece-set-wp: url(${imgs.get("wp")});
  40.   --theme-piece-set-wn: url(${imgs.get("wn")});
  41.   --theme-piece-set-wb: url(${imgs.get("wb")});
  42.   --theme-piece-set-wr: url(${imgs.get("wr")});
  43.   --theme-piece-set-wq: url(${imgs.get("wq")});
  44.   --theme-piece-set-wk: url(${imgs.get("wk")});
  45.  
  46.   --theme-piece-set-bp: url(${imgs.get("bp")});
  47.   --theme-piece-set-bn: url(${imgs.get("bn")});
  48.   --theme-piece-set-bb: url(${imgs.get("bb")});
  49.   --theme-piece-set-br: url(${imgs.get("br")});
  50.   --theme-piece-set-bq: url(${imgs.get("bq")});
  51.   --theme-piece-set-bk: url(${imgs.get("bk")});
  52.  
  53.   --theme-board-style-image: url(${background});
  54. }
  55. `
  56.  
  57. styleElement.appendChild(document.createTextNode(CSS));
  58. document.head.appendChild(styleElement);