Application color teming?

Question

css

Guys, how best to implement the functionality of the application's color themes (dark, light, etc.)
I thought of only 2 options, for example Dark and Light themes:
1) Create a couple of css files (dark.styl, light.styl). with parent namespace classes related to a specific theme, for example dark.styl:

.theme-dark
  background-color: '#050507'
  color: '#ababba'
  .layout
    background-color '#2f343d' 
  .panel
    background-color '#283142'

etc.
with light.styl the same structure, only the colors are different,
but in the components, just specify these classes in the html elements,
and on the application container, just set the classes to switch themes.
2) create a property in the storage, in the state object, for example 'theme' and in each application component, set the theme class and describe the styles in the component for each theme. Well, of course, it's a tricky decision.
I also watched how teming is implemented in Vuetify, where the components are divided into css and js, js files are in one folder and css in another. And it is the component separation of entities (button, input, modal, etc.) and not as in the first option (the same classes with different colors, which have nothing to do with the components).
I would not want such a separation, because the application can have not only ui components, but in general, for all application components, you will have to write a css file with styles, which is located separately.
Can you recommend a better solution?

Answer 1

Have a look, it might come in handy: https://github.com/zephraph/vue-theme-loader