I have 5 pages with equal structure and 5 themes (1 page = 1 theme). Themes files has equal structure too and just contains sass variables with color palette and background image. So I want to switch theme on every page
App root file:
<code><template>
<div class="main"></div>
</template>
</code>
<code><template>
<div class="main"></div>
</template>
</code>
<template>
<div class="main"></div>
</template>
main.scss:
<code>.main {
backgroundColor: $themeColor;
}
</code>
<code>.main {
backgroundColor: $themeColor;
}
</code>
.main {
backgroundColor: $themeColor;
}
Theme file 1 structure:
$themeColor: black
Theme file 2 structure:
$themeColor: white
So I want on route 1 to have a themeColor variable to be ‘black’ and on route 2 – ‘white’
I tried dynamic import inside route watcher, but it doesn’t work
New contributor
Artur is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.