cnBeta 暗黑模式

全面暗黑化,统一背景、字体、边框、表单、图片等所有视觉元素

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

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

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

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

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

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

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

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

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

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

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

// ==UserScript==
// @name         cnBeta 暗黑模式
// @namespace    http://tampermonkey.net/
// @version      1.8
// @description  全面暗黑化,统一背景、字体、边框、表单、图片等所有视觉元素
// @author       Ryan
// @match        https://www.cnbeta.com.tw/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    const style = document.createElement('style');
    style.textContent = `
        html, body {
            background-color: #181a1b !important;
            color: #e8e6e3 !important;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
        }

        /* 清除强制白色背景 */
        [style*="background:#fff"], [style*="background-color:#fff"],
        [style*="background: white"], [style*="background-color: white"] {
            background-color: #181a1b !important;
            color: #e8e6e3 !important;
        }

        /* 修复白字叠加白背景问题 */
        [style*="color:#fff"], [style*="color: white"] {
            color: #e8e6e3 !important;
        }

        /* 所有容器透明处理 */
        div, section, article, aside, main, header, footer, nav, ul, li,
        .box, .card, .panel, .block, .list-item, .content-ul {
            background-color: transparent !important;
            color: inherit !important;
            border-color: #444 !important;
        }

        /* 特别修复 .content-ul 白底白字问题 */
        .content-ul {
            background-color: #181a1b !important;
            color: #e8e6e3 !important;
        }

        /* 全面覆盖所有链接样式,去除下划线 */
        a, a:link, a:visited, a:hover, a:active,
        .link, .title a, .headline a, .news_list a, .article a, .entry a, .post a,
        div a, section a, article a, aside a, header a, footer a, nav a, ul a, li a {
            color: #e8e6e3 !important;
            text-decoration: none !important;
            background-color: transparent !important;
        }

        a:hover {
            color: #ffffff !important;
        }

        /* 标题白色突出 */
        h1, h2, h3, h4, h5, h6 {
            color: #ffffff !important;
        }

        /* 次要文字灰色 */
        small, .meta, .subtitle, .info, .time, .source {
            color: #a8a6a3 !important;
        }

        /* 图片灰暗处理 */
        img {
            filter: brightness(0.75) contrast(1.1) saturate(0.8) !important;
            transition: filter 0.3s ease;
        }

        img:hover {
            filter: brightness(0.9) contrast(1.2) saturate(1) !important;
        }

        video {
            filter: brightness(0.8) contrast(1.1) !important;
        }

        /* 表单元素暗黑处理 */
        input, textarea, select, button {
            background-color: #2a2d2e !important;
            color: #e8e6e3 !important;
            border: 1px solid #444 !important;
            box-shadow: none !important;
            caret-color: #3391ff !important;
        }

        input::placeholder, textarea::placeholder {
            color: #888 !important;
        }

        input:focus, textarea:focus, select:focus {
            outline: none !important;
            border-color: #3391ff !important;
            background-color: #303233 !important;
        }

        .search-box input, .comment-form textarea, .form-control, .input-group input {
            background-color: #2a2d2e !important;
            color: #e8e6e3 !important;
            border: 1px solid #444 !important;
        }

        /* 修复白色边框和线条 */
        hr, .divider, .line, .bordered, .separator {
            border-color: #444 !important;
            background-color: #444 !important;
        }
    `;
    document.head.appendChild(style);

    // 清除内联白背景和白字
    document.querySelectorAll('[style]').forEach(el => {
        const bg = el.style.background || el.style.backgroundColor;
        const fg = el.style.color;
        if (bg && (bg.includes('#fff') || bg.includes('white'))) {
            el.style.background = 'transparent';
            el.style.backgroundColor = 'transparent';
        }
        if (fg && (fg.includes('#fff') || fg.includes('white'))) {
            el.style.color = '#e8e6e3';
        }
    });
})();