Eyes issue in distinguish Black and Blue, how to change color selection in UI Builder

groundbreaker · 2023-03-04T14:13:10.195Z

Hello everyone,
is there any way to change this blue color selection? I’ve issues in distinguish blue and black, which become impossible in late evening when I use to regulate my screen colors to more warm ones, so I have no idea of what is selected on the Ui builder tree.

Thank you!

dorilama · 2023-03-04T14:34:36.598Z

You can, but not in an easy way.
You can use a browser extension to inject css to change the colors, but you have to inspect the page and search for every single rule that needs to be changed (developer tools can help you with that).
If you want to go down into this rabbit hole you can use tampermonkey browser extension and add a script to run on the bubble editor.
Something like this (using css variables so at least it’s easier to swap color after all the hard work):

(function () {
	"use strict";
	const style = document.createElement("style");
	document.body.appendChild(style);
	const stylesheet = style.sheet;
	stylesheet.insertRule(`:root{--custom-selected-color: red;}`, 0);
	stylesheet.insertRule(
		`.main-tab-bar:not(.butter) .tab.selected {
			color:var(--custom-selected-color,#0205d3)!important;
			border-left:4px solid var(--custom-selected-color,#0205d3) !important;
		}`,
		stylesheet.cssRules.length
	);
	stylesheet.insertRule(
		`.main-tab-bar:not(.butter) .tab.selected:before {
			color:var(--custom-selected-color,#0205d3)!important
		}`,
		stylesheet.cssRules.length
	);
	// All the other rules that you want to override here...
})();

adamhholmes · 2023-03-04T14:35:22.451Z

I don’t think there’s any way to do this directly in Bubble, but you can always add some custom CSS to your editor page in your browser dev tools…

Something like this (for example):

.main-tab-bar:not(.butter) .tab.selected {
    cursor: default;
    color: #0205d3!important;
    border-left: 4px solid #0205d3;
    padding-left: 1px;
}

.layers-box .state-entry.editing .element-caption, .layers-box .event-div.editing .element-caption, .workflow-tree .state-entry.editing .element-caption, .workflow-tree .event-div.editing .element-caption {
    color: #0205d3;
}

image721×524 19.9 KB

Of course, this won’t persist beyond a page refresh…

But it only takes a few seconds to do, and will last the duration of your session (until you refresh the Bubble editor), so might be better than nothing.

Perhaps there is already, or you could create, a browser extension for this…

adamhholmes · 2023-03-04T15:32:36.280Z

Update:

Here is a list of all the rules (I think) you’ll want to change:

.main-tab-bar:not(.butter) .tab.selected {
    cursor: default;
    color: #d3027e!important;
    border-left: 4px solid #d3027e;
    padding-left: 1px;
}

.main-tab-bar:not(.butter) .tab.selected:before {
    color: #d3027e!important;
}

.layers-box .state-entry.editing .element-caption, .layers-box .event-div.editing .element-caption, .workflow-tree .state-entry.editing .element-caption, .workflow-tree .event-div.editing .element-caption {
    color: #d3027e;
}

.add_element.selected .icon_text, .add_element.selected .element_icon, .add_element.element.selected .icon_text, .add_element.element.selected .element_icon {
    color: #d3027e;
}

.responsive-mode-dropdown .mode-button.selected {
    color: #d3027e;
    cursor: default;
    background-color: #fff;
}

.toolbox-pane.responsive .res-size .size-row .number {
    color: #d3027e;
}

.breakpoint-toolbar .res-breakpoints .res-breakpoint.selected {
    color: #d3027e;
    border-bottom: 3px solid #d3027e;
    padding-bottom: 9px;
    cursor: default;
}

.nested-view-box.selected .nested-view-title {
    color: #d3027e;
}

If you’re going to go down the TamperMonkey route, as suggested by @dorilama (and I recommend you do)… here’s an example working code you can use:

// ==UserScript==
// @name         Bubble Editor Selected Colour
// @namespace     your_namespace
// @version      1.0
// @description   Change the colout of selected items in the Bubble editor
// @match        https://bubble.io/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Define the color variable
    const color = '#d3027e!important';

    // Set the styles using the color variable
    const styles = `
        .main-tab-bar:not(.butter) .tab.selected {
            cursor: default;
            color: ${color};
            border-left: 4px solid ${color};
            padding-left: 1px;
        }

        .main-tab-bar:not(.butter) .tab.selected:before {
            color: ${color};
        }

        .layers-box .state-entry.editing .element-caption,
        .layers-box .event-div.editing .element-caption,
        .workflow-tree .state-entry.editing .element-caption,
        .workflow-tree .event-div.editing .element-caption,
        .add_element.selected .icon_text,
        .add_element.selected .element_icon,
        .add_element.element.selected .icon_text,
        .add_element.element.selected .element_icon,
        .responsive-mode-dropdown .mode-button.selected,
        .toolbox-pane.responsive .res-size .size-row .number,
        .breakpoint-toolbar .res-breakpoints .res-breakpoint.selected,
        .nested-view-box.selected .nested-view-title {
            color: ${color};
        }

        .responsive-mode-dropdown .mode-button.selected {
            cursor: default;
            background-color: #fff;
        }

        .breakpoint-toolbar .res-breakpoints .res-breakpoint.selected {
            border-bottom: 3px solid ${color};
            padding-bottom: 9px;
            cursor: default;
        }
    `;

    // Add the styles to the page using Tampermonkey
    GM_addStyle(styles);
})();

groundbreaker · 2023-03-04T18:18:34.235Z

@dorilama @adamhholmes you guys are simply AMAZING!
Thank you very much for resolving me this issue so quickly and providing examples!
I didn’t know about tampermonkey, very great, and your codes are working exactly as I wanted.
Thank you again for this, much appreciated!