|
|
|
|
@@ -94,22 +94,22 @@ const applyScale = () => {
|
|
|
|
|
<div class="grid">
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-light-blue', 'light')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/bootstrap4-light-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Light Blue" />
|
|
|
|
|
<img src="/layout/images/themes/bootstrap4-light-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Light Blue" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-light-purple', 'light')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/bootstrap4-light-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Light Purple" />
|
|
|
|
|
<img src="/layout/images/themes/bootstrap4-light-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Light Purple" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-dark-blue', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/bootstrap4-dark-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Blue" />
|
|
|
|
|
<img src="/layout/images/themes/bootstrap4-dark-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Blue" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-dark-purple', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/bootstrap4-dark-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Purple" />
|
|
|
|
|
<img src="/layout/images/themes/bootstrap4-dark-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Purple" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -118,22 +118,22 @@ const applyScale = () => {
|
|
|
|
|
<div class="grid">
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-light-indigo', 'light')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
|
|
|
|
|
<img src="/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-light-deeppurple', 'light')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light DeepPurple" />
|
|
|
|
|
<img src="/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light DeepPurple" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-dark-indigo', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
|
|
|
|
|
<img src="/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-dark-deeppurple', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark DeepPurple" />
|
|
|
|
|
<img src="/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark DeepPurple" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -142,22 +142,22 @@ const applyScale = () => {
|
|
|
|
|
<div class="grid">
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-light-indigo', 'light')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
|
|
|
|
|
<img src="/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-light-deeppurple', 'light')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light Deep Purple" />
|
|
|
|
|
<img src="/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light Deep Purple" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-dark-indigo', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
|
|
|
|
|
<img src="/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-dark-deeppurple', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark Deep Purple" />
|
|
|
|
|
<img src="/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark Deep Purple" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -166,7 +166,7 @@ const applyScale = () => {
|
|
|
|
|
<div class="grid">
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('tailwind-light', 'light')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/tailwind-light.png" class="w-2rem h-2rem" alt="Tailwind Light" />
|
|
|
|
|
<img src="/layout/images/themes/tailwind-light.png" class="w-2rem h-2rem" alt="Tailwind Light" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -175,7 +175,7 @@ const applyScale = () => {
|
|
|
|
|
<div class="grid">
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('fluent-light', 'light')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/fluent-light.png" class="w-2rem h-2rem" alt="Fluent Light" />
|
|
|
|
|
<img src="/layout/images/themes/fluent-light.png" class="w-2rem h-2rem" alt="Fluent Light" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -184,42 +184,42 @@ const applyScale = () => {
|
|
|
|
|
<div class="grid">
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-indigo', 'light')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/lara-light-indigo.png" class="w-2rem h-2rem" alt="Lara Light Indigo" />
|
|
|
|
|
<img src="/layout/images/themes/lara-light-indigo.png" class="w-2rem h-2rem" alt="Lara Light Indigo" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-blue', 'light')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/lara-light-blue.png" class="w-2rem h-2rem" alt="Lara Light Blue" />
|
|
|
|
|
<img src="/layout/images/themes/lara-light-blue.png" class="w-2rem h-2rem" alt="Lara Light Blue" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-purple', 'light')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/lara-light-purple.png" class="w-2rem h-2rem" alt="Lara Light Purple" />
|
|
|
|
|
<img src="/layout/images/themes/lara-light-purple.png" class="w-2rem h-2rem" alt="Lara Light Purple" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-teal', 'light')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/lara-light-teal.png" class="w-2rem h-2rem" alt="Lara Light Teal" />
|
|
|
|
|
<img src="/layout/images/themes/lara-light-teal.png" class="w-2rem h-2rem" alt="Lara Light Teal" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-indigo', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/lara-dark-indigo.png" class="w-2rem h-2rem" alt="Lara Dark Indigo" />
|
|
|
|
|
<img src="/layout/images/themes/lara-dark-indigo.png" class="w-2rem h-2rem" alt="Lara Dark Indigo" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-blue', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/lara-dark-blue.png" class="w-2rem h-2rem" alt="Lara Dark Blue" />
|
|
|
|
|
<img src="/layout/images/themes/lara-dark-blue.png" class="w-2rem h-2rem" alt="Lara Dark Blue" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-purple', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/lara-dark-purple.png" class="w-2rem h-2rem" alt="Lara Dark Purple" />
|
|
|
|
|
<img src="/layout/images/themes/lara-dark-purple.png" class="w-2rem h-2rem" alt="Lara Dark Purple" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-teal', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/lara-dark-teal.png" class="w-2rem h-2rem" alt="Lara Dark Teal" />
|
|
|
|
|
<img src="/layout/images/themes/lara-dark-teal.png" class="w-2rem h-2rem" alt="Lara Dark Teal" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -228,62 +228,62 @@ const applyScale = () => {
|
|
|
|
|
<div class="grid">
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-blue', 'light')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/saga-blue.png" class="w-2rem h-2rem" alt="Saga Blue" />
|
|
|
|
|
<img src="/layout/images/themes/saga-blue.png" class="w-2rem h-2rem" alt="Saga Blue" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-green', 'light')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/saga-green.png" class="w-2rem h-2rem" alt="Saga Green" />
|
|
|
|
|
<img src="/layout/images/themes/saga-green.png" class="w-2rem h-2rem" alt="Saga Green" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-orange', 'light')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/saga-orange.png" class="w-2rem h-2rem" alt="Saga Orange" />
|
|
|
|
|
<img src="/layout/images/themes/saga-orange.png" class="w-2rem h-2rem" alt="Saga Orange" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-purple', 'light')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/saga-purple.png" class="w-2rem h-2rem" alt="Saga Purple" />
|
|
|
|
|
<img src="/layout/images/themes/saga-purple.png" class="w-2rem h-2rem" alt="Saga Purple" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-blue', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/vela-blue.png" class="w-2rem h-2rem" alt="Vela Blue" />
|
|
|
|
|
<img src="/layout/images/themes/vela-blue.png" class="w-2rem h-2rem" alt="Vela Blue" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-green', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/vela-green.png" class="w-2rem h-2rem" alt="Vela Green" />
|
|
|
|
|
<img src="/layout/images/themes/vela-green.png" class="w-2rem h-2rem" alt="Vela Green" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-orange', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/vela-orange.png" class="w-2rem h-2rem" alt="Vela Orange" />
|
|
|
|
|
<img src="/layout/images/themes/vela-orange.png" class="w-2rem h-2rem" alt="Vela Orange" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-purple', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/vela-purple.png" class="w-2rem h-2rem" alt="Vela Purple" />
|
|
|
|
|
<img src="/layout/images/themes/vela-purple.png" class="w-2rem h-2rem" alt="Vela Purple" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-blue', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/arya-blue.png" class="w-2rem h-2rem" alt="Arya Blue" />
|
|
|
|
|
<img src="/layout/images/themes/arya-blue.png" class="w-2rem h-2rem" alt="Arya Blue" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-green', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/arya-green.png" class="w-2rem h-2rem" alt="Arya Green" />
|
|
|
|
|
<img src="/layout/images/themes/arya-green.png" class="w-2rem h-2rem" alt="Arya Green" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-orange', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/arya-orange.png" class="w-2rem h-2rem" alt="Arya Orange" />
|
|
|
|
|
<img src="/layout/images/themes/arya-orange.png" class="w-2rem h-2rem" alt="Arya Orange" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-purple', 'dark')">
|
|
|
|
|
<img src="@/assets/layout/images/themes/arya-purple.png" class="w-2rem h-2rem" alt="Arya Purple" />
|
|
|
|
|
<img src="/layout/images/themes/arya-purple.png" class="w-2rem h-2rem" alt="Arya Purple" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|