Theme Toggle App - Tauri Typing CST Test
Loading…
Theme Toggle App — Tauri Code
Demonstrates a dark/light theme toggle with persistent state using Tauri Store API.
// main.js
import { Store } from 'tauri-plugin-store-api';
const store = new Store('.settings.dat');
async function setTheme(dark) {
document.body.className = dark ? 'dark' : 'light';
await store.set('darkMode', dark);
await store.save();
}
document.getElementById('toggleBtn').addEventListener('click', async () => {
const dark = document.body.classList.toggle('dark');
await setTheme(dark);
});
(async () => {
const darkMode = await store.get('darkMode');
if (darkMode) document.body.classList.add('dark');
})();
// index.html
<!DOCTYPE html>
<html>
<head>
<style>
body.dark { background: #222; color: #fff; }
body.light { background: #fff; color: #000; }
</style>
</head>
<body>
<h2>Theme Toggle</h2>
<button id='toggleBtn'>Toggle Theme</button>
<script type='module' src='main.js'></script>
</body>
</html>Tauri Language Guide
Tauri is an open-source framework for building tiny, secure, and fast desktop applications using web technologies (HTML, CSS, JS) while leveraging Rust for backend functionality. It works with frontend frameworks like React, Vue, Angular, and Svelte.
Primary Use Cases
- ▸Cross-platform desktop apps for Windows, macOS, and Linux
- ▸Electron alternative for smaller binaries and better security
- ▸Internal tools and utilities for businesses
- ▸Apps requiring frontend-backend separation
- ▸Desktop apps integrating web-based UI frameworks
Notable Features
- ▸Tiny binary sizes compared to Electron
- ▸Built-in security and sandboxing
- ▸Cross-platform support: Windows, macOS, Linux
- ▸Integration with any frontend framework
- ▸Rust backend for system-level access
Origin & Creator
Created by the Tauri Programme within the open-source community starting in 2019, Tauri was designed to offer lightweight, secure alternatives to Electron apps.
Industrial Note
Best suited for desktop apps that require small binary sizes, high performance, and strong security guarantees while reusing web development skills.