☰

RocketChat | Discord Theme

Changes RocketChat color and layout to be more similar to Discord.com's dark theme.

  1. /* ==UserStyle==
  2.  -- THEME STUFF --
  3. @name           RocketChat | Discord Theme
  4. @version        1.0.4
  5. @description    Changes RocketChat color and layout to be more similar to Discord.com's dark theme.
  6.  
  7.  -- AUTHOR STUFF --
  8. @namespace      Freeplay
  9. @author         Freeplay (https://pages.codeberg.org/freeplay/)
  10. @homepageURL    https://codeberg.org/Freeplay/UserStyles
  11. @supportURL     https://codeberg.org/Freeplay/UserStyles/issues
  12.  
  13. ==/UserStyle== */
  14. /* July, 29 / 20
  15. - Proper Userstyle Metadata
  16. */
  17. /* July, 23 / 20
  18. - Fixes some more issues due to the update, Not everything is fixed but it's back to being usable
  19. - https://gf.qytechs.cn/en/scripts/402919-rocketchat-discord-theme/discussions/54393
  20. /* July, 12 / 20
  21. - Some fixes
  22. */
  23. /* May, 14 / 20
  24. - Fixed Message Dividers
  25. */
  26. @-moz-document domain("stux.chat"), domain("open.rocket.chat") {
  27. 	/* Yes, I realize this may be a bit messy. Feedback is appreciated!*/
  28. 	
  29. 	/* Frames */
  30. 	* {
  31. 		transition: background 0s !important;
  32. 		border-color: hsla(0,0%,100%,0.06);
  33. 	}
  34. 	.wrapper {
  35. 		scrollbar-color: #202225 #36393f;
  36. 	}
  37. 	.section {
  38. 		border-color: hsla(0,0%,100%,0.06) !important;
  39. 	}
  40. 	.rc-old {
  41. 		border: none !important;
  42. 	}
  43. 	.rcx-box {
  44. 		color: white;
  45. 		border: none !important;
  46. 		/*background-color: #36393f !important;*/
  47. 	}
  48. 	.rcx-box:after {
  49. 		border: none !important;
  50. 	}
  51. 	.rcx-tile--elevation-0, .rcx-tile--elevation-1 {
  52. 		background-color: #202225;
  53. 		color: white;
  54. 	}
  55.  
  56. 	/* Text */
  57. 	.global-font-family {
  58. 		font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif !important;
  59. 	}
  60. 	.color-primary-font-color, .rc-form-label, .rc-switch__text {
  61. 		color: #dcddde;
  62. 	}
  63. 	
  64. 	.rcx-box--text-style-h1 {
  65. 		color: white;
  66. 	}
  67. 	.rc-switch-double {
  68. 		color: #7289DA;
  69. 	}
  70. 	
  71. 	a {
  72. 		color: #7289DA;
  73. 	}
  74. 	label {
  75. 		color: white;
  76. 	}
  77.  
  78. 	/* Alerts */
  79. 	.alert {
  80. 		background-color: #1f2124;
  81. 		color: white;
  82. 		border: none;
  83. 	}
  84. 	.rcx-callout--type-warning {
  85. 		background-color: #1f2124;
  86. 	}
  87. 	
  88. 	/* Other */
  89. 	.role-tag, .message-alias, .rc-apps-category, .remove-role, .is-bot {
  90. 		background-color: #7289DA !important; 
  91. 		border: none !important;
  92. 		color: white !important;
  93. 		font-size: 10px !important;
  94. 		line-height: 15px !important;
  95. 		border-radius: 3px !important;
  96. 		font-weight: 500 !important;
  97. 		padding: 0 4px !important;
  98. 		text-transform: uppercase;
  99. 		display: inline-block;
  100. 		height: 15px !important;
  101. 	}
  102. 		
  103. 	.mention-link { /* Mention Tags */
  104. 		border-radius: 3px !important;
  105. 		padding: 0 2px !important;
  106. 		color: #7289da !important;
  107. 		background: rgba(114,137,218,.1) !important;
  108. 		font-weight: 500 !important;
  109. 	}
  110. 	.mention-link:hover {
  111. 		background: #7289da !important;
  112. 		color: white !important;
  113. 		opacity: 1 !important;
  114. 	}
  115. 	.mention-link--user:before {
  116. 		content: "@";
  117. 	}
  118. 	.reactions > li { /* Emoji Reactions */
  119. 			background-color: rgba(114,137,218,.3) !important;
  120. 			border: none !important;
  121. 			border-radius: .25rem;
  122. 			margin-right: .125rem;
  123. 			margin-bottom: .125rem;
  124. 		}
  125. 		.reactions > li.add-reaction {
  126. 			background-color: transparent !important;
  127. 		}
  128.  
  129. 	/* TextBoxes */
  130. 	.rc-input__element, .rcx-input-box__wrapper, .rcx-input-box, .rc-tags__input/*, .rcx-select*/ { 
  131. 		background-color: #202225 !important;
  132. 		border: none !important;
  133. 		border-radius: 4px !important;
  134. 		color: white !important;
  135. 		box-shadow: none !important;
  136. 	}
  137. 		.rc-input__icon {
  138. 			color: #dcddde;
  139. 		}
  140. 	
  141. 	/* CodeBlocks */
  142. 	.CodeMirror-gutters {
  143. 		background-color: #202225;
  144. 	}
  145. 	.code-colors, code, .CodeMirror-scroll {
  146. 		color: white !important;
  147. 		background-color: #2f3136 !important;
  148. 		border: 1px solid #202225 !important;
  149. 		border-radius: 4px !important;
  150. 	}
  151. 		.hljs-keyword, .hljs-string, .cm-string {
  152. 			color: #dc3233;
  153. 		}
  154. 	
  155. 	/* Buttons */
  156. 	.rc-button, .rcx-button {
  157. 		background-color: #7289da;
  158. 		color: white;
  159. 		border: none;
  160. 		border-radius: 3px;
  161. 		font-weight: 500;
  162. 		line-height: 16px;
  163. 		font-size: 14px;
  164. 		/*padding: 2px 16px;*/
  165. 	}
  166. 	.rc-button:hover, .rcx-button:hover {
  167. 		background-color: #677bc4 !important;
  168. 		opacity: 1 !important;
  169. 	}
  170. 	.rc-button--cancel {
  171. 		background-color: transparent !important;
  172. 		border: 1px solid rgba(240,71,71,.3) !important;
  173. 		color: #f04747;
  174. 	}
  175. 	.rc-button:disabled, .rcx-button--primary:disabled {
  176. 		background-color: #7289da;
  177. 		color: white;
  178. 		opacity: 0.7;
  179. 	}
  180. 	.rc-select, select.rc-input { /* DropDown */
  181. 		background-color: rgb(79, 84, 92) !important;
  182. 		color: white !important;
  183. 		box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px 0px !important;
  184. 		border: none !important;
  185. 	}
  186. 		.rc-select__element {
  187. 			color: white !important;
  188. 		}
  189. 			option {
  190. 				background-color: rgb(79, 84, 92);
  191. 				color: white;
  192. 				border: none;
  193. 				border-radius: 4px;
  194. 			}
  195. 	/* Files */
  196. 	.attachments__item:hover {
  197. 		background-color: rgba(79,84,92,0.32) !important;
  198. 	}
  199. 	.attachments__name {
  200. 		color: white !important;
  201. 	}
  202. 	
  203. 	i {
  204. 		color: white !important;
  205. 	}
  206. 	
  207. 	/*** SIDEBAR ***/
  208. 	
  209. 	.sidebar {
  210. 		max-width: 240px;
  211. 		min-width: 240px;
  212. 		background-color: #2f3136;
  213. 	}
  214. 		.rooms-list {
  215. 			margin-top: 48px;
  216. 			scrollbar-color: #202225 transparent;
  217. 			scrollbar-width: thin;
  218. 		}
  219. 			.rooms-list__list:not(:last-child) {
  220. 				margin: 0 !important;
  221. 			}
  222. 			h3.rooms-list__type {
  223. 				height: 40px !important;
  224. 				padding: 16px 16px 0 16px;
  225. 			}
  226. 				.sidebar-item { /* Sidebar Buttons */
  227. 					height: 34px !important;
  228. 					font-size: 16px !important;
  229. 					font-weight: 500 !important;
  230. 					color: #8e9297 !important;
  231. 					margin: 0 8px !important;
  232. 					padding: 0 !important;
  233. 				}
  234. 					.sidebar-item__picture {
  235. 						display: none;
  236. 					}
  237. 					.sidebar-item__body {
  238. 						font-size: 16px !important;
  239. 						font-weight: 500 !important;
  240. 						padding: 0 8px;
  241. 					}
  242. 				.sidebar-item:hover {
  243. 					background-color: rgba(79, 84, 92, 0.16) !important;
  244. 				}
  245. 				.sidebar-item--active {
  246. 					background-color: rgba(79, 84, 92, 0.32) !important;
  247. 					color: white !important;
  248. 				}
  249. 				.sidebar-item--unread {
  250. 					color: white !important;
  251. 				}
  252.  
  253. 		.sidebar__header {
  254. 			position: fixed;
  255. 			top: 0;
  256. 			background-color: #2f3136;
  257. 			width: 240px;
  258. 			min-width: 240px;
  259. 			max-width: 240px;
  260. 			margin: 0;
  261. 			padding: 12px;
  262. 			z-index: 1;
  263. 			box-shadow: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);
  264. 		}
  265. 			.sidebar__header-thumb {
  266. 				margin: 0;
  267. 				margin-right: 10px;
  268. 			}
  269. 			.sidebar__toolbar {
  270. 				margin: 0 !important;
  271. 				padding: 0 !important;
  272. 				justify-content: space-evenly;
  273. 				/*display: grid !important;
  274. 				grid-template-columns: repeat(auto-fill,minmax(25px, 1fr))*/
  275. 			}
  276. 				.sidebar__toolbar-button {
  277. 					margin: 0;
  278. 					width: 25px;
  279. 				}
  280. 	
  281. 	/*** CONTENT ***/
  282. 	
  283. 	.content-background-color {
  284. 		background-color: #36393f;
  285. 	}
  286. 		/* HEADER */
  287. 		.rc-header--room {
  288. 			/*background-color: #36393f;*/
  289. 			height: 48px;
  290. 			padding: 0;
  291. 			padding-left: 8px;
  292. 			box-shadow: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);
  293. 			border: none !important;
  294. 		}
  295. 			.rc-header__wrap {
  296. 				background-color: transparent;
  297. 				height: 100%;
  298. 			}
  299. 				.rc-header__data {
  300. 					display: contents;
  301. 				}
  302. 					.rc-header__name {
  303. 						width: min-content;
  304. 						padding-right: 16px;
  305. 						border-right: 1px solid #ffffff0f;
  306. 						color: white;
  307. 						font-weight: 600;
  308. 						font-size: 16px !important;
  309. 					}
  310. 					.rc-header__topic {
  311. 						padding-left: 16px;
  312. 					}
  313. 				.rc-old .fixed-title {
  314. 					border: none !important;
  315. 				}
  316. 		/* MEssages */
  317. 		.messages-box ul {
  318. 			padding: 21px 0 25px;
  319. 		}
  320. 			.message {
  321. 				padding: 0;
  322. 				padding-left: 72px;
  323. 				padding-right: 48px;
  324. 				margin-top: 1.0625rem;
  325. 				line-height: 1.375rem;
  326. 				font-size: 100%;
  327. 				font-weight: 400;
  328. 			}
  329. 				.message .thumb {
  330. 					left: 16px;
  331. 					width: 40px;
  332. 					height: 40px;
  333. 				}
  334. 					.message .thumb:not(.thumb-small) .avatar {
  335. 						width: 40px;
  336. 						height: 40px;
  337. 					}
  338. 				.message-oembed, .attachment {
  339. 					background-color: #2f3136;
  340. 					border-radius: 4px;
  341. 					overflow: hidden;
  342. 					width: max-content;
  343. 					max-width: 100%;
  344. 					padding-right: 10px;
  345. 				}
  346. 					.rc-old blockquote::before, .attachment-block-border {
  347. 						display: flex;
  348. 						width: 4px !important;
  349. 						border-radius: 0px !important;
  350. 						margin-top: -5px;
  351. 						height: calc(100% + 10px)
  352. 					}
  353. 				.message-oembed > iframe {
  354. 					width: 100%;
  355. 				}
  356. 			.message-actions {
  357. 				color: white;
  358. 				background-color: #36393f;
  359. 				box-shadow: 0 0 0 1px rgba(4,4,5,0.15);
  360. 				border: none;
  361. 			}
  362. 				.message-actions__button:hover, .message-actions__menu:hover {
  363. 					background-color: #3e4249;
  364. 				}
  365. 			.message:hover, .message.active {
  366. 				background-color: rgba(4,4,5,0.07);
  367. 			}
  368. 			.message a {
  369. 				color: #7289DA;
  370. 			}
  371. 			.message.editing {
  372. 				background-color: rgba(250,166,26,0.08);
  373. 			}
  374. 			.message.new-day::before {
  375. 				background-color: #36393f;
  376. 				color: #72767d;
  377. 				border-radius: 50px;
  378. 			}
  379. 			.message.new-day::after {
  380. 				border-color: hsla(0,0%,100%,0.06) !important;
  381. 				border-width: thin !important;
  382. 			}
  383. 		
  384. 		/* TextBox */
  385. 		.rc-old .messages-container {
  386. 			overflow: hidden;
  387. 		}
  388. 		.rc-old .messages-container .footer {
  389. 			min-height: 68px;
  390. 			padding-bottom: 24px;
  391. 			background-color: #36393f;
  392. 		}
  393. 			.rc-message-box {
  394. 				background-color: #36393f !important;
  395. 				padding: 0;
  396. 				padding-left: 16px;
  397. 				padding-right: 16px;
  398. 			}
  399. 				
  400. 				/*.message-popup-results {
  401. 					bottom: 0;
  402. 					position: absolute;
  403. 				}*/
  404. 					.rc-message-box .reply-preview {
  405. 						background-color: #2e3035 !important;
  406. 					}
  407. 				.rc-message-box__container {
  408. 					border: none;
  409. 					background-color: #40444b;
  410. 					border-radius: 8px;
  411. 					padding: 9px 0;
  412. 					/*margin-bottom: 24px;*/
  413. 				}
  414. 					.rc-message-box__textarea {
  415. 						color: white;
  416. 					}
  417. 				.rc-message-box__container.editing {
  418. 					background-color: rgba(250,166,26,0.08);
  419. 				}
  420. 				.rc-message-box__toolbar-formatting {
  421. 					position: absolute;
  422. 					bottom: -24px;
  423. 				}
  424. 			.rc-message-box__typing {
  425. 				bottom: 0;
  426. 				margin-top: auto;
  427. 				position: fixed;
  428. 				height: 20px;
  429. 				color: white;
  430. 			}
  431. 				.rc-message-box__typing-user {
  432. 					color: white !important;
  433. 				}
  434. 		
  435. 		/* DropZone */
  436. 		.dropzone-overlay {
  437. 			background: rgba(0,0,0,0.8) !important;
  438. 		}
  439. 	
  440. 		/* Context SideBar */
  441. 		.rc-user-info-container {
  442. 			background-color: transparent !important;
  443. 		}
  444. 		.contextual-bar {
  445. 			background-color: #2f3136;
  446. 			box-shadow: none !important;
  447. 			border-inline-start: none !important;
  448. 		}
  449. 			.contextual-bar__header, .rcx-\@9jfjls {
  450. 				background-color: #2f3136;
  451. 				height: 48px;
  452. 				box-shadow: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);
  453. 				border: none;
  454. 				z-index: 2;
  455. 			}
  456. 			.contextual-bar__content, .rcx-\@10ikbhr {
  457. 				background-color: #2f3136;
  458. 				border-radius: 0 !important;
  459. 			}
  460. 				.contextual-bar__content > .rc-message-box {
  461. 					background-color: #2f3136 !important;
  462. 				}
  463. 				.rc-user-info__row--separator {
  464. 					border: none;
  465. 				}
  466. 				.rc-member-list__counter { /* Member list count text */
  467. 					color: white;
  468. 				}
  469. 				.rc-user-info-details {
  470. 					background-color: #202225;
  471. 					border-radius: 4px;
  472. 					color: white;
  473. 				}
  474. 					.rc-user-info-details__info {
  475. 						color: white;
  476. 					}
  477. 				.rc-member-list__user, .rcx-table__row {
  478. 					border-radius: 4px !important;
  479. 					height: 42px !important;
  480. 					padding: 0 8px !important;
  481. 					align-items: center !important;
  482. 				}
  483. 					
  484. 				.rc-member-list__user:hover, .rcx-table__row:hover {
  485. 					background-color: rgba(79,84,92,0.16);
  486. 				}
  487. 				.rc-member-list__user.active {
  488. 					background-color: rgba(79,84,92,0.32);
  489. 					color: white;
  490. 				}
  491. 	
  492. 				/* Discussions */
  493. 				.rcx-\@1usu1xd:hover, .rcx-\@1usu1xd:focus, .rcx-\@2xn2yo:hover, .rcx-\@2xn2yo:focus {
  494. 					background-color: rgba(79,84,92,0.16);
  495. 				}
  496. 					.rcx-\@16ef2pm {
  497. 						color: white !important;
  498. 					}
  499. 	
  500. 			.rc-old .list-view > .title:not(:last-child) { /* Search W/ Regex text */
  501. 				margin: 0;
  502. 			}
  503. 			.rocket-search-tab {
  504. 				padding: 8px;
  505. 				scrollbar-color: #202225 #2f3136;
  506. 			}
  507. 				.thread {
  508. 					padding: 8px;
  509. 				}
  510. 					.list > .message, .thread > .message {
  511. 						background-color: #36393f;
  512. 						border: 1px solid #202225;
  513. 						border-radius: 4px;
  514. 						padding-top: 8px;
  515. 						padding-bottom: 8px;
  516. 					}
  517. 	
  518. 	
  519. 	
  520. 	/*** SETTINGS ***/
  521. 	.flex-nav {
  522. 		background-color: #2f3136;
  523. 	}
  524. 	.rcx-\@197qq4o {
  525. 		color: white !important; 
  526. 	}
  527. 	.flex-nav a:hover, .rcx-\@1l00c5f.active {
  528. 		background-color: #393c43 !important;
  529. 	}
  530. 	.rcx-\@txktj6 {
  531. 		background-color: #36393f !important;
  532. 	}
  533. 	
  534. 	/** Admin Settings */
  535. 	
  536. 	.rc-old .flex-tab-container.opened, .flex-tab-bar {
  537. 		box-shadow: none !important;
  538. 	}
  539. 	.flex-tab-bar .tab-button:hover {
  540. 		background-color: transparent;
  541. 		border-right: 1px solid white;
  542. 	}
  543. 	.tab-button.active {
  544. 		background-color: transparent !important;
  545. 	} 
  546. 	.page-settings a:not(.rc-button) {
  547. 		color: #b9bbbe;
  548. 	}
  549. 	
  550. 	/* Tables */
  551. 	tr:not(.table-no-click):not(.table-no-pointer):hover {
  552. 		background-color: #2f3136 !important;
  553. 	}
  554. 		.statistics-table, .admin-table-row {
  555. 			background-color: #36393f !important;
  556. 		}
  557. 		.statistics-table:hover, .admin-table-row:hover {
  558. 			background-color: #2f3136 !important;
  559. 		}
  560. 		.rc-table-title {
  561. 			color: lightgray;
  562. 		}
  563. 		.table-fake-th {
  564. 			color: lightgray !important;
  565. 		}
  566. 		.permissions-manager .permission-grid .role-name {
  567. 			background-color: #36393f !important;
  568. 			color: white !important;
  569. 		}
  570. 			.page-list a:not(.rc-button) {
  571. 				color: lightgrey;
  572. 			}
  573. 		
  574. 	
  575. 	/* Integrations */
  576. 	.admin-integrations-new-item {
  577. 		border: none !important;
  578. 		color: white !important;
  579. 	}
  580. 	.admin-integrations-new-item:hover {
  581. 		background-color: rgba(79,84,92,0.32) !important;
  582. 	} 
  583. 	
  584. 	/* Federation Dash */
  585. 	.overview-item > .value {
  586. 		color: white;
  587. 	}
  588. 	
  589. 	/* Accounts */
  590. 	.rcx-accordion-item__bar[tabindex]:hover {
  591. 		background-color: transparent !important;
  592. 	}
  593. 	
  594. 	/*** POPUPS ***/
  595. 	.rc-modal-wrapper {
  596. 		background: rgba(0,0,0,0.85)
  597. 	}
  598. 		.rc-modal {
  599. 			background-color: #36393f;
  600. 			color: white;
  601. 			box-shadow: 0 0 0 1px rgba(32,34,37,.6),0 2px 10px 0 rgba(0,0,0,.2);
  602. 			border-radius: 5px;
  603. 			width: 440px;
  604. 			max-height: 660px;
  605. 			min-height: 200px;
  606. 			padding: 0;
  607. 			overflow: hidden;
  608. 		}
  609. 			.rc-modal__header {
  610. 				padding: 20px;
  611. 			}
  612. 				.rc-modal__title {
  613. 					font-weight: 600;
  614. 					font-size: 16px;
  615. 					line-height: 20px;
  616. 					letter-spacing: .3px;
  617. 					text-transform: uppercase;
  618. 				}
  619. 		.rc-modal__content {
  620. 			padding: 20px;
  621. 			padding-top: 10px;
  622. 		}
  623. 			.rc-modal__content-icon {
  624. 				display: none;
  625. 			}
  626. 			.rc-modal__content-text {
  627. 				text-align: left;
  628. 				font-size: 16px;
  629. 				line-height: 20px;
  630. 				color: #dcddde;
  631. 			}
  632. 		.rc-modal__footer {
  633. 			background-color: #2f3136;
  634. 			bottom: 0;
  635. 			margin-top: auto;
  636. 		}
  637. 	
  638. 	/* Emoji Picker */
  639. 	.emoji-picker {
  640. 		background-color: #2f3136 !important;
  641. 		border-radius: 8px;
  642. 		box-shadow: 0 0 0 1px rgba(4,4,5,0.15), 0 8px 16px rgba(0,0,0,0.24);
  643. 		padding: 0;
  644. 	}
  645. 		.filter-item {
  646. 			border: none !important;
  647. 		}
  648. 			.filter-item.active {
  649. 				border-bottom: solid !important;
  650. 			}
  651. 		.emoji-footer {
  652. 			display: none;
  653. 		}
  654. 	
  655. 	/* Context Menu */
  656. 	.rc-popover__content { 
  657. 		background-color: #202225;
  658. 		padding: 6px 8px;
  659. 		min-width: 188px;
  660. 		max-width: 320px;
  661. 		border-radius: 4px;
  662. 		box-shadow: 0 8px 16px rgba(0,0,0,0.24);
  663. 	}
  664. 		.rc-popover__title {
  665. 			color: #7289da;
  666. 			padding-top: 8px;
  667. 		}
  668. 			.rc-popover__list {
  669. 				margin-bottom: 8px;
  670. 			}
  671. 				.rc-popover__item {
  672. 					color: #b9bbbe;
  673. 					height: 35px;
  674. 					font-size: 14px;
  675. 					font-weight: 500;
  676. 					line-height: 18px;
  677. 				}
  678. 				.rc-popover__item:hover {
  679. 					background-color: rgba(79,84,92,0.16);
  680. 				}
  681. 		.rc-popover__divider {
  682. 			height: 1px;
  683. 			margin: 0;
  684. 			margin-top: -4px;
  685. 			background-color: hsla(0,0%,100%,0.06);
  686. 		}
  687. 	
  688. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

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