Advent of Code Light Theme

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

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Advent of Code Light Theme
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Apply a light theme to Advent of Code with proper styling for <code> elements
// @author       Nestorliao
// @match        https://adventofcode.com/*
// @icon         https://adventofcode.com/favicon.png
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // Inject custom styles for the light theme
    const style = document.createElement('style');
    style.textContent = `
        body {
            background-color: #fdfdfd !important; /* Light background */
            color: #333 !important; /* Darker text for contrast */
        }

        pre, code {
            background-color: #f4f4f4 !important; /* Light background for code blocks */
            color: #333 !important; /* Darker text */
            font-family: Consolas, "Courier New", monospace !important; /* Monospace font */
            border: 1px solid #ddd !important; /* Border for better visibility */
            padding: 2px 4px; /* Add padding for readability */
            border-radius: 4px; /* Rounded edges for a modern look */
        }

        a {
            color: #007acc !important; /* Blue links */
        }

        em {
            color: #333 !important; /* Match regular text color */
            font-style: italic; /* Preserve emphasis styling */
        }

        .leaderboard-entry {
            background-color: #fff !important; /* Light background for leaderboard */
        }

        header {
            background-color: #f1f1f1 !important; /* Light header background */
            border-bottom: 1px solid #ddd !important;
        }

        .day {
            background-color: #e6f7ff !important; /* Light blue background for days */
        }

        .day:hover {
            background-color: #cceeff !important; /* Slightly darker hover */
        }
    `;
    document.head.appendChild(style);
})();