0Pricing
Next.js 15 Fullstack Web Apps · Lektion

Responsive Design und Dark Mode

Erstellen Sie Layouts, die sich mit Mobile-First-Breakpoints an jeden Bildschirm anpassen, und ergänzen Sie mithilfe von CSS-Variablen und Tailwind einen ausgereiften, nutzerfreundlichen Dark Mode.

Responsive Design und Dark Mode ist eine kostenlose Next.js 15 Fullstack Web Apps-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Next.js 15 Fullstack Web Apps-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Next.js 15 Fullstack Web Apps-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Mobile-First Thinking

Responsive design means one layout that adapts to phones, tablets, and desktops. The modern approach is mobile-first: style the small screen first, then add enhancements for larger ones.

Media Queries

The CSS @media rule applies styles only above (or below) a width. Mobile-first uses min-width breakpoints.

.grid { display: block; }
@media (min-width: 768px) {
  .grid { display: grid; grid-template-columns: 1fr 1fr; }
}

Fluid Units

Prefer relative units so layouts scale naturally:

  • rem for spacing and font size
  • % and fr for widths
  • clamp() for fluid typography
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

Tailwind Breakpoints

Tailwind makes responsiveness inline with prefixes like sm:, md:, lg:. Unprefixed classes are the mobile base.

<div class="block md:grid md:grid-cols-2 lg:grid-cols-3">

Flexbox and Grid

Two layout engines cover almost everything:

  • Flexbox for one-dimensional rows or columns
  • Grid for two-dimensional layouts

Combine them and let breakpoints reflow content.

What Is Dark Mode?

Dark mode swaps a light palette for a dark one to reduce eye strain and save battery on OLED screens. A good implementation respects the user system preference and lets them override it.

System Preference

The CSS media feature prefers-color-scheme detects the OS theme so you can default to what the user already chose.

@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

CSS Variables for Theming

Define colors as CSS custom properties on the root, then override them for dark mode. Components reference variables, so a single switch repaints the whole app.

:root { --bg: #fff; --fg: #111; }
[data-theme='dark'] { --bg: #111; --fg: #eee; }
body { background: var(--bg); color: var(--fg); }

Tailwind Dark Variant

Tailwind ships a dark: variant. Toggle a dark class on the html element and dark utilities activate.

<div class="bg-white text-black dark:bg-gray-900 dark:text-white">

Persisting the Choice

Store the user choice in localStorage and apply it before paint to avoid a flash of the wrong theme. Libraries like next-themes handle this cleanly in Next.js.

const theme = localStorage.getItem('theme') || 'system';
document.documentElement.dataset.theme = theme;

Accessibility & Contrast

Whatever the theme, keep text readable. Aim for a contrast ratio of at least 4.5:1 for body text per WCAG. Test both themes; a color that works on white may fail on dark.

Quick Check

Test your responsive and theming knowledge.

Recap

You learned adaptive styling:

  • Mobile-first media queries and fluid units adapt layouts
  • Tailwind md:/lg: prefixes make breakpoints inline
  • CSS variables plus prefers-color-scheme power dark mode
  • Persist the choice and keep contrast accessible in both themes

Häufig gestellte Fragen

Ist die Lektion „Responsive Design und Dark Mode“ kostenlos?

Ja — der vollständige Text von „Responsive Design und Dark Mode“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Next.js 15 Fullstack Web Apps-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Next.js 15 Fullstack Web Apps-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Responsive Design und Dark Mode“?

Erstellen Sie Layouts, die sich mit Mobile-First-Breakpoints an jeden Bildschirm anpassen, und ergänzen Sie mithilfe von CSS-Variablen und Tailwind einen ausgereiften, nutzerfreundlichen Dark Mode. Du übst Next.js 15 Fullstack Web Apps mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Next.js 15 Fullstack Web Apps zu starten?

Keine Vorkenntnisse erforderlich. Next.js 15 Fullstack Web Apps auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Responsive Design und Dark Mode“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Next.js 15 Fullstack Web Apps-Lektion Code schreiben und ausführen?

Ja. Jede Next.js 15 Fullstack Web Apps-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. CSS-Module und globale Styles
  2. Tailwind CSS integrieren
  3. Komponentenbibliotheken und Theming
  4. Responsive Design und Dark Mode
← Zurück zu Next.js 15 Fullstack Web Apps