ivyforms / frontend / src / views / _components / theme-switch / IvyThemeSwitch.vue

IvyThemeSwitch.vue in The Innovative Form Builder – IvyForms 0.1.2, at frontend/src/views/_components/theme-switch/IvyThemeSwitch.vue

170 lines 3.2 KB

Raw Download Zip

1	<template>
2	<div
3	class="ivyforms-theme-switch"
4	:class="{ 'is-dark': localModelValue === 'dark' }"
5	@click="toggleTheme"
6	>
7	<BackgroundLightImage
8	class="ivyforms-theme-switch__background ivyforms-theme-switch__background--light"
9	/>
10	<BackgroundDarkImage
11	class="ivyforms-theme-switch__background ivyforms-theme-switch__background--dark"
12	/>
13	<div class="ivyforms-theme-switch__images">
14	<div class="ivyforms-theme-switch__images__item">
15	<SunImage />
16	</div>
17	<div class="ivyforms-theme-switch__images__item">
18	<MoonImage />
19	</div>
20	</div>
21	</div>
22	</template>
23
24	<script setup lang="ts">
25	import BackgroundLightImage from '@/assets/images/theme-switch/background-light.svg?component'
26	import BackgroundDarkImage from '@/assets/images/theme-switch/background-dark.svg?component'
27	import SunImage from '@/assets/images/theme-switch/sun.svg?component'
28	import MoonImage from '@/assets/images/theme-switch/moon.svg?component'
29	import { computed } from 'vue'
30
31	interface Props {
32	modelValue: 'light' \| 'dark'
33	}
34
35	const props = withDefaults(defineProps<Props>(), {
36	modelValue: 'light',
37	})
38
39	const emit = defineEmits(['update:modelValue'])
40
41	const localModelValue = computed({
42	get() {
43	return props.modelValue
44	},
45	set(value) {
46	emit('update:modelValue', value)
47	},
48	})
49
50	function toggleTheme() {
51	localModelValue.value = localModelValue.value === 'light' ? 'dark' : 'light'
52	}
53	</script>
54
55	<style lang="scss">
56	// Theme Switch
57	.ivyforms-theme-switch {
58	position: relative;
59	overflow: hidden;
60	height: 40px;
61	width: 40px;
62	border-radius: 50%;
63	display: flex;
64	justify-content: center;
65	align-items: center;
66	cursor: pointer;
67
68	// Background
69	&__background {
70	height: 40px;
71	width: 40px;
72	border-radius: 50%;
73	position: absolute;
74	z-index: 1;
75	@include transition(opacity, 0.3s);
76
77	// Light
78	&--light {
79	opacity: 1;
80	}
81
82	// Dark
83	&--dark {
84	opacity: 0;
85	}
86	}
87
88	// Images
89	&__images {
90	position: absolute;
91	top: 0;
92	z-index: 2;
93	@include transition(transform, 0.6s);
94
95	// Item
96	&__item {
97	height: 40px;
98	width: 40px;
99	display: flex;
100	align-items: center;
101	justify-content: center;
102	}
103	}
104
105	// SVG
106	g {
107	@include transition(fill-opacity, 0.3s);
108	}
109
110	// Path
111	path {
112	@include transition(fill, 0.3s);
113	}
114
115	// Light
116	&:not(.is-dark) {
117	// Hover
118	&:hover {
119	// Background
120	.ivyforms-theme-switch__background {
121	// SVG
122	g {
123	fill-opacity: 0.5;
124	}
125	}
126
127	// Item
128	.ivyforms-theme-switch__images__item {
129	// SVG
130	path {
131	fill: var(--map-base-danube-symbol-1);
132	}
133	}
134	}
135	}
136
137	// Dark
138	&.is-dark {
139	// Hover
140	&:hover {
141	// Background
142	.ivyforms-theme-switch__background {
143	// SVG
144	g {
145	fill-opacity: 0.15;
146	}
147	}
148	}
149
150	// Background
151	.ivyforms-theme-switch__background {
152	// Light
153	&--light {
154	opacity: 0;
155	}
156
157	// Dark
158	&--dark {
159	opacity: 1;
160	}
161	}
162
163	// Images
164	.ivyforms-theme-switch__images {
165	transform: rotate(-180deg);
166	}
167	}
168	}
169	</style>
170