Button.vue

<template>
  <button class="button">{{text}}</button>
</template>

<script>
export default {
  name: "Button",
  props: {
    text: {
      type: String,
      required: true
    }
  }
};
</script>

<style lang="scss" scoped>
// Common button style
.button {
  border-radius: 2px;
  color: #ffffff;
  padding: 12px 30px;
  cursor: pointer;
  &:focus {
    opacity: 0.6;
    outline: none;
  }
}
// Button style for the light theme
.light-theme .button{
 background-color: #999999;
 border:1px solid #999999;
}
// Button style for the dark theme
.dark-theme .button{
 background-color: #9aa7b0;
 border:1px solid #9aa7b0;
}
</style>