Better Claude UI

Dark oceanic theme, remove ugly fonts, & other fixes
当前为 2025-11-07 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Better Claude UI
// @namespace    https://greasyfork.org/en/users/795282-daijro
// @version      1.0
// @description  Dark oceanic theme, remove ugly fonts, & other fixes
// @author       daijro
// @match        https://claude.ai/*
// @run-at       document-start
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // override ctrl+shift+i to open devtools
    document.addEventListener('keydown', function(e) {
        if (e.ctrlKey && e.shiftKey && e.key === 'I') {
            e.stopImmediatePropagation();
        }
    }, true);

    // fix pasting not having newlines (remove text/html data)
    document.addEventListener('paste', function(e) {
        const clipboardData = e.clipboardData || window.clipboardData;

        const hasPlainText = clipboardData.types.includes('text/plain');
        const hasHtml = clipboardData.types.includes('text/html');

        if (hasPlainText && hasHtml) {
            e.preventDefault();
            e.stopImmediatePropagation();

            const plainText = clipboardData.getData('text/plain');

            // create a new ClipboardEvent with only plain text
            const newClipboardData = new DataTransfer();
            newClipboardData.setData('text/plain', plainText.trimLeft());

            const newEvent = new ClipboardEvent('paste', {
                clipboardData: newClipboardData,
                bubbles: true,
                cancelable: true
            });

            // send
            e.target.dispatchEvent(newEvent);
        }
    }, true);

    const style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = `
        /* replace serif fonts with sans fonts */
        :root {
          --font-anthropic-serif: var(--font-anthropic-sans) !important;
          --font-ui-serif: var(--font-ui) !important;
          --tw-bg-opacity !important;
        }
        
        /* oceanic dark theme */
        [data-theme=claude][data-mode=dark] {
            --accent-brand: 195 63.1% 52.6%;
            --accent-main-000: 195 54.2% 44.2%;
            --accent-main-100: 195 63.1% 52.6%;
            --accent-main-200: 195 63.1% 52.6%;
            --accent-main-900: 0 0% 0%;
            --accent-pro-000: 71 84.6% 67.5%;
            --accent-pro-100: 71 40.2% 47.1%;
            --accent-pro-200: 71 40% 38.1%;
            --accent-pro-900: 70 25.3% 12.4%;
            --accent-secondary-000: 30 65.5% 60.1%;
            --accent-secondary-100: 30 70.9% 44.6%;
            --accent-secondary-200: 30 70.9% 44.6%;
            --accent-secondary-900: 30 55.9% 17.6%;
            --bg-000: 240 8% 11.4%;
            --bg-100: 240 8% 7.5%;
            --bg-200: 210 8% 4.8%;
            --bg-300: var(--bg-000);
            --bg-400: var(--bg-000);
            --bg-500: 0 0% 0%;
            --border-100: 231 16.5% 77.5%;
            --border-200: 231 16.5% 77.5%;
            --border-300: 231 16.5% 77.5%;
            --border-400: 231 16.5% 77.5%;
            --danger-000: 180 98.4% 68.1%;
            --danger-100: 180 67% 52.6%;
            --danger-200: 180 67% 52.6%;
            --danger-900: 180 46.5% 20.8%;
            --oncolor-100: 0 0% 93%;
            --oncolor-200: 240 6.7% 90.1%;
            --oncolor-300: 240 6.7% 90.1%;
            --pictogram-100: 228 3.4% 22.2%;
            --pictogram-200: 240 2.5% 16.3%;
            --pictogram-300: 240 2.1% 11.4%;
            --pictogram-400: 240 2.7% 7.5%;
            --success-000: 277 59.1% 39.1%;
            --success-100: 277 75% 25.9%;
            --success-200: 277 75% 25.9%;
            --success-900: 307 100% 6.9%;
            --text-000: 228 33.3% 90.1%;
            --text-100: 228 33.3% 90.1%;
            --text-200: 230 9% 66.7%;
            --text-300: 230 9% 66.7%;
            --text-400: 228 4.8% 52.2%;
            --text-500: 228 4.8% 52.2%;
        }
        *, *:after, *:before {
            --tw-gradient-from-position: none !important;
        }
        /* fix scrollbar coloring */
        * {
          scrollbar-color: hsla(var(--bg-300)/50%) transparent !important;
        }
        /* fix menu button coloring */
        div.rounded-lg:not([role=menuitem]) {
          background-color: #151519 !important;
        }
    `;
    document.head.appendChild(style);
})();