Counter with Dark Mode Only - Lit Typing CST Test

Counter with Dark Mode Only — Lit Code

Static counter with only dark/light theme toggle.

import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('lit-dark-counter')
export class LitDarkCounter extends LitElement {
	@state() isDark = false;
	static styles = css`.dark-theme{background:#222;color:#eee}.light-theme{background:#fff;color:#000}`;
	render() {
		return html`<div class=${this.isDark?'dark-theme':'light-theme'}>
		<h2>Counter: 0</h2>
		<button @click=${() => this.isDark = !this.isDark}>Toggle Theme</button>
		</div>`;
	}
}

Lit Language Guide

Lit is a lightweight, fast, web-component-focused library for building reactive and declarative UI using standard web platform features. It emphasizes interoperability, small bundle sizes, and declarative templating with lit-html.

More Lit Typing Exercises

Practice Other Languages