作为算法竞赛选手，Codeforces（简称CF）是我们最常刷的在线评测平台之一，但不知你有没有这样的体验：深夜打开CF准备“上分”，纯白背景在暗光下异常刺眼；或者白天在图书馆刷题时，深色主题又显得压抑，虽然官方已经提供了浅色/深色切换，但每次都要手动点设置，而且无法随系统自动变化，实在不够优雅，我们就来聊聊如何实现CF配色方案自动修改，让界面真正“智能”起来。
为什么要自动修改配色？
手动切换配色看似简单,实际使用中却存在几个痛点：
- 忘记切换：进入网站时想不起来调整,等眼睛不舒服才后悔。
- 频繁切换：白天和晚上使用场景不同，每次都去设置菜单里找选项,浪费几秒钟也很烦。
- 多设备同步：在笔记本、台式机、手机端访问CF,希望配色能保持一致或跟随设备系统。
自动修改配色方案的意义在于：无需用户干预，让CF界面根据环境或偏好自动调整，比如跟随操作系统的“深色/浅色”模式，或者按照固定时间段（如19:00后开启深色）切换，甚至根据当前页面亮度动态变化，这样既保护视力,又提升刷题体验。
实现思路：注入脚本 + CSS变量
要修改CF的配色，最直接的方式是使用浏览器扩展（如Tampermonkey）向页面注入自定义CSS和JavaScript，CF本身使用了一套相对规范的CSS类名，我们可以通过覆盖CSS变量（如果官方支持）或直接覆盖规则来改变背景、文字、边框等颜色。
具体原理：
- 匹配CF域名：脚本只在
codeforces.com下运行。 - 注入样式：通过
GM_addStyle或创建<style>标签,定义一套新的配色规则。 - 检测切换条件：利用
matchMedia监听系统主题变化，或用setInterval检查当前时间,然后动态切换CSS类名或修改变量值。
实战：编写一个自动切换脚本
下面我们来实现一个简化版的“CF智能配色”用户脚本,这个脚本具备以下功能：
- 自动跟随系统亮色/暗色模式；
- 提供手动按钮强制切换（可选）；
- 避免闪烁（在页面加载早期注入）。
第一步：创建用户脚本框架
在Tampermonkey中新建脚本,添加必要的元信息：
// ==UserScript== // @name Codeforces Auto Color Scheme // @namespace http://tampermonkey.net/ // @version 1.0 // @description Automatically adjust CF color scheme based on system theme or time // @author Your Name // @match https://codeforces.com/* // @grant GM_addStyle // @run-at document-start // ==/UserScript==
@run-at document-start 很重要，这样可以尽早注入样式，避免页面加载后出现“白屏闪烁”。
第二步：定义两套配色方案
我们使用CSS类的覆盖方式，先定义深色模式和浅色模式对应的自定义CSS变量，再针对CF的核心元素设置颜色，由于CF的DOM结构比较复杂,我们可以先通过CSS变量统一控制。
在脚本中，我们定义一个 applyTheme(isDark) 函数：
function applyTheme(isDark) {
const darkCss = `
:root {
--bg-color: #1e1e1e;
--text-color: #d4d4d4;
--link-color: #569cd6;
--border-color: #333333;
--card-bg: #252526;
--input-bg: #333333;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
.roundbox, .bordero, .menu-box {
background-color: var(--card-bg);
border-color: var(--border-color);
}
a { color: var(--link-color); }
input, textarea, select {
background-color: var(--input-bg);
color: var(--text-color);
border-color: var(--border-color);
}
/* 更多覆盖规则... */
`;
const lightCss = `
:root {
--bg-color: #ffffff;
--text-color: #222222;
--link-color: #1a0dab;
--border-color: #ddd;
--card-bg: #f9f9f9;
--input-bg: #ffffff;
}
body { background-color: var(--bg-color); color: var(--text-color); }
.roundbox, .bordero, .menu-box { background-color: var(--card-bg); border-color: var(--border-color); }
a { color: var(--link-color); }
input, textarea, select { background-color: var(--input-bg); color: var(--text-color); }
`;
if (isDark) {
GM_addStyle(darkCss);
} else {
GM_addStyle(lightCss);
}
}
注意：GM_addStyle 每次调用都会新增样式，这里需要简单管理，为了演示，我们每次调用时先移除之前的动态样式，或者直接替换一个style标签的内容，更优雅的方式是使用 document.documentElement.dataset.theme 配合CSS选择器,但这里简化处理。
实际使用中，建议将两套配色都预先定义在页面上，然后通过切换 <html> 的 data-theme 属性来应用不同的CSS规则,这样更高效。
第三步：与系统主题同步
使用 window.matchMedia('(prefers-color-scheme: dark)') 来检测当前系统是否处于深色模式,并监听其变化：
function initAutoTheme() {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const handleChange = (e) => {
applyTheme(e.matches);
};
// 初始应用
applyTheme(mediaQuery.matches);
// 监听变化
mediaQuery.addEventListener('change', handleChange);
}
这样，当你在操作系统中切换深浅色模式时，CF界面会立刻自动修改配色,整个体验非常无缝。
第四步：增加时间判断（可选）
如果你希望不依赖系统，而是按照固定时间自动切换（比如晚上9点到早上7点使用深色）,可以写一个定时器：
function applyThemeByTime() {
const hour = new Date().getHours();
const isDark = hour >= 21 || hour < 7;
applyTheme(isDark);
}
// 每30秒检查一次，或者每次加载时检查，然后每分钟更新
setInterval(applyThemeByTime, 60000);
当然也可以结合两种模式：优先手动选择，其次系统主题，最后时间,这里不再展开。
第五步：手动切换按钮（增强体验）
虽然自动修改很省心，但有时你可能想临时手动覆盖，我们可以在CF页面的导航栏添加一个按钮，点击后强制切换，并存储用户偏好（用 GM_setValue），不过这一步属于优化,不影响核心功能。
效果与优化
完成上述脚本后，你打开CF会发现自己已经获得了自动配色的能力，不仅如此，你还能根据实际需求调整颜色，比如把背景改成淡黄色、护眼色,或者把代码块的样式改得更舒适。
为了让自动修改更顺滑,注意以下几点：
- 避免样式闪烁：在
document-start阶段注入必要的初始CSS，并尽快执行applyTheme。 - 减少DOM操作：不要每次切换都重建整个CSS，而是切换
html上的data-theme属性，然后用一个总的CSS文件覆盖：html[data-theme="dark"] .content { background: #1e1e1e !important; } html[data-theme="light"] .content { background: #fff !important; } - 兼容新页面：CF偶尔更新页面结构，可能有些选择器失效,可以在社区或GitHub上寻找持续维护的样式文件。
举一反三：其它网站的配色自动修改
这个思路不限于CF，任意网站只要你能找到对应的CSS类名，都可以通过用户脚本实现“配色方案自动修改”，GitHub、力扣、知乎等，自动修改的核心逻辑都是：检测环境 → 切换主题类 → 应用不同CSS。
下次你再觉得某个网站晚上刷起来眼睛累时，不妨自己动手写一个脚本，掌握了这个技能，你的浏览器就是一套“自适应调色板”。
CF配色方案自动修改并不复杂，但它能极大地提升日常刷题的舒适度，从手动切换到自动，看似小小的便利，却代表了一种“工具为人服务”的理念，希望这篇文章能给你带来一点灵感，让你在Codeforces上的“战斗”更加舒心，如果你有更酷的配色点子，也欢迎分享——毕竟,好的配色方案是刷题效率的隐形护盾。
