Experience ChatGPT with a sleek Material Dark theme. Enjoy a distraction-free, immersive AI interaction on chat.openai.com.
目前為
/* ==UserStyle==
@name ChatGpt Material Dark
@namespace ameer-jamal.github.io/
@version 1.3.0
@description Experience ChatGPT with a sleek Material Dark theme. Enjoy a distraction-free, immersive AI interaction on chat.openai.com.
@author Ameer Jamal
@license CC BY-ND 4.0
==/UserStyle== */
/*
* License: Creative Commons Attribution-NoDerivatives 4.0 International (CC BY-ND 4.0)
*
* You are free to:
* - Share — copy and redistribute the material in any medium or format.
*
* Under the following terms:
* - Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made.
* You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
* - No Derivatives — If you remix, transform, or build upon the material, you may not distribute the modified material.
* - No Commercial Use — You may not use the material for commercial purposes.
*
* For the full license text, visit https://creativecommons.org/licenses/by-nd/4.0/
* For any questions or concerns, please reach out to the original author.
*/
@-moz-document regexp("https://chat.openai.com(/.*)?") {
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap');
:root {
--futuristic-gradient: linear-gradient(to right, #0f2027, #203a43, #2c5364);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
--chat-background-gradient: linear-gradient(180deg, rgb(32 33 35 / 0%), rgb(32 33 35) 58.85%);
--all-chat-history: black;
--main-chat-border-color: rgba(137, 126, 109, 0.35);
--deep-space: linear-gradient(to left, #000000, #434343);
--alerts: linear-gradient(to right, #ff512ff0, #f09819f0);
--code-background: #1E1E1E;
/* Vsvcode Dark+ */
--code-topbar: radial-gradient(circle at -5.9%, #2c5364 0%, #00283a 15.9%, #1E1E1E 24.5%, #1E1E1E 100%);
/* Vsvcode Dark+ */
--user-input: linear-gradient(to right,
#2c536445 0%,
#000000 50%,
#000000 100%);
}
/* replace bg color */
.dark body,
.dark html {
background-color: rgba(18, 18, 18, 1);
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden {
background-color: rgba(18, 18, 18, var(--tw-bg-opacity));
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div > div > div.flex.items-center.justify-center.gap-1.border-b.border-black\/10.bg-gray-50.p-3.text-gray-500.dark\:border-gray-900\/50.dark\:bg-gray-700.dark\:text-gray-300 {
background-color: rgba(18, 18, 18);
}
/*change the backgorund of model type*/
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div > div > header > div {
backdrop-filter: blur(4px) saturate(100%);
-webkit-backdrop-filter: blur(1px) saturate(200%);
background-color: rgba(18, 18, 18, 0.2);
color: rgb(255, 255, 255);
}
/* code section styling */
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div > div > div > div.relative.flex.w-\[calc\(100\%-50px\)\].flex-col.gap-1.md\:gap-3.lg\:w-\[calc\(100\%-115px\)\] > div.flex.flex-grow.flex-col.gap-3 > div > div > pre > div > div.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md {
background: #1c1d1f;
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div > div > div > div.relative.flex.w-\[calc\(100\%-50px\)\].flex-col.gap-1.md\:gap-3.lg\:w-\[calc\(100\%-115px\)\] > div.flex.flex-grow.flex-col.gap-3 > div > div > pre > div > div.p-4.overflow-y-auto {
background: #1c1d1f;
}
/* Code top bar */
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md {
background: var(--code-topbar);
border-bottom: 0.1px solid #fff9;
}
/*Code background*/
.p-4.overflow-y-auto {
background: var(--code-background);
}
/* Code snippet font and settings*/
code,
pre,
kbd,
samp {
font-family: 'Fira Code', monospace;
letter-spacing: 0.5px;
font-variant-ligatures: contextual;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
/* for Chrome, Safari */
-moz-osx-font-smoothing: grayscale;
/* for Firefox */
}
/* fading cursor */
@-webkit-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.result-streaming > :not(ol):not(ul):not(pre):last-child:after,
.result-streaming > ol:last-child li:last-child:after,
.result-streaming > pre:last-child code:after,
.result-streaming > ul:last-child li:last-child:after {
-webkit-animation: fade 1s ease-in-out infinite;
animation: fade 1s ease-in-out infinite;
content: "▋";
margin-left: .25rem;
vertical-align: baseline;
}
/* load chat animation*/
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div > div {
animation: fade-in 0.25s ease-in forwards;
opacity: 0;
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div > div.fade-out {
animation: fade-out 0.25s ease-out forwards;
}
/* scroll smoothly */
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div {
scroll-behavior: smooth;
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > 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.pt-2.md\:pl-2.md\:w-\[calc\(100\%-\.5rem\)\] > form > div > div.flex.flex-col.w-full.py-\[10px\].flex-grow.md\:py-4.md\:pl-4.relative.border.border-black\/10.bg-white.dark\:border-gray-900\/50.dark\:text-white.dark\:bg-gray-700.rounded-xl.shadow-xs.dark\:shadow-xs {
backdrop-filter: blur(5px) saturate(100%);
-webkit-backdrop-filter: blur(1px) saturate(200%);
background-color: rgba(18, 18, 18, 0.2);
border-radius: 12px;
border: 1px solid rgba(67, 69, 71, .7);
color: rgb(255, 255, 255);
}
/* regenerate response */
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > 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.pt-2.md\:pl-2.md\:w-\[calc\(100\%-\.5rem\)\] > form > div > div:nth-child(1) > div > button {
backdrop-filter: blur(5px) saturate(100%);
-webkit-backdrop-filter: blur(1px) saturate(200%);
background-color: rgba(18, 18, 18, 0.2);
border-radius: 122px;
border: 1px solid rgba(54, 55, 57, .7);
color: rgb(255, 255, 255);
}
.rounded-sm {
border-radius: 122px;
}
.dark .dark\:bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(18, 18, 18, var(--tw-bg-opacity));
}
.dark .dark\:bg-\[\#444654\] {
--tw-bg-opacity: 1;
background-color: rgba(18, 18, 18, var(--tw-bg-opacity));
}
/*Chat Background*/
.dark .dark\:md\:bg-vert-dark-gradient {
background-image: var(--chat-background-gradient)
}
/** Chat input */
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div > div > div:not(.bg-gray-50) {
color: #c2c2c2;
background: #000000;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #434343, #000000);
/* Chrome 10-25, Safari 5.1-6 */
background: var(--user-input)
}
/** Chat output */
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div > div > div,
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div > div > div:last-child {
--tw-prose-body: red !important;
background: black;
}
/** Chat input */
.dark .dark\:prose-invert {
--tw-prose-headings: #fff !important;
--tw-prose-body: #e3e3e3;
--tw-prose-bold: #fff;
--tw-prose-code: #E8922E;
--tw-prose-links: #53b7ff;
--tw-prose-quotes: #ffc7f8;
--tw-prose-hr: #2fffd2;
}
/*Chat border seperation between AI and user*/
.dark .dark\:border-gray-900\/50 {
border-color: var(--main-chat-border-color)
}
#__next > div > div.flex.h-full.flex-1.flex-col.md\:pl-\[260px\] > main > div.flex-1.overflow-hidden > div > div > div.w-full.h-48.flex-shrink-0 {
background-color: rgba(18, 18, 18, var(--tw-bg-opacity));
}
#__next > div > div.flex.h-full.flex-1.flex-col.md\:pl-\[260px\] > main > div.flex-1.overflow-hidden > div > div > div > div > div.relative.flex.w-\[calc\(100\%-50px\)\].md\:flex-col.lg\:w-\[calc\(100\%-115px\)\] > div.flex.flex-grow.flex-col.gap-3 > div {
font-size: 26px
}
/* new chat button*/
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900 > div > div > div > nav > div.mb-1.flex.flex-row.gap-2 > a {
background: var(--futuristic-gradient);
border-radius: 10px;
font-size: 0.9rem;
transition: box-shadow 0.3s;
text-align: center;
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900 > div > div > div > nav > div.mb-1.flex.flex-row.gap-2 > a:hover {
box-shadow: 1px 1px 10px rgba(38, 198, 218, 0.9);
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900 > div > div > div > nav > div.mb-1.flex.flex-row.gap-2 {
width: 8px!important;
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900 > div > div > div > nav > div.mb-1.flex.flex-row.gap-2 > a {
padding-right: 7.3rem;
border-color: black;
}
/* hide sidebar icon */
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900 > div > div > div > nav > div.mb-1.flex.flex-row.gap-2 > span {
background: var(--futuristic-gradient);
border-radius: 10px;
font-size: 0.9rem;
transition: box-shadow 0.3s;
text-align: center;
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900 > div > div > div > nav > div.mb-1.flex.flex-row.gap-2 > span:hover {
box-shadow: 1px 1px 10px rgba(38, 198, 218, 0.9);
}
/* Current Selected Chat*/
.bg-gray-800 {
background: var(--futuristic-gradient);
box-shadow: 1px 1px 0 rgba(38, 198, 218, 0);
transition: background 0.1s;
}
.hover\:bg-\[\#2A2B32\]:hover {
background: var(--deep-space);
}
.from-gray-800 {
--tw-gradient-from: rgba(18, 18, 18, 0) var(--tw-gradient-from-position);
--tw-gradient-to: rgba(52, 53, 65, 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-900 {
--tw-gradient-from: rgba(32, 33, 35) var(--tw-gradient-from-position);
--tw-gradient-to: rgba(32, 33, 35, 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.group:hover .group-hover\:from-\[\#2A2B32\] {
--tw-gradient-from: #0000 var(--tw-gradient-from-position);
--tw-gradient-to: rgba(42, 43, 50, 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:bg-gray-800:hover {
--tw-bg-opacity: 1;
background-color: rgba(50, 50, 52, var(--tw-bg-opacity));
}
#__next > div > div.dark.hidden.bg-gray-900.md\:fixed.md\:inset-y-0.md\:flex.md\:w-\[260px\].md\:flex-col > div > div > nav > a.flex.py-3.px-3.items-center.gap-3.rounded-md.hover\:bg-gray-500\/10.transition-colors.duration-200.text-white.cursor-pointer.text-sm.mb-2.flex-shrink-0.border.border-white\/20:hover {
opacity: 90%
}
#__next > div > div.dark.hidden.bg-gray-900.md\:fixed.md\:inset-y-0.md\:flex.md\:w-\[260px\].md\:flex-col > div > div > nav > a.flex.py-3.px-3.items-center.gap-3.rounded-md.hover\:bg-gray-500\/10.transition-colors.duration-200.text-white.cursor-pointer.text-sm.mb-2.flex-shrink-0.border.border-white\/20 span {
color: white;
font-size: 18px;
font-weight: 100;
}
#__next > div > div.flex.h-full.flex-1.flex-col.md\:pl-\[260px\] > main > div.flex-1.overflow-hidden > div > div > div > div > div > div.relative.flex.w-\[calc\(100\%-50px\)\].md\:flex-col.lg\:w-\[calc\(100\%-115px\)\] > div.flex.flex-grow.flex-col.gap-3 {
color: white;
font-size: 18px;
font-weight: 400;
}
body {
font-family: 'Open Sans', sans-serif;
}
::-moz-selection {
/* Code for Firefox */
background: #c2c2ce2b;
}
::selection {
background: #c2c2ce2b;
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div > div {
padding-top: 5px;
margin-left: 5px;
font-family: 'Roboto', sans-serif;
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900 > div > div > div {
padding-left: 5px;
width: 300px !important;
background: transparent;
padding-top: 5px;
font-family: 'JetBrains Mono', sans-serif;
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900 {
width: 300px !important;
}
/*All Chat history general */
nav[aria-label="Chat history"] {
background: var(--all-chat-history);
}
/* hide chat icon in chat history */
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900 > div > div > div > nav > div.flex-col.flex-1.transition-opacity.duration-500.overflow-y-auto > div > div > span > div > ol > li > a > svg {
display: none;
}
#__next > div > div.flex.h-full.flex-1.flex-col.md\:pl-\[260px\] > main > div.flex-1.overflow-hidden > div {
background: #121212;
}
.dark .dark\:bg-gray-800\/75 {
background-color: rgb(185 185 185 / 25%);
}
#headlessui-dialog-panel-\:r8\: {
backdrop-filter: blur(5px) saturate(100%);
-webkit-backdrop-filter: blur(1px) saturate(100%);
background-color: rgba(18, 18, 18, 0.2);
border-radius: 12px;
border: 1px solid rgba(67, 69, 71, .7);
color: rgb(255, 255, 255);
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.dark.hidden.bg-gray-900.md\:flex.md\:w-\[260px\].md\:flex-col > div > div > nav > a:nth-child(4) > span > span.rounded-md.bg-yellow-200.py-0\.5.px-1\.5.text-xs.font-medium.uppercase.text-gray-800 {
display: none;
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.dark.hidden.bg-gray-900.md\:flex.md\:w-\[260px\].md\:flex-col > div > div > nav > a:nth-child(3) {
font-size: 0;
width: 60px;
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.dark.hidden.bg-gray-900.md\:flex.md\:w-\[260px\].md\:flex-col > div > div > nav > a:nth-child(4) {
font-size: 0;
width: 60px;
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.dark.hidden.bg-gray-900.md\:flex.md\:w-\[260px\].md\:flex-col > div > div > nav > a:nth-child(5) {
font-size: 0;
width: 60px;
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.dark.hidden.bg-gray-900.md\:flex.md\:w-\[260px\].md\:flex-col > div > div > nav > a:nth-child(6) {
font-size: 0;
width: 60px;
}
/* .result-streaming {display: none;} */
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.dark.hidden.bg-gray-900.md\:flex.md\:w-\[260px\].md\:flex-col > div > div > nav > a:nth-child(7) {
font-size: 0;
width: 60px;
}
.h-4 w-4 {
display: none;
}
/*hide disclaimer and version */
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > 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.pt-2.md\:-left-2 > div > span {
display: none;
}
/* chatgpt title */
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.flex.h-full.max-w-full.flex-1.flex-col > main > div.flex-1.overflow-hidden > div > div > div > div.text-gray-800.w-full.md\:max-w-2xl.lg\:max-w-3xl.md\:h-full.md\:flex.md\:flex-col.px-6.dark\:text-gray-100 > h1 {
font-size: 0px;
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.flex.h-full.max-w-full.flex-1.flex-col > main > div.flex-1.overflow-hidden > div > div > div > div.text-gray-800.w-full.md\:max-w-2xl.lg\:max-w-3xl.md\:h-full.md\:flex.md\:flex-col.px-6.dark\:text-gray-100 > div {
display: none;
}
/* Chat history backgroud plus remove gradient*/
.bg-gradient-to-l {
display: none;
}
.bg-gray-900 {
background-color: transparent;
}
/* Current Chat edit or "remove" current chat buttons*/
button.p-1.hover\:text-white svg {
stroke: black;
}
button.p-1.hover\:text-white svg:hover {
stroke: white;
}
/* Current Chat edit or "remove" current chat buttons*/
div[role="alert"] {
background: var(--alerts);
border: transparent;
}
.border-white\/20 {
border-color: transparent
}
.h-9.pb-2.pt-3.px-3.text-xs.text-gray-500.font-medium.text-ellipsis.overflow-hidden.break-all.bg-gray-900 {
background-color: black;
}
/*Scroll Bars*/
/* Hide the entire scrollbar by default */
::-webkit-scrollbar {
opacity: 0;
transition: opacity 0.5s;
}
/* The width for vertical and height for horizontal scrollbars */
::-webkit-scrollbar:vertical {
width: 10px;
}
::-webkit-scrollbar:horizontal {
height: 10px;
}
/* Show the entire scrollbar on hover over the body or any scrollable container */
body:hover::-webkit-scrollbar,
.scrollable-container:hover::-webkit-scrollbar {
opacity: 1;
}
/* The draggable scrolling handle */
::-webkit-scrollbar-thumb {
background: var(--futuristic-gradient);
border-radius: 5px;
}
/* The empty space “below” the scrollbar bar */
::-webkit-scrollbar-track {
background-color: transparent;
}
}