Greasy Fork is available in English.

菜鸟教程改颜色

让"菜鸟教程"的颜色变得多样

// ==UserScript==
// @name         菜鸟教程改颜色
// @namespace    http://tampermonkey.net/
// @version      2024-02-10
// @description  让"菜鸟教程"的颜色变得多样
// @author       WhiteSeven
// @match        https://www.runoob.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=runoob.com
// @grant        none
// @require      https://code.jquery.com/jquery-3.6.4.min.js
// @run-at       document-end
// @license      MIT

// ==/UserScript==

(function ($) {
    'use strict';
    // 随机整数
    function randint(min, max) {
        // max无法取到
        return Math.floor(Math.random() * (max - min) + min);
    }

    // 填有0的16进制字符串
    function fillString(number) {
        let color = number.toString(16);
        if (color.length === 1) {
            color = '0' + color;
        }
        return color;
    }

    // 随机整数,字符串格式
    function randint16(min, max) {
        // max无法取到
        return fillString(randint(min, max).toString(16));
    }

    // 获取随机颜色
    function getRandomColor() {
        function getTopBottom(number) {
            let top = number - 64;
            let bottom = number + 64;
            if (top > 256) {
                bottom -= top - 256;
                top = 256;
            } else if (bottom < 0) {
                top += -bottom;
                bottom = 0;
            }
            return [top, bottom];
        }
        const r = randint(0, 256);
        let tb = getTopBottom(r);
        const g = randint(tb[0], tb[1]);
        tb = getTopBottom(g);
        const b = randint(tb[0], tb[1]);
        return '#' + fillString(r) + fillString(g) + fillString(b);
    }

    // 获取随机角度数值
    function getRandomRotate() {
        return randint(0, 360) + 'deg';
    }

    // 获取随机浅色(文字背景)
    function getLightColor() {
        return '#' + randint16(192, 256) + randint16(192, 256) + randint16(192, 256);
    }

    // 获取随机深色(文字背景)
    function getDarkColor() {
        return '#' + randint16(64, 192) + randint16(64, 192) + randint16(64, 192);
    }

    // 设置颜色color
    function setColor(selector, color) {
        const colorFunction = color === undefined ? getRandomColor : color;
        $(selector).css('color', colorFunction());
    }

    // 设置背景颜色backgroundColor
    function setBackgroundColor(selector, color) {
        const colorFunction = color === undefined ? getRandomColor : color;
        $(selector).css('background-color', colorFunction());
    }

    // 设置的filter
    function setFilter(selector) {
        $(selector).css('filter', `hue-rotate(${getRandomRotate()})`);
    }

    // 头像
    // TODO: 怎么修改
    ///$('link[rel="shortcut icon"]').css('filter', `hue-rotate(${getRandomRotate()})`);
    $('link').each(function(){
        const refValue = $(this).attr('rel');
        if (refValue && refValue.indexOf('icon') !== -1) {
            $(this).css('filter', `hue-rotate(${getRandomRotate()})`);
            return false;
        }
    });
    // 主页面
    // 修改log的filter
    setFilter('.logo h1');
    // 设置顶部菜单栏
    setBackgroundColor('.navigation', getDarkColor);
    // 设置左侧菜单顶部文字
    setColor('.tab', getDarkColor);
    // 设置正文科目颜色
    setColor('.codelist a.item-top h4', getDarkColor);
    // 设置右侧快捷键的颜色
    setColor('.go-top');
    setColor('.qrcode');
    setBackgroundColor('.writer');
    // 修改二维码图片的filter
    setFilter('img[src="/wp-content/themes/runoob/assets/images/qrcode.png"]');
    // 一般页面
    // 正文
    // 标题
    setColor('.color_h1', getDarkColor);
    // "注意"的背景
    $('blockquote').css('background-color', getLightColor()).find('p').css('background-color', 'inherit');
    // "实例"框的背景颜色
    $('div.example').css('background-image', `linear-gradient(#fff, ${getLightColor()} 100px)`);
    // "实例"的文字
    setColor('h2.example', getDarkColor);
    // 链接的颜色
    setColor('.article-body a', getDarkColor);
    // 代码区块的颜色
    setBackgroundColor('.prettyprint', getLightColor);
    // 查看在线实例的剪刀图片
    setFilter('img[src="/images/tryitimg.gif"]');
    // 笔记栏的左侧
    setBackgroundColor('div.altblock');
    // 笔记中的链接
    setColor('div.comt-main a', getDarkColor);
    // 笔记中作者信息的背景
    setBackgroundColor('div.tooltip', getDarkColor);
    // "点我分享笔记"
    setColor('#share_code', getDarkColor);
    // "实例"的"尝试一下"
    setBackgroundColor('.tryitbtn', getDarkColor);
    // 把"尝试一下"的字体改成白色
    $('.tryitbtn').css('color', '#fff');
    // 左边目录栏
    // 顶部月亮(太阳)图标
    setColor('#moon');
    // 被选中的目录
    // setBackgroundColor(`div.design a[href="${window.location.pathname}"]`, getDarkColor);
    (function () {
        const link = window.location.pathname;
        $('div.design a').each(function() {
            const hrefValue = $(this).attr('href');
            if (link.indexOf(hrefValue) !== -1) {
                $(this).css('background-color', getDarkColor());
                return false; // 结束循环
            }
        });
    })();
    // 录栏的标题栏
    setColor('.left_h2', getDarkColor);
    // 小屏时的目录拉开按钮
    setBackgroundColor('#pull');
    // 右侧目录
    // 标题
    setColor('.recommend-here a', getDarkColor);
    // 代码编辑页面
    // 顶部栏背景颜色
    setBackgroundColor('header', getDarkColor);
    // "点击运行"按钮
    $('#submitBTN').css({
        'background-color': getDarkColor(),
        'border-color': getDarkColor()
    });
    // 反馈界面
    // 图标
    // TODO: 不管用
    $('button.feedback-btn.feedback-btn-gray').each(function(){
        $(this).click(function(){
            $('i.feedback-logo').css('background-color', getRandomColor());
        });
    });
})(jQuery);