Raise your hand if you are tired of staring at a grey dotted background all day while developing workflows? Oh, oh, me!
Who wants something a little easier on the eyes? I do!
Well, what about using Stylish, the extension for applying custom CSS to websites? I believe we can!!
With this little bit of CSS, we can transform Retool's editor into a beautiful experince I present, the most relaxing workflow editor for everyone to enjoy.
/* Instructions: */
/* --------------------------------------------------------------------- *\
Hiding the grid dots: comment GRID_COLOR, and use REMOVE_GRID
Styling grid dots: comment REMOVE_GRID, and use GRID_COLOR
Styling connectors: edit the "stroke" in EDGE_COLOR
\* --------------------------------------------------------------------- */
/* REMOVE_GRID */
.react-flow__background { display: none; }
/* GRID_COLOR */
/* .react-flow__background pattern { stroke: rgb(0, 0, 0) } */
/* EDGE_COLOR */
.react-flow__edge-path {
stroke: skyblue !important;
stroke-width: 1.5px !important;
stroke-linecap: round !important;
}
/* The light background is too much to stare at all day */
div[class^="_canvas"] {
background-image: url('https://static.pexels.com/photos/414171/pexels-photo-414171.jpeg');
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
}
Stylish for Firefox - Stylus for Chrome
EDIT: Updated the Chrome Store link to Stylus instead of Stylish since they force you to make an account