Dark Mode

Overview

Ficha Dubai includes a built-in dark mode toggle that allows users to switch between light and dark color schemes. The implementation uses Tailwind CSS’s dark mode utilities with class-based switching.

HTML Implementation

The dark mode is enabled at the document root level:

<!DOCTYPE html>
<html class="light" lang="es">

Code location: index.html:2

The class="light" attribute on the <html> element is the default. Changing it to class="dark" activates dark mode throughout the entire application.

Tailwind Configuration

Dark mode is configured to use class-based switching:

tailwind.config = {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        primary: "#2563eb",
        "accent-teal": "#00f5d4",
        "accent-gold": "#fbbf24",
        "background-light": "#f8fafc",
        "background-dark": "#0f172a",
        "navy-deep": "#0a1128",
      },
      // ... other config
    },
  },
};

Code location: index.html:11-34

With darkMode: "class", Tailwind applies dark mode styles when the dark class is present on the root <html> element.

Toggle Button

A floating toggle button is positioned in the bottom-left corner:

<!-- Dark Mode Toggle -->
<button class="fixed bottom-6 left-6 p-3 rounded-full bg-white dark:bg-slate-800 shadow-2xl border border-slate-200 dark:border-slate-700 z-50" onclick="document.documentElement.classList.toggle('dark')">
  <span class="material-icons-outlined block dark:hidden">dark_mode</span>
  <span class="material-icons-outlined hidden dark:block">light_mode</span>
</button>

Code location: index.html:238-241

The button displays a moon icon in light mode and a sun icon in dark mode, providing clear visual feedback about the current theme.

Toggle Functionality

The toggle works via inline JavaScript:

onclick="document.documentElement.classList.toggle('dark')"

This simple one-liner:

Targets the root <html> element (document.documentElement)
Toggles the dark class on/off
Triggers Tailwind’s dark mode styles instantly

Dark Mode CSS Classes

Throughout the HTML, elements use Tailwind’s dark: variant for dark mode styling:

Background Colors

<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 transition-colors duration-300">

Code location: index.html:70

Card Components

<section class="bg-white dark:bg-slate-800 p-4 rounded-2xl shadow-xl">

Code location: index.html:100

Text Colors

<div class="text-slate-600 dark:text-slate-400 leading-relaxed text-sm">

Code location: index.html:146

Borders

<div class="border border-slate-100 dark:border-slate-700">

Code location: index.html:141

Thumbnails

thumb.className = `thumbnail-item aspect-square rounded-md overflow-hidden bg-slate-100 dark:bg-slate-700 cursor-pointer transition ${isActive ? "ring-2 ring-primary opacity-100" : "opacity-80 hover:opacity-100"}`;

Code location: app.js:300

Custom CSS Dark Mode

The styles.css file uses a glass card effect that adapts to dark mode:

.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.dark .glass-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Code location: index.html:48-56

When using custom CSS for dark mode (not Tailwind utilities), you must manually define .dark descendant selectors.

Color Scheme

Light Mode Colors

Element	Color	Hex Code
Background	Background Light	`#f8fafc`
Surface	White	`#ffffff`
Text	Slate 900	`#0f172a`
Muted Text	Slate 600	`#475569`
Border	Slate 100	`#f1f5f9`

Dark Mode Colors

Element	Color	Hex Code
Background	Background Dark	`#0f172a`
Surface	Slate 800	`#1e293b`
Text	Slate 100	`#f1f5f9`
Muted Text	Slate 400	`#94a3b8`
Border	Slate 700	`#334155`

Transition Effects

Smooth color transitions are applied to the body element:

<body class="... transition-colors duration-300">

Code location: index.html:70 This creates a smooth 300ms fade between light and dark themes.

Component Examples

Gallery Card

<section class="bg-white dark:bg-slate-800 p-4 rounded-2xl shadow-xl">
  <!-- Gallery content -->
</section>

Effect: White background in light mode, dark slate in dark mode

Description Section

<section class="bg-white dark:bg-slate-800 p-8 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-700">
  <h3 class="text-xl font-display font-bold mb-4 flex items-center gap-2">
    <span class="material-icons-outlined text-primary">description</span>
    Descripción
  </h3>
  <div class="text-slate-600 dark:text-slate-400 leading-relaxed text-sm">
    <p id="property-description">Sin descripción</p>
  </div>
</section>

Effect: Lighter borders and darker text in dark mode

Feature Badges

span.className = "bg-slate-50 dark:bg-slate-700/50 px-4 py-2 rounded-lg text-sm text-slate-700 dark:text-slate-300 border border-slate-100 dark:border-slate-600";

Code location: app.js:467 Effect: Subtle background and border adjustments for readability

Toggle Button Styling

Light Mode Button

White background, light border, displays moon icon

Dark Mode Button

Slate-800 background, dark border, displays sun icon

Position

Fixed bottom-left corner with 6-unit margin

Z-Index

z-50 ensures button stays above all other content

Persistence

The current implementation does not persist dark mode preference across page reloads. The page always loads in light mode.

Adding Persistence

To save user preference, add this JavaScript:

// Load saved theme
if (localStorage.theme === 'dark') {
  document.documentElement.classList.add('dark');
} else {
  document.documentElement.classList.remove('dark');
}

// Save on toggle
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
  localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
}

Then update the button:

<button onclick="toggleDarkMode()" class="...">
  <!-- icons -->
</button>

Browser Support

Feature	Support
CSS Dark Mode	All modern browsers
classList.toggle	IE10+
Tailwind Dark Mode	All browsers supporting CSS custom properties
Material Icons	All browsers with web font support

Accessibility

Respects System Preference (Optional)

You can configure Tailwind to automatically follow system dark mode preference with darkMode: "media" instead of "class".

WCAG Contrast Ratios

Ensure all text maintains sufficient contrast in both light and dark modes.

Button Accessibility

Add aria-label to the toggle button for screen readers:

<button aria-label="Toggle dark mode" onclick="...">

Responsive Design - Mobile-first approach
Image Gallery - Gallery components with dark mode
Lightbox - Dark overlay for full-screen viewing

Get Started

Components

Features

Customization

Overview

HTML Implementation

Tailwind Configuration

Toggle Button

Toggle Functionality

Dark Mode CSS Classes

Background Colors

Card Components

Text Colors

Borders

Thumbnails

Custom CSS Dark Mode

Color Scheme

Light Mode Colors

Dark Mode Colors

Transition Effects

Component Examples

Gallery Card

Description Section

Feature Badges

Toggle Button Styling

Light Mode Button

Dark Mode Button

Position

Z-Index

Persistence

Adding Persistence

Browser Support

Accessibility

Build docs developers (and LLMs) love

Get Started

Components

Features

Customization

​Overview

​HTML Implementation

​Tailwind Configuration

​Toggle Button

​Toggle Functionality

​Dark Mode CSS Classes

​Background Colors

​Card Components

​Text Colors

​Borders

​Thumbnails

​Custom CSS Dark Mode

​Color Scheme

​Light Mode Colors

​Dark Mode Colors

​Transition Effects

​Component Examples

​Gallery Card

​Description Section

​Feature Badges

​Toggle Button Styling

Light Mode Button

Dark Mode Button

Position

Z-Index

​Persistence

​Adding Persistence

​Browser Support

​Accessibility

​Related Features

Build docs developers (and LLMs) love

Overview

HTML Implementation

Tailwind Configuration

Toggle Button

Toggle Functionality

Dark Mode CSS Classes

Background Colors

Card Components

Text Colors

Borders

Thumbnails

Custom CSS Dark Mode

Color Scheme

Light Mode Colors

Dark Mode Colors

Transition Effects

Component Examples

Gallery Card

Description Section

Feature Badges

Toggle Button Styling

Persistence

Adding Persistence

Browser Support

Accessibility

Related Features