<template>
	<ciy-header :title="lang('apptitle')"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title mk">
				暗黑模式
			</view>
			<view class="right">this.settheme()</view>
			<view class="content">
				<view style="margin:0.5em;display: flex;justify-content: space-around;">
					<view class="btn" @tap="this.settheme('dark')">dark</view>
					<view class="btn" @tap="this.settheme('light')">light</view>
				</view>
			</view>
			
			<view class="flex flex-wrap" style="margin-bottom:0.5em;">
				<view class="box txt1 bg1">txt1 bg1</view>
				<view class="box txt2 bg2">txt2 bg2</view>
				<view class="box txt3 bg3">txt3 bg3</view>
				<view class="box txt4 bg4">txt4 bg4</view>
				<view class="box txt5 bg5">txt5 bg5</view>
				<view class="box txt6 bg6">txt6 bg6</view>
				<view class="box txt7 bg7">txt7 bg7</view>
				<view class="box txt8 bg8">txt8 bg8</view>
				<view class="box txt9 bg9">txt9 bg9</view>
			</view>
			
			<view class="flex flex-wrap" style="margin-bottom:0.5em;">
				<view class="box" style="background:var(--man3);color:var(--mant)">man3</view>
				<view class="box" style="background:var(--man4);color:var(--mant)">man4</view>
				<view class="box" style="background:var(--man5);color:var(--mant)">man5</view>
				<view class="box" style="background:var(--man6);color:var(--mant)">man6</view>
				<view class="box" style="background:var(--man7);color:var(--mant)">man7</view>
				<view class="box"><button class="btn man liner">按钮</button></view>
			</view>
			
			<view class="flex flex-wrap" style="margin-bottom:0.5em;">
				<view class="box" style="background:var(--succ4);color:var(--succt)">succ4</view>
				<view class="box" style="background:var(--succ5);color:var(--succt)">succ5</view>
				<view class="box" style="background:var(--succ6);color:var(--succt)">succ6</view>
				<view class="box"><button class="btn succ liner">按钮</button></view>
			</view>
			
			<view class="flex flex-wrap" style="margin-bottom:0.5em;">
				<view class="box" style="background:var(--warn4);color:var(--warnt)">warn4</view>
				<view class="box" style="background:var(--warn5);color:var(--warnt)">warn5</view>
				<view class="box" style="background:var(--warn6);color:var(--warnt)">warn6</view>
				<view class="box"><button class="btn warn liner">按钮</button></view>
			</view>
			
			<view class="flex flex-wrap" style="margin-bottom:0.5em;">
				<view class="box" style="background:var(--dag4);color:var(--dagt)">dag4</view>
				<view class="box" style="background:var(--dag5);color:var(--dagt)">dag5</view>
				<view class="box" style="background:var(--dag6);color:var(--dagt)">dag6</view>
				<view class="box"><button class="btn dag liner">按钮</button></view>
			</view>

			<view class="flex flex-center px4" style="gap:1em;margin-bottom:0.5em;">
				文字
				<ciy-input bb style="width:4em;"></ciy-input>
				<ciy-switch value="true"></ciy-switch>
				<ciy-switch></ciy-switch>
			</view>
			
			<view style="text-align:center;line-height:3em;height:10em;width:100%;background: linear-gradient(60deg, var(--e-userbg1), var(--e-userbg2));">
				我的默认色
			</view>
		</view>
	</view>
</template>

<style>
	.box {
		width: 33%;
		line-height: 3em;
		height: 3em;
		text-align: center;
	}
</style>

<script>
	export default {
		data() {
			return {
				sys: {}
			}
		},
		onLoad() {},
		methods: {}
	}
</script>