KoderThemeToggle

Ratified Theme themes/light-dark.kmd

Two-state light/dark toggle with anti-flash inline script and matchMedia listener. Mirrors the spec on this site verbatim.

Demo

Static visual mock — pixel-faithful but non-interactive. Sprint 2.3 will swap selected demos for live Flutter Web embeds.

Light
Dark

One click swaps data-theme on <html>; a saved preference wins over the OS setting.

Availability

Flutter (koder_kit)
koder_kit v0.6.0+
Web (koder_web_kit)
koder_web_kit v0.2.0+

Flutter usage

import 'package:koder_kit/koder_kit.dart';
AppBar(
  actions: [KoderThemeToggle()],
)

Web usage

<script type="module" src="https://hub.koder.dev/sdk/koder-web-kit/v0.3/koder-web-kit.js"></script>
<koder-theme-toggle></koder-theme-toggle>

Related in the same group