There are two ways to change the colors in Framework.
- You can modify the main.css file by using find & replace to change any color code (
rgba(123,123,123,1) for instance) throughout the whole file. After this you'll need to clear your browser cache (ctrl+shift+r or ctrl+f5 usually does it), and/or reset your skin GUID. To do this click "Administration" in your admin bar on the left, then go to Advanced Tools > Design Tools > Cache Tool, then click the "Reset Skin Version GUID" button.
- You can modify the skin using the .LESS code (as you said, in variables.less) and then recompile the skin using a tool like Prepros. Instructions for this can be found in this page, under the "What does this all involve?" heading. Basic steps:
- Download Prepros and run it.
- Download your skin and drag your skin folder onto the Prepros window.
- You should see a folder named "Framework" inside Prepros now, right click the folder and click the "refresh project" option
- Make the change to your variables.less file.
- After Prepros says it has compiled, copy your skin back over to your website.
- Reset the skin GUID (as mentioned above).
- Reload the page (ctrl+shift+r to be safe).
Hope this helps!