skills.rest
rangojs
rangojsOFFICIAL
Explore all skills by this author →
GitHub

theme

Implements light/dark mode theming with FOUC prevention in Rango router applications.

Updated Nov 7, 2025
Search Tags:#theme#dark mode#ssr#react server components#rango#fouc prevention#usetheme
One-click install
npx skills add https://github.com/rangojs/rango --skill theme-rangojs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theme
Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/theme
Command: npx skills add https://github.com/rangojs/rango --skill theme-rangojs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @rangojs/router.

What problem does it solve? Adding light/dark mode to a React Server Components app often causes a flash of the wrong theme on page load (FOUC) and requires wiring up cookies, localStorage, and hydration handling manually. This Skill configures Rango's opt-in theme system so theme state works consistently across SSR, client navigation, and no-JS requests. ## Core Features & Use Cases - Router-level theme configuration: Enable theming with theme: true or customize defaultTheme, themes, attribute, and storageKey in createRouter. - Server-side theme access: Read ctx.theme or call ctx.setTheme() in handlers and middleware; loaders read the theme cookie directly via cookies(). - Client theme hook: Use useTheme() from @rangojs/router/theme to build toggles exposing theme, setTheme, resolvedTheme, systemTheme, and themes. - Use Case: Build a settings page with a theme dropdown that persists the user's choice in localStorage plus a cookie, renders the correct theme on the server, and never flashes the wrong colors on reload. ## Quick Start Enable the theme option in my Rango createRouter config and add a light/dark mode toggle component using useTheme.

Frequently Asked Questions about theme

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a light/dark mode toggle to a Rango app?▼

Enable the theme option in createRouter, then build a client component using useTheme from @rangojs/router/theme. The hook exposes theme, setTheme, resolvedTheme, and systemTheme so you can render a select or button that persists the choice.

How to prevent flash of wrong theme (FOUC) on page load in React?▼

Rango's theme system prevents FOUC automatically: MetaTags renders an inline script that applies the stored theme before paint. Add suppressHydrationWarning to the html element to avoid hydration mismatch warnings.

Can I read the current theme in a Rango loader?▼

No, theme accessors are handler and middleware only; the loader context has no ctx.theme or ctx.setTheme. A loader that needs the theme reads the cookie directly via cookies(), which is safe because loaders always run fresh.

Does Rango theming support system preference detection?▼

Yes, set defaultTheme to "system" and the theme resolves based on the user's OS preference. The useTheme hook exposes systemTheme and resolvedTheme so client components can react to system changes.

Where is the theme preference stored in Rango?▼

The theme persists in both localStorage and a cookie. The cookie enables server-side rendering with the correct theme, while localStorage keeps the client-side preference in sync across sessions.

Related Skills

Explore More Software Engineering Skills→
lespacemanlespaceman
4

router-core

Create framework-agnostic route trees and routers with type-safe TanStack Router core.

Community
Advanced
ihj04982ihj04982

prevent-hydration-mismatch-without-flickering

Inject a synchronous script to update the DOM before React hydration.

Community
Basic
syncfusionsyncfusion

syncfusion-aspnetcore-security

Configure Content Security Policy nonces for Syncfusion ASP.NET Core EJ2 components.

Official
Intermediate
ai-pivotai-pivot
12

github

Manage GitHub pull requests, issues, and CI runs via the gh CLI.

Official
Intermediate