☰

Dark Mode for DeepSeek [Customizable]

Apply dark mode to the DeepSeek website

  1. /* ==UserStyle==
  2. @name           Dark Mode for DeepSeek [Customizable]
  3. @namespace      typpi.online
  4. @version        1.0.3
  5. @description    Apply dark mode to the DeepSeek website
  6. @author         Nick2bad4u
  7. @license        UnLicense
  8. @homepageURL    https://github.com/Nick2bad4u/UserStyles
  9. @supportURL     https://github.com/Nick2bad4u/UserStyles/issues
  10.  
  11. @var color white "White" #ffffff
  12. @var color black "Black" #000000
  13. @var color red "Red" #f35a5a
  14. @var color light-white "Light White" #f8faff
  15. @var color light-gray "Light Gray" #d4d4d4
  16. @var color light-gray2 "Light Gray 2" #404040
  17. @var color light-gray3 "Light Gray 3" #353535
  18. @var color dark-gray "Dark Gray" #131313
  19.  
  20. @var color transparent "Transparent" #212327
  21.  
  22. ==/UserStyle== */
  23. @-moz-document domain("chat.deepseek.com") {
  24. 	:root {
  25. 		--white: var(white);
  26. 		--black: var(black);
  27. 		--red: var(red);
  28. 		--light-white: var(light-white);
  29. 		--light-gray: var(light-gray);
  30. 		--light-gray2: var(light-gray2);
  31. 		--light-gray3: var(light-gray3);
  32. 		--dark-gray: var(dark-gray);
  33. 		--transparent: var(transparent);
  34. 		--chatwidth: var(chatwidth);
  35. 	}
  36.  
  37. 	.dad65929,
  38. 	.aaff8b8f,
  39. 	.a2f8e4bb,
  40. 	.aaff8b8f.eb830e32 {
  41. 		max-width: 100%;
  42. 	}
  43.  
  44. 	body {
  45. 		--dsr-main: var(--white);
  46. 		--dsr-main-2: #ffffff66;
  47. 		--dsr-main-3: #ffffff33;
  48. 	}
  49.  
  50. 	body[data-ds-dark-theme] {
  51. 		--ds-rgb-red-500: #ef4444;
  52. 		--ds-rgb-red-550: #e53535;
  53. 		--dsr-delete-button-bg: rgb(
  54. 			var(--ds-rgb-red-500) / 85%
  55. 		);
  56. 		--dsr-delete-button-bg-hover: rgb(
  57. 			var(--ds-rgb-red-550) / 45%
  58. 		);
  59.  
  60. 		--ds-rgb-neutral-300: var(--light-gray);
  61. 		--ds-rgb-neutral-700: var(--light-gray2);
  62. 		--dsr-bg: var(--black);
  63. 		--dsr-text-0: var(--black);
  64. 		--dsr-text-1: var(--white);
  65. 		--dsr-text-2: var(--white);
  66. 		--dsr-text-3: rgb(var(--ds-rgb-neutral-300));
  67. 		--dsr-text-4: var(--white);
  68. 		--dsr-border-1: var(--black);
  69. 		--dsr-border-2: var(--black);
  70. 		--dsr-input-border: var(--black);
  71. 		--dsr-input-bg: var(--black);
  72. 		--dsr-button-main-bg: var(--black);
  73. 		--dsr-button-main-bg-hover: var(--black);
  74. 		--dsr-button-second-bg: #00000066;
  75. 		--dsr-button-grey-0: var(--black);
  76. 		--dsr-button-grey-1: var(--black);
  77. 		--dsr-button-grey-2: var(--black);
  78. 		--dsr-tooltip-fg: var(--black);
  79. 		--dsr-tooltip-bg: var(--black);
  80. 		--dsr-side-bg: var(--transparent);
  81. 		--dsr-side-hover-bg-rgb: 51, 51, 51;
  82. 		--dsr-side-hover-bg: var(--black);
  83. 		--dsr-icon-fg-1: var(--black);
  84. 		--dsr-icon-hover-0: var(--black);
  85. 		--dsr-icon-hover-1: rgb(var(--ds-rgb-neutral-700));
  86. 		--dsr-side-icon-hover: var(--black);
  87. 		/* --dsr-error-fg: var(--black); */
  88. 		--dsr-error-fg: var(--red);
  89. 	}
  90.  
  91. 	.cdfc1683 {
  92. 		background-color: var(--black);
  93. 		color: var(--white);
  94. 	}
  95.  
  96. 	.b8812f16 {
  97. 		background-color: var(--black);
  98. 	}
  99.  
  100. 	[data-ds-dark-theme] .a8ac7a80 {
  101. 		--local-button: var(--black);
  102. 		--local-button-hover: var(--black);
  103. 		--local-button-text: var(--white);
  104. 	}
  105.  
  106. 	.f9edaa3c {
  107. 		background-color: var(--black);
  108. 	}
  109.  
  110. 	[data-ds-dark-theme] .be88ba8a {
  111. 		display: none;
  112. 	}
  113.  
  114. 	[data-ds-dark-theme] .fbb737a4 {
  115. 		background-color: var(--black);
  116. 	}
  117.  
  118. 	[data-ds-dark-theme] .e214291b {
  119. 		color: var(--light-white);
  120. 		background-color: var(--black);
  121. 	}
  122.  
  123. 	.ds-textarea.ds-textarea--focused {
  124. 		background-color: var(--black);
  125. 	}
  126.  
  127. 	.dc04ec1d.a02af2e6 .a7f3a288 {
  128. 		background-color: var(--black);
  129. 	}
  130.  
  131. 	.md-code-block {
  132. 		background: var(--black);
  133. 	}
  134.  
  135. 	.f9edaa3c .f8773756 {
  136. 		background: linear-gradient(
  137. 			90deg,
  138. 			#21232700 0%,
  139. 			#2807451f 50%,
  140. 			var(--transparent) 100%
  141. 		);
  142. 	}
  143.  
  144. 	/* Scrollbar styling */
  145. 	::-webkit-scrollbar {
  146. 		width: 12px;
  147. 	}
  148.  
  149. 	::-webkit-scrollbar-track {
  150. 		background: var(--black);
  151. 	}
  152.  
  153. 	::-webkit-scrollbar-thumb {
  154. 		background: var(--dark-gray);
  155. 		border-radius: 3px;
  156. 	}
  157.  
  158. 	::-webkit-scrollbar-thumb:hover {
  159. 		background: var(--white0);
  160. 	}
  161. }