Introducing the Theming Skill | Code with Beto

There's a new skill in the Code with Beto Skills repo: Theming.

It scaffolds one color system that works on iOS and Android at once. Instead of branching on for colors all over your app, you get semantic tokens (, , , ...) that resolve to native iOS colors and Android Material You dynamic colors, flip with dark and light automatically, and are read through a single hook.

This is the exact theming pattern from the Platano template, packaged to drop into any Expo Router project.

What it does

Unifies colors across platforms so one set of names resolves to native iOS labels and Android Material You dynamic colors, or to hex values you pin.
Handles dark and light re-rendering by wiring so the whole tree recomputes when the user toggles the theme.
Themes React Navigation so headers, tab bars, and the default background match your tokens.
Gives you a / hook backed by a context, so components read the theme directly.
Edits your root surgically without clobbering existing providers.

What gets created

theme/
  config.ts         # single source of truth: system tokens + brand colors
  colors.ts         # resolvers + hooks + getNavigationTheme
  ThemeContext.tsx  # ColorsProvider + useColors() / useTheme() / useBrand()

Plus a small wiring edit to (or ).

How to install it

If you already have the skills installed, you're set. Otherwise run:

npx skills add code-with-beto/skills

Then prompt Claude Code with something like:

Set up a unified color theme with dark mode in my Expo app

Claude detects your project layout and Expo SDK, creates the three files, wires your root layout, and shows you how to use it.

How to use it

Read any color through the hook:

import { useColors, useBrand } from "@/theme/ThemeContext";
 
const { background, text, secondaryText } = useColors();
const { primary } = useBrand();

To change a color everywhere, edit . Set a token to to follow the OS, or to a hex to pin it across platforms. That's the only file you touch day to day.

Requirements

An Expo Router app (TypeScript)
Expo SDK 56+ for the API and the re-exports. On older SDKs the skill falls back to hex tokens and the React Navigation , so everything still works minus Material You.

This skill ships alongside the new Expo UI on Android lesson in the course, where I cover this theming pattern.

LessonExpo UI on Android

Build native Android UIs with Expo UI, Jeptack Compose, and Material You.

If you find these skills useful, give the repo a star and let me know what to build next in the Discord.

Let's connect!