Button-optimized.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 & {
    background-color: #999999;
    border: 1px solid #999999;
  }
  // Button style for the dark theme
  .dark-theme & {
    background-color: #9aa7b0;
    border: 1px solid #9aa7b0;
  }
}
</style>