At the moment there is no option to change the primary color in the Backend.
But you can you do a child theme.
Look here: https://codex.wordpress.org/Child_Themes
Then create a new custom style.
(Example -> custom.style.css)
Into this style file write so:
a, .text-primary, .btn-primary .badge, .btn-link,
.the-title a:hover, .info-bar a:hover, .infobar a:hover,
.widget-list-ul ul li a:hover, .widget ul li a:hover,
.widget.widget_tag_cloud .tagcloud a:hover,
.widget.widget_recent_posts article h4 a:hover,
#footer .f-bottom .copyright a:hover {
color: #5a7fd3;
}
.bg-primary, .btn-primary, .btn-primary.disabled, .btn-primary.disabled:hover,
.btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary.disabled:active,
.btn-primary.disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover,
.btn-primary[disabled]:focus, .btn-primary[disabled].focus, .btn-primary[disabled]:active,
.btn-primary[disabled].active, fieldset[disabled] .btn-primary, fieldset[disabled]
.btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled]
.btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active,
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus,
.the-headline:after, .separator:after, .btn-trigger .trigger,
.widget .widget-title:after, .social-media a:hover [class^="icon-"], .social-media a:hover [class*=" icon-"],
.off-canvas .off-canvas-headline .icon-close, #header .btn-search [class^="icon-"], #header .btn-search [class*=" icon-"],
#comments .comment-list li .comment-body .comment-figure .comment-number,
#comments #respond .submit, #navigation ul li a:hover {
background-color: #5a7fd3;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus,
.pagination li > a:hover, .pagination li > span:hover,
#comments #respond input[type=text]:focus, #comments #respond input[type=email]:focus,
#comments #respond input[type=url]:focus, #comments #respond textarea:focus {
border-color: #5a7fd3;
}
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
background-color: #5a7fd3;
border-color: #5a7fd3;
}
/* -- HOVER -- */
a:hover,
a.text-primary:hover, a.text-primary:focus {
color: #5577c4;
}
#header .btn-search [class^="icon-"]:hover, #header .btn-search [class*=" icon-"]:hover,
#footer .anchor:hover, #comments #respond .submit:hover, .btn-primary:focus, .btn-primary.focus,
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle,
.off-canvas .off-canvas-headline .icon-close:hover, #header .btn-search [class^="icon-"]:hover, #header .btn-search [class*=" icon-"]:hover,
#footer .anchor:hover, #comments #respond .submit:hover, a.bg-primary:hover, a.bg-primary:focus, .btn-primary:focus, .btn-primary.focus,
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle,
.off-canvas .off-canvas-headline .icon-close:hover, #header .btn-search [class^="icon-"]:hover, #header .btn-search [class*=" icon-"]:hover,
#footer .anchor:hover, #comments #respond .submit:hover,
#navigation ul li.menu-item-has-children > a:first-child [class^="icon-"]:hover, #navigation ul li.menu-item-has-children > a:first-child [class*=" icon-"]:hover {
background-color: #5577c4;
}
