react-principles

GitHub

Theming

The project uses Tailwind CSS v4. Theme tokens and custom variants live insrc/app/globals.csswith a class-based dark mode strategy.

Theme Tokens

Core color and font tokens are defined through@theme. Runtime page colors use:root and.darkCSS variables for background/foreground.

--color-primary#4628f1

Buttons, links, active tabs, focus rings

--color-background-light#f6f6f8

Light page background

--color-background-dark#020617

Dark page background

Surface colors are intentionally explicit in component classes for predictable design output:

Panel light

#ffffff

Card/dialog surface

Panel dark

#161b22

Card/dialog surface

Inner dark

#0d1117

Nested surface

Border dark

#1f2937

Dividers/borders

src/app/globals.css
/* src/app/globals.css */
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@theme {
  --color-primary: #4628f1;
  --color-background-light: #f6f6f8;
  --color-background-dark: #020617;
  --font-display: Inter, sans-serif;
}

:root {
  --background: #f6f6f8;
  --foreground: #0f172a;
}

.dark {
  --background: #020617;
  --foreground: #e2e8f0;
}

Dark Mode

Dark mode is class-based. Thedarkclass on<html>activates alldark:variants.

Theme class toggle
// Theme class on <html>
document.documentElement.classList.add("dark");
document.documentElement.classList.remove("dark");
document.documentElement.classList.toggle("dark");
Component usage
<div className="bg-white dark:bg-[#161b22] border border-slate-200 dark:border-[#1f2937]">
  <h2 className="text-slate-900 dark:text-white">Panel title</h2>
  <p className="text-slate-500 dark:text-slate-400">Muted text</p>
</div>

The navbar theme toggle persists preference inlocalStorageand toggles thedarkclass before paint to avoid FOUC.

Typography

Inter is the display and body font for this project. It is loaded in global CSS and registered asfont-display.

Heading 1font-black text-4xl
Heading 2font-bold text-2xl
Heading 3font-semibold text-lg
Body paragraph texttext-base
Muted helper texttext-sm text-slate-500
inline codefont-mono text-xs
src/app/globals.css
/* src/app/globals.css */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap") layer(base);

/* usage */
<h1 className="font-display font-black tracking-tight">Heading</h1>

Customize

To change brand color globally, update--color-primaryin the@themeblock.

src/app/globals.css
/* src/app/globals.css */
@theme {
  --color-primary: #0ea5e9; /* customize brand color */
}
Token sourceSingle source in src/app/globals.css
Mode strategyClass-based dark mode using @custom-variant dark
Runtime behaviorTheme preference persisted in localStorage
react-principles

Getting Started

Components