Custom Dark Mode perplexity

thee style Darkmode

  1. // ==UserScript==
  2. // @name Custom Dark Mode perplexity
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.1.2
  5. // @description thee style Darkmode
  6. // @author Gullampis810
  7. // @license MIT
  8. // @match https://www.perplexity.ai/*
  9. // @icon https://www.google.com/s2/favicons?sz=64&domain=perplexity.ai
  10. // @grant GM_addStyle
  11. // ==/UserScript==
  12.  
  13.  
  14. (function() {
  15. 'use strict';
  16.  
  17. // Функция для добавления стилей
  18. function addStyle(css) {
  19. var style = document.createElement('style');
  20. style.type = 'text/css';
  21. style.appendChild(document.createTextNode(css));
  22. document.head.appendChild(style);
  23. }
  24.  
  25. // Переопределение стилей
  26. var customStyles = `
  27. /* send button in chat */
  28. /* Темная тема */
  29. .dark button.bg-super.dark\\:bg-superDark {
  30. background: oklch(0.59 0.06 314.07) !important;
  31. color: #yourDarkTextColor !important; /* Замените на подходящий цвет текста */
  32. }
  33.  
  34. /* Первый элемент */
  35. .pt-md.max-w-threadWidth.px-md.mx-auto {
  36. background-color: #3b2a46 !important; /* Ваш цвет */
  37. }
  38.  
  39. /* Темная тема для первого элемента */
  40. .dark .pt-md.max-w-threadWidth.px-md.mx-auto {
  41. background-color: #3b2a46 !important; /* Тот же цвет или другой */
  42. }
  43.  
  44. /* Второй элемент */
  45. .gap-md.flex.flex-col.pb-md {
  46. background: #3b2a46 !important; /* Ваш цвет */
  47. }
  48.  
  49. /* Темная тема для второго элемента */
  50. .dark .gap-md.flex.flex-col.pb-md {
  51. background: #3b2a46 !important; /* Тот же цвет или другой */
  52. }
  53. @media (prefers-color-scheme: dark) {
  54. :root:not([data-color-scheme=light]) .dark\\:ring-borderMainDark\\/50 {
  55. --tw-ring-color: oklch(0.9 0.18 188.26);
  56. }
  57. .bg-background-100.-mx-md.px-md.mb-md.-top-0.z-10.md\\:sticky {
  58. background: #1f1225 !important;
  59. border: 2px #8a6a98 solid !important;
  60. border-radius: 15px !important;
  61. }
  62. .-mx-sm.relative.flex.gap-1\\.5 {
  63. background: #1f1225 !important;
  64. }
  65. :root:not([data-color-scheme=light]) .dark\\:bg-backgroundDark {
  66. --tw-bg-opacity: 1;
  67. background: linear-gradient(45deg, #392a3d 0%, #4b9b8894 50%, #231c2d 100%);
  68. }
  69. :root:not([data-color-scheme=light]) .dark\\:bg-offsetDark {
  70. --tw-bg-opacity: 1;
  71. background-color: oklch(0.21 0.04 315.27); /*Основной фиолетовый цвет фона бордов*/
  72. }
  73. :root:not([data-color-scheme=light]) .dark\\:scrollbar-thumb-idleDark {
  74. --scrollbar-thumb: #3febc6 !important;
  75. }
  76. :root:not([data-color-scheme=light]) .dark\\:ring-borderMainDark\\/50 {
  77. --tw-ring-color: oklch(0.9 0.18 188.26);
  78. }
  79. .px-md\\.md\\:px-lg\\.min-h-\\[calc\\(100dvh-var\\(--header-height\\)\\)\\].border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-transparent {
  80. background: linear-gradient(45deg, #833f00, #0f092c, #28d0adcc);
  81. background-size: 155%;
  82. }
  83.  
  84. @media (prefers-color-scheme: dark) {
  85. :root:not([data-color-scheme=light]) .dark\\:bg-offsetPlusDark {
  86. --tw-bg-opacity: 1;
  87. background-color: oklch(0.42 0.08 314.19); /* цвет кнопок */
  88. }
  89.  
  90. @media (prefers-color-scheme: dark) {
  91. :root:not([data-color-scheme=light]) .dark\\:ring-borderMainDark {
  92. --tw-ring-opacity: 1;
  93. --tw-ring-color: oklch(0.79 0.15 190.71); /* border граница чат - голубой */
  94. }
  95.  
  96. @media (prefers-color-scheme: dark) {
  97. :root:not([data-color-scheme=light]) .dark\\:text-textOffDark {
  98. --tw-text-opacity: 1;
  99. color: oklch(0.71 0.09 191.87);
  100. }
  101.  
  102. .shrink-0 {
  103. color: #71b672;
  104. }
  105. audio, canvas, embed, iframe, img, object, svg, video {
  106. color: #20b8cd;
  107. }
  108.  
  109. @media (min-width: 768px) {
  110. body {
  111. background: #342542;
  112. }
  113. }
  114.  
  115. /*hover button*/
  116. @media (min-width: 768px) {
  117. @media (prefers-color-scheme: dark) {
  118. :root:not([data-color-scheme="light"]) .md\\:dark\\:hover\\:bg-offsetPlusDark:hover {
  119. --tw-bg-opacity: 1;
  120. background-color: #68527f !important;
  121. }
  122.  
  123. .flex.items-center.justify-between.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-background.dark\\:bg-backgroundDark {
  124. background: #2c1b34;
  125. border-radius: 5px;
  126. padding: 5px;
  127. }
  128.  
  129. .bg-background.p-xs.px-md.py-sm.dark\\:border-borderMainDark\\/50.dark\\:bg-backgroundDark.w-80.rounded-lg.border.shadow-lg {
  130. background: #1b3434;
  131. }
  132.  
  133. .text-text-200.bg-background-300.py-xs.px-sm.inline-block.rounded-br.rounded-tl-\\[3px\\].font-thin {
  134. background: #a585bf;
  135. color: black;
  136. }
  137.  
  138. button.bg-idle.text-textOff.dark\\:bg-idleDark.dark\\:text-textOffDark.\\!duration-100.font-sans.focus\\:outline-none.outline-none.outline-transparent.transition.duration-300.ease-out.font-sans.select-none.items-center.relative.group\\/button.justify-center.text-center.items-center.rounded-full.cursor-default.opacity-50.whitespace-nowrap.inline-flex.text-sm.h-8.aspect-square {
  139. background: #417870;
  140. }
  141.  
  142.  
  143. .shadow-subtle.flex.min-h-0.min-w-0.rounded-md.border.data-\\[placement\\=bottom-end\\]\\:origin-top-right.data-\\[placement\\=bottom-start\\]\\:origin-top-left.data-\\[placement\\=top-end\\]\\:origin-bottom-right.data-\\[placement\\=top-start\\]\\:origin-bottom-left.duration-150.p-xs.animate-in.fade-in.zoom-in-\\[0\\.97\\].ease-out.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-background.dark\\:bg-backgroundDark {
  144. background: #6f5686;
  145. border: 2px solid #59a38e;
  146. }
  147.  
  148. @media (prefers-color-scheme: dark) {
  149. :root:not([data-color-scheme=light]) .md\\:dark\\:hover\\:bg-offsetDark:hover {
  150. --tw-bg-opacity: 1;
  151. background-color: oklch(0.31 0.07 312.34);
  152. }
  153. }
  154.  
  155. .sticky.-top-12.z-20.flex.justify-center.border-b.md\\:top-0.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-background.dark\\:bg-backgroundDark {
  156. background: #4f3b59;
  157. }
  158.  
  159. .sticky.left-0.right-0.top-0.z-10.border-b.md\\:mb-0.md\\:rounded-t-xl.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-background.dark\\:bg-backgroundDark {
  160. background: #46324f;
  161. }
  162.  
  163. .bg-background.dark\\:bg-backgroundDark.absolute.inset-0.z-\\[1\\].opacity-90 {
  164. background: #1f1225b8;
  165. border-radius: 0px 0px 30px 30px;
  166. }
  167.  
  168. .px-md.py-sm.md\\:py-md.sticky.top-0.z-\\[22\\].w-full.border-b.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-background.dark\\:bg-backgroundDark {
  169. background: #3b2a46;
  170. }
  171.  
  172. .p-md.relative.rounded-lg.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-background.dark\\:bg-backgroundDark {
  173. background: #12221e;
  174. border-radius: 0px 0px 30px 30px;
  175. }
  176.  
  177. .flex.h-full.w-\\[100vw\\].grow.flex-col.md\\:w-\\[unset\\].md\\:grow-\\[unset\\].border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-transparent {
  178. background: blanchedalmond;
  179. border-radius: 32px;
  180. }
  181.  
  182. .bg-background.dark\\:bg-backgroundDark.shadow-md.overflow-y-auto.scrollbar-thin.scrollbar-thumb-idle.dark\\:scrollbar-thumb-idleDark.scrollbar-track-transparent.fill-mode-both.md\\:rounded-lg.md\\:min-w-\\[600px\\].max-w-screen-sm.shadow-md.relative.h-full.max-h-\\[100vh\\].md\\:max-h-\\[95vh\\].overflow-auto.md\\:w-full {
  183. border-radius: 30px;
  184. }
  185.  
  186. .flex.select-none.items-center.justify-between.pl-1.pr-3 {
  187. background: #46324f;
  188. }
  189.  
  190. .overflow-hidden.px-sm.rounded-lg.border.py-1\\.5.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-transparent {
  191. background: #0d1f1f;
  192. }
  193.  
  194. p.my-0 {
  195. background: #321d385c;
  196. filter: drop-shadow(2px 4px 6px black);
  197. border-radius: 4px;
  198. }
  199.  
  200. .erp-tab\\:rounded-none.erp-new_tab\\:rounded-none.erp-tab\\:shadow-none.erp-new_tab\\:shadow-none.erp-tab\\:shadow-left-sm.erp-new_tab\\:shadow-left-sm.flex-1.overflow-clip.bg-clip-border.shadow-sm.lg\\:rounded-lg.md\\:dark\\:border.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-background.dark\\:bg-backgroundDark {
  201. border-radius: 13px;
  202. }
  203.  
  204. h2.mb-xs.mt-5.text-base.font-\\[525\\].first\\:mt-3 {
  205. background: #76511b;
  206. border-radius: 25px;
  207. padding: 5px;
  208. }
  209.  
  210. .hover\\:bg-background-200:hover {
  211. --tw-bg-opacity: 1;
  212. background-color: #68527f !important;
  213. }
  214.  
  215. @media (prefers-color-scheme: dark) {
  216. :root:not([data-color-scheme="light"]) .dark\\:hover\\:bg-offsetPlusDark:hover {
  217. --tw-bg-opacity: 1;
  218. background-color: #68527f !important;
  219. }
  220.  
  221. @media (prefers-color-scheme: dark) {
  222. :root:not([data-color-scheme=light]) .dark\\:bg-background-200 {
  223. --tw-bg-opacity: 1;
  224. background-color: #2d253a !important;
  225. }
  226. }
  227.  
  228. @media (prefers-color-scheme: dark) {
  229. :root:not([data-color-scheme=light]) .dark\\:border-borderMain {
  230. --tw-border-opacity: 1;
  231. border: 1px solid oklch(0.73 0.13 192.91) !important;
  232. }
  233. }
  234.  
  235. .w-lg.text-textMain.dark\\:text-textMainDark.flex.aspect-square.shrink-0.items-center.justify-center.rounded-full.border.\\!bg-textMain.\\!text-background.dark\\:\\!bg-textMainDark.dark\\:\\!text-backgroundDark.border-0.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-background.dark\\:bg-backgroundDark {
  236. background: oklab(0.31 0.05 -0.04) !important;
  237. }
  238.  
  239. button.bg-textMain.text-textMainDark.dark\\:bg-textMainDark.dark\\:text-light-text.hover\\:text-superDuper.hover\\:dark\\:text-superDuper.font-sans.focus\\:outline-none.outline-none.outline-transparent.transition.duration-300.ease-out.font-sans.select-none.items-center.relative.group\\/button.justify-center.text-center.items-center.rounded-full.cursor-pointer.active\\:scale-\\[0\\.97\\].active\\:duration-150.active\\:ease-outExpo.origin-center.whitespace-nowrap.inline-flex.text-sm.h-8.aspect-square {
  240. background: #1f1225 !important;
  241. }
  242.  
  243. .grow.flex.flex-col.justify-center.py-md.px-md {
  244. background: #3b2a46;
  245. }
  246.  
  247. /* Полный селектор с переопределением */
  248. .shadow-overlay.dark\\:shadow-overlayDark.flex.min-h-0.min-w-0.rounded-xl {
  249. background: #312533 !important; /* Новый цвет фона, например оранжевый */
  250. border-color: #ff5733 !important; /* Переопределяем границу */
  251. }
  252.  
  253. /* Темная тема */
  254. .dark .shadow-overlay.dark\\:shadow-overlayDark.flex.min-h-0.min-w-0.rounded-xl {
  255. background: #c70039 !important; /* Другой цвет для темной темы */
  256. border-color: #c70039 !important;
  257. }
  258.  
  259. }`;
  260.  
  261. addStyle(customStyles);
  262. })();
  263.  
  264.  
  265. // name Переопределение кнопки Download
  266. (function() {
  267. 'use strict';
  268.  
  269. // Добавляем стили кнопки Download
  270. GM_addStyle(`
  271. .custom-download-btn {
  272. background-color: #3b2a46 !important;
  273. padding: 10px 20px !important;
  274. border-radius: 12px !important;
  275. font-size: 16px !important;
  276. display: flex !important; /* Принудительно показываем */
  277. isolation: isolate;
  278. z-index: 9999 !important; /* Выше всех */
  279. position: fixed !important;
  280. top: 68px !important;
  281. width: 205px !important;
  282. }
  283.  
  284. .custom-download-btn:hover {
  285. background-color: #312533 !important;
  286. }
  287.  
  288. .custom-download-btn > div,
  289. .custom-download-btn svg {
  290. color: inherit !important;
  291. stroke: white !important;
  292. }
  293.  
  294. `);
  295.  
  296. // Функция для обработки кнопки
  297. function styleButton(button) {
  298. if (button.textContent.includes('Download') && !button.classList.contains('custom-download-btn')) {
  299. button.classList.add('custom-download-btn');
  300. button.style.display = 'flex'; // Принудительно показываем
  301. }
  302. }
  303.  
  304. // Обрабатываем уже существующие кнопки
  305. document.querySelectorAll('button.bg-offsetPlus').forEach(styleButton);
  306.  
  307. // Отслеживаем динамическое добавление кнопок
  308. const observer = new MutationObserver((mutations) => {
  309. mutations.forEach((mutation) => {
  310. if (mutation.addedNodes.length) {
  311. mutation.addedNodes.forEach((node) => {
  312. if (node.nodeName === 'BUTTON' && node.classList.contains('bg-offsetPlus')) {
  313. styleButton(node);
  314. } else if (node.querySelector) {
  315. node.querySelectorAll('button.bg-offsetPlus').forEach(styleButton);
  316. }
  317. });
  318. }
  319. });
  320. });
  321.  
  322. // Наблюдаем за изменениями в DOM
  323. observer.observe(document.body, {
  324. childList: true,
  325. subtree: true
  326. });
  327. })();
  328.  
  329.  
  330. (function() {
  331. 'use strict';
  332.  
  333. // Переопределение стилей для кнопки "New Thread"
  334. var newThreadButton = document.querySelector('.mx-md.py-sm.pl-md.pr-sm.hover\\:ring-super.dark\\:hover\\:ring-superDark.group.flex.flex-none.cursor-pointer.select-none.items-center.justify-between.rounded-full.border.ring-1.ring-transparent.transition.duration-200.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-background.dark\\:bg-backgroundDark');
  335. if (newThreadButton) {
  336. newThreadButton.style.cssText = `
  337. position: absolute !important;
  338. bottom: 22px !important;
  339. z-index: 10001 !important;
  340. background: #36623a !important;
  341. width: 190px !important;
  342. `;
  343. } else {
  344. console.error('Кнопка "New Thread" не найдена.');
  345. }
  346. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址