1

I know that there is another question with this topic, but it does not use import syntax and nuxt-js. In my nuxt app, I have four themes that the user could change them with a button on navigation. Each time the user change theme, a state in my store that is called themeName is changed. In one of my pages I get the value of that state and store it in a computed property called themeNameActive as follow:

themeNameActive: function () {
   return this.$store.state.setActive.themeName;
},

Then I set a watch to that computed property as follow to monitor the changes in my themes:

themeNameActive: function () {
   this.asyncImport();
}

The asyncImport is a method that must change the highlight.js themes according to the theme that was selected by user as the below code:

asyncImport() method:

    asyncImport: async function () {
      console.log(this.themeNameActive);
        let themeObj = {
          default: "github",
          kind1: "idea",
          kind2: "tomorrow-night-bright",
          kind3: "default"
        }

        await import('highlight.js/styles/' + themeObj[this.themeNameActive] + '.css');

      hljs.highlightAll();
    }

Here, default, kind1, kind2 and kind3 are the supported values that this.themeNameActive computed property could accept and are changing with user selection. This strategy works fine and the highlight of the <code> tag in my page is changed with the change of the theme. But the problem is that when the user selects for example kind1 theme and after that selects another one (for example kind2) and finally returns to kind1 again, the kind2 theme remains and kind1 does not applied. I think the reason of that problem is CSS overwrites styles of last selected theme and don't import again the previous selections. So is there any solution that clear or removes previous imports to overcome this problem. I am not very familiar with es6 modules and import command capabilities. Also I search for a solution that don't use sass or needs to reload the entire page.

hamid-davodi
  • 1,602
  • 2
  • 12
  • 26
  • `I think the reason of that problem is CSS overwrites styles of last selected theme and don't import again the previous selections`, it would be nice to see what happens there exactly. A supposition is not enough to debug efficienly. Could you provide us a Github repo or a [repro]? I'm not sure if it's feasible but you may use some CSS variables or maybe provide a variable to the package and ask for it to be accounted for (not sure if there is an API regarding the selection of a theme or if it's done only on the CSS side). Also, double check that Vuex is not the issue here. – kissu Aug 20 '22 at 13:10
  • @kissu thanks for the comment. Maybe in future I would provide a Github repo for that. But as I am not familiar with modules and es6 a lot, It is a question for me that is there any way to clean the previous imported files? For example a code that act exactly the opposite of ```import('highlight.js/styles/' + themeObj[this.themeNameActive] + '.css')```? – hamid-davodi Aug 20 '22 at 14:35
  • You can [dynamically import](https://stackoverflow.com/a/67825061/8816585) a module (even with string interpolation). Meanwhile, you cannot un-import some JS code. Here, it's probably not an issue on how to import a module anyway. – kissu Aug 20 '22 at 15:41
  • @kissu I provided a [GitHub repository](https://github.com/hamidGit68/change-theme) for the codes. It is not the actual code but if you go to ```http://localhost:3000/newPage``` in your local development environment, you can see the problem by clicking on buttons. – hamid-davodi Aug 21 '22 at 03:49

0 Answers0