A modernized WHMCS v8 client area theme based on the Twenty-One template, featuring an admin dashboard layout with a fixed left sidebar, modern styling via CSS custom properties, and dark mode toggle support.
- Template Files (.tpl): Smarty template files for WHMCS client area pages
- CSS: Custom styling using CSS custom properties for theming
- JS: Dark mode toggle + sidebar toggle functionality with localStorage persistence
- Fixed Left Sidebar (
<aside class="admin-sidebar">): 260px dark navy sidebar with logo, primary/secondary navbar rendered vertically, submenu expand/collapse - Main Wrapper (
<div class="admin-main-wrapper">): Content area offset from sidebar withmargin-left: 260pxon desktop - Sticky Top Bar (
<header class="admin-topbar-header">): Notifications, search, cart icon, dark mode toggle, user info - Mobile: Sidebar hidden off-screen, toggled via hamburger button with overlay backdrop
header.tpl- Admin sidebar layout with<aside>sidebar, sticky topbar, sidebar togglefooter.tpl- Closesadmin-main-wrapper, footer withadmin-content-paddingincludes/head.tpl- Includes custom.css and darkmode.js assetsincludes/breadcrumb.tpl- Enhanced breadcrumb with wallet balanceincludes/sidebar.tpl- Page-specific sidebar cards (unchanged structure)includes/navbar.tpl- Navigation menus (unchanged, rendered by sidebar loop)clientareahome.tpl- Dashboard tiles and panelshomepage.tpl- Homepage with icon cardslogin.tpl- Centered login card with icon header
css/custom.css- Comprehensive CSS (~900 lines) with admin sidebar, topbar, input-group fixes, cards, tiles, buttons, forms, tables, dark mode variablesjs/darkmode.js- Dark mode toggle + sidebar toggle/submenu accordion with localStorage persistencepreview.html- Static HTML preview showing full admin dashboard layout
- Class-based toggle:
.darkclass on<html>element - CSS custom properties swap all colors between light and dark palettes
- Toggle button in topbar (moon/sun icon,
#darkModeToggle) - Persists preference in localStorage (
whmcs_dark_mode) - Falls back to system color scheme preference
- Colors: Blue (#3b82f6) primary, Orange (#f48413) accent, gradient buttons
- Typography: Poppins/Inter font stack
- Sidebar: Dark navy (#0f172a) with translucent white text, orange badges
- Borders: Rounded corners with CSS variable
--radius-* - Shadows: Subtle elevation system
--shadow-sm/md/lg/xl - Transitions: Smooth color transitions on theme switch
- Input Groups: Fixed
input-group-prepend/input-group-appendalignment with matching height/border-radius
--sidebar-width: 260px- Sidebar width--topbar-height: 60px- Top bar height--bg-sidebar- Sidebar background color--bg-topbar- Topbar background color- All color, shadow, radius, and transition variables for light/dark themes
- Bootstrap 4.5.3 (provided by WHMCS)
- Font Awesome 5 (provided by WHMCS)
- Poppins & Inter Google Fonts (loaded via CDN)