How to change primary color in Vuetify?

Question

JavaScript

I want to change the primary color in Vuetify on input focus and dropdown (selecting the number of elements in the table). The color changes, but after a reboot it becomes the default primary again. I want to change in these classes:

.search {
  color: #00b5c1 !Important; // change primary color
}
.primary--text {
    color: #00b5c1 !Important; //change primary color for rows per page color
}
.option {
  padding-right: 100px;
  color: #00b5c1 !Important; // change primary color
}

codepen

Answer 1

Documentation
These values ​​will also be made available on the instance $vuetify object under the theme property. This allows you to dynamically modify your theme. Behind the scenes, Vuetify will regenerate and update your theme classes, seamlessly updating your application.

// Light theme
this.$vuetify.theme.themes.light.primary = '#4caf50'