If your site has a dark theme and it is difficult to see the dark resize icon that gridster uses, I've got a fix for you.
In the jquery.gridster.css, you'll see that .gs-resize-handle-both includes a base64 encoded image for background-image. You may think that it'll be a pain to change this, since you'll need to decode, save as a file, edit, save again, open the file in binary mode, copy the text, and then re-encode, but its actually a little simpler than that.
First, grab the base64 encoded string from the css. The master branch file is here: https://github.com/ducksboard/gridster.js/blob/master/src/jquery.gridster.css, and the following is the actual base64 encoded string of the resize handle image if you want to follow along but can't be bothered to open that file:
PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=
Next you'll need a tool to decode this string. There are numerous ones online, including the one I ended up using:
http://www.motobit.com/util/base64-decoder-encoder.asp
Paste the string into the large textbox and choose the decode radio button item. You do not need to change any other settings. Click the "convert the source data" button. You'll now end up with a second textbox containing some xml that defines the original svg image. Here's that xml:
<?xml version="1.0" standalone="no"?>
<!-- Generator: Adobe Fireworks CS6, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="Untitled-Page%201" viewBox="0 0 6 6" style="background-color:#ffffff00" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
x="0px" y="0px" width="6px" height="6px"
>
<g opacity="0.302">
<path d="M 6 6 L 0 6 L 0 4.2 L 4 4.2 L 4.2 4.2 L 4.2 0 L 6 0 L 6 6 L 6 6 Z" fill="#000000"/>
</g>
</svg>
This seems like the point where you'll need to deal with all the complexity of saving this as a file and using an svg editor to make modifications to it, but as it turns out, the change that needs to be made is so simple that you can just edit this text by hand. The key pieces are the opacity setting and the fill color. What you'll want on a dark themed site is to up the opacity slightly, and choose a light color for the fill color. I set the opacity value to 0.85 and the fill to #dddddd, but you can tweak these however you like. Just remember that opacity is a decimal between 0.00 and 1.00 and that fill is a hex value between #000000 (black) and #ffffff (white). Be careful about setting the value to pure white (#ffffff). Since we do not see the background color at all, I'm pretty sure that the background-color is being used as the transparency color; thus using pure white for a fill color may result in not seeing anything at all. If you need to do that, you may need to experiment a little with the effects of changing the background-color value.
At this point you'll have a new xml, like this one:
<?xml version="1.0" standalone="no"?>
<!-- Generator: Adobe
Fireworks CS6, Export SVG Extension by Aaron Beall
(http://fireworks.abeall.com) . Version: 0.6.1 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="Untitled-Page%201" viewBox="0 0 6 6" style="background-color:#ffffff00" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
x="0px" y="0px" width="6px" height="6px"
>
<g opacity="0.85">
<path d="M 6 6 L 0 6 L 0 4.2 L 4 4.2 L 4.2 4.2 L 4.2 0 L 6 0 L 6 6 L 6 6 Z" fill="#dddddd"/>
</g>
</svg>
To translate this back into the encoded format to replace the value in the css, copy and paste this text back into the base64 tool, making sure to paste it into the bottom textarea (the input one). Change the option to encode. If you used the same values I did, you'll get the following back in the top textbox as the result after you click the "convert the source data" button:
PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIEZpcmV3b3JrcyBDUzYsIEV4cG9ydCBTVkcgRXh0ZW5zaW9uIGJ5IEFhcm9uIEJlYWxsIChodHRwOi8vZmlyZXdvcmtzLmFiZWFsbC5jb20pIC4gVmVyc2lvbjogMC42LjEgLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyBpZD0iVW50aXRsZWQtUGFnZSUyMDEiIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgdmVyc2lvbj0iMS4xIg0KeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSINCng9IjBweCIgeT0iMHB4IiB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCINCj4NCjxnIG9wYWNpdHk9IjAuMzAyIj4NCjxwYXRoIGQ9Ik0gNiA2IEwgMCA2IEwgMCA0LjIgTCA0IDQuMiBMIDQuMiA0LjIgTCA0LjIgMCBMIDYgMCBMIDYgNiBMIDYgNiBaIiBmaWxsPSIjMDAwMDAwIi8+DQo8L2c+DQo8L3N2Zz4=
You can now replace the base64 encoded image value in the jquery.gridster.css file with this one, and you'll end up with a lighter colored resize handle in gridster.
You could certainly get a lot more sophisticated and choose different images depending on the color of the consuming component, but this was as far as I needed to go since the site I was working with has a consistent theme that puts a dark color at the bottom of the widgets.
