{"id":21826770,"url":"https://github.com/juzser/rocket.chat-dark-mode","last_synced_at":"2025-03-21T12:18:23.118Z","repository":{"id":90408943,"uuid":"587135398","full_name":"juzser/Rocket.Chat-dark-mode","owner":"juzser","description":"Dark mode for Rocket.Chat","archived":false,"fork":false,"pushed_at":"2023-01-10T03:56:18.000Z","size":10,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-20T07:08:36.275Z","etag":null,"topics":["dark-mode","dark-theme","rocketchat","rocketchat-dark","rocketchat-ui"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/juzser.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-10T03:17:12.000Z","updated_at":"2023-01-10T03:36:24.000Z","dependencies_parsed_at":"2023-03-13T17:58:39.797Z","dependency_job_id":null,"html_url":"https://github.com/juzser/Rocket.Chat-dark-mode","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juzser%2FRocket.Chat-dark-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juzser%2FRocket.Chat-dark-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juzser%2FRocket.Chat-dark-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juzser%2FRocket.Chat-dark-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juzser","download_url":"https://codeload.github.com/juzser/Rocket.Chat-dark-mode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244795519,"owners_count":20511521,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dark-mode","dark-theme","rocketchat","rocketchat-dark","rocketchat-ui"],"created_at":"2024-11-27T18:05:11.680Z","updated_at":"2025-03-21T12:18:23.097Z","avatar_url":"https://github.com/juzser.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rocket.Chat dark mode\n\nDark mode toggle for Rocket.Chat. This is compatible with the latest version of Rocket.Chat.\nPlease star this repo if you like it.\n\n### Customizable\n\nYou can customize the colors by change the `:root` \u0026 `:root .dark-mode` css variables in custom css field.\nI also customized the sidebar a bit, you can change the sidebar width by changing the `--sidebar-width` variable.\n\nHave fun!\n\n\u003cimg width=\"227\" alt=\"Screenshot 2023-01-10 at 10 28 16\" src=\"https://user-images.githubusercontent.com/5735071/211455601-1f7bee07-9d30-46db-ab48-692ff81bfc71.png\"\u003e\n\n\n## Installation\n\nGo to Admin \u003e Settings \u003e Layout.\nThen add the following code to the fields:\n\n1. Custom CSS:\n\n```css\n:root {\n  --primary-font-color: #222;\n  --info-font-color: #737373;\n  --var-yahoo-width: 40px;\n  --mention-link-text-color: #164faf;\n  --mention-link-background: #ddecff;\n  --mention-link-group-text-color: #3c3c3c;\n  --mention-link-group-background: #f9e661;\n  --rcx-tooltip-text-color: #fff;\n  --sidebar-width: 230px;\n  --tags-color: #b45817;\n  --tags-border-color: #d3d3d3;\n}\n\n/**\n * ==== DARK MODE variables ====\n */\n:root .dark-mode {\n  --dark-background: #242629;\n  --dark-background-secondary: #333;\n  --dark-background-hover: #16171a;\n  --dark-color: #fff;\n  --dark-color-neutral: #8a8a8a;\n  --rcx-color-neutral-100: #303236;\n  --rcx-color-neutral-400: #434343;\n  --rcx-color-neutral-500: #4e5052;\n  --rcx-color-neutral-600: #898c8f;\n  --rcx-color-neutral-700: #a9adbe;\n  --dark-color-secondary: #c4c8ce;\n  --dark-color-icon-neutral: #b2b2b2;\n  --dark-border-color-dim: #41474c;\n  --dark-color-danger: #ee7663;\n  --tags-color: #ff984f;\n  --tags-background-color: #313538;\n  --tags-border-color: #46474a;\n  --message-header-name-color: #c2c7cf;\n  --icon-background-color: #2f3b46;\n  --sidebar-background-color: #292b2f;\n\n  --mention-link-text-color: var(--color-light-blue);\n  --mention-link-background: var(--color-dark-medium);\n\n  /* Overwritten */\n  --secondary-background-color: var(--dark-background-secondary);\n  --rcx-color-surface-tint: var(--dark-background);\n  --primary-font-color: var(--dark-color);\n  --info-font-color: var(--dark-color-secondary);\n  --rcx-color-font-hint: #828a9a;\n  --rcx-color-primary-500: #5698f8;\n  --rcx-button-primary-background-color: #156ff5;\n  --rcx-button-primary-border-color: #156ff5;\n  --input-icon-color: var(--dark-color-neutral);\n  --rcx-input-colors-focus-shadow-color: #3c3c3c;\n  --rcx-color-surface-light: var(--dark-background);\n  --rcx-color-font-default: var(--dark-color);\n  --rcx-color-font-danger: var(--dark-color-danger);\n  --rcx-color-stroke-extra-light: var(--dark-border-color-dim);\n  --rcx-button-icon-color: var(--dark-color-icon-neutral);\n  --rcx-option-color-variant-danger: var(--dark-color-danger);\n  --rcx-color-danger-700: var(--dark-color-danger);\n  --rcx-color-font-secondary-info: #84888d;\n  --rcx-color-button-background-primary-hover: #4b8ef1;\n  --rcx-color-stroke-highlight: #2d71d5;\n  --rcx-color-primary-600: #5393f1;\n  --rc-color-button-primary: #4f91f3;\n  --rcx-button-secondary-background-color: #eceff2;\n  --rcx-button-secondary-border-color: #eceff2;\n  --rcx-button-secondary-hover-background-color: #d3e9ff;\n  --rcx-button-secondary-hover-border-color: #d3e9ff;\n  --rcx-button-danger-background-color: #f0203b;\n  --rcx-button-danger-border-color: #f0203b;\n  --rcx-color-status-background-warning-2: #42413e;\n  --rcx-message-background-color-editing: #373a40;\n\n  /* Message Box */\n  --message-box-color: var(--dark-color);\n  --message-box-markdown-hover-color: var(--dark-color);\n  --rcx-message-background-color: var(--dark-background);\n  --rcx-message-background-color-focus: #202123;\n  --rcx-color-surface-hover: #282b33;\n  --rcx-button-icon-hover-background-color: var(--dark-background-hover);\n  --rcx-button-icon-hover-border-color: var(--dark-background-hover);\n  --rcx-message-divider-color: var(--dark-color-neutral);\n  --rcx-message-divider-background-color: var(--dark-border-color-dim);\n  --message-box-container-border-color: var(--dark-border-color-dim);\n  --rcx-button-icon-background-color: var(--rcx-color-surface-light);\n  --message-box-user-activity-user-color: var(--rcx-color-neutral-700);\n  --rcx-message-reaction-background-color: var(--rcx-color-surface-light);\n  --rcx-message-reaction-color: var(--color-light-blue);\n  --rcx-message-reaction-border-color: var(--rcx-color-neutral-700);\n  --rcx-color-font-annotation: var(--rcx-color-neutral-600);\n\n  /* Threads */\n  --content-background-color: var(--dark-background);\n  --component-color: var(--dark-border-color-dim);\n  --color-darkest: var(--rcx-button-icon-color);\n  --popover-background: var(--dark-background-hover);\n  --popover-item-color: var(--dark-color);\n\n  /* User preferences */\n  --color-gray-lightest: var(--dark-background);\n  --flex-nav-background: var(--dark-background);\n  --sidebar-background-light-active: var(--dark-background-hover);\n  --sidebar-background-light-hover: var(--dark-background-hover);\n  --rcx-tag-colors-default-background-color: var(--dark-color);\n  --rcx-tag-colors-secondary-background-color: #e4e7ea;\n\n  /* Common inputs */\n  --input-border-color: var(--dark-border-color-dim);\n  --info-font-color: var(--dark-color-neutral);\n  --input-text-color: var(--dark-color);\n  --primary-background-color: var(--color-light-blue);\n}\n\n/**\n * ==== GLOBAL changes ====\n */\n\n/* Sidebar */\n.rcx-sidebar-topbar__wrapper .rcx-icon {\n  font-size: 1.1rem !important;\n}\n\n.rcx-sidebar-topbar__wrapper .rcx-button--small-square {\n  width: 20px;\n  height: 20px;\n}\n\n.rcx-sidebar-topbar__wrapper .rcx-button--small-square:last-child {\n  display: none;\n}\n\n.rcx-sidebar-topbar__wrapper .rcx-button-group {\n  margin-right: -0.25rem;\n}\n\n.rcx-sidebar-topbar__wrapper .rcx-button-group .rcx-button-group__item {\n  margin-left: .2rem;\n  margin-right: .2rem;\n}\n\n.rcx-sidebar-footer {\n  display: none;\n}\n\n/* Add gap to bottom of sidebar */\n.rcx-box.rcx-box--full.rcx-css-1cb6i7s {\n  padding-bottom: 30px;\n}\n\n@media (min-width: 1372px) {\n  .sidebar {\n    width: 15%;\n    max-width: 15%;\n  }\n}\n\n/* Code tags */\n.rcx-box--with-inline-elements code,\n.rcx-field__description code,\n.rcx-field__error code,\n.rcx-field__hint code,\n.rcx-field__link code {\n  color: var(--tags-color) !important;\n}\n\n.rc-old .code-colors {\n  color: var(--tags-color);\n}\n\n/* Others */\n.rc-old .message-popup-title {\n  font-weight: 700;\n}\n\n.rcx-message-system__block .rcx-message-system__body,\n.rcx-message-system__block .rcx-message-system__name,\n.rcx-message-system__block .rcx-message-system__time {\n  font-size: 0.8rem;\n}\n\n.rcx-message-system__block .rcx-message-system__name {\n  opacity: .7;\n}\n\n/**\n * ==== DARK MODE styling ====\n */\n.dark-mode .rcx-sidebar {\n  background-color: var(--sidebar-background-color);\n}\n\n.dark-mode .rcx-sidebar-topbar__wrapper .rcx-button--icon {\n  background-color: var(--sidebar-background-color);\n  border-color: var(--sidebar-background-color);\n}\n\n.dark-mode .rc-message-box,\n.dark-mode .message.active,\n.dark-mode .message:hover {\n  background-color: var(--dark-background);\n}\n\n.dark-mode .emoji-picker {\n  background-color: rgba(26, 28, 29, 0.98);\n}\n\n.dark-mode .message .reactions \u003e li,\n.dark-mode .rcx-message-reactions__reaction {\n  background-color: var(--icon-background-color);\n  border-color: var(--icon-background-color);\n}\n\n.dark-mode .message-actions {\n  background-color: var(--rcx-color-surface-light);\n  border-color: var(--rcx-color-stroke-extra-light);\n}\n\n.dark-mode .rc-popover__item:hover {\n  background-color: var(--dark-background);\n}\n\n.dark-mode .message.new-day:before {\n  color: var(--rcx-message-divider-color);\n}\n\n.dark-mode .rc-old .code-colors {\n  border-color: var(--tags-border-color);\n  background-color: var(--tags-background-color);\n}\n\n.dark-mode .rcx-message-header__name {\n  color: var(--message-header-name-color);\n}\n\n.dark-mode .rcx-css-1fbr01f {\n  border-color: #3e91fc !important;\n}\n\n/* Quote \u0026 code */\n.dark-mode .hljs-keyword,\n.dark-mode .hljs-selector-tag,\n.dark-mode .hljs-subst {\n  color: var(--dark-color);\n}\n\n.dark-mode .hljs-section,\n.dark-mode .hljs-selector-id,\n.dark-mode .hljs-title {\n  color: #e33c3c;\n}\n\n.dark-mode .hljs-literal,\n.dark-mode .hljs-number,\n.dark-mode .hljs-tag .hljs-attr,\n.dark-mode .hljs-template-variable,\n.dark-mode .hljs-variable {\n  color: #20cbcb;\n}\n\n.dark-mode .hljs-attribute,\n.dark-mode .hljs-name,\n.dark-mode .hljs-tag {\n  color: #9f9fee;\n}\n\n.dark-mode .hljs-doctag,\n.dark-mode .hljs-string {\n  color: #f595ad;\n}\n\n```\n\n\n2. Custom Script:\n\n\n```javascript\n// Dark mode toggle\nconst darkModeDefault = false;\n\nconst darkModeSymbol = `\u003csvg id=\"icon-darkmode\" viewBox=\"0 0 468 468\" fill=\"currentColor\"\u003e\n  \u003cpath d=\"m428.75601,300.104c-0.664,-3.81 -2.33401,-7.047 -4.996,-9.71301c-5.89999,-5.90298 -12.75201,-7.142 -20.55399,-3.716c-20.93701,9.70801 -42.64102,14.55801 -65.09702,14.55801c-28.17099,0 -54.15201,-6.94 -77.94299,-20.83801c-23.791,-13.89398 -42.63101,-32.73599 -56.52501,-56.52998c-13.899,-23.793 -20.84399,-49.77299 -20.84399,-77.94499c0,-21.88802 4.33299,-42.68301 12.991,-62.384c8.66,-19.7 21.17599,-36.973 37.543,-51.82c6.283,-5.898 7.713,-12.752 4.287,-20.557c-3.23601,-7.801 -9.041,-11.511 -17.41501,-11.132c-29.12099,1.141 -56.71999,7.664 -82.797,19.556c-26.076,11.89499 -48.48901,27.54699 -67.23801,46.96499c-18.747,19.414 -33.595,42.39899 -44.54,68.94999c-10.942,26.55301 -16.416,54.39 -16.416,83.51102c0,29.694 5.806,58.05399 17.416,85.082c11.613,27.02798 27.218,50.34399 46.824,69.94897c19.604,19.599 42.92,35.207 69.951,46.82202c27.028,11.60699 55.38399,17.41498 85.075,17.41498c42.63998,0 81.987,-11.56299 118.05399,-34.69c36.069,-23.12399 63.05002,-54.00598 80.944,-92.64499c1.52402,-3.42297 1.95102,-7.03598 1.28003,-10.83798zm-122.19101,84.064c-24.646,11.711 -50.67599,17.56201 -78.08701,17.56201c-24.743,0 -48.38998,-4.853 -70.94699,-14.55801c-22.554,-9.70499 -41.97099,-22.69501 -58.24599,-38.97198c-16.271,-16.272 -29.259,-35.686 -38.97,-58.241c-9.707,-22.556 -14.561,-46.20302 -14.561,-70.94801c0,-40.922 12.135,-77.466 36.403,-109.636c24.266,-32.165 55.53099,-53.959 93.78799,-65.379c-19.795,31.405 -29.694,65.379 -29.694,101.926c0,34.644 8.564,66.715 25.69701,96.22301c17.12799,29.49901 40.446,52.81099 69.95,69.94798c29.49899,17.129 61.565,25.694 96.211,25.694c10.65601,0 21.129,-0.85498 31.40799,-2.56998c-17.31799,20.93799 -38.30701,37.25497 -62.952,48.95099z\"/\u003e\n\u003c/svg\u003e`; // moon icon\nconst lightModeSymbol = `\u003csvg id=\"icon-darkmode\" viewBox=\"0 0 302.4 302.4\" fill=\"currentColor\"\u003e\n  \u003cpath d=\"m204.8,97.6c-13.60001,-13.6 -32.8,-22.4 -53.60001,-22.4s-40,8.4 -53.6,22.4c-13.6,13.6 -22.4,32.8 -22.4,53.6s8.8,40 22.4,53.59999c13.6,13.60001 32.8,22.40001 53.6,22.40001s40,-8.40001 53.60001,-22.40001c13.59999,-13.59999 22.39999,-32.8 22.39999,-53.59999s-8.39999,-40 -22.39999,-53.6zm-14.40001,92.8c-10,10 -24,16 -39.2,16s-29.2,-6 -39.2,-16s-16,-24 -16,-39.2s6,-29.2 16,-39.2s23.99999,-16 39.2,-16s29.2,6 39.2,16s16,23.99999 16,39.2s-6,29.2 -16,39.2z\"/\u003e\n  \u003cpath d=\"m292,140.8l-30.79999,0c-5.60001,0 -10.40001,4.8 -10.40001,10.39999c0,5.60001 4.8,10.40001 10.40001,10.40001l30.79999,0c5.60001,0 10.39999,-4.8 10.39999,-10.40001c0,-5.59999 -4.79999,-10.39999 -10.39999,-10.39999z\"/\u003e\n  \u003cpath d=\"m151.2,250.8c-5.59999,0 -10.39999,4.8 -10.39999,10.40001l0,30.79999c0,5.60001 4.8,10.39999 10.39999,10.39999c5.60001,0 10.40001,-4.79999 10.40001,-10.39999l0,-30.79999c0,-5.60001 -4.8,-10.40001 -10.40001,-10.40001z\"/\u003e\n  \u003cpath d=\"m258,243.60001l-22,-22c-3.60001,-4 -10.39999,-4 -14.39999,0s-4,10.40001 0,14.40001l22,21.99998c4,4 10.39999,4 14.39999,0s4,-10.39999 0,-14.39999z\"/\u003e\n  \u003cpath d=\"m151.2,0c-5.59999,0 -10.39999,4.8 -10.39999,10.4l0,30.8c0,5.6 4.8,10.4 10.39999,10.4c5.60001,0 10.40001,-4.8 10.40001,-10.4l0,-30.8c0,-5.6 -4.8,-10.4 -10.40001,-10.4z\"/\u003e\n  \u003cpath d=\"m258.39999,44.4c-4,-4 -10.40001,-4 -14.40001,0l-22,22c-4,4 -4,10.4 0,14.4c3.60001,4 10.40001,4 14.40001,0l22,-22c4,-4 4,-10.4 0,-14.4z\"/\u003e\n  \u003cpath d=\"m41.2,140.8l-30.8,0c-5.6,0 -10.4,4.8 -10.4,10.39999s4.4,10.40001 10.4,10.40001l30.8,0c5.6,0 10.4,-4.8 10.4,-10.40001c0,-5.59999 -4.8,-10.39999 -10.4,-10.39999z\"/\u003e\n  \u003cpath d=\"m80.4,221.60001c-3.6,-4 -10.4,-4 -14.4,0l-22,22c-4,4 -4,10.40001 0,14.39999s10.4,4 14.4,0l22,-21.99998c4,-4.00002 4,-10.40001 0,-14.40001z\"/\u003e\n  \u003cpath d=\"m80.4,66.4l-22,-22c-4,-4 -10.4,-4 -14.4,0s-4,10.4 0,14.4l22,22c4,4 10.4,4 14.4,0s4,-10.4 0,-14.4z\"/\u003e\n\u003c/svg\u003e`; // sun icon\nconst toggleButton = '\u003cbutton class=\"rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-button-group__item\" aria-label=\"Toggle Dark Mode\"\u003eD\u003c/button\u003e';\n\nfunction isDarkModeSet() {\n  return localStorage.getItem('dark-mode') === 'true';\n}\n\nfunction getDarkModeIcon() {\n  return `\u003csvg class=\"rc-icon sidebar__toolbar-button-icon sidebar__toolbar-button-icon--darkmode\" aria-hidden=\"true\"\u003e\n    \u003cuse xlink:href=\"#icon-darkmode\"\u003e\u003c/use\u003e\n    ${isDarkModeSet() ? lightModeSymbol : darkModeSymbol}\n  \u003c/svg\u003e`;\n}\n\nfunction toggleDarkMode() {\n  document.body.classList.toggle('dark-mode');\n  const setting = (!isDarkModeSet()).toString();\n  localStorage.setItem('dark-mode', setting);\n}\n\nfunction addDarkModeToggle() {\n  const sidebarToolbar = $('.rcx-sidebar-topbar__wrapper .rcx-button-group--medium');\n\n  // wait for the sidebar toolbar to be visible\n  // this will also be false if the toolbar doesn't exist yet\n  if(!sidebarToolbar.is(':visible')) {\n    setTimeout(addDarkModeToggle, 250);\n    return;\n  }\n\n  var darkModeButton = $('.js-button[aria-label=\"Toggle Dark Mode\"]');\n\n  // do nothing if button is already on the screen\n  if (darkModeButton.is(':visible')) {\n  \treturn;\n  }\n\n  darkModeButton = $(toggleButton).prependTo(sidebarToolbar);\n  darkModeButton.html(getDarkModeIcon());\n\n  darkModeButton.on('click', function() {\n    toggleDarkMode();\n    darkModeButton.html(getDarkModeIcon());\n  });\n}\n\nif (localStorage.getItem('dark-mode') !== 'false'\n    \u0026\u0026 window.location.href.indexOf('admin') === -1) {\n  document.body.classList.add('dark-mode');\n}\n\n$(addDarkModeToggle);\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuzser%2Frocket.chat-dark-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuzser%2Frocket.chat-dark-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuzser%2Frocket.chat-dark-mode/lists"}