ChatGPT Dracula by seonyworld

/* ==UserStyle==
@name           chatgpt.com
@namespace      https://chromewebstore.google.com/detail/chatgpt-dracula-custom-th/ocmahjmcabkidkpmfhdiipnaajlmkfba
@version        1.4
@description    ChatGPT Dracula Custom Theme
@author         Jinseon Yoo
==/UserStyle== */

@-moz-document url-prefix("https://chatgpt.com/") {
/* Dracula Theme for ChatGPT */

body {
  background-color: #1b1c22 !important; /* Dark Grey */
  color: #f8f8f2; /* Light Grey */
}

.bg-token-main-surface-primary {
  background-color: #171717;
}

h1 {
  color: #ff79c6 !important;
}

h2 {
  color: #bd93f9 !important;
}

h3 {
  color: #62e2ff !important;
}

h4 {
  color: #50fa7b !important;
}

h5 {
  color: #f1fa8c !important;
}

h6 {
  color: #ffb86c !important;
}

textarea#prompt-textarea {
  background: #171717;
}

strong {
  color: #fca8d8 !important;
}

italic {
  color: #ffb86c !important;
}

.flex.items-center.relative.text-token-text-secondary.bg-token-main-surface-secondary.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md span {
  font-size: 20px;
  font-weight: bold;
  margin: 0 30px;
}

.flex.items-center.relative.text-token-text-secondary.bg-token-main-surface-secondary.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md {
  padding: 5px 0;
}

button {
  cursor: pointer !important;
}

button:hover {
  cursor: pointer !important;
}

button.flex.gap-1.items-center {
  transform: scale(0.7);
  font-weight: normal;
}

.font-semibold.select-none {
  color: #f1fa8c;
}

#__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
  > div.flex.h-full.flex-col.focus-visible\:outline-0
  > div.flex-1.overflow-hidden
  > div
  > div
  > div
  > div
  > div:nth-child(2)
  > div
  > div
  > div.relative.flex.w-full.min-w-0.flex-col
  > div.font-semibold.select-none {
  background-image: linear-gradient(120deg, #50fa7b, #62e2ff, #bd93f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

pre {
  margin: 15px auto !important;
}

div.flex.items-center.gap-2 {
  color: #ff79c6;
}

span.text-token-text-secondary {
  color: #f1fa8c;
}

a.flex.items-center.gap-2.p-2 {
  color: #737c9a !important;
}

#__next
  > div.relative.z-0.flex.h-full.w-full.overflow-hidden
  > div.flex-shrink-0.overflow-x-hidden.bg-token-sidebar-surface-primary
  > div
  > div
  > div
  > div
  > nav
  > div.flex.flex-col.pt-2.empty\:hidden.dark\:border-white\/20
  > a
  > span
  > div
  > span
  > svg,
#__next
  > div.relative.z-0.flex.h-full.w-full.overflow-hidden
  > div.flex-shrink-0.overflow-x-hidden.bg-token-sidebar-surface-primary
  > div
  > div
  > div
  > div
  > nav
  > div.flex.flex-col.pt-2.empty\:hidden.dark\:border-white\/20
  > a
  > span
  > div
  > div
  > span:nth-child(1) {
  color: #f8f8f2;
}

.header,
.footer {
  background-color: #44475a; /* Medium Grey */
  color: #f8f8f2; /* Light Grey */
}

.button,
button {
  background-color: #282a36; /* Soft Purple */
  color: #f8f8f2; /* Light Grey */
  border: none;
  padding: 5px 10px !important;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  margin: 5px;
}

.button:hover,
button:hover {
  background: linear-gradient(120deg, #2acb53, #3496c3, #9163d1) !important;
}

button.btn.relative.p-0.text-black.dark\:text-white {
  margin-left: -17px;
}

button.mb-2\.5.ml-2.flex.items-center.justify-center.text-token-text-primary.juice\:mb-1.juice\:h-8.juice\:w-6.dark\:text-white.juice\:ml-1\.5.juice\:mr-0\.5 {
  margin-left: -10px;
}

button.flex.gap-1.items-center {
  padding: 10px 10px !important;
}

textarea#prompt-textarea {
  background: #171717;
  /* border: solid 1px #44475a; */
  /* border-radius: 10px; */
  border: 2px solid transparent !important;
}

input::placeholder,
textarea::placeholder {
  color: #6272a4; /* Soft Purple */
}

a {
  color: #f1fa8c;
  text-decoration: none; /* Removes underline */
}

a:hover {
  color: #bd93f9;
  text-decoration: underline; /* Adds underline on hover */
}

.navbar,
.menu {
  background-color: #44475a; /* Medium Grey */
  color: #f8f8f2;
}

.navbar a,
.menu a {
  color: #f8f8f2; /* Light Grey */
  padding: 10px 15px;
  display: inline-block;
}

.navbar a:hover,
.menu a:hover {
  background-color: #6272a4; /* Soft Purple */
}

/* Further elements like tables, headers, etc. can be styled similarly */
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid #6272a4; /* Soft Purple */
}

th {
  background-color: #282a36; /* Dark Grey */
  color: #f8f8f2; /* Light Grey */
}

/* Dracula Theme for Code Blocks */
.line span.code-block {
  background-color: #44475a; /* Dark Grey background for code blocks */
}

.line code > span > span {
  color: #50fa7b;
}

p > code {
  color: #50fa7b !important;
  background: #282a36;
  padding: 1px;
  border: none;
  border-radius: 6px;
}

code {
  color: #50fa7b !important;
  background: #282a36;
  padding: 1px;
  border: none;
  border-radius: 4px;
}

pre {
  margin: 15px auto;
}

.prose :where(code):not(:where([class~="not-prose"] *)):before {
  content: "`";
  visibility: hidden;
}

.prose :where(code):not(:where([class~="not-prose"] *)):after {
  content: "`";
  visibility: hidden;
}

.prose :where(li):not(:where([class~="not-prose"] *)) {
  margin-bottom: 1.5em;
  margin-top: 1.5em;
}

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background-color: #282a36; /* Dark Grey background for highlighted code */
  color: #f8f8f2; /* Light Grey default text color */
}

.hljs-built_in,
.hljs-selector-tag,
.hljs-section,
.hljs-link {
  color: #8be9fd !important; /* Cyan for built-in functions, tags, sections, links */
}

.hljs-keyword {
  color: #ff79c6 !important; /* Pink for keywords */
  font-weight: bold; /* Bold font for keywords */
}

.hljs-title {
  color: #50fa7b !important; /* Green for titles */
  font-weight: bold; /* Bold font for titles */
}

.hljs-string {
  color: #50fa7b !important;
}

.hljs-meta {
  color: hsla(0, 0%, 100%, 0.6) !important;
}

.hljs-name {
  color: #62e2ff !important; /* Light Grey default text color */ /* Originally for h3 */
}

.hljs-type {
  color: #50fa7b !important;
}

.hljs-attr {
  color: #f1fa8c !important;
}

.hljs-symbol {
  color: #ffb86c !important;
}

.hljs-bullet {
  color: #ff79c6 !important;
}

.hljs-addition {
  color: #bd93f9 !important;
}

.hljs-template-tag {
  color: #62e2ff !important;
}

.hljs-template-variable {
  color: #50fa7b !important;
}

code.hljs {
  color: hsla(0, 0%, 100%, 0.882) !important;
}

.hljs-variable {
  color: #f8f8f2 !important;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion {
  color: #6272a4 !important; /* Soft Purple for comments, quotes, deletions */
}

.hljs-literal,
.hljs-number {
  color: #bd93f9 !important; /* Purple for literals and numbers */
  font-weight: bold; /* Bold font for literals and numbers */
}

.hljs-emphasis {
  font-style: italic; /* Italic font for emphasis */
}

/* Additional Dracula Theme Styles for Syntax Highlighting */
.hljs-selector-id,
.hljs-selector-class {
  color: #50fa7b !important; /* Green for IDs and classes in CSS/HTML */
}

.hljs-params,
.hljs-built_in {
  color: #ff79c6 !important;
}

.hljs-regexp {
  color: #f1fa8c !important; /* Yellow for regular expressions */
}

span.hljs-attr {
  color: #50fa7b !important;
}

span.hljs-selector-tag {
  color: #ff79c6 !important;
}

span.hljs-number {
  color: #bd93f9 !important;
}

span.hljs-comment {
  color: #6272a4 !important;
}

span.hljs-selector-class {
  color: #f1fa8c !important;
}

span.hljs-attribute {
  color: #50fa7b !important;
}

span.hljs-tag {
  color: #f8f8f2 !important;
}

span.hljs-property {
  color: #ffb86c !important;
}

span.hljs-selector-pseudo {
  color: #ffb86c !important;
}

span.hljs-string {
  color: #f1fa8c !important;
}

span.hljs-subst {
  color: #ffb86c !important;
}

span.hljs-built_in {
  color: #62e2ff !important;
}

/* Smaller font settings for code blocks */
span.code-block {
  line-height: 20px; /* Adjusted line height for better readability */
  font-size: 90%; /* Slightly smaller font size than the default */
}

/* Quiet color header for code blocks */
.line span.code-block .code-block-start {
  border: solid 1px #66667f;
  background-color: #282a36; /* Dark background for the header */
  padding: 2px 5px !important; /* Uniform padding, important to override default styles */
}

.line span.code-block .code-block-start a {
  font-size: 110%; /* Slightly larger font size for links in the header */
  color: white; /* White color for better visibility */
}

.p-4.overflow-y-auto {
  background: #282a36;
}

#__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
  > div.fixed.left-0.top-1\/2.z-40
  > button {
  transform: scale(0.6);
}

.flex.items-center.relative.text-token-text-secondary.bg-token-main-surface-secondary.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md {
  background: #44475a;
}

.truncate {
  overflow: hidden;
  white-space: nowrap;
  color: #f8f8f2cf;
}

.juice\:text-token-text-secondary {
  background-image: linear-gradient(120deg, #50fa7b, #62e2ff, #bd93f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grow.overflow-hidden.text-ellipsis.whitespace-nowrap.text-sm.text-token-text-primary {
  font-size: 17px;
}

.h-7.w-7.flex-shrink-0 {
  transform: scale(0.8);
}

.flex.flex-col.gap-2.pb-2.text-token-text-primary.text-sm {
  font-size: 17px;
}

.flex.items-center.gap-3 {
  background-image: linear-gradient(120deg, #50fa7b, #62e2ff, #bd93f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dark .dark\:bg-transparent {
  background-color: #676767;
}

.radix-state-checked\:\!bg-green-600[data-state="checked"] {
  background: linear-gradient(120deg, #50fa7b, #62e2ff, #bd93f9) !important;
}

.radix-state-checked\:translate-x-\[14px\][data-state="checked"] {
  --tw-t...