Theme Preview

Interactive playground with the adaptive code theme. Drag the hue slider in the header to see how all colors rotate together.

JavaScript

Logs

CSS

/* Surfaces and layout */
:root {
  --hue: 180;
  --surface: oklch(96% 0.012 var(--hue));
  --text: oklch(15% 0.025 var(--hue));
  --accent: oklch(55% 0.15 var(--hue));
  --border: oklch(90% 0.02 var(--hue));
}

/* Component styles */
.card {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  transition: box-shadow 0.2s ease;

  &:hover {
    box-shadow: 0 4px 12px oklch(from var(--accent) l c h / 20%);
  }

  & > .title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: oklch(18% 0.02 var(--hue));
    --text: oklch(90% 0.02 var(--hue));
    --border: oklch(25% 0.02 var(--hue));
  }
}

TypeScript

type EventMap = Record<string, unknown[]>;

interface Emitter<T extends EventMap> {
  on<K extends keyof T>(event: K, cb: (...args: T[K]) => void): () => void;
  emit<K extends keyof T>(event: K, ...args: T[K]): void;
}

function createEmitter<T extends EventMap>(): Emitter<T> {
  const listeners = new Map<keyof T, Set<Function>>();

  return {
    on(event, cb) {
      const set = listeners.get(event) ?? new Set();
      set.add(cb);
      listeners.set(event, set);
      return () => set.delete(cb);
    },
    emit(event, ...args) {
      for (const cb of listeners.get(event) ?? []) {
        cb(...args);
      }
    },
  };
}

// Usage
const bus = createEmitter<{
  message: [text: string, from: string];
  error: [code: number];
}>();

const unsub = bus.on("message", (text, from) => {
  console.log(`${from}: ${text}`);
});

bus.emit("message", "hello", "Alice");
unsub();

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Adaptive Theme Demo</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="header">
    <nav aria-label="Main">
      <a href="/" class="logo">My App</a>
      <ul class="nav-links">
        <li><a href="/docs">Docs</a></li>
        <li><a href="/api">API</a></li>
        <!-- More links -->
      </ul>
    </nav>
  </header>

  <main>
    <section class="hero">
      <h1>Build something <em>great</em></h1>
      <p>A short description of what this project does.</p>
      <button type="button" onclick="handleClick()">Get Started</button>
    </section>
  </main>

  <script>
    function handleClick() {
      const isReady = true;
      const count = 42;
      console.log(`Ready: ${isReady}, count: ${count}`);
    }
  </script>
</body>
</html>