Gridfinity Generator Dark Mode のソースコード

Gridfinity Generator Dark Mode

Dark mode for Gridfinity Generator
右端で折り返す
// ==UserScript==
// @name         Gridfinity Generator Dark Mode
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Dark mode for Gridfinity Generator
// @author       Joel Korb
// @match        https://gridfinity.perplexinglabs.com/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // Inject CSS
    const style = document.createElement('style');
    style.textContent = `
        html, body {
            background: radial-gradient(ellipse at top, hsl(158, 9%, 15%) -30%, hsl(39, 10%, 10%) 80%) !important;
        }

        .main-block {
            background-color: #1a1a1a !important;
            box-shadow: 0px 3px 8px -5px rgba(255,255,255,0.1) !important;
        }

        #model-options {
            border-bottom: 2px solid #666 !important;
        }

        #model-options .option .label .i .flyout {
            background-color: rgba(30, 30, 30, 0.95) !important;
            color: #e0e0e0 !important;
        }

        .tab-selector .option {
            color: #999 !important;
        }

        .tab-selector .option.selected {
            color: #ccc !important;
        }

        .tab-selector .bar {
            background-color: #666 !important;
        }

        .tab-selector .option .menu {
            background-color: #1a1a1a !important;
            border-left: 2px solid #666 !important;
            box-shadow: -7px 2px 8px -8px rgba(255,255,255,0.1), 0px 7px 8px -8px rgba(255,255,255,0.1) !important;
        }

        .tab-selector .option .menu .corner-clear {
            border-top: 2px solid #1a1a1a !important;
            border-right: 2px solid #1a1a1a !important;
        }

        .tab-selector .option .menu .rounded-corner {
            border-top: 2px solid #666 !important;
            border-right: 2px solid #666 !important;
        }

        #view {
            background-color: #1a1a1a !important;
        }

        #view #model {
            background-color: #1a1a1a !important;
        }

        .modal-body {
            background-color: #1a1a1a !important;
            color: #e0e0e0 !important;
        }

        #signin .sign-in-block .field input {
            background-color: #1a1a1a !important;
            color: #e0e0e0 !important;
            border-bottom: 2px solid #666 !important;
        }

        #signin .sign-in-block .field input:focus {
            border-bottom: 3px solid #e84921 !important;
        }

        #signin .sign-in-block .button.white {
            background-color: #2a2a2a !important;
            color: #e0e0e0 !important;
            border: 1px solid #666 !important;
        }

        .menu-selector .items {
            background-color: #1a1a1a !important;
            box-shadow: 1px 2px 7px 0px rgba(255,255,255,0.1) !important;
        }

        .cart-panel {
            background-color: #1a1a1a !important;
            color: #e0e0e0 !important;
            box-shadow: -1px 1px 8px -2px rgba(255,255,255,0.1) !important;
        }

        .cart-panel .cart-item {
            box-shadow: 0px 1px 4px -3px rgba(255,255,255,0.2) !important;
        }

        .material.selector {
            border: 1px solid #666 !important;
            background-color: #1a1a1a !important;
            color: #e0e0e0 !important;
        }

        .material.selector:hover {
            background-color: #2a2a2a !important;
        }

        .material ul {
            background-color: #1a1a1a !important;
            border: 1px solid #666 !important;
        }

        .material ul li:hover {
            background-color: #2a2a2a !important;
        }

        body, .main-block>h2, #footer, .button.clean, #model-options .option .label {
            color: #e0e0e0 !important;
        }

        #footer h4 {
            color: #999 !important;
        }

        input, select {
            background-color: #2a2a2a !important;
            color: #e0e0e0 !important;
            border-color: #666 !important;
        }
    `;
    document.head.appendChild(style);

    // Fix Three.js canvas background
    const observer = new MutationObserver(() => {
        const canvas = document.querySelector('#view canvas[data-engine*="three.js"]');
        if (canvas) {
            const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
            if (gl) {
                gl.clearColor(0.1, 0.1, 0.1, 1.0);
                gl.clear(gl.COLOR_BUFFER_BIT);
            }
            observer.disconnect();
        }
    });
    observer.observe(document.body, { childList: true, subtree: true });
})();