Design is dark and compact.
ChatGPT Darker by him
Details
Authorhim
LicenseNo License
Categorychat.openai.com
Created
Updated
Size29 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name ChatGPT Darker
@version 10.1.2
@namespace userstyles.world/user/Him
@description Make ChatGPT UI darker
@author Him
@license No License
==/UserStyle== */
@-moz-document domain("chat.openai.com") {
html {
font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;
}
.flex.h-full.max-w-full.flex-1.flex-col {
background: #191919 !important;
}
/* hide plus ad */
a.flex.py-3.px-3.items-center.gap-3.transition-colors.duration-200.text-white.cursor-pointer.text-sm.hover\:bg-gray-800.rounded-md {
display: none;
}
/* keep chatgpt style */
#kcg {
display: content !important;
font-size: 10px;
background: transparent !important;
opacity: .3;
font-weight: 200;
border: none;
padding: 0 0 5px 5px;
margin: 0;
}
#kcg img {
display: none;
}
/* sidebarbg */
.bg-gray-900 {
background-color: #000;
}
/* sidebar chat gradient */
.from-gray-900 {
--tw-gradient-from: #000;
--tw-gradient-to: rgba(0, 0, 0, 0);
}
/* selected */
.bg-gray-800 {
background: #212121;
}
.from-gray-800 {
--tw-gradient-from: #212121;
--tw-gradient-to: rgba(0, 0, 0, 0);
}
/* hover */
.hover\:bg-\[\#2A2B32\]:hover {
background-color: #212121;
}
.group:hover .group-hover\:from-\[\#2A2B32\] {
--tw-gradient-from: #212121;
--tw-gradient-to: rgba(0, 0, 0, 0);
}
.hover\:bg-gray-800:hover {
background-color: #212121;
}
/* assistant */
.dark .dark\:bg-\[\#444654\] {
background-color: #212121;
}
/* user */
.dark .dark\:bg-gray-800 {
background-color: #191919;
}
/* prompt area shadow */
.dark .dark\:md\:bg-vert-dark-gradient {
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), #191919 58.85%);
}
/* prompt input */
.dark .dark\:bg-gray-700 {
background-color: #212121;
}
.dark .btn-neutral {
background-color: #212121;
border-color: #0000;
color: #aaa;
}
/* text */
.dark .dark\:text-gray-100 {
color: #aaa;
}
.dark .dark\:text-gray-300 {
color: #aaa;
}
.text-gray-300 {
color: #aaa;
}
.text-gray-400 {
color: #aaa;
}
textarea::placeholder {
color: #666;
}
.text-gray-100 {
color: #ddd;
}
.text-white {
color: #ddd;
}
.dark .dark\:text-gray-400 {
color: #666;
}
.prose {
--tw-prose-body: #8c8c8c;
--tw-prose-headings: #2f2f2f;
--tw-prose-lead: #5a5a5a;
--tw-prose-links: #2f2f2f;
--tw-prose-bold: #2f2f2f;
--tw-prose-counters: #878787;
--tw-prose-bullets: #b7b7b7;
--tw-prose-hr: #c7c7c7;
--tw-prose-quotes: #2f2f2f;
--tw-prose-quote-borders: #c7c7c7;
--tw-prose-captions: #878787;
--tw-prose-code: #2f2f2f;
--tw-prose-pre-code: #c7c7c7;
--tw-prose-pre-bg: #4d4d4d;
--tw-prose-th-borders: #b7b7b7;
--tw-prose-td-borders: #c7c7c7;
--tw-prose-invert-body: #ddd;
--tw-prose-invert-headings: #ffffff;
--tw-prose-invert-lead: #6c6c6c;
--tw-prose-invert-links: #ffffff;
--tw-prose-invert-bold: #ffffff;
--tw-prose-invert-counters: #6c6c6c;
--tw-prose-invert-bullets: #5a5a5a;
--tw-prose-invert-hr: #8c8c8c;
--tw-prose-invert-quotes: #d3d3d3;
--tw-prose-invert-quote-borders: #8c8c8c;
--tw-prose-invert-captions: #6c6c6c;
--tw-prose-invert-code: #ffffff;
--tw-prose-invert-pre-code: #b7b7b7;
--tw-prose-invert-pre-bg: rgba(0, 0, 0, 0.5);
--tw-prose-invert-th-borders: #5a5a5a;
--tw-prose-invert-td-borders: #8c8c8c;
font-size: 1rem;
line-height: 1.75;
}
.px-3.pt-2.pb-3.text-center.text-xs.text-gray-600.dark\:text-gray-300.md\:px-4.md\:pt-3.md\:pb-6 {
padding: 3px;
font-size: 11px;
font-weight: 300;
opacity: .3;
}
::-webkit-scrollbar {
height: .5rem;
width: .5rem;
}
.dark ::-webkit-scrollbar-thumb {
background-color: #333;
}
}
@-moz-document url-prefix(https://auth0.openai.com/u/login/){
._widget-auto-layout{
background: #0b0b0b;
overflow: hidden
}
.oai-header svg {
fill: #fff
}
.ce53f8304 {
position: relative;
font-size: 14px;
font-size: var(--default-font-size);
color: #fdfdfd;
background-color: #222;
box-shadow: 0 12px 40px rgba(0,0,0,.12);
box-shadow: var(--shadow-component-outer);
border-radius: 5px;
border-radius: var(--border-radius-outer);
border: 0 solid transparent;
border: var(--box-border-width) var(--box-border-style) var(--box-border-color);
}
.cdc5ed3fa{
color: #fff
}
.c83859ab9{
background: #333;
color: #fff;
border: 0
}
}
@-moz-document domain("chat.openai.com") {
/* Font Customization */
html {
--font-text: Segoe UI Variable, Segoe UI Variable Text, Segoe UI, Helvetica Neue, Helvetica, -system-ui, sans-serif;
--font-display: Segoe UI Variable Display, Segoe UI Variable, Segoe UI, Helvetica Neue, Helvetica, -system-ui, sans-serif;
font-family: var(--font-text);
}
/* Add Blurry Background*/
body {
background: var(--bg);
background-size: cover;
height: 100vh;
width: 100vw;
/* Weird issue with scrollbar fix */
position: fixed;
top: 0;
left: 0;
}
body > div {
backdrop-filter: blur(10px);
}
/* ChatGPT Logo Redesign */
/* Logo Customization */
.text-4xl {
font-size: 50px;
opacity: 100%;
position: absolute;
top: 40%;
left: 50.5%;
transform: translate(-50%, -50%);
}
.justify-center.items-center.gap-2.flex.sm\:mb-16.mb-10.mr-auto.ml-auto.sm\:mt-\[20vh\].mt-6.text-center.font-semibold.text-4xl {
position: absolute;
top: 2.5% !important;
}
/* Add a Fake "PLUS" Logo */
.text-4xl::after {
content: "PLUS";
display: inline-block;
margin-left: 4px;
border-radius: 6px;
background-color: #f7c86c;
padding-left: 6px;
padding-right: 6px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
color: #2D3748;
}
/* Hide "Examples, Capabilities and Limitations" Columns (FREE Version) */
.gap-3\.5.text-center.items-start.md\:flex {
display: none;
}
/* Text Input and Output Blocks Area */
/* Wider and Bigger Customization */
.xl\:max-w-3xl, .lg\:max-w-3xl {
max-width: 950px;
}
textarea[data-id] {
min-height: 48px !important;
}
/* Add a Click Animation */
textarea {
margin-bottom: 3px !important;
}
textarea:focus {
margin-bottom: 0 !important;
}
form > div > div:last-child {
position: relative;
}
/* Remove the "Free Research Preview" Text from the Footer */
form ~ div {
font-size: 0 !important;
}
form ~ div a {
font-size: 13px;
}
form ~ div a::after {
content: ". ChatGPT may produce inaccurate information about people, places, or facts.";
display: inline-block;
font-size: 13px;
}
/* Hide "Upgrade to PLUS" Menu (FREE Version) / "My Plan" Menu (PLUS Version) |
Change "display: none;" to "display: visible;" if your ChatGPT Extension is doesn't work or
you want to access the "Upgrade to PLUS" Menu (FREE Version) / "My Plan" Menu (PLUS Version) */
.rounded-md.hover\:bg-gray-800.text-sm.cursor-pointer.text-white.duration-200.transition-colors.gap-3.items-center.p-3.flex {
display: none;
}
/* Hide "UseChatGPT.AI" Extension Promotion Menu from Navigation Menu */
.chatgpt-ad.flex-shrink-0.mb-1.hover\:bg-gray-500\/10.border-white\/20.border.rounded-md.text-sm.cursor-pointer.text-white.duration-200.transition-colors.gap-3.items-center.px-3.py-3.flex,
.chatgpt-ad.flex-grow.flex-shrink-0.h-11.hover\:bg-gray-500\/10.border-white\/20.border.rounded-md.text-sm.cursor-pointer.text-white.duration-200.transition-colors.gap-3.items-center.p-3.flex {
display: none;
}
/* Change the "Copy" Button Icon Position */
.disabled\:dark\:hover\:text-gray-400.dark\:hover\:text-gray-200.dark\:hover\:bg-gray-700.dark\:text-gray-400.hover\:text-gray-700.hover\:bg-gray-100.p-1.rounded-md.gap-2.ml-auto.flex {
position: absolute;
left: 13% !important;
bottom: -115% !important;
}
/* Change the "Listen" Icon Position */
.cursor-pointer.curs.disabled\:dark\:hover\:text-gray-400.dark\:hover\:text-gray-200.dark\:hover\:bg-gray-700.dark\:text-gray-400.hover\:text-gray-700.hover\:bg-gray-100.rounded-md.p-1 {
position: absolute;
right: -3% !important;
bottom: -120% !important;
}
/* Change the shape of ChatGPT and User Avatar to Rounded */
.rounded-sm {
border-radius: 6px;
}
/* Hide "Regenate" Button */
.md\:border.border-0.-z-0.whitespace-nowrap.btn-neutral.relative.btn {
display:none;
}
/* Sidebar Redesign */
/* Sidebar */
#__next > div > div.flex.h-full.flex-1.flex-col.md\:pl-\[260px\] > main > div.absolute.bottom-0.left-0.w-full.border-t.md\:border-t-0.dark\:border-white\/20.md\:border-transparent.md\:dark\:border-transparent.md\:bg-vert-light-gradient.bg-white.dark\:bg-gray-800.md\:\!bg-transparent.dark\:md\:bg-vert-dark-gradient > form > div > div.flex.flex-col.w-full.py-2.flex-grow.md\:py-3.md\:pl-4.relative.border.border-black\/10.bg-white.dark\:border-gray-900\/50.dark\:text-white.dark\:bg-gray-700.ro...