How to change the theme of the map, design using vue js?

Question

css

Good day to all!
I am currently working on changing the theme from dark to light and vice versa.
I tried to set the main containers in the app :theme="theme", but the classes were updated and such important trigger classes as action were removed, and I stupidly could not close (collapse) the panel.
Decided to just add the colors-{dark//light} class. Same garbage, some classes are removed.
Next, I tried to change at least the color of Google maps, it makes a request only when loading, then it loads the color, but how to make a change after closing the panel, I tried to update the component - nothing.
Here is the code itself:

map.vue

<template>
  <splash v-if="!isSocketConnected"></splash>
  <gmap-map
    v-else
    :center="center"
    :zoom="zoom"
    :options="options"
    style="height: 100%"
    @zoom_changed="zoomChange($event)"
    >
    <google-cluster v-if="isClustered">
        <google-marker
          :key="index"
          v-for="(m, index) in markers"
          :position="m.position"
          :id="m.id"
          :username="m.username"
          :clickable="m.isClickable"
          :draggable="false"
          :icon="m.icon"
          @click="clickMarker(m)">
          <gmap-info-window v-if="m.data.length > 0">{{ m.data }}</gmap-info-window>
        </google-marker>
    </google-cluster>
      <google-marker v-else
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :id="m.id"
        :username="m.username"
        :clickable="m.isClickable"
        :draggable="false"
        :icon="m.icon"
        @click="clickMarker(m)">
        <gmap-info-window v-if="m.data.length > 0">{{ m.data }}</gmap-info-window>
      </google-marker>
  </gmap-map>
</template>

<script>
 import { mapGetters } from 'vuex';
 import Splash from './Splash';
  // константы light и dark удалил отсюда, ибо >10к. символов(просто цветовые схемы для гугл мапс, их проверял, всё с ними хорошо)
  export default {
    data() {
      return {
        zoom: 5,
        center: {
          lat: 38,
          lng: 34
        },
        init: false,
        options: {
          disableDefaultUI: true,
          zoomControl: true,
          zoomControlOptions: {
              position: 8
          },
          streetViewControl: false,
          streetViewControlOptions: {
              position: 4
          },
          scrollwheel: true,
          styles: this.$store.state.theme == true ? dark : light
        },
      }
    },
    methods: {
      zoomChange(event) {
        this.zoom = event;
      },
      clickMarker(marker) {
        this.$store.dispatch('clickMarker', marker);
        this.$socket.emit('joinConversation', marker)
        try {
          this.$f7.views.main.router.load({url: `/conversation/${marker.id}`})
        } catch (e) {
          this.$f7.alert(marker.username, 'Tick')
        }
      },
      initMap(position) {
        this.$store.dispatch('init', true);

        let lat = this.locationBlur ? Number(position.coords.latitude.toFixed(2)) : position.coords.latitude;
        let lng = this.locationBlur ? Number(position.coords.longitude.toFixed(2)) : position.coords.longitude;

        let myLocation = { lat, lng, username: this.$store.state.user.username, id: this.$socket.id }

        if (!this.init) {
          console.log('Howdy, u\'re awesome. What a shiny day. Have a good day, be polite.');
          this.center = myLocation;
          this.zoom = 15;
          this.init = true;
          // TODO: @cagataycali do it this a function.
          fetch(`https://trends.tick.chat/${lat.toFixed(0)}/${lng.toFixed(0)}`)
            .then(res => res.json())
            .then(res => {
              this.$store.dispatch('setTrends', res)
            })
            .catch(err => {
              console.log(`Request err ${JSON.stringify(err)}`)
            })
        } else {
          if (this.$store.state.trends.length === 0) {
            fetch(`https://trends.tick.chat/${lat.toFixed(0)}/${lng.toFixed(0)}`)
              .then(res => res.json())
              .then(res => {
                this.$store.dispatch('setTrends', res)
              })
              .catch(err => {
                console.log(`Request err ${JSON.stringify(err)}`)
              })
          }
          console.log('Wow, you\'re moving buddy.');
        }
        this.$store.dispatch('setLocation', myLocation);
        this.$socket.emit('myLocation', myLocation);
      },
    },
    mounted() {
      this.startComponent()
    },
    computed: {
      ...mapGetters([
       'isSocketConnected',
       'markers',
       'locationBlur'
     ]),
     isClustered() {
       return this.zoom < 20
     }
   },
  created() {
    let isMobile = window.isMobile();
    this.options.zoomControl = !isMobile;
    this.options.streetViewControl = !isMobile;
    if (navigator.geolocation) {
      navigator.geolocation.watchPosition(this.initMap,
      (error) => {
        if (error.code == error.PERMISSION_DENIED)
            this.$f7.alert('Tick require your location information. We promise about your location is blurred by default. You can share your exact location If you want. Please share your location and restart page.', 'Tick')
      }, {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
      });
    } else {
      this.$f7.alert('Geolocation is not supported by this browser.', 'Tick')
    }
  },
  components: {
    Splash
  }
}
</script>

<style media="screen">
  .gm-style-iw {
    color: #353535
  }
@media screen and (max-width: 500px) {
  .gm-style-cc {
    display: none;
  }
  .gm-style-iw {
    color: #353535
  }
  img[src="https://maps.gstatic.com/mapfiles/api-3/images/google_white5_hdpi.png"]{display:none}
}
</style>

inbox.vue(SETTINGS)

<template>
  <f7-page name="inbox">
    <f7-navbar back-link="Back">
      <f7-nav-center sliding>Discover</f7-nav-center>
      <f7-nav-right>
        <f7-link icon="icon fa fa-podcast" style="font-size:1.5em" open-panel="right"></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <br>
    <br>

    <f7-block-title style="text-align:center">Trends</f7-block-title>

    <f7-list media-list no-border>
      <f7-list-item v-for="trend in trends"
        :key="trend.id"
        class="inbox-list"
        :link="getConversationPath(trend.id, true)"
        :title="trend.name"
        media="<img src='/static/hashtag.png' style='width:60px'/>"
        :text="volumeText(trend.volume)"
      ></f7-list-item>
    </f7-list>

    <f7-block-title style="text-align:center">Conversations</f7-block-title>

    <f7-block id="noConversations" v-if="conversations.length === 0" style="text-align:center">
      <p><b>There's no conversation.</b></p>
      <p>Could you please share <b>{{host()}}</b> with one friend.</p>
    </f7-block>


    <f7-list media-list no-border>
      <f7-list-item v-for="conversation in conversations"
        :key="conversation.id"
        class="inbox-list"
        :link="getConversationPath(conversation.id, false)"
        :media="avatar(conversation)"
        :title="conversation.username"
        :text="conversation.text"
      >
      </f7-list-item>
    </f7-list>

  </f7-page>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
     'conversations',
     'trends'
   ])
  },
  methods: {
    getConversationPath(id, isGroup) {
      return `/${isGroup ? 'group' : 'conversation'}/${id}`;
    },
    avatar(conversation) {
      return `<img src='${conversation.messages[conversation.messages.length - 1].avatar}'>`;
    },
    volumeText(volume) {
      return `tweeted more than ${volume} time.`
    },
    isInboxEmpty() {
      return this.conversations.length === 0
    },
    host() {
      return window.location.host
    }
  }
}
</script>

<style media="screen">
  .inbox-list img {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
  }

  .list-block .item-text {
    line-height: 41px;
    height: 36px;
  }

  .layout-dark .login-screen-content, .layout-dark .page, .layout-dark .panel, .page.layout-dark, .panel.layout-dark {
    background-color: #333333
  }

  .layout-dark .navbar, .layout-dark .subnavbar, .navbar.layout-dark, .subnavbar.layout-dark {
    background-color: #2e2e2e;
    color: #EEEEEE;
  }

  .layout-dark .content-block-inner {
    background: #353535
  }

  .list-block.media-list .item-link .item-title-row {
    background-image: none
  }
</style>

Please, save the lamer :)