Vue Dark Mode Counter - Ionic Typing CST Test

Vue Dark Mode Counter — Ionic Code

Demonstrates an Ionic Vue counter with dark/light theme toggle.

<template>
	<ion-app :class="isDark ? 'dark-theme' : 'light-theme'">
		<ion-header>
		<ion-toolbar>
		<ion-title>Dark Mode Counter</ion-title>
		</ion-toolbar>
		</ion-header>
		<ion-content class="ion-padding" style="text-align:center">
		<h2>Counter: {{ count }}</h2>
		<ion-button @click="count++">+</ion-button>
		<ion-button @click="count--">-</ion-button>
		<ion-button @click="count=0">Reset</ion-button>
		<br/><br/>
		<ion-button @click="toggleTheme">Switch Theme</ion-button>
		</ion-content>
	</ion-app>
</template>

<script>
import { ref } from 'vue';
export default {
	setup() {
		const count = ref(0);
		const isDark = ref(false);
		const toggleTheme = () => { isDark.value = !isDark.value };
		return { count, isDark, toggleTheme };
	}
}
</script>

Ionic Language Guide

Ionic Framework is an open-source UI toolkit for building high-quality, cross-platform mobile, desktop, and web apps using web technologies like HTML, CSS, and JavaScript, often paired with Angular, React, or Vue.

More Ionic Typing Exercises

Practice Other Languages