Document websites are so hard to read! I wrote an optimization script

[xxnuo]

The website is great, and the documentation is very detailed.

The document styles were so bad they were blinding me, so I wrote a monkey script to optimize document styles.

// ==UserScript==
// @name         Crawl4AI 变量重构版 (牛皮纸+宋体)
// @namespace    http://tampermonkey.net/
// @version      6.0
// @description  通过重写网站核心 CSS 变量 (--background-color, --font-color 等) 实现牛皮纸护眼模式。
// @author       Custom
// @match        https://crawl4ai.com/*
// @match        https://*.crawl4ai.com/*
// @grant        GM_addStyle
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    // --- 1. 你的配置 (可以在这里微调) ---
    const theme = {
        bg: '#f6f1e7',          // 背景：牛皮纸黄
        text: '#2b2b2b',        // 正文：深黑灰
        dimText: '#555555',     // 次要文字：灰色
        primary: '#a34100',     // 主色调：砖红色 (替代原来的青色，更护眼)
        blockBg: 'rgba(0,0,0,0.05)', // 代码块/引用块背景：淡灰透明
        codeBg: 'rgba(0,0,0,0.06)',  // 代码背景
        font: '"Source Han Serif SC", "Noto Serif SC", "Songti SC", serif', // 宋体
        mono: '"JetBrains Mono", Consolas, monospace' // 等宽字体
    };

    // --- 2. 加载字体资源 ---
    const link1 = document.createElement('link'); link1.rel = 'stylesheet';
    link1.href = 'https://npm.elemecdn.com/lxgw-wenkai-screen-web/style.css';
    document.head.appendChild(link1);
    const link2 = document.createElement('link'); link2.rel = 'stylesheet';
    link2.href = 'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700&display=swap';
    document.head.appendChild(link2);

    // --- 3. 核心：重写 CSS 变量 ---
    // 我们直接针对 :root 和可能的主题属性进行变量覆盖
    const css = `
        :root, [data-md-color-scheme="slate"], [data-md-color-scheme="default"] {

            /* === 背景色重置 === */
            --background-color: ${theme.bg} !important;      /* 核心背景 */
            --block-background-color: ${theme.blockBg} !important; /* 块级元素背景 (解决 Tips 黑底问题) */
            --code-bg-color: ${theme.codeBg} !important;     /* 代码块背景 */
            --progress-bar-background: #dcdcdc !important;

            /* === 文字颜色重置 === */
            --global-font-color: ${theme.text} !important;   /* 全局主文字 */
            --font-color: ${theme.text} !important;          /* 另一种主文字变量 */
            --invert-font-color: #ffffff !important;         /* 反色文字 (一般用于按钮) */

            /* === 次要/灰度文字 === */
            --secondary-color: ${theme.dimText} !important;
            --secondary-dimmed-color: ${theme.dimText} !important;
            --tertiary-color: #777 !important;

            /* === 强调色 (原网页是青色/粉色，改为护眼红褐色) === */
            --primary-color: ${theme.primary} !important;
            --primary-dimmed-color: #bd5a28 !important;
            --accent-color: ${theme.primary} !important;
            --error-color: #d32f2f !important;
            --progress-bar-fill: ${theme.primary} !important;

            /* === 字体栈 (保留原有结构，注入宋体) === */
            --font-stack: ${theme.font} !important;
            --mono-font-stack: ${theme.mono} !important;

            /* === 布局与修饰 === */
            --input-style: solid !important;
            /* 保持原有的字号设置，这里不做覆盖，除非你想改 */
            /* --global-font-size: 14px; */
        }

        /* === 补充修正 === */
        /* 虽然改了变量，但 body 必须显式引用这些变量才能生效 */
        body {
            background-color: var(--background-color) !important;
            color: var(--global-font-color) !important;
            font-family: var(--font-stack) !important;
        }

        /* 确保链接使用我们定义的主色 */
        a { color: var(--primary-color) !important; }

        /* 修复代码块内文字颜色 (避免被全局变量带偏) */
        pre, code {
            font-family: var(--mono-font-stack) !important;
        }
    `;

    GM_addStyle(css);
    console.log('Crawl4AI V6.0: Variable Overwrite Mode Activated.');

})();