Counter with Dark Mode Toggle Only - Astro Typing CST Test
Loading…
Counter with Dark Mode Toggle Only — Astro Code
A counter where only the theme can be toggled, count is static.
---
import DarkOnlyCounter from '../components/DarkOnlyCounter.jsx';
---
<html>
<body>
<h1>Astro Dark Mode Counter</h1>
<DarkOnlyCounter />
</body>
</html>
// components/DarkOnlyCounter.jsx
import { useState } from 'react';
export default function DarkOnlyCounter() {
const [isDark, setIsDark] = useState(false);
return (
<div className={isDark ? 'dark-theme' : 'light-theme'}>
<h2>Counter: 0</h2>
<button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
</div>
);
}Astro Language Guide
Astro is a modern, content-focused web framework designed for building fast, optimized websites using a 'bring your own framework' philosophy and a server-first, zero-JS-by-default approach.
Primary Use Cases
- ▸Marketing and landing pages
- ▸Blogs and documentation sites
- ▸Static content-heavy websites
- ▸Hybrid static + server-rendered content
- ▸Sites using multiple UI frameworks together
Notable Features
- ▸Zero-JS by default
- ▸Island architecture
- ▸Partial hydration for interactive components
- ▸Markdown & MDX first-class support
- ▸Framework-agnostic component system
Origin & Creator
Created by Fred Schott and the Astro core team, originally launched in 2021 as an open-source initiative focused on performance-first web development.
Industrial Note
Astro excels in content-heavy sites like blogs, documentation, marketing pages, and any project prioritizing high performance and minimal client-side JavaScript.