Makes ChatGPT look better!
Updated to new new UI (October 2024)
Dynamic theme support
ChatGPT Minimal by endercat126
Details
Authorendercat126
LicenseUnlicense
Categorychatgpt
Created
Updated
Size25 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
whenever this theme breaks, check for an update! i will usually fix it quickly.
the design is based on a version from earlier this year. write a review if you have any nice custom themes i might add them
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 Minimal
@namespace https://codeberg.org/endercat
@version 3.0.0
@description makes chatgippity look not ugly
@author Ava
@preprocessor less
@var checkbox useName "Greeting" 0
@var text name "Your name" ""
@var checkbox removeBloat "Remove bloat (ChatGPT Free)" 1
@var checkbox newChatButtonHack "New Chat Button Hack" 0
@var select themeName "Theme" ["purple:Purple*","grey:Grey","coal:Coal","nord:Nord","fresh:Fresh","custom:Custom"]
@var color clrBase "Base colour" #121215
@var color clrTint "Tint colour" #cfbeff
@var color clrText "Text colour" #e9e4f4
@var color clrAcc1 "Accent colour 1" #e9e4f4
@var color clrAcc2 "Accent colour 2" #e9e4f4
==/UserStyle== */
@-moz-document domain("chatgpt.com") {
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Noto+Color+Emoji&family=Rubik:wght@400;600&display=swap');
code.hljs * {
color: unset;
}
// Code Theme
code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf!important;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370!important;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd!important}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75!important}.hljs-literal{color:#56b6c2!important}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379!important}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66!important}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee!important}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b!important}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
/*
___ _ _ ___ ___ _____
/ __| |_ __ _| |_ / __| _ \_ _|
| (__| ' \/ _` | _| (_ | _/ | |
\___|_|o_\__,_|o__|\___|_|_, ||\
/|/|/| | /|/| | /|/|/| / | |/
| | |_/|/ | |_/|/ | | |_/\/|_/|_/
*/
// Colour presets
@themes: {
@purple: {
@base: #121215;
@tint: #cfbeff;
@text: #e9e4f4;
@acc1: #cba6f7;
@acc2: #f5c2e7;
}
@grey: {
@base: #181818;
@tint: #ffffff;
@text: #d0d0d0;
@acc1: #79ffab;
@acc2: #bababa;
}
@coal: {
@base: #0e0d0d;
@tint: #a59191;
@text: #bfbfbf;
@acc1: #ff8d79;
@acc2: #ffb57d;
}
@nord: {
@base: #2e3440;
@tint: #88c0d0;
@text: #e5e9f0;
@acc1: #8fbcbb;
@acc2: #88c0d0;
}
@fresh: {
@base: #0d0d0f;
@tint: #f0e7ff;
@text: #d5cdd3;
@acc1: #9eabff;
@acc2: #b7f0f7;
}
@custom: {
@base: @clrBase;
@tint: @clrTint;
@text: @clrText;
@acc1: @clrAcc1;
@acc2: @clrAcc2;
}
}
@clr-base: @themes[@@themeName][@base];
@clr-tint: @themes[@@themeName][@tint];
@clr-text: @themes[@@themeName][@text];
@clr-acc1: @themes[@@themeName][@acc1];
@clr-acc2: @themes[@@themeName][@acc2];
// ==========================================================================================================
@font-text: 'Rubik', sans-serif, 'Noto Color Emoji', 'FiraCode Nerd Font';
@font-code: 'JetBrains Mono', 'Noto Color Emoji', monospace, @font-text;
html {
--accent-1: @clr-acc1;
--accent-2: @clr-acc2;
}
.dark, html.ZnJ1aXRqdWljZQ.dark {
--text-primary:shade(@clr-text, 0%);
--text-secondary:shade(@clr-text, 30%);
--text-tertiary:shade(@clr-text, 40%);
--text-quaternary:shade(@clr-text, 50%);
--text-error:#f93a37;
--main-surface-primary:mix(@clr-base, @clr-tint, 97%);
--main-surface-secondary:mix(@clr-base, @clr-tint, 90%);
--main-surface-tertiary:mix(@clr-base, @clr-tint, 85%);
--sidebar-surface-primary:mix(@clr-base, @clr-tint, 100%);
--sidebar-surface-secondary:mix(@clr-base, @clr-tint, 97%);
--sidebar-surface-tertiary:mix(@clr-base, @clr-tint, 90%);
--border-light:fade(@clr-text,10%);
--border-medium:fade(@clr-text,15%);
--border-heavy:fade(@clr-text,20%);
--border-xheavy:fade(@clr-text,25%);
}
.dark .popover {
--text-primary:shade(@clr-text, 0%) !important;
--text-secondary:shade(@clr-text, 30%) !important;
--text-tertiary:shade(@clr-text, 40%) !important;
--text-quaternary:shade(@clr-text, 50%) !important;
--main-surface-primary:mix(@clr-base, @clr-tint, 97%) !important;
--main-surface-secondary:mix(@clr-base, @clr-tint, 90%) !important;
--main-surface-tertiary:mix(@clr-base, @clr-tint, 85%) !important;
--sidebar-surface-primary:mix(@clr-base, @clr-tint, 100%) !important;
--sidebar-surface-secondary:mix(@clr-base, @clr-tint, 97%) !important;
--sidebar-surface-tertiary:mix(@clr-base, @clr-tint, 90%) !important;
}
/*
.dark {
--text-primary:var(--gray-100);
--text-secondary:var(--gray-300);
--text-tertiary:var(--gray-400);
--text-quaternary:var(--gray-500);
--text-error:var(--red-500);
--border-light:hsla(0,0%,100%,.1);
--border-medium:hsla(0,0%,100%,.15);
--border-heavy:hsla(0,0%,100%,.2);
--border-xheavy:hsla(0,0%,100%,.25);
--main-surface-primary:var(--gray-800);
--main-surface-secondary:var(--gray-750);
--main-surface-tertiary:var(--gray-700);
--sidebar-surface-primary:var(--gray-900);
--sidebar-surface-secondary:var(--gray-800);
--sidebar-surface-tertiary:var(--gray-750);
--link:#7ab7ff;
--link-hover:#5e83b3
}
html.ZnJ1aXRqdWljZQ.dark {
--text-secondary:var(--gray-400);
--text-tertiary:var(--gray-500);
--text-quaternary:var(--gray-600);
--text-error:#f93a37;
--surface-error:249 58 55
}
*/
// ==========================================================================================================
html when (@removeBloat = 1){
// block unnecessary garbage
.dark\:border-white\/20.juice\:py-2.empty\:hidden.pt-2.flex-col.flex { display: none !important }
.whitespace-nowrap.overflow-hidden.juice\:py-1\.5.juice\:rounded-lg.juice\:text-token-text-secondary.radix-state-open\:bg-token-main-surface-secondary.hover\:bg-token-main-surface-secondary.font-medium.text-lg.px-3.py-2.rounded-xl.gap-1.items-center.cursor-pointer.flex.group { display: none !important }
.focus-visible\:bg-token-main-surface-secondary.hover\:bg-token-main-surface-secondary.focus-visible\:outline-0.text-token-text-secondary.px-2\.5.rounded-lg.h-10 { display: none !important }
.juice\:ml-\[3px\].juice\:mb-1.dark\:focus-visible\:outline-white.focus-visible\:outline-black.juice\:rounded-full.dark\:text-white.juice\:w-8.juice\:h-8.text-token-text-primary.justify-center.items-center.flex { display: none !important }
.pt-2.pb-3\.5.gap-3\.5.flex-col.flex { display: none !important }
.text-sm.text-token-text-secondary.bg-token-main-surface-secondary.rounded-md.p-4.items-center.justify-between.flex { display: none !important }
.md\:px-\[60px\].text-token-text-secondary.text-xs.text-center.py-2.px-2.relative > span { display: none !important }
.whitespace-nowrap.overflow-hidden.juice\:py-1\.5.juice\:rounded-lg.juice\:text-token-text-secondary.radix-state-open\:bg-token-main-surface-secondary.hover\:bg-token-main-surface-secondary.font-semibold.text-lg.px-3.py-2.rounded-xl.gap-1.items-center.cursor-pointer.flex.group { display: none !important }
.juice\:font-normal.juice\:gap-2\.5.hover\:bg-token-sidebar-surface-secondary.text-token-text-primary.font-semibold.px-2.rounded-lg.gap-2.items-center.w-full.h-10.flex { display: none !important }
.hover\:bg-token-sidebar-surface-secondary.juice\:font-normal.juice\:gap-2\.5.font-semibold.px-2.bg-token-sidebar-surface-primary.rounded-lg.gap-2.items-center.h-10.flex.group { display: none !important }
.juice\:font-normal.juice\:gap-2\.5.hover\:bg-token-sidebar-surface-secondary.text-token-text-primary.font-medium.px-2.rounded-lg.gap-2.items-center.w-full.h-10.flex { display: none !important }
.empty\:hidden.w-full.mt-3 { display: none !important }
.hover\:bg-token-sidebar-surface-secondary.font-normal.px-2.bg-token-sidebar-surface-primary.rounded-lg.gap-2\.5.items-center.h-10.flex.group { display: none !important }
.hover\:bg-token-sidebar-surface-secondary.text-token-text-primary.px-2.rounded-lg.gap-2\.5.items-center.w-full.h-10.flex { display: none !important }
span.flex:nth-of-type(1) > .focus-visible\:bg-token-sidebar-surface-secondary.hover\:bg-token-sidebar-surface-secondary.focus-visible\:outline-0.text-token-text-secondary.px-2.rounded-lg.h-10 { display: none !important }
.items-center.h-14.justify-between.flex > span.flex:nth-of-type(1) { display: none !important }
.dark\:border-white\/20.empty\:hidden.py-2.flex-col.flex { display: none !important }
.whitespace-nowrap.overflow-hidden.text-token-text-secondary.radix-state-open\:bg-token-main-surface-secondary.hover\:bg-token-main-surface-secondary.font-semibold.text-lg.px-3.py-1\.5.rounded-lg.gap-1.items-center.cursor-pointer.flex.group { display: none !important }
.pt-2.gap-3\.5.flex-col.flex > div { display: none !important }
.min-h-4 > div { display: none !important }
.bg-blue-selection.rounded-full.w-2.h-2 { display: none !important }
}
.md\:gap-2.pl-4.gap-1\.5.items-end.flex { margin-left: 0.5rem;}
// 2024-09-14 fix
article.focus-visible\:outline-offset-\[-4px\].focus-visible\:outline-2.text-token-text-primary.w-full:nth-of-type(1) > .xl\:px-5.lg\:px-4.md\:px-5.w-full.m-auto.md\:px-4.px-3.py-\[18px\].text-base {
margin-top: 4rem;
}
// always block these
.juice\:pb-0.pb-3\.5.px-3.flex-col.w-full.h-full.flex > .items-center.h-14.justify-between.flex span:first-child,
.md\:h-14.items-center.h-\[60px\].justify-between.flex
{ display: none !important }
@splash: if((@useName = 0), "ChatGPT", %("Hello, %s!", @name));
.dark .dark\:border-gray-700 {
border-color: var(--border-medium);
}
button.dark\:bg-gray-700, div.dark\:bg-gray-700.text-left.p-5.bg-white.border-token-main-surface-tertiary.border.rounded-2xl.gap-1.flex-col.snap-center.min-w-\[min\(450px\,80vw\)\].w-full.flex.relative {
background: var(--main-surface-secondary) !important;
border: none;
}
.btn.relative.btn-primary {
background: var(--text-primary);
}
// keep sidebar open
.flex-sh...