THEME_SETUP

THEME_SETUP is an agent for coding agents from Anil-matcha/awesome-generative-ai-apps. It costs 0 tokens per session (346 once invoked), scanned A, original, MIT.

A setup guide for using next-themes to manage light and dark modes in a React or Next.js application. It requires wrapping the app in an AgentThemeProvider and configuring Tailwind to use a class for dark mode.

In plain words
What is it for?
Adding theme switching to Next.js App Router projects and other React apps, configuring Tailwind dark mode, and wiring the required theme provider.
Why use it?
It prevents theme-switching controls from failing because the provider or required Next.js configuration is missing. It also addresses hydration warnings that can occur when the server and browser initially disagree about the theme.

Agent

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add agents/anil-matcha/awesome-generative-ai-apps/theme_setup
Clone the repo
git clone --depth 1 https://github.com/Anil-matcha/awesome-generative-ai-apps

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for THEME_SETUP

README.md
[![agentmods](https://agentmods.dev/badge/agents/anil-matcha/awesome-generative-ai-apps/theme_setup.svg)](https://agentmods.dev/agents/anil-matcha/awesome-generative-ai-apps/theme_setup)
Your own site
<a href="https://agentmods.dev/agents/anil-matcha/awesome-generative-ai-apps/theme_setup"><img src="https://agentmods.dev/badge/agents/anil-matcha/awesome-generative-ai-apps/theme_setup.svg" alt="Measured on agentmods" height="20"></a>
Per session 0 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 346 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00000 $0.00346
Opus 5 $0.00000 $0.00173
Sonnet 5 $0.00000 $0.00069
Haiku 4.5 $0.00000 $0.00035

Measured 4d ago against content hash 9b6dfa80f322, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

THEME_SETUP scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

Copies of this mod

1 near-identical copy found in the catalogue:

platforms/Open-Generative-AI/packages/Open-Poe-AI/packages/agents/THEME_SETUP.md · 53 lines

What it actually says

Theme Setup Guide

This library uses next-themes to manage light and dark modes. For the theme switching buttons to work correctly, you must wrap your application with the provided AgentThemeProvider.

1. Wrap your Application

In your root layout or App component, import and use AgentThemeProvider.

Next.js (App Router)

In your layout.js:

import { AgentThemeProvider } from 'ai-agent';

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <AgentThemeProvider>
          {children}
        </AgentThemeProvider>
      </body>
    </html>
  )
}

[!IMPORTANT] Adding suppressHydrationWarning to the <html> tag is required by next-themes to avoid hydration mismatch errors.

Other React Apps

Wrap your main component:

import { AgentThemeProvider } from 'ai-agent';

ReactDOM.render(
  <AgentThemeProvider>
    <App />
  </AgentThemeProvider>,
  document.getElementById('root')
);

2. Tailwind Configuration

Ensure your tailwind.config.js in the consuming project includes darkMode: 'class':

module.exports = {
  darkMode: 'class',
  // ... rest of your config
}

3. Usage

Once the provider is in place, the theme switching logic inside HomepageNavbar (and other components) will work automatically, toggling the .dark class on the <html> element.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 4d ago First seen · 53 lines · 0 tokens per session scan A 9b6dfa80f322

Subscribe to this mod's changes

THEME_SETUP is an agent published in the GitHub repository Anil-matcha/awesome-generative-ai-apps (3,127 stars, last pushed 14d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 346 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other agents, from other repositories

trigger-dev-expert

Use this agent when you need to design, implement, or optimize background jobs and workflows using Trigger.dev framework. This includes creating reliable async tasks, implementing AI workflows, setting up scheduled jobs, structuring complex task hierarchies with subtasks, configuring build extensions for tools like…

hackerai-tech/hackerai · 0 tokens

ystack_frontend

Premium UI specialist. Builds production-grade React/Next.js with taste-soft-skill — glassmorphism, spring motion, refined typography. Auto-invoked for UI changes.

Yasuui/ystack · 40 tokens

THEME_SETUP

This library uses next-themes to manage light and dark modes. For the theme switching buttons to work correctly, you must wrap your application with the provided AgentThemeProvider.

nextgentrainingacademy88-max/open-generative-studio · 0 tokens

launch-react-vite-storyV10-environment

Launch the MCP dev server pointed at the React test app's Storybook v10 on port 6008, with overlay/panel watchers and the test app.

bitovi/convey · 42 tokens

invariant-guard

Use PROACTIVELY after any edit under apps/, packages/, or integrations/ to check a diff against the non-obvious ChatbotX invariants that no lint rule enforces (triple-d middleware names, relations/index.ts double-edit, ChannelType cascade, bindArgsSchemas binding, no-input execute(), i18n-mandatory…

ChatbotXIO/ChatbotX · 109 tokens

qa

You are a QA agent. Assume the developer missed edge cases. Given this PR diff and the app's stated requirements.

rogerSuperBuilderAlpha/hult-cohort-program · 0 tokens