Styling and Theming
Relevant source files
The following files were used as context for generating this wiki page:The TAF-SAF project utilizes a modern styling architecture built on Next.js, leveraging Tailwind CSS for utility-first styling and CSS custom properties for robust theming, including automatic dark mode support. The system is designed for efficiency and maintainability, with global styles, fonts, and component-specific styles clearly delineated.
Fonts are managed via the next/font module to optimize loading and performance, specifically using the Geist font family. The core of the theming system resides in globals.css, which defines CSS variables for colors and fonts that adapt based on the user's system preferences for light or dark mode. These variables are then consumed by both global style rules and Tailwind CSS utility classes throughout the application's components.
Core Technologies
The styling system is built upon several key libraries and frameworks defined in the project's configuration.
Sources: package.json
Styling Dependencies
The project's styling capabilities are primarily provided by Tailwind CSS.
| Package | Version | Description |
|---|---|---|
next | 15.3.2 | The React framework, which includes next/font. |
tailwindcss | 4 | A utility-first CSS framework. |
@tailwindcss/postcss | 4 | A PostCSS plugin for Tailwind CSS. |
Sources: package.json:14-23
This diagram shows the relationship between the main styling dependencies.
Sources: package.json:14-23
Global Styles and Theming
Global styles, CSS variables, and theme definitions are centralized in src/app/globals.css. This file is the foundation for the application's visual appearance, including its light and dark modes.
Sources: src/app/globals.css, src/app/layout.tsx:3
CSS Custom Properties (Variables)
The application uses CSS custom properties for theming. Base values for light and dark modes are defined in a :root selector.
| Variable | Light Mode Value | Dark Mode Value | Purpose |
|---|---|---|---|
--background | #ffffff | #0a0a0a | Defines the main background color. |
--foreground | #171717 | #ededed | Defines the main text and element color. |
--font-sans | var(--font-geist-sans) | var(--font-geist-sans) | Maps to the Geist Sans font family. |
--font-mono | var(--font-geist-mono) | var(--font-geist-mono) | Maps to the Geist Mono font family. |
Sources: src/app/globals.css:3-14, src/app/layout.tsx:5-14
Theme Integration
The @theme inline at-rule in globals.css integrates these CSS variables directly into Tailwind's theme, making them accessible to Tailwind's utility classes. The @media (prefers-color-scheme: dark) query ensures that the color variables automatically switch when the user's operating system is in dark mode.
/* src/app/globals.css:3-19 */
:root {
--background: #ffffff;
--foreground: #171717;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
Sources: src/app/globals.css:3-19
The following diagram illustrates the flow of how theme variables are defined and applied.
Font Management
The project uses next/font to load and manage the Geist and Geist_Mono font families. This is configured in the root layout file.
Sources: src/app/layout.tsx, README.md:15-16
Font Configuration
In src/app/layout.tsx, the fonts are imported and instantiated. Each font is assigned to a CSS variable (--font-geist-sans and --font-geist-mono). These variable names are then added to the <body> element's class list, making them available globally.
// src/app/layout.tsx:2-14
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
Sources: src/app/layout.tsx:2-14
These variables are then applied to the body tag in the RootLayout component.
// src/app/layout.tsx:25-27
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
Sources: src/app/layout.tsx:25-27
Component-Level Styling
Styling at the component level is achieved using Tailwind CSS utility classes. The main page component, src/app/page.tsx, demonstrates this approach for layout, typography, and interactive elements.
Utility Class Usage
The Home component uses a variety of utility classes:
- Layout:
grid,grid-rows-[20px_1fr_20px],flex,flex-col,items-center,justify-items-center. - Sizing & Spacing:
min-h-screen,p-8,gap-16,h-10,px-4. - Typography:
text-sm/6,text-center,font-medium,tracking-[-.01em]. - Colors:
bg-foreground,text-background,border-transparent. - Interactivity:
hover:bg-[#383838],hover:underline.
Sources: src/app/page.tsx:5-93
Dark Mode Styling
Dark mode variants are applied directly in the JSX using the dark: prefix. This allows components to adapt their appearance based on the active color scheme.
For example, an Image component inverts its colors in dark mode:
// src/app/page.tsx:8-15
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
Sources: src/app/page.tsx:8-9
Similarly, a <code> element has a different background color in dark mode:
// src/app/page.tsx:18-20
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
src/app/page.tsx
</code>
Sources: src/app/page.tsx:18-20
Font Family Application
The custom font family variables are consumed using Tailwind's arbitrary value syntax. This ensures that the components use the globally defined Geist fonts.
// src/app/page.tsx:5
<div className="... font-[family-name:var(--font-geist-sans)]">
Sources: src/app/page.tsx:5
// src/app/page.tsx:16
<ol className="... font-[family-name:var(--font-geist-mono)]">
Sources: src/app/page.tsx:16
Conclusion
The styling and theming system in TAF-SAF is a cohesive and modern setup. It effectively combines the power of Tailwind CSS for rapid UI development with a flexible CSS custom property-based theming system for handling light and dark modes. The integration with Next.js's font optimization ensures a performant and visually consistent user experience. This architecture is scalable and easy for developers to extend by adding new utility classes or theme variables.