content-script.js

/* gist-paste -u https://gist.github.com/jaggzh/7b483b183562db31bde6f9bc972f126e manifest.json content-script.js */
(function() {
	const accentColor = `#f39c12`;

	const messagesCss = `
		/* Message body width */
		@media (min-width: 1280px) {
			.xl\\:max-w-3xl {
				max-width: 90% !important;
			}
		}
		@media (min-width: 1024px) {
			.lg\\:max-w-\\[38rem\\] {
				max-width: 90% !important;
			}
		}
		@media (min-width: 768px) {
			.md\\:max-w-2xl {
				max-width: 90% !important;
			}
			.md\\:max-w-3xl {
				max-width: 90% !important;
			}
		}

		/* Code blocks font */
		code, pre {
			font-family: Consolas,Söhne Mono,Monaco,Andale Mono,Ubuntu Mono,monospace!important;
			/* font-family: Iosevka Custom, Söhne Mono,Monaco,Andale Mono,Ubuntu Mono,monospace!important; */
			/* font-size: 12px !important; */
		}

		/* Code blocks background color */
		pre > div.rounded-md {
			background-color: #121214;
		}

		/* Code blocks headings background color */
		pre > div.rounded-md > div.flex.items-center.relative {
			background-color: #323235;
		}


		/* Bring back background destinction between bot and user messages */
		/* DARK THEME */
		html.dark .flex.flex-col.pb-9.text-sm .w-full.text-token-text-primary[data-testid]:nth-child(odd) {
			background-color: #151517;
		}
		/* LIGHT THEME */
		html.light .flex.flex-col.pb-9.text-sm .w-full.text-token-text-primary[data-testid]:nth-child(odd) {
			background-color: #d2d2d2;
		}


		/* Make top bar transparent as it consumes vertical space for no reason */
		/* DARK THEME */
		html.dark div.sticky.top-0.flex.items-center.justify-between.z-10.h-14.p-2.font-semibold {
			background-color: rgba(52,53,65,0);
			background-image: linear-gradient(90deg, #0d0d0d 0%, transparent 20%);
		}
		/* LIGHT THEME */
		html.light div.sticky.top-0.flex.items-center.justify-between.z-10.h-14.p-2.font-semibold {
			background-color: rgba(52,53,65,0);
			background-image: linear-gradient(90deg, #fff 0%, transparent 20%);
		}

		/* Make GPT version number more visible */
		html.dark .group.flex.cursor-pointer.items-center.gap-1.rounded-xl.py-2.px-3.text-lg.font-medium.hover\\:bg-gray-50.radix-state-open\\:bg-gray-50.dark\\:hover\\:bg-black\\/10.dark\\:radix-state-open\\:bg-black\\/20 span.text-token-text-secondary {
			color: ${accentColor};
		}

		/* BREAK LINES IN CODE BLOCKS */
		code.\\!whitespace-pre {
			white-space: pre-wrap !important;
		}
	`;

	const sidebar_new_width = `330px`;

	const sidebar_container_selector = `.flex-shrink-0.overflow-x-hidden[style^="width: 260px"]`;

	// html.TridactylThemeDefault.dark body.antialiased div#__next div.relative.z-0.flex.h-full.w-full.overflow-hidden div.relative.flex.h-full.max-w-full.flex-1.flex-col.overflow-hidden main.relative.h-full.w-full.flex-1.overflow-auto.transition-width div.fixed.left-0.top-1/2.z-40 button span div.flex.h-[72px].w-8.items-center.justify-center div.flex.h-6.w-6.flex-col.items-center
	const sidebarCss = `
		/* Sidebar width */
		${sidebar_container_selector},
		${sidebar_container_selector} .w-\\[260px\\] {
			width: ${sidebar_new_width} !important;
		}

		/* Adjust position of the new show/hide-sidebar control button to match the new width */
		main div.fixed.left-0.top-1\\/2.z-40 {
			/* translateX(15em) !important; */
			/* transform: translateX(50px) translateY(-50%) rotate(180deg) translateZ(0px) !important; */
		}


		/*------------------*/
		/* Sidebar elements */
		/*------------------*/

		/* History periods headings color */
		html.dark h3.h-9.pb-2.pt-3.px-2.text-xs.font-medium.text-ellipsis.overflow-hidden.break-all.text-token-text-tertiary {
			color: ${accentColor};
		}

		/* Buttons on active chat (to make it visible when title is too long) */
		html.dark div.group.relative.rounded-lg.active\\:opacity-90.bg-token-sidebar-surface-secondary button.flex.items-center.justify-center.text-token-text-primary.transition.hover\\:text-token-text-secondary.radix-state-open\\:text-token-text-secondary svg > path {
			fill: ${accentColor};
		}

		ol > li > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap {
			overflow: visible;
			white-space: unset;
		}

		ol > li > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap > div.absolute.to-transparent {
			background-image: none;
		}

		a.hover\\:pr-4:hover,
		a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.hover\\:bg-gray-100.dark\\:hover\\:bg-\\[\\#2A2B32\\].cursor-pointer.break-all.bg-gray-50.hover\\:pr-4.dark\\:bg-gray-900.group
		{
			padding-right: unset !important;
		}

		div.absolute.inset-y-0.right-0.w-8.z-10.bg-gradient-to-l.dark\\:from-gray-900.from-gray-50.group-hover\\:from-gray-100.dark\\:group-hover\\:from-\\[\\#2A2B32\\] {
			background: none;
		}
	`;

	const cssStyles = (messagesCss + sidebarCss).replaceAll("\t", ' ');

	// Create a new <style> element and set its content to the CSS rules
	var styleElement = document.createElement("style");
	styleElement.innerHTML = cssStyles;

	// Append the new <style> element to the <head> section of the document
	document.head.appendChild(styleElement);
})();

manifest.json

{
  "manifest_version": 2,
  "name": "ChatGPT UI Fix",
  "version": "1.0",
  "description": "Customize the appearance of chat.openai.com.",
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["*://chat.openai.com/*"],
      "js": ["content-script.js"]
    }
  ],
  "icons": {
    "48": "icons/border-48.png"
  }
}