Nsryjdtyk

How to implement the transition between two color themes tied to a language change?

Languages are changed using the Vuex Store. It is necessary when changing the language to change the body class.

Story state:

export default {

  language: {

    current: { name: 'en'},

    available: [{ name: 'en' }, { name: 'ru' }]

  }

}

Story action:

export default { ['app:language:change']({ commit }, language) { 

 commit('app:language:change', language); },

}

Story mutation:

export default { ['app:language:change'](state, language) { 

 state.language.current = language; },

}

Component-language change

<tempalte v-for="(lang, index) in availableLanguages">

   <span style="cursor: pointer;"  v-on:click="() => 

     onLanguageChange(lang)">{{ lang.name }}</span>

   <span v-if="index !== availableLanguages.length - 1"> / </span>

</tempalte>



<script>

    export default {

      name: 'app-footer',

    computed: {

     language()

       {return this.$store.state.language.current;},

     availableLanguages() 

       {return this.$store.state.language.available;}

    },

    methods: {

      onLanguageChange(lang) {

        this.$store.dispatch('app:language:change', lang); }

    }

  }

</script>

Example of a component in which the language changes

<template>

    <h1> {{ language && title && title[language.name] }} </h1>

</template>

<script>

    const ABOUT_DIC = {

       title: {

         en: 'About',

         ru: 'Компания'

       }

     };

     export default {

        name: 'about',

        data () {

           return { title: ABOUT_DIC.title }

        },

        computed: {

            language() {

               return this.$store.state.language.current; }

     }

    }

</script>

You can bind class names dynamically in vue and as you appear to only have two options you could use a ternary expression to determine which class is bound. As you are already getting your language name from your store you could use that to determine the class. Something like this:

<template>

  <div v-bind:class="[language.name === 'en' ? englishClass : russianClass]">

    <h1> {{ language && title && title[language.name] }} </h1>

  </div>

</template>

<script>

    const ABOUT_DIC = {

       title: {

         en: 'About',

         ru: 'Компания'

       }

     };

     export default {

        name: 'about',

        data () {

           return { 

             title: ABOUT_DIC.title, 

             englishClass: 'blue',

             russianClass: 'green'

             }

        },

        computed: {

            language() {

               return this.$store.state.language.current; }

     }

    }

</script>

<style scoped>

  .blue {

    background-color: blue;

  }

  .green {

    background-color: green;

  }

And obviously you can have any styling you want in the blue or green class. The vue.js docs on this are here