// ==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 日
© 允许规范转载