Greasy Fork

Greasy Fork is available in English.

洛谷讨论区颜色自定义

可以根据个人喜好,设置洛谷各个讨论区的颜色

当前为 2023-09-17 提交的版本,查看 最新版本

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ==UserScript==
// @name          洛谷讨论区颜色自定义
// @namespace     https://www.luogu.com.cn/user/542457
// @description   可以根据个人喜好,设置洛谷各个讨论区的颜色
// @author        cff_0102
// @run-at        document-end
// @version       1.2.3
// @license       MIT
// @match         https://www.luogu.com.cn/*
// @icon          https://www.luogu.com.cn/favicon.ico
// ==/UserScript==
(function() {
    'use strict';
    function hexToRgb(hex) {hex = hex.replace(/^#/, '');const bigint = parseInt(hex, 16);const r = (bigint >> 16) & 255;const g = (bigint >> 8) & 255;const b = bigint & 255;return { r, g, b };}
    function lighterColor(hex) {hex = hex.replace(/^#/, '');const bigint = parseInt(hex, 16);let r = (bigint >> 16) & 255;let g = (bigint >> 8) & 255;let b = bigint & 255;r = Math.floor(255 - (255 - r) / 2);g = Math.floor(255 - (255 - g) / 2);b = Math.floor(255 - (255 - b) / 2);const newHex = ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1);return `#${newHex}`;}
    // 更改颜色
    function changeColors(){//↓ 更改这里的八个十六进制颜色即可更改洛谷相应版块的颜色
        const newcolor1 = '#34495e'; // “全部板块”的颜色
        const newcolor2 = '#8e44ad'; // “站务版”的颜色
        const newcolor3 = '#52c41a'; // “题目总版”的颜色
        const newcolor4 = '#e74c3c'; // “学术版”的颜色
        const newcolor5 = '#3ba4a4'; // “灌水区”的颜色
        const newcolor6 = '#f39c11'; // “反馈、申请、工单专版”的颜色
        const newcolor7 = '#996600'; // “小黑屋”的颜色
        const newcolor8 = '#3498db'; // 团队内帖子的颜色
        // 更改上面的颜色(并保存更改后的脚本)即可实现更改洛谷对应讨论区的颜色
        const ch1 = 1;// 是否更改帖子的背景色(0 或 1)(见 1.0.2 版本发布内容)
        const ch2 = 1;// 是否更改讨论列表左侧栏的背景色(同上)
        const bgc = '#fcffffc0';// 如果更改左侧栏背景色,讨论列表左侧栏的颜色(后两位是不透明度)(洛谷原版是 #ffffffff)
        const opt = 1;// 是否更改页面的背景(0 或 1 或 2,0 表示不更改,仍保持原来的灰色;1 表示更改为纯色;2 表示更改为图片)
        const bgc1 = '#e8f9f8';// 如果 opt 为 1,要更改的背景颜色(#efefef 是洛谷默认背景色)(顺带一提,这个背景色其实是和 https://www.luogu.com.cn/theme/design/98289 相匹配的)
        const bgi2 = 'url("https://s1.ax1x.com/2023/06/03/pCpu4hT.png")';// 如果 opt 为 2,要更改的背景图片链接(更改双引号中间的内容即可)
        // 更改上面的设置即可更改显示效果(调的好还可以配出深色模式!)
        // 建议在某个地方保存自己的设置,以免更新时回到原来的设置!更新前先复制以上部分的设置,再进行更新,更新结束后再将上面的设置改回来。
        /*
        附:
        1. 洛谷原版色系:
        const newcolor1 = '#272727'; // “全部板块”的颜色
        const newcolor2 = '#14558f'; // “站务版”的颜色
        const newcolor3 = '#f39c11'; // “题目总版”的颜色
        const newcolor4 = '#9d3dcf'; // “学术版”的颜色
        const newcolor5 = '#52c41a'; // “灌水区”的颜色
        const newcolor6 = '#2949b4'; // “反馈、申请、工单专版”的颜色
        const newcolor7 = '#272727'; // “小黑屋”的颜色
        const newcolor8 = '#272727'; // 团队内帖子的颜色
        2. 高对比度色系:
        const newcolor1 = '#34495e'; // “全部板块”的颜色
        const newcolor2 = '#f01010'; // “站务版”的颜色
        const newcolor3 = '#f0b810'; // “题目总版”的颜色
        const newcolor4 = '#9cf010'; // “学术版”的颜色
        const newcolor5 = '#10f0d4'; // “灌水区”的颜色
        const newcolor6 = '#109cf0'; // “反馈、申请、工单专版”的颜色
        const newcolor7 = '#8010f0'; // “小黑屋”的颜色
        const newcolor8 = '#f010d4'; // 团队内帖子的颜色
        */

        const elementsWithCustomStyle = document.querySelectorAll('[style*="--forum-color: #f39c11; color: var(--forum-color);"]');// 题目讨论版
        elementsWithCustomStyle.forEach(function (element) {
            element.style.cssText = `--forum-color: ${newcolor3}; color: var(--forum-color);`;
        });
        var currentURL = window.location.href;

        // 检查链接是否以特定URL开头
        if (currentURL.startsWith("https://www.luogu.com.cn/discuss/new")) {
            // 获取所有class为card padding-default的元素
            var elements = document.querySelectorAll(".card.padding-default");

            // 遍历元素并修改背景颜色
            elements.forEach(function(element) {
                element.style.backgroundColor = bgc;
            });
        }
        const forumElement = document.querySelector("section.side");
        if(forumElement){
            // 获取所属板块的文本内容
            const forumTextElement = forumElement.querySelector("a.color-default");
            const forumText = forumTextElement.textContent.trim();
            const temp = document.querySelector("section.main");
            const temp1 = temp.querySelector("div.card.padding-default");
            // 根据所属板块的文本内容判断是否需要修改颜色
            if (forumText === '站务版' && !(window.location.href.startsWith('https://www.luogu.com.cn/discuss/new'))/* 防止在帖子发布页(https://www.luogu.com.cn/discuss/new?forum=xxx)底下也出现站务版颜色边框 */) {
                const newColor = newcolor2; // 设置新的颜色值
                const rgbColor = hexToRgb(newColor); // 将十六进制颜色转换为 RGB 形式
                // 修改元素的颜色属性
                temp1.style.cssText = `border-bottom: 2px solid rgb(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b});`;
            }else if (forumText === '题目总版') {
                const newColor = newcolor3; // 设置新的颜色值
                const rgbColor = hexToRgb(newColor); // 将十六进制颜色转换为 RGB 形式
                // 修改元素的颜色属性
                temp1.style.cssText = `border-bottom: 2px solid rgb(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b});`;
            }else if (forumText === '学术版') {
                const newColor = newcolor4; // 设置新的颜色值
                const rgbColor = hexToRgb(newColor); // 将十六进制颜色转换为 RGB 形式
                // 修改元素的颜色属性
                temp1.style.cssText = `border-bottom: 2px solid rgb(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b});`;
            }else if (forumText === '灌水区') {
                const newColor = newcolor5; // 设置新的颜色值
                const rgbColor = hexToRgb(newColor); // 将十六进制颜色转换为 RGB 形式
                // 修改元素的颜色属性
                temp1.style.cssText = `border-bottom: 2px solid rgb(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b});`;
            }else if (forumText === '反馈、申请、工单专版') {
                const newColor = newcolor6; // 设置新的颜色值
                const rgbColor = hexToRgb(newColor); // 将十六进制颜色转换为 RGB 形式
                // 修改元素的颜色属性
                temp1.style.cssText = `border-bottom: 2px solid rgb(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b});`;
            }else if (forumText === '小黑屋') {
                const newColor = newcolor7; // 设置新的颜色值
                const rgbColor = hexToRgb(newColor); // 将十六进制颜色转换为 RGB 形式
                // 修改元素的颜色属性
                temp1.style.cssText = `border-bottom: 2px solid rgb(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b});`;
            }else if (forumText.startsWith('团队')){// 团队帖子内
                const newColor = newcolor8; // 设置新的颜色值
                const rgbColor = hexToRgb(newColor); // 将十六进制颜色转换为 RGB 形式
                // 修改元素的颜色属性
                temp1.style.cssText = `border-bottom: 2px solid rgb(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b});`;
            }else if (window.location.href.startsWith('https://www.luogu.com.cn/discuss/'/* 确保在讨论区 */ && !(window.location.href.startsWith('https://www.luogu.com.cn/discuss/new'))/* 防止在帖子发布页(https://www.luogu.com.cn/discuss/new?forum=xxx)底下也出现题目版颜色边框 */)){// 在题目详情页中
                // console.log(forumText);
                const newColor = newcolor3; // 设置新的颜色值
                const rgbColor = hexToRgb(newColor); // 将十六进制颜色转换为 RGB 形式
                // 修改元素的颜色属性
                temp1.style.cssText = `border-bottom: 2px solid rgb(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b});`;
            }
        }
        const a=document.querySelectorAll("[title=全部板块]");
        for(let x of a) x.style.cssText = `--forum-color: ${newcolor1}; color: var(--forum-color);`; //洛谷蓝
        const b=document.querySelectorAll("[title=站务版]");
        for(let x of b) x.style.cssText = `--forum-color: ${newcolor2}; color: var(--forum-color);`; //紫名紫
        const c=document.querySelectorAll("[title=题目总版]");
        for(let x of c) x.style.cssText = `--forum-color: ${newcolor3}; color: var(--forum-color);`; // AC 绿
        const d=document.querySelectorAll("[title=学术版]");
        for(let x of d) x.style.cssText = `--forum-color: ${newcolor4}; color: var(--forum-color);`; //红名红
        const e=document.querySelectorAll("[title=灌水区]");
        for(let x of e) x.style.cssText = `--forum-color: ${newcolor5}; color: var(--forum-color);`; //cff 青
        const f=document.querySelectorAll("[title=反馈、申请、工单专版]");
        for(let x of f) x.style.cssText = `--forum-color: ${newcolor6}; color: var(--forum-color);`; //排行橙
        const g=document.querySelectorAll("[title=小黑屋]");
        for(let x of g){x.style.cssText = `--forum-color: ${newcolor7}; color: var(--forum-color);`; //棕名棕
            const svgElement = x.querySelector("svg");
            const pathElement = svgElement.querySelector("path");
            pathElement.setAttribute("d", "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48"); //更改小黑屋图标(从四个方块改成一个方块)
        }
        const h=document.querySelectorAll("[title^=团队]");
        for(let x of h){x.style.cssText = `--forum-color: ${newcolor8}; color: var(--forum-color);`; //比赛蓝
            const svgElement = x.querySelector("svg");
            const pathElement = svgElement.querySelector("path");
            pathElement.setAttribute("d", "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48"); //更改小黑屋图标(从四个方块改成一个方块)
        }
        if(ch1){
            const c=document.getElementsByClassName("card post-item padding-default");
            for (let el of c) {
                if (el.querySelector("[title=站务版]")!=null) {
                    el.style.cssText=`background-color: ${lighterColor(lighterColor(newcolor2))}A0; color: var(--forum-color);`;
                } else if (el.querySelector("[title=题目总版]")!=null) {
                    el.style.cssText=`background-color: ${lighterColor(lighterColor(newcolor3))}A0; color: var(--forum-color);`;
                } else if (el.querySelector("[title=学术版]")!=null) {
                    el.style.cssText=`background-color: ${lighterColor(lighterColor(newcolor4))}A0; color: var(--forum-color);`;
                } else if (el.querySelector("[title=灌水区]")!=null) {
                    el.style.cssText=`background-color: ${lighterColor(lighterColor(newcolor5))}A0; color: var(--forum-color);`;
                } else if (el.querySelector("[title=反馈、申请、工单专版]")!=null) {
                    el.style.cssText=`background-color: ${lighterColor(lighterColor(newcolor6))}A0; color: var(--forum-color);`;
                } else if (el.querySelector("[title=小黑屋]")!=null) {
                    el.style.cssText=`background-color: ${lighterColor(lighterColor(newcolor7))}A0; color: var(--forum-color);`;
                } else if (el.querySelector("[title^=团队]")!=null) {
                    el.style.cssText=`background-color: ${lighterColor(lighterColor(newcolor8))}A0; color: var(--forum-color);`;
                } else {// 题目讨论区
                    el.style.cssText=`background-color: ${lighterColor(lighterColor(newcolor3))}A0; color: var(--forum-color);`;
                }
            }//改背景色
        }
        if(ch2){
            const temp = document.querySelector("section.side");
            if(temp){const temp1 = temp.querySelector("div.card.left.padding-default");if(temp1)temp1.style.cssText=`background-color: ${bgc}; color: var(--forum-color);`;}
        }

        //更改背景
        var mainElement = document.querySelector('.wrapped.lfe-body.mobile-body');
        var bodyElement = document.body;
        if (mainElement) {
            if(opt===1)mainElement.style.background = bgc1;
            else if(opt){
                // 设置背景图片
                bodyElement.style.backgroundImage = bgi2;
                bodyElement.style.backgroundSize = 'cover';
                bodyElement.style.backgroundRepeat = 'no-repeat';
                // 将背景固定
                bodyElement.style.backgroundAttachment = 'fixed';
                mainElement.style.backgroundColor = 'transparent';
            }
        }else{
            mainElement = document.querySelector('.lfe-body.mobile-body');
            if (mainElement) {
                if(opt===1)mainElement.style.background = bgc1;
                else if(opt){
                    // 设置背景图片
                    bodyElement.style.backgroundImage = bgi2;
                    bodyElement.style.backgroundSize = 'cover';
                    bodyElement.style.backgroundRepeat = 'no-repeat';
                    // 将背景固定
                    bodyElement.style.backgroundAttachment = 'fixed';
                    mainElement.style.backgroundColor = 'transparent';
                }
            }
        }
    }
    //更新速度,单位毫秒,太小可能造成卡顿
    setInterval(changeColors, 250);
})();