Makes DeepSeek's UI more modern and pretty!
// ==UserScript==
// @name DeepSeek Redesign
// @namespace https://chat.deepseek.com/
// @version 2025-02-04
// @description Makes DeepSeek's UI more modern and pretty!
// @author q16
// @match https://chat.deepseek.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=deepseek.com
// @license MIT
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Helper function to replace $
function $(selector) {
return document.querySelector(selector);
}
// Helper function to replace $$
function $$(selector) {
return document.querySelectorAll(selector);
}
function applyStyles() {
// changing colors
document.body.style.setProperty("--dsr-bg", "#000");
document.body.style.setProperty("--dsr-input-bg", "#000");
document.body.style.setProperty("--dsr-side-bg", "#000");
try {
$(".f6d670.bcc55ca1").style.backgroundColor = "rgb(38, 38, 38)";
} catch { }
try {
$(".f6d670.bcc55ca1").style.color = "#b7b7b7";
} catch { }
// removing white "gradient" at the top of the page
$(".b480065b").style.background = "linear-gradient(rgba(0, 0, 0, 0.8) 0%,rgba(41,42,45,0) 100%)";
// logo change
try {
$(".e066abb8 > svg:nth-child(1)").remove();
var logoDiv = $(".e066abb8");
logoDiv.innerText = "DeepSeek";
logoDiv.style.fontSize = "30px";
logoDiv.style.fontWeight = "600";
} catch { }
$$(".ds-icon").forEach(
(icon) => (icon.style.filter = "saturate(0%) brightness(2)")
);
// removing mobile app ad
try {
$(".a1e75851").remove();
} catch { }
// inter font
var gaLink = document.createElement("link");
gaLink.setAttribute("rel", "preconnect");
gaLink.href = "https://fonts.googleapis.com";
var gsLink = document.createElement("link");
gsLink.setAttribute("rel", "preconnect");
gsLink.href = "https://fonts.gstatic.com";
gsLink.crossorigin = true;
var fontLink = document.createElement("link");
fontLink.href =
"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";
fontLink.setAttribute("rel", "stylesheet");
document.head.appendChild(gaLink);
document.head.appendChild(gsLink);
document.head.appendChild(fontLink);
// new chat button
try {
$(".a8ac7a80").style.backgroundColor = "#000";
$(".a8ac7a80").style.border = "1px solid white";
$(".a8ac7a80").style.setProperty(
"--local-button-hover",
"var(--dsr-side-hover-bg)"
);
} catch { }
// fix chat textarea shadow
$(".dd442025").style.boxShadow = "0 0 0 .5px rgba(0, 0, 0, 0.3)";
// bold "DeepSeek" in "Hi, I'm DeepSeek."
try {
$(".c7e7df4d").childNodes[1].remove();
var spanA = document.createElement("span");
spanA.textContent = "Hi, I'm ";
$(".c7e7df4d").appendChild(spanA);
var spanB = document.createElement("span");
spanB.textContent = "DeepSeek";
spanB.style.fontWeight = "800";
spanA.appendChild(spanB);
spanA.appendChild(document.createTextNode("."));
} catch { }
// prevent js from overriding new colors when resizing the window
window.addEventListener("resize", () => {
document.body.style.setProperty("--dsr-bg", "#000");
document.body.style.setProperty("--dsr-input-bg", "#000");
document.body.style.setProperty("--dsr-side-bg", "#000");
});
// remove mobile app ad in collapsed menu
try {
$(".b91228e4").remove();
} catch { }
$$(".fbb737a4").forEach((msg) => (msg.style.backgroundColor = "#000"));
}
function patchDropdown() {
try {
$(".ds-dropdown-menu").style.setProperty(
"--ds-dropdown-menu-color",
"#000"
);
$(".ds-dropdown-menu").style.setProperty(
"--ds-dropdown-menu-option-color-hover",
"#202020"
);
$(".ds-dropdown-menu").style.setProperty(
"--ds-dropdown-menu-color",
"#000"
);
} catch {}
}
function patchModal() {
try {
$(".ds-modal-content").style.setProperty(
"--ds-modal-content-color",
"#000"
);
$(".ds-segmented").style.setProperty("--ds-segmented-color", "#1C1C1C");
$(".ds-segmented").style.setProperty(
"--ds-segmented-selected-color",
"#393939"
);
} catch {}
$$(".ds-native-select__select").forEach(
(s) => (s.style.backgroundColor = "#1c1c1c")
);
}
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
function init() {
applyStyles();
patchDropdown();
patchModal();
const toListen = ["b480065b", "a1e75851", "b91228e4", "fbb737a4", "d8ed659a"];
const globalObserver = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach((node) => {
if (node.classList) {
if (node.classList.contains("ds-modal-wrapper") || node.classList.contains("ds-segmented-separator")) {
patchModal();
}
if (node.classList.contains("ds-floating-position-wrapper")) {
patchDropdown();
}
}
toListen.forEach((cls) => {
if (node.nodeType === 1 && (node.classList.contains(cls) || node.querySelector(`.${cls}`))) {
applyStyles();
}
});
});
}
}
});
globalObserver.observe(document.body, {
childList: true,
subtree: true,
});
window.addEventListener('resize', debounce(() => {
document.body.style.setProperty("--dsr-bg", "#000");
document.body.style.setProperty("--dsr-input-bg", "#000");
document.body.style.setProperty("--dsr-side-bg", "#000");
}, 100));
}
document.addEventListener('DOMContentLoaded', init);
})();