Building a Dark Mode Dashboard with Halfmoon
Building a Dark Mode Dashboard
Tutorial: Halfmoon CSS + TaidFrame
In this tutorial, we walk through building a complete dark mode admin dashboard using the Halfmoon CSS framework inside TaidFrame.
Step 1: Enable Halfmoon
Navigate to System → Site Template Styles → TaidFrame and select Halfmoon from the CSS Framework dropdown. Save, and your entire site now uses Halfmoon’s dark-mode-first design system.
// template.json
{
  "framework": "halfmoon",
  "darkMode": true
}
Step 2: Dashboard Layout
Halfmoon’s sidebar component makes it trivial to create a collapsible navigation panel. Combined with TaidFrame’s module positions, you get a dashboard layout with zero custom CSS.
Step 3: Card Components
Use Halfmoon’s .card classes to display stats, charts, and data tables. The built-in dark mode ensures excellent contrast ratios without any additional styling.
TaidFrame Newsletter • Unsubscribe
