0Pricing
Next.js 15 Fullstack Web Apps · Pelajaran

Desain Responsif dan Mode Gelap

Bangun tata letak yang beradaptasi dengan layar apa pun melalui breakpoint mobile-first, lalu tambahkan mode gelap yang rapi dan peka terhadap pengguna menggunakan variabel CSS dan Tailwind.

Desain Responsif dan Mode Gelap adalah pelajaran Next.js 15 Fullstack Web Apps gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack Web Apps, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Desain Responsif dan Mode Gelap” gratis?

Ya — teks lengkap “Desain Responsif dan Mode Gelap” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack Web Apps, upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Desain Responsif dan Mode Gelap”?

Bangun tata letak yang beradaptasi dengan layar apa pun melalui breakpoint mobile-first, lalu tambahkan mode gelap yang rapi dan peka terhadap pengguna menggunakan variabel CSS dan Tailwind. Kamu berlatih Next.js 15 Fullstack Web Apps dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack Web Apps?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack Web Apps di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Desain Responsif dan Mode Gelap” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack Web Apps ini?

Ya. Setiap pelajaran Next.js 15 Fullstack Web Apps menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. CSS Modules dan Gaya Global
  2. Mengintegrasikan Tailwind CSS
  3. Pustaka Komponen dan Tema
  4. Desain Responsif dan Mode Gelap
← Kembali ke Next.js 15 Fullstack Web Apps