Building a Zero-JS Portfolio Baseline

Published Jun 19, 2026

By shifting the responsibilities of dark mode tracking directly over to native browser layout engines via prefers-color-scheme, we drop site performance overhead down significantly.

Typically, portfolio templates ship with bloated JavaScript payload blocks merely to swap a CSS class on the <html> node and serialize user choice into localStorage. While this provides persistent toggling, it introduces Cumulative Layout Shift (CLS) as the browser parses and executes scripts in the head, leading to momentary white-flashes (or dark-flashes) during reload cycles.

Why Native Media Beats Javascript

Using media queries places layout responsibilities strictly back in the browser’s high-speed C++ rendering core. Styles are applied immediately during stylesheet parsing, before the paint loop occurs and before any script compiles. It guarantees zero flashes, zero bundle size, and fits the aesthetic of a hyper-minimalist digital garden.

export default {
  darkMode: 'media', // Use Native CSS preferences!
  theme: {
    extend: {}
  }
}

Simplifying the Dependency Graph

When building personal spaces online, we often reach for heavy frontend frameworks when simple CSS architectures are cleaner. A portfolio baseline is about long-term stability and platform independence. By standardizing on standard, standards-compliant media-queries, your codebase remains evergreen.