洛谷界面颜色美化

闲的又写了一个油猴代码……
这是一个功能完整、可直接使用的洛谷美化油猴脚本，这个脚本包含了界面风格优化、配色调整、字体美化、间距优化等常用的美化功能，是可以根据自己的喜好调整参数的。

代码

CPP

// ==UserScript==
// @name         洛谷界面美化
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  美化洛谷(Luogu)网页界面
// @author       kill_
// @match        https://www.luogu.com.cn/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';
    const customStyle = `
    :root {
        --bg-primary: #1a1a2e;
        --bg-secondary: #16213e;
        --text-primary: #e94560;
        --text-secondary: #ffffff;
        --border-color: #0f3460;
    }
    body, .lg-container, .lg-content {
        background-color: var(--bg-primary) !important;
        color: var(--text-secondary) !important;
    }
    .am-navbar, .am-tabs-bd, .lg-sidebar {
        background-color: var(--bg-secondary) !important;
        border-color: var(--border-color) !important;
    }
    a, .am-btn {
        color: var(--text-primary) !important;
    }
    .am-btn-primary {
        background-color: var(--text-primary) !important;
        border-color: var(--text-primary) !important;
        color: white !important;
    }
    .lg-problem-list-item, .lg-article-item {
        background-color: var(--bg-secondary) !important;
        border-radius: 8px !important;
        margin-bottom: 8px !important;
        padding: 12px !important;
    }
    code, pre {
        background-color: #0f172a !important;
        color: #a5d8ff !important;
        border-radius: 4px !important;
    }
    `;
    GM_addStyle(customStyle);
})();

不同的部分对应不同的区域，下面给一张对照表：

部分	作用
`--bg-primary`	整个页面的主背景色
`--bg-secondary`	导航栏、侧边栏背景色
`--text-primary`	链接、按钮的高亮颜色
`--text-secondary`	普通文字的颜色
`--border-color`	各类边框的颜色

洛谷界面颜色美化

文章操作

相关推荐

评论

洛谷界面颜色美化