The plugin developer kindly provides this tutorial. You can access the full plugin's documentation on this URL: https://docs.elementor.com/article/618-theme-style-global-settings.



Theme Style settings are global settings that allow you to set default styling options for various elements, such as Backgrounds, Headings, Buttons, Images, and Form Fields.  These settings override the theme styling settings and take their place, allowing you to use Elementor to set styles for elements not built by Elementor. By default, this will apply styles only to non-Elementor elements, for example, WooCommerce checkout fields, Contact Form 7 labels, 3rdparty headings and much more. If you prefer, you can force these Theme Style settings to also apply to Elementor-built elements. 


How To Set Theme Styles

Click the Hamburger menu in the upper left corner of any page or post’s widget panel to access the Theme Style settings. 

Note: The Theme Style feature can only be accessed from within your pages' and posts' editor. The Theme Style feature cannot be accessed from your section templates' editor or the editor within the Theme Builder templates, such as header templates, footer templates, single post templates, or single page templates.

Background

Background Type

Classic

Colour: Choose the background’s colour

Image: Choose an image from the media library

Gradient

Colour: Choose the first gradient colour

Location: Set the location of the first colour. This will affect the spread.

Second Color: Choose the second gradient colour

Location: Set the location of the second colour. This will affect the spread.

Type: Choose between a linear or radial gradient

Angle: Set the gradient angle

Typography

Text Color: Choose the colour of the default text

Typography: Change the typography options for the default text

Paragraph Spacing: Set the amount of default spacing after a paragraph (margin-bottom)

Link

Normal | Hover

Colour: Choose the default colour of links for both normal and hover states

Typography: Change the default typography of links for both normal and hover states

H1-H6

Color: Choose the default colour for each Heading (H1, H2, H3, H4, H5, and H6)

Typography: Set the default typography options for each Heading (H1, H2, H3, H4, H5, and H6)

Buttons

Typography: Change the default typography for buttons

Text Shadow: Set the default text-shadow for buttons

Normal | Hover

Text Color: Choose the default colour for button text

Background Color: Choose the default background colour of the buttons

Border Type: Set the default type of border for buttons (None, Solid, Double, Dotted, Dashed, Groove)

Box Shadow: Set the default box-shadow options for buttons

Border Radius: Set the default border radius to control the corner roundness of buttons

Padding: Change the default button padding settings

Form Fields

Label

Colour: Choose the default text colour for the Field Labels

Typography: Set the default typography options for Field Labels

Field

Typography: Set the default typography options for Input Field text

Normal | Focus

Text Color: Choose the default text colour for Input Field text

Background Color: Choose the default background colour for Input Fields

Border Type: Set the default type of border for Input Fields (None, Solid, Double, Dotted, Dashed, Groove)

Border Radius: Set the default border-radius to control the corner roundness of Input Fields

Box Shadow: Set the default box-shadow options for Input Fields

Transition Duration (ms) (Focus only): Set the default amount of time, in milliseconds, for the Focus Transition to take place.

Padding: Set the default padding options for Input Fields

Images

Normal | Hover

Border Type: Set the default type of border for Images (None, Solid, Double, Dotted, Dashed, Groove) in both Normal and Hover modes

Border Radius: Set the default border-radius to control the corner roundness of Images in both Normal and Hover modes

Opacity: Set the default opacity level of Images in both Normal and Hover modes

Box Shadow: Set the default box-shadow options for Images in both Normal and Hover modes

CSS Filters: Set the default CSS Filters: Blur, Brightness, Contrast and Saturation for images in both Normal and Hover modes

Transition Duration (ms) (Hover only): Set the default amount of time, in milliseconds, for the Hover Transition to take place.

Undo / Redo & Draft / Publish

Just like any other Elementor editing you might do, Theme Style works with the Revisions and History controls, so you can undo/redo any changes and can always revert to an earlier version of your Theme Style design.

Theme Style also works with Draft and Publish modes, so you can test the changes and save them to draft without having them affect your live site. Your live site will only get the changes applied when you click the Theme Style’s Publish button.