// ==UserScript==
// @name         Deepin官方论坛暗黑主题 AI 0.1
// @namespace    https://www.hivps.cn/index.php/archives/645/
// @version      1.0
// @description  为Deepin官方论坛添加暗黑主题
// @author       You
// @match        https://bbs.deepin.org/*
// @match        http://bbs.deepin.org/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // 创建暗黑主题样式
    const darkThemeCSS = `
        /* 全局暗黑主题 */
        html, body {
            background-color: #1a1a1a !important;
            color: #e0e0e0 !important;
        }

        /* 主要容器 */
        .container, .main-container, .content {
            background-color: #1a1a1a !important;
            color: #e0e0e0 !important;
        }

        /* 导航栏 */
        d-header, .header, .navbar {
            background-color: #2d2d2d !important;
            border-bottom: 1px solid #404040 !important;
        }

        d-header .d-menu-li > a {
            color: #e0e0e0 !important;
        }

        d-header .d-menu-li.hover > .vaild-link,
        d-header .d-menu-li.hover > .valid-link,
        d-header .d-menu-li:hover > .vaild-link,
        d-header .d-menu-li:hover > .valid-link {
            color: #4da6ff !important;
        }

        /* 子菜单 */
        d-header .d-sub-menu {
            background-color: #2d2d2d !important;
            border: 1px solid #404040 !important;
        }

        d-header .d-sub-menu > li > a {
            color: #e0e0e0 !important;
        }

        d-header .d-sub-menu > li:not(.has-child-menu):hover > a,
        d-header .d-child-menu > li > a:hover {
            color: #4da6ff !important;
        }

        /* 卡片和面板 */
        .card, .panel, .box, .widget {
            background-color: #2d2d2d !important;
            border: 1px solid #404040 !important;
            color: #e0e0e0 !important;
        }

        /* 帖子列表 */
        .topic-list, .post-list, .thread-list {
            background-color: #2d2d2d !important;
        }

        .topic-item, .post-item, .thread-item {
            background-color: #2d2d2d !important;
            border-bottom: 1px solid #404040 !important;
            color: #e0e0e0 !important;
        }

        .topic-item:hover, .post-item:hover, .thread-item:hover {
            background-color: #3d3d3d !important;
        }

        /* 链接 */
        a {
            color: #4da6ff !important;
        }

        a:hover {
            color: #66b3ff !important;
        }

        /* 按钮 */
        .btn, button, input[type="submit"], input[type="button"] {
            background-color: #404040 !important;
            color: #e0e0e0 !important;
            border: 1px solid #606060 !important;
        }

        .btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
            background-color: #505050 !important;
        }

        .btn-primary, .btn-success {
            background-color: #4da6ff !important;
            border-color: #4da6ff !important;
        }

        .btn-primary:hover, .btn-success:hover {
            background-color: #66b3ff !important;
        }

        /* 表单元素 */
        input, textarea, select {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
            border: 1px solid #606060 !important;
        }

        input:focus, textarea:focus, select:focus {
            border-color: #4da6ff !important;
            box-shadow: 0 0 0 2px rgba(77, 166, 255, 0.2) !important;
        }

        /* 侧边栏 */
        .sidebar, .side-panel {
            background-color: #2d2d2d !important;
        }

        /* 页脚 */
        .footer, footer {
            background-color: #1d2129 !important;
            color: #aaa !important;
        }

        .footer a, footer a {
            color: #aaa !important;
        }

        /* 分页 */
        .pagination {
            background-color: #2d2d2d !important;
        }

        .pagination a, .pagination span {
            background-color: #404040 !important;
            color: #e0e0e0 !important;
            border: 1px solid #606060 !important;
        }

        .pagination a:hover {
            background-color: #505050 !important;
        }

        .pagination .current {
            background-color: #4da6ff !important;
            color: #fff !important;
        }

        /* 代码块 */
        pre, code {
            background-color: #1e1e1e !important;
            color: #f8f8f2 !important;
            border: 1px solid #404040 !important;
        }

        /* 引用 */
        blockquote {
            background-color: #2d2d2d !important;
            border-left: 4px solid #4da6ff !important;
            color: #e0e0e0 !important;
        }

        /* 表格 */
        table {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
        }

        th {
            background-color: #404040 !important;
            color: #e0e0e0 !important;
        }

        td {
            border-color: #404040 !important;
        }

        tr:nth-child(even) {
            background-color: #353535 !important;
        }

        /* 模态框 */
        .modal, .dialog {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
        }

        .modal-header, .dialog-header {
            background-color: #404040 !important;
            border-bottom: 1px solid #606060 !important;
        }

        /* 标签 */
        .tag, .label, .badge {
            background-color: #404040 !important;
            color: #e0e0e0 !important;
        }

        /* 头像和图片边框 */
        .avatar, .user-avatar {
            border: 2px solid #404040 !important;
        }

        /* 搜索框 */
        .search-box, .search-input {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
            border: 1px solid #606060 !important;
        }

        /* 通知和提示 */
        .alert, .notification {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
            border: 1px solid #606060 !important;
        }

        .alert-success {
            background-color: #1e4d2b !important;
            border-color: #2d7a3d !important;
        }

        .alert-warning {
            background-color: #4d3d1e !important;
            border-color: #7a5d2d !important;
        }

        .alert-danger {
            background-color: #4d1e1e !important;
            border-color: #7a2d2d !important;
        }

        /* 滚动条 */
        ::-webkit-scrollbar {
            width: 12px;
            background-color: #2d2d2d;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #606060;
            border-radius: 6px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #707070;
        }

        ::-webkit-scrollbar-track {
            background-color: #1a1a1a;
        }

        /* 特定于deepin论坛的样式 */
        .hs-container {
            background-color: #1d2129 !important;
        }

        .hs-footer > a {
            color: #aaa !important;
        }

        .footer-title {
            color: #e0e0e0 !important;
        }

        /* Angular组件样式 */
        app-root, ng-component {
            background-color: #1a1a1a !important;
            color: #e0e0e0 !important;
        }

        /* Angular动态生成的组件属性 */
        [class*="_ngcontent-ng-c"] {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
        }

        div[class*="_ngcontent-ng-c"] {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
        }

        /* 特定处理你提到的组件 */
        [class*="_ngcontent-ng-c2136430630"] {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
        }

        /* 更广泛的Angular组件覆盖 */
        [_ngcontent-ng-c2136430630] {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
        }

        /* 所有可能的Angular属性选择器 */
        *[class*="ngcontent"] {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
        }

        /* 更强力的通用选择器 */
        div, section, article, main, aside, header, footer, nav {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
        }

        /* 覆盖所有可能的白色背景 */
        * {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
        }

        /* 但保持某些元素的特殊样式 */
        img, svg, canvas, video {
            background-color: unset !important;
            color: unset !important;
        }

        /* 覆盖内联样式 */
        [style*="background-color: #fff"], 
        [style*="background-color: white"],
        [style*="background: #fff"],
        [style*="background: white"] {
            background-color: #2d2d2d !important;
        }

        [style*="color: #000"], 
        [style*="color: black"] {
            color: #e0e0e0 !important;
        }
    `;

    // 创建样式元素并添加到页面
    function addDarkTheme() {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = darkThemeCSS;
        style.id = 'deepin-dark-theme';
        document.head.appendChild(style);
    }

    // 创建主题切换按钮
    function createThemeToggle() {
        const toggleButton = document.createElement('div');
        toggleButton.innerHTML = '🌙';
        toggleButton.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background-color: #2d2d2d;
            color: #e0e0e0;
            border: 2px solid #4da6ff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 20px;
            z-index: 10000;
            transition: all 0.3s ease;
        `;

        let isDarkMode = true;

        toggleButton.addEventListener('click', function () {
            const darkThemeStyle = document.getElementById('deepin-dark-theme');
            if (isDarkMode) {
                // 切换到亮色主题
                if (darkThemeStyle) {
                    darkThemeStyle.remove();
                }
                toggleButton.innerHTML = '☀️';
                toggleButton.style.backgroundColor = '#f0f0f0';
                toggleButton.style.color = '#333';
                isDarkMode = false;
            } else {
                // 切换到暗色主题
                addDarkTheme();
                toggleButton.innerHTML = '🌙';
                toggleButton.style.backgroundColor = '#2d2d2d';
                toggleButton.style.color = '#e0e0e0';
                isDarkMode = true;
            }
        });

        toggleButton.addEventListener('mouseenter', function () {
            toggleButton.style.transform = 'scale(1.1)';
        });

        toggleButton.addEventListener('mouseleave', function () {
            toggleButton.style.transform = 'scale(1)';
        });

        document.body.appendChild(toggleButton);
    }

    // 等待页面加载完成
    function init() {
        // 添加暗黑主题
        addDarkTheme();

        // 强制应用到现有的Angular组件
        setTimeout(() => {
            forceApplyDarkTheme();
        }, 500);

        // 创建主题切换按钮
        createThemeToggle();

        console.log('Deepin论坛暗黑主题已加载');
    }

    // 页面加载完成后执行
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

    // 强制应用暗黑主题到Angular组件
    function forceApplyDarkTheme() {
        // 查找所有Angular组件元素
        const angularElements = document.querySelectorAll('[class*="_ngcontent-ng-c"], [class*="ngcontent"]');
        angularElements.forEach(element => {
            element.style.setProperty('background-color', '#2d2d2d', 'important');
            element.style.setProperty('color', '#e0e0e0', 'important');
        });

        // 特别处理你提到的组件
        const specificElements = document.querySelectorAll('[class*="_ngcontent-ng-c2136430630"]');
        specificElements.forEach(element => {
            element.style.setProperty('background-color', '#2d2d2d', 'important');
            element.style.setProperty('color', '#e0e0e0', 'important');
        });

        // 处理所有div元素
        const allDivs = document.querySelectorAll('div');
        allDivs.forEach(div => {
            const className = div.className;
            if (className && className.includes('_ngcontent-ng-c')) {
                div.style.setProperty('background-color', '#2d2d2d', 'important');
                div.style.setProperty('color', '#e0e0e0', 'important');
            }
        });
    }

    // 监听动态内容变化
    const observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                // 确保新添加的内容也应用暗黑主题
                const darkThemeStyle = document.getElementById('deepin-dark-theme');
                if (!darkThemeStyle) {
                    addDarkTheme();
                }

                // 强制应用到新添加的Angular组件
                setTimeout(() => {
                    forceApplyDarkTheme();
                }, 100);
            }
        });
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        attributeFilter: ['class', 'style']
    });

    // 定期强制应用主题(处理延迟加载的内容)
    setInterval(() => {
        const darkThemeStyle = document.getElementById('deepin-dark-theme');
        if (darkThemeStyle) {
            forceApplyDarkTheme();
        }
    }, 2000);

})();
最后修改:2025 年 10 月 14 日
如果觉得我的文章对你有用,请随意赞赏