chatgpt.com.user.css

		/* ==UserStyle==
@name           ChatGPT Customizable Colors
@namespace      ayebrian
@version        1.4.0
@description    Customize the ChatGPT interface by selecting your preferred color palette for a personalized experience.
@author         ayebrian
@homepageURL    https://github.com/ayebrian/themes

@var color primary-color "Accent color (dark)" "#4d5b6f"
@var color primary-color-light "Accent color (light)" "#799bbf"
@var checkbox dynamic-user-message "Dynamic user message color" 1


==/UserStyle== */
		@-moz-document domain("chatgpt.com") {
			:root.dark {
				/*--primary-color: #2e3e61; Old color*/
				--bg-main: color-mix(in srgb, var(--primary-color) 30%, #000 80%);
				--sidebar-bg: color-mix(in srgb, var(--primary-color) 20%, #000);
				--sidebar-button-hover: color-mix(in srgb, var(--primary-color), #000);
				--text-main: color-mix(in srgb, var(--primary-color) 30%, #fff);
				--text-tertiary-color: color-mix(in srgb, var(--primary-color) 75%, #fff);
				--text-secondary-color: color-mix(in srgb, var(--primary-color) 66%, #fff);
				--border-color: color-mix(in srgb, var(--primary-color) 20%, #ffffff08);
				--border-enabled-color: color-mix(in srgb, var(--primary-color) 50%, #ffffff80);
				--message-bg: color-mix(in srgb, var(--primary-color) 20%, #ffffff08);
				--scroll-bg: color-mix(in srgb, var(--primary-color) 70%, #797979);
				--disabled-button-bg: color-mix(in srgb, var(--primary-color) 25%, #fff 15%);
				--enabled-button-bg: color-mix(in srgb, var(--primary-color) 100%, #000 5%);
				--scroll-fade-top: linear-gradient( 180deg,
				color-mix(in srgb, var(--sidebar-bg) 0%, transparent) 0%,
				color-mix(in srgb, var(--sidebar-bg) 28%, transparent) 56%,
				color-mix(in srgb, var(--sidebar-bg) 62%, transparent) 84%,
				var(--sidebar-bg) 100%);
			}

			:root.light {
				--primary-color: var(--primary-color-light);
				--bg-main: color-mix(in srgb, var(--primary-color) 20%, #fff 80%);
				--sidebar-bg: color-mix(in srgb, var(--primary-color) 35%, #fff 75%);
				--sidebar-button-hover: color-mix(in srgb, var(--primary-color), #fff);
				--text-main: color-mix(in srgb, var(--primary-color) 30%, #000);
				--text-tertiary-color: color-mix(in srgb, var(--primary-color) 75%, #000);
				--border-color: color-mix(in srgb, var(--primary-color) 20%, #ffffff08);
				--border-enabled-color: color-mix(in srgb, var(--primary-color) 50%, #00000080);
				--message-bg: color-mix(in srgb, var(--primary-color) 20%, #ffffff08);
				--scroll-bg: color-mix(in srgb, var(--primary-color) 70%, #fff);
				--disabled-button-bg: color-mix(in srgb, var(--primary-color) 25%, #000 5%);
				--enabled-button-bg: color-mix(in srgb, var(--primary-color) 100%, #000 5%);
				--menu-item-highlighted: color-mix(in srgb, var(--primary-color) 100%, #fff 51%);
				--scroll-fade-top: linear-gradient( 180deg,
				color-mix(in srgb, var(--sidebar-bg) 0%, transparent) 33.621%,
				var(--sidebar-bg) 114.66%);
			}

			.dark,
			.light,
			:is(.dark, .light) body {
				--bg-primary: var(--sidebar-bg);
				--bg-elevated-primary: var(--sidebar-button-hover);
				--bg-elevated-secondary: var(--sidebar-bg);
				--bg-tooltip: var(--sidebar-button-hover);
				--bg-secondary-surface: var(--sidebar-bg);
				--sidebar-surface-primary: var(--sidebar-bg);
				--sidebar-surface-tertiary: var(--sidebar-surface-secondary);
				--sidebar-surface-secondary: var(--sidebar-button-hover);
				--surface-hover: var(--sidebar-button-hover);
				--main-surface-tertiary: var(--scroll-bg);
				--message-surface: var(--message-bg);
				--main-surface-secondary: var(--sidebar-button-hover);
				--main-surface-primary: var(--sidebar-button-hover);
				--text-secondary: var(--text-secondary-color);
				--text-tertiary: var(--text-tertiary-color);
				--theme-secondary-btn-bg: var(--primary-color);
				--theme-submit-btn-bg: var(--primary-color);
				--theme-mini-msg-bg: var(--message-bg);
				--interactive-bg-secondary-hover: var(--message-bg);
			}

			.user-message-bubble-color {
				background-color: color-mix( in srgb,
				var(--theme-user-msg-bg) calc((1 - var(--dynamic-user-message)) * 100%),
				var(--primary-color) calc(var(--dynamic-user-message) * 100%)) !important;
				/* Checkbox: dynamic accent when enabled, native ChatGPT blue when disabled */
			}

			*,
			.dark:hover,
			.light:hover {
				scrollbar-color: var(--scroll-bg) transparent;
			}

			.__menu-item {
				/* Colors for hover at least for buttons in the sidebar */
				--menu-item-open: var(--message-bg);
				--menu-item-highlighted: var(--message-bg);
				--menu-item-open: var(--message-bg);
				--menu-item-hover: var(--message-bg);
			}

			body,
			html,
			html:not(.screen-arch),
			html:not(.screen-arch) body {
				background-color: var(--bg-main);
				color: var(--text-main)!important;
			}

			@media (width >=80rem) {
				header#page-header {
					background: none;

					/* FIX: Overriden Chat Navbar Header to match the original design
			December 2025: Compliant with the original OpenAI design */
				}
			}

			@media (width <=80rem) {
				header#page-header {
					background: var(--bg-main);

					/* April 2026: Finally fixed the stupid navbar missing bg */
				}
			}

			div[data-radix-menu-content] {
				background-color: var(--surface-hover);
				/* FIX: Too Dark Model Selector */
			}


			.bg-token-main-surface-primary,
			.relative.bg-token-main-surface-primary {
				background-color: var(--bg-main);
				/* Upgrade your Plan Page & Model Selector BG */
			}

			.bg-token-sidebar-surface-primary {
				background-color: var(--sidebar-bg);
			}

			.from-token-sidebar-surface-primary {
				--tw-gradient-from: var(--sidebar-bg);
			}

			.from-token-main-surface-primary {
				--tw-gradient-from: var(--bg-main);
			}

			.bg-token-sidebar-surface-secondary {
				background-color: var(--sidebar-button-hover);
			}

			@media (hover: hover) and (pointer: fine) {
				.dark\:hover\:bg-token-main-surface-secondary:hover:is(.dark *) {
					background-color: var(--sidebar-surface-secondary);
				}
			}

			@media (hover: hover) and (pointer: fine) {
				.hover\:bg-token-main-surface-secondary:hover {
					background-color: var(--sidebar-surface-secondary);
				}
			}

			.dark\:bg-token-main-surface-secondary:is(.dark *),
			.dark\:bg-\[\#303030\]:is(.dark *) {
				background-color: var(--main-surface-secondary);
			}

			.shadow-short:not(:is(.dark *)) {
				background-color: #fff;
				/* Light mode text input */
			}

			/* message input */
			.dark svg {
				color: var(--text-main)!important;
			}

			.dark\:bg-white:is(.dark *) {
				background-color: var(--enabled-button-bg);
				/* Deprecated */
			}

			.btn-green {
				background-color: var(--primary-color);
			}

			.btn-secondary {
				background-color: var(--bg-main);
			}


			button.btn.relative.btn-secondary.btn-small {
				background-color: var(--enabled-button-bg);
			}

			@media (hover: hover) and (pointer: fine) {
				.btn-green:hover {
					background-color: var(--primary-color);
					opacity: 0.7;
				}
			}


			.bg-token-main-surface-tertiary {
				background-color: var(--border-color);
			}

			.radix-state-open\:bg-token-main-surface-secondary[data-state=open] {
				background-color: var(--message-bg);
			}

			.bg-token-main-surface-secondary {
				background-color: var(--sidebar-button-hover);
			}

			@media (min-width: 768px) {
				.md\:radix-state-active\:bg-token-main-surface-secondary[data-state=active] {
					background-color: var(--sidebar-button-hover);
				}
			}


			/* QUESTION: Remove in the future if doesn't break anything
	.btn-primary:is(.dark *) {
		background-color: var(--primary-color);
		color: var(--text-main)!important;
	20.05.25: Seems it's being used by the share button modal
	}*/
			:is(.dark, .light) .dark\:bg-gray-700 {
				background-color: var(--message-bg);
			}

			@media (hover: hover) and (pointer: fine) {
				.btn-primary:hover:is(.dark *) {
					background-color: var(--scroll-bg);
				}
			}

			:is(.dark, .light) .dark\:prose-invert :where(code):not(:where([class~=not-prose] *)):not(:where(pre *)) {
				background-color: var(--disabled-button-bg);
				/* Codeblock */
				/* FIX: Exclude all <pre> descendants so block lines keep ChatGPT's 
					transparent reset; old whitespace-pre! exclusion missed per-line <code> nodes */
			}

			.bg-token-bg-primary {
				background-color: transparent;
				/* FIX: Explore GPTs search input bg */
			}

			/* LATER: Add the toggle to switch between 2 button styles(Color, White)
	button[inputstate="default"] {
		background: #fff!important;
	}
	button[inputstate="default"] > div > svg {
		color:  var(--sidebar-bg)!important;
	}
	*/
			:is(.dark, .light) .dark\:bg-token-main-surface-secondary {
				background: var(--sidebar-button-hover);
				/* Search hover on chats */
			}

			.bg-token-bg-elevated-secondary {
				background-color: var(--sidebar-bg);
				/* Sidebar BG for Chats and Settings */
			}

			.mix-blend-darken {
				mix-blend-mode: normal;
				/* Fix unused and breaking blending for images from search in chats */
			}

			.__menu-item:not(:disabled):not([data-disabled]):active:not(:has([data-trailing-button]:hover)),
			.__menu-item:not(:disabled):not([data-disabled])[data-active],
			.hover\:bg-token-bg-tertiary:hover {
				background-color: var(--message-bg);
				/* Active chat in the sidebar & settings buttons */
			}

			.content-fade:after {
				background-color: var(--content-fade-bg, var(--bg-main));
				;
				/* June 2025: Remove the new weird gradient that has no purpose.
		December 2025: Chat Container uses this for fading of scroll 
				April 2026: Fixed again */
			}

			:is(.dark, .light) #thread-bottom-container::after {
				background-color: var(--bg-main) !important;
				/* August 2026: New composer footer fade must blend into the themed page */
			}

			:is(.dark, .light) [class*="--vt-disclaimer"] .bg-token-main-surface-primary {
				--main-surface-primary: var(--bg-main) !important;
				/* Disclaimer pill shadow follows the dynamic page background instead of black */
			}

			form.group\/composer.w-full > div > div {
				background-color: var(--sidebar-button-hover)!important;
				/* Chat Input Container */
			}


			div[data-testid="modal-settings"] > div > div > div {
				background: var(--bg-main);
				/* April 2026: Finally fixed the settings missing bg */
			}

			#modal-settings [role="dialog"] div:has(> [data-settings-tab-list]) {
				background-color: var(--sidebar-bg);
				/* Settings sidebar */
			}

			#modal-settings [data-settings-tab-list] [role="tab"][data-state="active"],
			#modal-settings [data-settings-tab-list] [role="tab"][data-state="inactive"]:hover {
				background-color: var(--message-bg) !important;
				/* Settings active and hover states */
			}

			#modal-settings button[data-testid="close-button"] {
				background-color: transparent !important;
			}

			#modal-settings button[data-testid="close-button"]:hover {
				background-color: var(--message-bg) !important;
			}

			:is(.dark, .light) button[role="switch"][data-state="checked"] {
				background-color: var(--primary-color) !important;
				/* Dynamic checked toggle color */
			}

			:is(.dark, .light) :where([role="dialog"], [role="alertdialog"]) {
				background-color: var(--bg-main) !important;
				/* August 2026: Dynamic background for modal and popup content */
			}

			div[class="flex flex-row gap-2"] > button[aria-label] {
				background: var(--primary-color);
				/* April 2026: Voice Mode "End" button */
			}

			@media (hover: hover) and (pointer: fine) {
				button.__composer-pill--neutral:hover {
					background-color: var(--interactive-bg-secondary-hover);
					/* FIX: Composer neutral pills (model selector) - match the icon-button hover */
				}
			}

			button.__composer-pill--neutral[data-state=open],
			button.__composer-pill--neutral[data-is-open] {
				background-color: var(--interactive-bg-secondary-hover);
				/* Composer neutral pills */
			}

			/* August 2026: Chat/Work selector moved to a new pill component.
			   Its track uses a hard-coded dark color, while the selected thumb
			   still carries the legacy bg-token-bg-primary class reset above. */
			:is(.dark, .light) header#page-header [role="radiogroup"][aria-label="Select chat surface"] > :first-child {
				background-color: var(--sidebar-bg);
			}

			:is(.dark, .light) header#page-header [role="radiogroup"][aria-label="Select chat surface"] .bg-token-bg-primary {
				background-color: var(--sidebar-button-hover);
			}

			:is(.dark, .light) .bg-surface-primary {
				background-color: var(--bg-main) !important;
				/* August 2026: Suggested actions below the composer */
			}

			:is(.dark, .light) .bg-surface-primary li[data-selected] > button:first-of-type {
				background-color: var(--message-bg) !important;
				/* Suggested action hover: use the customizable accent instead of gray */
			}

			:is(.dark, .light) #conversation-header-actions.translucent-surface {
				background-color: transparent !important;
				backdrop-filter: none;
				/* Temporary chat container should not draw a square behind the button */
			}

			:is(.dark, .light) #conversation-header-actions button[aria-label="Temporary chat"]:hover {
				background-color: var(--surface-hover) !important;
				/* Keep the circular hover tied to the customizable accent */
			}
		}