/* ==UserStyle== @name Advent Of Code Catppuccin @namespace github.com/catppuccin/userstyles/styles/advent-of-code @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/advent-of-code @version 2025.09.06 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/advent-of-code/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aadvent-of-code @description Soothing pastel theme for Advent Of Code @author Catppuccin @license MIT @preprocessor less @var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] @var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ @import "https://userstyles.catppuccin.com/lib/lib.less"; @-moz-document domain("adventofcode.com") { :root { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); } @media (prefers-color-scheme: dark) { #catppuccin(@darkFlavor); } } #catppuccin(@flavor) { #lib.palette(); #lib.defaults(); body { background: @base; color: @text; header h1 a, header h1 span { color: @green; text-shadow: 0 0 2px @green, 0 0 5px @green; } a { color: @green; } .star-count { color: @yellow; } .quiet { color: @subtext0; opacity: 1; } .share, .share:hover, input[type="submit"] { color: @green; } main { article { em { color: @text; text-shadow: 0 0 5px @text; } h2 { color: @text; } input[type="radio"]:checked ~ span, input[type="checkbox"]:checked ~ span { color: @text; } input[type="radio"] ~ span:hover, input[type="radio"] ~ span:focus, input[type="checkbox"]:hover ~ span, input[type="checkbox"]:focus ~ span { background-color: @crust; } } .supporter-badge { color: @yellow; } .supporter-badge:hover { color: @yellow; text-shadow: 0 0 5px @yellow; } .sponsor-badge { color: @blue; } .sponsor-badge:hover, .sponsor-badge:focus { color: @blue; text-shadow: 0 0 5px @blue; } .leaderboard-entry { .leaderboard-position { color: @subtext1; } .leaderboard-totalscore { color: @text; } } .leaderboard-daylinks-selected { color: @text; text-shadow: 0 0 5px @text; } .leaderboard-daylinks-selected:hover { color: @green; } .leaderboard-anon { opacity: 1; color: @subtext0; } .calendar { .calendar-color-w { color: @text; } .calendar-color-s { color: @yellow; } .calendar-color-c { color: @subtext1; } .calendar-color-g3 { color: darken(@green, 3%); } .calendar-color-g2 { color: @green; } .calendar-color-g4 { color: darken(@green, 3.5%); } .calendar-color-u { color: @sky; } .calendar-color-a { color: @subtext0; } .calendar-color-g1 { color: darken(@green, 2.5%); } .calendar-color-g0 { color: darken(@green, 2%); } .calendar-color-l { color: @red; } .calendar-mark-complete { color: @yellow; } .calendar-mark-verycomplete { color: @yellow; } .calendar-day { color: @subtext1; } #calendar-countdown { color: @subtext1; } span { color: @surface0; } a { color: @surface2; } } .day-success { color: @yellow; text-shadow: 0 0 5px @yellow; } .stats-both { color: @yellow; } .stats-firstonly { color: @overlay0; } a:hover { background-color: @mantle !important; } input[type="text"], textarea, code::before { border-color: @surface0; background: @crust; } } } } }