43 lines
1.0 KiB
Vue
43 lines
1.0 KiB
Vue
|
<template>
|
||
|
|
<ft-card
|
||
|
|
class="relative card">
|
||
|
|
<h3>
|
||
|
|
{{ title }}
|
||
|
|
</h3>
|
||
|
|
<ft-flex-box>
|
||
|
|
<ft-toggle-switch
|
||
|
|
label="Match Top Bar with Main Color"
|
||
|
|
:default-value="barColor"
|
||
|
|
@change="updateBarColor"
|
||
|
|
/>
|
||
|
|
</ft-flex-box>
|
||
|
|
<br>
|
||
|
|
<ft-flex-box>
|
||
|
|
<ft-select
|
||
|
|
placeholder="Base Theme"
|
||
|
|
:value="currentBaseTheme"
|
||
|
|
:select-names="baseThemeNames"
|
||
|
|
:select-values="baseThemeValues"
|
||
|
|
@change="updateBaseTheme"
|
||
|
|
/>
|
||
|
|
<ft-select
|
||
|
|
placeholder="Main Color Theme"
|
||
|
|
:value="currentMainColor"
|
||
|
|
:select-names="colorNames"
|
||
|
|
:select-values="colorValues"
|
||
|
|
@change="updateMainColor"
|
||
|
|
/>
|
||
|
|
<ft-select
|
||
|
|
placeholder="Secondary Color Theme"
|
||
|
|
:value="currentSecColor"
|
||
|
|
:select-names="colorNames"
|
||
|
|
:select-values="colorValues"
|
||
|
|
@change="updateSecColor"
|
||
|
|
/>
|
||
|
|
</ft-flex-box>
|
||
|
|
</ft-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script src="./theme-settings.js" />
|
||
|
|
<style scoped src="./theme-settings.css" />
|