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

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

176 lines 3.4 KB

Raw Download Zip

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