☰

Glassmorphism ChatGPT Theme

Adds a frosted glass and background image effect to ChatGPT UI for a cleaner, modern look

// ==UserScript==
// @name         Glassmorphism ChatGPT Theme
// @namespace    https://github.com/oleh-prukhnytskyi
// @version      1.0
// @description  Adds a frosted glass and background image effect to ChatGPT UI for a cleaner, modern look
// @author       Oleh Prukhnytskyi
// @match        https://chatgpt.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=chatgpt.com
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

				GM_addStyle(`
								.relative.flex.h-full.max-w-full.flex-1.flex-col.overflow-hidden {
												background-image: url('https://images.unsplash.com/photo-1620207418302-439b387441b0?q=80&w=2767&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
												background-size: cover;
								}
								.border-token-border-default.flex.w-full.cursor-text.flex-col.items-center {
												background-color: rgba(255,255,255,.1);
												backdrop-filter: blur(16px);
												border: 1px solid rgba(255,255,255,.3);
								}
								.border-token-border-medium.relative.bg-token-sidebar-surface-primary {
								    border-radius: 16px;
								}
								.justify-between.h-9.bg-token-sidebar-surface-primary {
								    border-top-left-radius: 16px;
												border-top-right-radius: 16px;
								}
								.absolute.start-0.end-0.bottom-full.z-20,
								.flex.w-full.items-start.gap-4.rounded-3xl.border.py-4.ps-5.pe-3.text-sm,
								nav.flex.h-full.w-full.flex-col.ps-3 > div:last-child,
								.group.absolute.end-2.bottom-2.z-20.flex.flex-col.gap-1 {
								    display:none;
								}
								.text-token-text-secondary.relative.mt-auto.flex.min-h-8.w-full.items-center.justify-center.p-2.text-center.text-xs {
								    opacity: 0;
								}
								.bg-token-message-surface, p > code {
								    background-color: rgb(0 0 0 / 50%);
            backdrop-filter: blur(16px);
								}
				`);
})();