01/08/2026
RentDrive Pro v3.0.2 — Dark Mode Bug Fixes & Self-Hosted Fonts
Release Date: August 1, 2026 Previous Version: 3.0.1 Requires: WordPress 6.4+, PHP 8.3+
Dark Mode — 5 Bugs Fixed
Bug 1 (Critical) — Flash of Light Mode (FOUM)
applyDarkPreference() ran inside DOMContentLoaded, which fires after the browser has already painted the first frame in the default light theme. Users with dark mode saved saw a white flash every page load.
Fix: Dark mode is now applied in an inline IIFE before any CSS or HTML renders. The .rdp-dark class is added synchronously at the very top of main.js, which is the first script to execute. The flash is gone.
Bug 2 — System prefers-color-scheme Was Completely Ignored
The theme stored a user preference in localStorage but never checked the OS dark mode setting (system-wide dark mode on macOS/Windows/Android). New visitors who had dark mode enabled system-wide saw the light theme.
Fix: When no user preference is saved, the OS setting is now respected:
js
if (window.matchMedia('(prefers-color-scheme: dark)').matches) { ... }
If a user has explicitly chosen light or dark via the toggle, their choice overrides the OS setting.
Bug 3 — OS Preference Changes at Runtime Were Not Detected
Changing macOS/Windows dark mode while the page was open had no effect.
Fix: A matchMedia listener now responds to OS preference changes in real time — but only when the user hasn't made an explicit toggle choice.
Bug 4 — Component CSS Hardcoded Light Colors (Dark Mode Leaked Through)
account.css, registration.css, and reviews.css were added after the original dark mode CSS was written, and they hardcoded light hex values ( , , , etc.) that didn't respond to dark mode at all. In dark mode: forms appeared with a white background, booking cards had a stark white fill, and error states were unreadable.
Fix: dark-mode.css rewritten from 22 lines to full component coverage — now covers all components: forms, cards, status pills, account dashboard, reviews, upload boxes, price rows, footer, hero, search console, and scrollbar. All values reference --rdp-* CSS variables consistently.
Bug 5 — Toggle Button Gave No Visual Feedback on Current State
The toggle always showed 🌙 regardless of whether dark mode was active. No aria-pressed attribute was set either, so screen readers couldn't tell the state.
Fix: The button icon now switches: 🌙 (light mode) → ☀️ (dark mode). aria-pressed is set to "true" / "false" on every toggle.
Fonts — Google Fonts API Replaced with Self-Hosted Files
The problem
All three theme fonts (Hind Siliguri, Baloo Da 2, Inter) were loaded from fonts.googleapis.com. This:
Made every page load depend on a third-party server
Sent visitor IPs to Google on every request
Broke completely in regions or environments where Google is blocked
Prevented offline/localhost testing
The fix
Fonts are now self-hosted under assets/fonts/*.woff2. A new assets/css/fonts.css declares the -face rules pointing to the theme's own files. No request is ever made to fonts.googleapis.com or fonts.gstatic.com.
fonts.css is enqueued as the first stylesheet (other sheets depend on it), replacing the dynamic Google Fonts URL builder.
The -face declarations use:
font-display: swap — body text appears immediately in a system font while the web font loads, then swaps in without blocking render.
unicode-range — the Bangla subsets (U+0980–09FE and related ranges) are split from the Latin subsets, so a page with only English text never downloads the Bangla font files and vice versa.
One-time setup required
The .woff2 files must be placed in assets/fonts/ after installation. A download helper script is included:
bash
cd wp-content/themes/rentdrive-pro
bash assets/fonts/download-fonts.sh
This script downloads all 16 files from fonts.gstatic.com (stable URLs), verifies them, and reports which were saved. It is safe to run repeatedly — files already present are skipped. If Google's URLs change in future, the script points to https://gwfh.mranftl.com/fonts (google-webfonts-helper) as an alternative.
Until the script is run, the theme falls back to system fonts gracefully (font-display: swap ensures text is always visible).
Files
assets/css/fonts.css — 16 -face declarations (Hind Siliguri, Baloo Da 2, Inter) with correct unicode-range and font-display: swap
assets/fonts/download-fonts.sh — one-time font fetcher
assets/fonts/ — target directory for .woff2 files (ships empty)
Files Changed
New Files
assets/css/fonts.css — self-hosted font face declarations
assets/fonts/download-fonts.sh — font download helper
Modified Files
assets/css/dark-mode.css — full rewrite: 22 → 130+ lines covering all components
assets/js/main.js — dark mode applied before first paint; system preference; runtime OS change listener; toggle icon + aria-pressed state
inc/enqueue.php — replaced Google Fonts API enqueue with local fonts.css
inc/performance.php — removed Google Fonts preconnect hints (no longer needed)
functions.php / style.css — version bump to 3.0.2
Backward Compatibility
Existing saved dark mode preferences in localStorage are respected.
If .woff2 files aren't downloaded yet, font-display: swap ensures readable system-font fallback immediately.
The Customizer font dropdowns (Hind Siliguri / Baloo Da 2 / Inter) still work — they now select among the self-hosted fonts instead of requesting different Google Fonts. The rdp_get_google_fonts_url() function is kept but no longer called; it's available for any code that referenced it.
Testing Checklist
Dark mode:
Hard-refresh in a dark-mode browser — NO flash of light mode
Set OS to dark mode, no saved preference → site opens in dark
Click toggle → switches to light, icon becomes 🌙, aria-pressed=false
Click again → switches to dark, icon becomes ☀️, aria-pressed=true
Change OS dark mode while page is open (no saved pref) → follows OS
After explicit toggle, OS change has no effect
Forms, cards, booking widget, account dashboard, reviews all look correct in dark
Status pills readable in dark (yellow pending, green confirmed, red cancelled)
Fonts:
Run bash assets/fonts/download-fonts.sh → 16 files saved
Bangla text renders in Hind Siliguri / Baloo Da 2 (not a system sans)
Latin text renders in Inter
Page source contains NO reference to fonts.googleapis.com
Network tab shows font requests going to the theme domain, not Google
Thank you for upgrading to RentDrive Pro v3.0.2! 🚗
https://www.rentacarbeanibazar.com/
Book reliable car rentals in Beanibazar with professional drivers. Affordable rates, airport transfers, local & long-distance travel. Reserve online today.