☰

Advent of Code Light Theme

Apply a light theme to Advent of Code with proper styling for <code> elements

  1. // ==UserScript==
  2. // @name         Advent of Code Light Theme
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.2
  5. // @description  Apply a light theme to Advent of Code with proper styling for <code> elements
  6. // @author       Nestorliao
  7. // @match        https://adventofcode.com/*
  8. // @icon         https://adventofcode.com/favicon.png
  9. // @grant        none
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Inject custom styles for the light theme
  17.     const style = document.createElement('style');
  18.     style.textContent = `
  19.         body {
  20.             background-color: #fdfdfd !important; /* Light background */
  21.             color: #333 !important; /* Darker text for contrast */
  22.         }
  23.  
  24.         pre, code {
  25.             background-color: #f4f4f4 !important; /* Light background for code blocks */
  26.             color: #333 !important; /* Darker text */
  27.             font-family: Consolas, "Courier New", monospace !important; /* Monospace font */
  28.             border: 1px solid #ddd !important; /* Border for better visibility */
  29.             padding: 2px 4px; /* Add padding for readability */
  30.             border-radius: 4px; /* Rounded edges for a modern look */
  31.         }
  32.  
  33.         a {
  34.             color: #007acc !important; /* Blue links */
  35.         }
  36.  
  37.         em {
  38.             color: #333 !important; /* Match regular text color */
  39.             font-style: italic; /* Preserve emphasis styling */
  40.         }
  41.  
  42.         .leaderboard-entry {
  43.             background-color: #fff !important; /* Light background for leaderboard */
  44.         }
  45.  
  46.         header {
  47.             background-color: #f1f1f1 !important; /* Light header background */
  48.             border-bottom: 1px solid #ddd !important;
  49.         }
  50.  
  51.         .day {
  52.             background-color: #e6f7ff !important; /* Light blue background for days */
  53.         }
  54.  
  55.         .day:hover {
  56.             background-color: #cceeff !important; /* Slightly darker hover */
  57.         }
  58.     `;
  59.     document.head.appendChild(style);
  60. })();