JSTAcademy
0 XP
Dashboard
Crash Courses
Dark Mode & Color Themes
10 min
Basic+150 XP
Crash Courses · Basic

Dark Mode & Color Themes

Implement dark mode and custom color palettes using Tailwind's theming system.
10 min read+150 XP on completionCert: Tailwind CSS Crash Course
Tap any word in the text below to start reading from there.

Dark Mode & Color Themes

Tailwind makes dark mode a one-line prefix. Custom color tokens let you use your brand palette as utility classes.

Dark Mode Setup

// tailwind.config.ts
export default {
  darkMode: 'class',  // toggle via class="dark" on html
  // ...
}

// app/layout.tsx â€" add class to html
<html lang="en" className={isDark ? 'dark' : ''}>

Dark Mode Classes

<div className="
  bg-white text-gray-900
  dark:bg-gray-900 dark:text-gray-100
">
  <h1 className="text-2xl font-bold dark:text-white">
    Course Title
  </h1>
  <p className="text-gray-600 dark:text-gray-400">
    Module description
  </p>
  <button className="
    bg-amber-500 hover:bg-amber-600
    dark:bg-amber-400 dark:hover:bg-amber-300
    text-white dark:text-gray-900
    px-4 py-2 rounded-lg
  ">
    Start Course
  </button>
</div>

Custom Color Palette

// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#fffbeb',
          100: '#fef3c7',
          500: '#f59e0b',
          600: '#d97706',
          700: '#b45309',
          900: '#78350f',
        },
        crash: '#f59e0b',
      },
    },
  },
} satisfies Config

// Usage
<div className="bg-brand-500 text-brand-50 dark:bg-brand-700">
<span className="text-crash">Crash Course</span>

Opacity Modifier

<div className="bg-black/50">         {/* background-color: rgba(0,0,0,0.5) */}
<div className="text-white/80">       {/* color: rgba(255,255,255,0.8) */}
<div className="border-gray-200/60">  {/* border with 60% opacity */}
<div className="bg-brand-500/20">     {/* custom color with opacity */}
0%