How

Page markup varies between themes. Please post the link to a relevant page so the markup can be examined with browser tools.

To change the blue, you can use this custom css:

#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label,
#respond .comment-form-comment label {
  background: #008800;
  color: white;
  border-bottom: solid 1px #008800;
}

Change the #008800 value to a hex colour value of your choice.

Custom css can be entered at:
Dashboard > Appearance > Customise > Additional CSS

I’m sorry I don’t understand your second issue. Please can you explain a bit more.

I think you mean the lightbox. You can turn this off at:
Dashboard > WooCommerce > Settings > Products tab > Display sub-page > Product Images section
and make sure “Enable Lightbox for product images” is not checked.

In Chrome, your theme is showing the product image at 448px square, but the uploaded image is 600px square.

To avoid resizing by the browser, you can set the product image thumbnail size at:
Dashboard > WooCommerce > Settings > Products tab > Display

Whenever changing thumbnail sizes, you need to regenerate thumbnails.
https://wordpress.org/plugins/regenerate-thumbnails/

Sometimes, different browsers, devices and versions can render images differently, usually by no more than 1px different, so it may not be possible to avoid all resizing.

I can’t see a message. Maybe its gone by now.

Its not a good idea to edit code files. Any edits will be overwritten by updates.