This is inspired from The OpenAI ChatGPT Dark Mode Theme.
Instruction: Don't forget to select Dark mode in the ChatGPT options (bottom left).
OpenAI ChatGPT Tekken Reina Theme by ZENSH1
Details
AuthorZENSH1
LicenseNONE
Categorychatgpt.com
Created
Updated
Size17 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Use Tamper Monkey To inject the Welcome {Name} on the h1 tag
by using the following code
// ==UserScript==
// @name GPT H1 Change New
// @namespace http://tampermonkey.net/
// @version 2024-11-21
// @description try to take over the world!
// @author You
// @match https://chatgpt.com/
// @match https://chatgpt.com/?model=auto
// @icon https://www.google.com/s2/favicons?sz=64&domain=chatgpt.com
// @grant none
// ==/UserScript==
(function() {
'use strict';
const oldText = "What can I help with?";
const newText = "Welcome Back! {INSERT-NAME-HERE}";
function startAnimation(h1) {
if (h1.dataset.animationRunning === "true") return; // Prevent overlapping animations
h1.dataset.animationRunning = "true";
let index = oldText.length - 1;
// Backspacing effect
const backspaceInterval = setInterval(() => {
h1.textContent = oldText.substring(0, index--);
if (index < 1) {
clearInterval(backspaceInterval);
// Typing effect
let typingIndex = 0;
const typingInterval = setInterval(() => {
h1.textContent = newText.substring(0, ++typingIndex);
if (typingIndex === newText.length) {
clearInterval(typingInterval);
h1.dataset.animationRunning = "false"; // Mark animation as complete
}
}, 100);
}
}, 100);
}
function checkAndAnimate() {
const h1s = document.querySelectorAll('h1');
h1s.forEach(h1 => {
if (h1 && h1.textContent === oldText) {
console.log('H1 matches oldText. Starting animation...');
startAnimation(h1);
}
});
}
// Mutation observer to detect changes in the DOM
const observer = new MutationObserver(checkAndAnimate);
observer.observe(document.body, {
childList: true,
subtree: true,
characterData: true,
});
// Check on initial load
checkAndAnimate();
})();
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name OpenAI ChatGPT Tekken Reina Theme
@namespace USO Archive
@author ZenShe
@description Inspired from Lucifer's OpenAI ChATGPT Dark Theme -> his screenshot : https://postimg.cc/gallery/Jrt54Kz
@version 20241110.22.43
@license NONE
@preprocessor uso
==/UserStyle== */
@-moz-document domain("chatgpt.com") {
.markdown .bg-gray-800 span,
.markdown th {
font-size: 16px
}
.markdown h1,
.markdown th {
text-shadow: 0 2px 2px #000
}
@keyframes bounce_chatgpt {
0% {
animation-timing-function: ease-in;
opacity: 0.8;
transform: translateY(-65px) scale(0.9) rotate(-8deg);
box-shadow: 0 0 0 rgba(0, 255, 135, 0);
}
15% {
animation-timing-function: ease-out;
opacity: 1;
transform: translateY(0) scale(1.1) rotate(4deg);
box-shadow: 0 12px 20px rgba(0, 255, 135, 0.5);
}
30% {
animation-timing-function: ease-in;
transform: translateY(-50px) scale(1) rotate(-3deg);
box-shadow: 0 8px 16px rgba(0, 255, 135, 0.4);
}
45% {
animation-timing-function: ease-in;
transform: translateY(-30px) scale(1.05) rotate(2deg);
box-shadow: 0 10px 18px rgba(0, 255, 135, 0.3);
}
60% {
animation-timing-function: ease-out;
transform: translateY(0) scale(1.02) rotate(-1deg);
box-shadow: 0 6px 12px rgba(0, 255, 135, 0.2);
}
75% {
animation-timing-function: ease-in;
transform: translateY(-15px) scale(1) rotate(1deg);
box-shadow: 0 4px 8px rgba(0, 255, 135, 0.15);
}
90% {
animation-timing-function: ease-out;
transform: translateY(-5px) scale(1.01) rotate(0.5deg);
box-shadow: 0 2px 4px rgba(0, 255, 135, 0.1);
}
100% {
animation-timing-function: ease-out;
opacity: 1;
transform: translateY(0) scale(1) rotate(0);
box-shadow: 0 0 0 rgba(0, 255, 135, 0);
}
}
::-moz-selection {
background: #094771;
color: #fff
}
::selection {
background: #094771;
color: #fff
}
body {
color: #000000
}
#headlessui-portal-root .justify-center > div.relative,
.dark body,
.dark html,
body {
position: relative;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* Dark overlay */
url('https://live.staticflickr.com/65535/53522838189_f582e5b244_k_d.jpg');
/* Background image */
background-size: cover;
background-position: center;
}
.bg-token-sidebar-surface-primary {
background-color: #222222
}
#headlessui-portal-root .btn-danger,
.markdown th,
div > .hover\:bg-gray-500\/10 {
background-color: #6a0027
}
@media (min-width:768px) {
.md\:pb-\[8vh\] {
position: relative;
z-index: -5
}
}
h1 {
color: #cacaca!important;
text-shadow: 0 1px 0 #55363730;
animation: 2s ease-in forwards bounce_chatgpt
}
h1 span {
background-color: rgba(0, 0, 0, .2)!important;
color: #cacaca!important;
text-shadow: initial;
}
.dark .dark\:text-gray-100,
a {
color: #cacaca
}
main button,
main li.group {
border-color: #e54343!important
}
main button:focus {
border-color: #fd971f!important
}
.input-container,
.output-container {
border: 1px solid #75715e;
background-color: #272822
}
#headlessui-portal-root .grow.justify-center .text-gray-500,
.user-input {
color: #fd971f
}
#headlessui-portal-root .grow.justify-center svg.text-green-700,
.assistant-output,
textarea + button.text-gray-500 {
color: #f82d06
}
.timestamp {
color: #75715e
}
.send-button {
background-color: #f92672;
color: #f8f8f2
}
.send-button:hover {
background-color: #ffb86c
}
svg[viewBox = "0 0 41 41"] {
-webkit-filter: invert(100%);
filter: invert(100%)
}
.relative.rounded-sm {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background-color: #f82d06!important
}
.bg-gray-900.md\:fixed,
.dark .dark\:bg-gray-900,
.scrollbar-trigger,
.scrollbar-trigger a.bg-gray-900 {
background-color: #252620
}
.scrollbar-trigger > nav.p-3 {
padding: 0 .5rem 0 .04rem
}
.scrollbar-trigger .bg-gray-800,
.scrollbar-trigger a.bg-gray-800:hover {
background-color: #094771
}
.hover\:bg-token-surface-primary:hover .bg-gradient-to-l,
.scrollbar-trigger .bg-gray-800 .bg-gradient-to-l,
.scrollbar-trigger .hover\:bg-\[\#2A2B32\] .bg-gradient-to-l {
background-image: inherit
}
#headlessui-portal-root button[aria-selected = true],
.group[data-headlessui-state ~= open] .group-ui-open\:bg-gray-800,
.scrollbar-trigger .hover\:bg-\[\#2A2B32\]:hover,
.scrollbar-trigger .hover\:bg-gray-800:hover {
background-color: #1b1c18
}
.scrollbar-trigger .bg-\[\#050509\],
.scrollbar-trigger .ui-open\:bg-gray-800[data-headlessui-state ~= open] {
background-color: #10110f
}
.scrollbar-trigger .bg-\[\#050509\].opacity-100 {
opacity: .96
}
.scrollbar-trigger .bg-\[\#050509\] .bg-gray-700:hover {
background-color: #094771!important
}
.scrollbar-trigger .bg-\[\#050509\] .bg-gray-700:hover:first-child {
background-color: #e77e02!important
}
.scrollbar-trigger .bg-\[\#050509\] .bg-gray-700:hover:last-child {
background-color: #370014!important
}
.scrollbar-trigger .border-white\/20 {
border-color: #2e2f2a
}
.dark .dark\:bg-gray-700 {
background-color: #121310;
-webkit-box-shadow: inset 0 1px 0 0 #230, 0 0 20px 0 rgba(0, 0, 0, .4);
-moz-box-shadow: inset 0 1px 0 0 #230, 0 0 20px 0 rgba(0, 0, 0, .4);
box-shadow: inset 0 1px 0 0 #230, 0 0 20px 0 rgba(0, 0, 0, .4)
}
.dark .dark\:bg-gray-800,
.dark .dark\:hover\:bg-gray-700:hover,
.hover\:bg-token-surface-primary:hover,
span > .hover\:bg-gray-500\/10:hover {
background-color: #1b1c17
}
#headlessui-portal-root .btn-danger:hover,
div > .hover\:bg-gray-500\/10:hover {
background-color: #46001a
}
.dark .dark\:bg-gray-700 button:hover {
cursor: pointer
}
.disabled\:text-gray-400:disabled:hover,
.gizmo .gizmo\:text-gizmo-gray-600 {
color: #fff
}
.bg-token-surface-primary,
.dark .dark\:hover\:bg-\[\#2A2B32\]:hover {
background-color: #094672
}
.dark .dark\:bg-\[\#444654\],
.dark .dark\:hover\:bg-gray-800:hover,
.dark .dark\:hover\:bg-token-surface-primary:hover {
background-color: #1b1c17!important
}
.h-full.w-full.bg-white .rounded-sm {
background-color: inherit!important
}
.dark .dark\:bg-\[\#272832\],
.group.hover\:bg-token-surface-primary {
background-color: #6a0028
}
ol li .group.hover\:bg-token-surface-primary {
background-color: #252620;
}
.dark .dark\:bg-\[\#444654\] {
border-top: 1px solid #151511;
border-bottom: 1px solid #36372f;
-webkit-box-shadow: inset 0 -5px 10px 0 rgba(0, 0, 0, .2);
-moz-box-shadow: inset 0 -5px 10px 0 rgba(0, 0, 0, .2);
box-shadow: inset 0 -5px 10px 0 rgba(0, 0, 0, .2)
}
.dark button.btn-neutral,
.scrollbar-trigger .btn.btn-dark {
background-color: rgba(52, 53, 65, .2);
border-color: rgba(18, 19, 16, .5)
}
.dark button.btn-neutral:hover,
.scrollbar-trigger .btn.btn-dark:hover {
background-color: rgba(18, 19, 16, .9)
}
.scrollbar-trigger .sticky .text-gray-500 {
background-color: #000000;
border-bottom: 1px solid #230;
line-height: .75rem;
color: #d7d7d7;
letter-spacing: .02em
}
.absolute.bottom-0 .text-center {
padding: 0 0 20px;
text-align: left
}
@media only screen and (min-width:1065px) {
.absolute.bottom-0 .px-3.text-center {
padding: initial;
background-color: inherit;
text-align: left;
height: 0
}
.absolute.bottom-0 .text-center span {
font-size: 0;
position: relative;
display: none
}
.absolute.bottom-0 .text-center span a {
font-size: 0;
position: absolute;
text-decoration: none;
top: -50px;
left: 20px
}
.absolute.bottom-0 .text-center span a::before {
content: "?";
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 14px;
position: relative;
cursor: pointer;
width: 24px;
height: 24px;
background-color: rgba(255, 255, 255, .1);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%
}
.absolute.bottom-0 .text-center span a:hover::after {
content: "ChatGPT — Release Notes";
display: block;
position: absolute;
top: -30px;
left: -5px;
padding: 5px;
background-color: #121310;
border: 1px solid #230;
opacity: .9;
font-size: 12px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
white-space: nowrap;
z-index: 1000
}
.absolute.bottom-0 .text-center span a:focus::before {
border: 1px solid #f82d06
}
}
.absolute.bottom-0 .text-center.stretch {
background-color: #094771;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px
}
.absolute.bottom-0 form.stretch > div > div > div.justify-center {
justify-content: right
}
.absolute.bottom-0 form.stretch > div > div > div > button {
padding: 2px 6px;
font-size: .7em
}
.group.w-full button:hover {
background-color: rgba(0, 0, 0, .2)!important
}
.group.w-full .flex.justify-between .flex.gap-1 button:first-child svg.h-4.w-4:hover,
.group.w-full .flex.justify-between.items-center button[title = "This response was better than the previous response"] svg,
.group.w-full .flex.justify-between.items-center button[title = "This response was better than the previous response"] svg:hover {
color: #f82d06!important
}
.group.w-full .flex.justify-between .flex.gap-1 button:last-child svg.h-4.w-4:hover,
.group.w-full .flex.justify-between button + button svg.h-4.w-4:hover,
.group.w-full .flex.justify-between.items-center button[title = "This response was worse than the previous response"] svg {
color: #ff005e!important
}
.group.w-full .flex.justify-between.items-center button[title = "This response was the same in quality"] svg,
.group.w-full .flex.justify-between.items-center button[title = "This response was the same in quality"] svg:hover {
color: #fd971f!important;
border-color: #fd971f!important
}
.group.w-full .flex.justify-between button svg.h-4.w-4:hover,
.group.w-full .flex.justify-between.items-center button[title ...