☰

DeepSeek Redesign

Makes DeepSeek's UI more modern and pretty!

  1. // ==UserScript==
  2. // @name         DeepSeek Redesign
  3. // @namespace    https://chat.deepseek.com/
  4. // @version      2025-02-04
  5. // @description  Makes DeepSeek's UI more modern and pretty!
  6. // @author       q16
  7. // @match        https://chat.deepseek.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=deepseek.com
  9. // @license      MIT
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Helper function to replace $
  17.     function $(selector) {
  18.         return document.querySelector(selector);
  19.     }
  20.  
  21.     // Helper function to replace $$
  22.     function $$(selector) {
  23.         return document.querySelectorAll(selector);
  24.     }
  25.  
  26.     function applyStyles() {
  27.         // changing colors
  28. 		document.body.style.setProperty("--dsr-bg", "#000");
  29. 		document.body.style.setProperty("--dsr-input-bg", "#000");
  30. 		document.body.style.setProperty("--dsr-side-bg", "#000");
  31. 		try {
  32. 			$(".f6d670.bcc55ca1").style.backgroundColor = "rgb(38, 38, 38)";
  33. 		} catch { }
  34. 		try {
  35. 			$(".f6d670.bcc55ca1").style.color = "#b7b7b7";
  36. 		} catch { }
  37. 		// removing white "gradient" at the top of the page
  38. 		$(".b480065b").style.background = "linear-gradient(rgba(0, 0, 0, 0.8) 0%,rgba(41,42,45,0) 100%)";
  39. 		// logo change
  40. 		try {
  41. 			$(".e066abb8 > svg:nth-child(1)").remove();
  42. 			var logoDiv = $(".e066abb8");
  43. 			logoDiv.innerText = "DeepSeek";
  44. 			logoDiv.style.fontSize = "30px";
  45. 			logoDiv.style.fontWeight = "600";
  46. 		} catch { }
  47. 		$$(".ds-icon").forEach(
  48. 			(icon) => (icon.style.filter = "saturate(0%) brightness(2)")
  49. 		);
  50. 		// removing mobile app ad
  51. 		try {
  52. 			$(".a1e75851").remove();
  53. 		} catch { }
  54. 		// inter font
  55. 		var gaLink = document.createElement("link");
  56. 		gaLink.setAttribute("rel", "preconnect");
  57. 		gaLink.href = "https://fonts.googleapis.com";
  58. 		var gsLink = document.createElement("link");
  59. 		gsLink.setAttribute("rel", "preconnect");
  60. 		gsLink.href = "https://fonts.gstatic.com";
  61. 		gsLink.crossorigin = true;
  62. 		var fontLink = document.createElement("link");
  63. 		fontLink.href =
  64. 			"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";
  65. 		fontLink.setAttribute("rel", "stylesheet");
  66. 		document.head.appendChild(gaLink);
  67. 		document.head.appendChild(gsLink);
  68. 		document.head.appendChild(fontLink);
  69. 		// new chat button
  70. 		try {
  71. 			$(".a8ac7a80").style.backgroundColor = "#000";
  72. 			$(".a8ac7a80").style.border = "1px solid white";
  73. 			$(".a8ac7a80").style.setProperty(
  74. 				"--local-button-hover",
  75. 				"var(--dsr-side-hover-bg)"
  76. 			);
  77. 		} catch { }
  78. 		// fix chat textarea shadow
  79. 		$(".dd442025").style.boxShadow = "0 0 0 .5px rgba(0, 0, 0, 0.3)";
  80.  
  81. 		// bold "DeepSeek" in "Hi, I'm DeepSeek."
  82. 		try {
  83. 			$(".c7e7df4d").childNodes[1].remove();
  84. 			var spanA = document.createElement("span");
  85. 			spanA.textContent = "Hi, I'm ";
  86. 			$(".c7e7df4d").appendChild(spanA);
  87. 			var spanB = document.createElement("span");
  88. 			spanB.textContent = "DeepSeek";
  89. 			spanB.style.fontWeight = "800";
  90. 			spanA.appendChild(spanB);
  91. 			spanA.appendChild(document.createTextNode("."));
  92. 		} catch { }
  93.  
  94. 		// prevent js from overriding new colors when resizing the window
  95. 		window.addEventListener("resize", () => {
  96. 			document.body.style.setProperty("--dsr-bg", "#000");
  97. 			document.body.style.setProperty("--dsr-input-bg", "#000");
  98. 			document.body.style.setProperty("--dsr-side-bg", "#000");
  99. 		});
  100.  
  101. 		// remove mobile app ad in collapsed menu
  102. 		try {
  103. 			$(".b91228e4").remove();
  104. 		} catch { }
  105.  
  106. 		$$(".fbb737a4").forEach((msg) => (msg.style.backgroundColor = "#000"));
  107.     }
  108.  
  109.     function patchDropdown() {
  110.         try {
  111.             $(".ds-dropdown-menu").style.setProperty(
  112.                 "--ds-dropdown-menu-color",
  113.                 "#000"
  114.             );
  115.             $(".ds-dropdown-menu").style.setProperty(
  116.                 "--ds-dropdown-menu-option-color-hover",
  117.                 "#202020"
  118.             );
  119.             $(".ds-dropdown-menu").style.setProperty(
  120.                 "--ds-dropdown-menu-color",
  121.                 "#000"
  122.             );
  123.         } catch {}
  124.     }
  125.  
  126.     function patchModal() {
  127.         try {
  128.             $(".ds-modal-content").style.setProperty(
  129.                 "--ds-modal-content-color",
  130.                 "#000"
  131.             );
  132.             $(".ds-segmented").style.setProperty("--ds-segmented-color", "#1C1C1C");
  133.             $(".ds-segmented").style.setProperty(
  134.                 "--ds-segmented-selected-color",
  135.                 "#393939"
  136.             );
  137.         } catch {}
  138.         $$(".ds-native-select__select").forEach(
  139.             (s) => (s.style.backgroundColor = "#1c1c1c")
  140.         );
  141.     }
  142.  
  143.     function debounce(func, wait) {
  144.         let timeout;
  145.         return function(...args) {
  146.             clearTimeout(timeout);
  147.             timeout = setTimeout(() => func.apply(this, args), wait);
  148.         };
  149.     }
  150.  
  151.     function init() {
  152.         applyStyles();
  153.         patchDropdown();
  154.         patchModal();
  155.  
  156.         const toListen = ["b480065b", "a1e75851", "b91228e4", "fbb737a4", "d8ed659a"];
  157.         const globalObserver = new MutationObserver((mutationsList) => {
  158.             for (const mutation of mutationsList) {
  159.                 if (mutation.type === 'childList') {
  160.                     mutation.addedNodes.forEach((node) => {
  161.                         if (node.classList) {
  162.                             if (node.classList.contains("ds-modal-wrapper") || node.classList.contains("ds-segmented-separator")) {
  163.                                 patchModal();
  164.                             }
  165.                             if (node.classList.contains("ds-floating-position-wrapper")) {
  166.                                 patchDropdown();
  167.                             }
  168.                         }
  169.                         toListen.forEach((cls) => {
  170.                             if (node.nodeType === 1 && (node.classList.contains(cls) || node.querySelector(`.${cls}`))) {
  171.                                 applyStyles();
  172.                             }
  173.                         });
  174.                     });
  175.                 }
  176.             }
  177.         });
  178.  
  179.         globalObserver.observe(document.body, {
  180.             childList: true,
  181.             subtree: true,
  182.         });
  183.  
  184.         window.addEventListener('resize', debounce(() => {
  185.             document.body.style.setProperty("--dsr-bg", "#000");
  186.             document.body.style.setProperty("--dsr-input-bg", "#000");
  187.             document.body.style.setProperty("--dsr-side-bg", "#000");
  188.         }, 100));
  189.     }
  190.  
  191.     document.addEventListener('DOMContentLoaded', init);
  192. })();