Power Without Complexity

Welcome to TallyHub GH! This comprehensive documentation covers all features and functionalities of the platform. Whether you're setting up your first store or managing a multi-location business, this guide will help you make the most of TallyHub GH.

TallyHub GH is Ghana's #1 Inventory Management & POS System, designed to help businesses streamline operations, manage inventory, process sales, and gain valuable insights through comprehensive analytics.

Getting started with TallyHub GH is straightforward. This section covers the complete registration and onboarding process to help you set up your account and business profile.

Registration Flow

1. Registration Page (`/auth/register`)

To create your TallyHub GH account, click "Sign Up" on the landing page or navigate directly to /auth/register.

Features:

• Real-time password validation with strength indicator
• Email format validation
• Terms of Service link for review
• Automatic redirect to email verification after successful registration

2. Email Verification (`/auth/verify-email`)

After registration, you'll be automatically redirected to the email verification page. The verification process includes:

• Verification email sent to your registered email address
• Click the verification link in the email to verify your account
• Alternative option to resend verification email if needed
• Once verified, you'll proceed to the onboarding flow

3. Login Page (`/auth/login`)

Access the login page by clicking "Login" on the landing page or navigating to /auth/login.

Login Methods:

• Email/Password: Traditional login method using your registered email and password
• Magic Link: Passwordless login via email - enter your email and receive a login link

Additional Features:

• Remember me option to stay logged in
• Forgot password link for password recovery
• Two-factor authentication (if enabled in your account)
• Automatic redirect based on user role and onboarding status after login

Onboarding Flow

After email verification, you'll go through a 6-step onboarding process to set up your business. Each step can be completed at your own pace, and you can skip some steps to complete later.

Step 1: Business Profile (`/onboarding/business-profile`)

This is the first step after email verification. Here you'll set up your basic business information.

Purpose: Sets up basic business information that will be used throughout the platform. After completing this step, you'll automatically proceed to Locations setup.

Step 2: Locations Setup (`/onboarding/locations`)

Configure where your inventory will be stored. You can add multiple locations later, but you need at least one location to get started.

Purpose: Configure where inventory will be stored and managed. The default location will be used for new products unless specified otherwise. After completing this step, you'll proceed to connect your mobile app.

Step 3: Connect Mobile App (`/onboarding/connect-app`)

Link your mobile device for barcode scanning and mobile POS functionality. This step is optional and can be completed later if you prefer.

Pairing Process:

1. Download TallyHub GH mobile app from App Store (iOS) or Google Play Store (Android)
2. Open the mobile app
3. Scan the QR code displayed on the web screen, OR
4. Enter the pairing code manually if QR scanning is not available

Features:

• QR code display for easy scanning
• Manual pairing code option as alternative
• Skip option - you can complete this step later from Settings
• Multiple devices can be paired to your account

Purpose: Link mobile device for barcode scanning and mobile POS. Once paired, you can use your mobile device as a barcode scanner and process sales on the go. After connecting (or skipping), you'll proceed to import data.

Step 4: Import Data (Optional) (`/onboarding/import-data`)

Import your existing data to get started quickly. This step is optional - you can start fresh and add products manually if you prefer.

Import Options:

• Import Products: Upload a CSV file with your product data, or use the AI Tally Card Scanner
• Import Customers: Upload a CSV file with your customer data
• Skip: Start fresh and add products/customers manually

CSV Format: Ensure your CSV files follow the required format. Download sample templates from the import page if needed. After importing (or skipping), you'll proceed to tax setup.

Step 5: Tax Setup (`/onboarding/tax-setup`)

Configure tax settings for your sales. This is important for accurate pricing and reporting.

Tax Calculation Methods:

• Inclusive: Tax is included in the product price (e.g., price is GHS 100 including 12.5% VAT)
• Exclusive: Tax is added to the product price (e.g., price is GHS 100 + 12.5% VAT = GHS 112.50)

Purpose: Configure tax settings for sales. These settings will be applied to all sales transactions unless overridden. You can add more tax rates and configure tax rules later from Settings. After completing this step, you'll proceed to invite team members.

Step 6: Invite Team (`/onboarding/invite-team`)

Add team members and assign roles. This step can be skipped and completed later from Settings if you prefer to set up your account first.

Team Management Features:

• Add team members by email address
• Assign roles with predefined permissions
• Set custom permissions for each role if needed
• Invite multiple team members at once

Purpose: Set up team access and permissions. Team members will receive an email invitation with a link to join your organization. After completing this step (or skipping), you'll be redirected to the dashboard to start using TallyHub GH.

Organization Selection (`/auth/select-organization`)

If you belong to multiple organizations (e.g., you're invited to multiple businesses), you'll see an organization selection page after login.

• View list of all organizations you can access
• See your role in each organization
• Select the organization you want to enter
• Switch between organizations anytime from the user menu

The dashboard is your main control center, providing a comprehensive overview of your business performance, quick actions, and key metrics. After login, you'll be automatically redirected to the dashboard at /dashboard.

Access & Layout

• Route:/dashboard
• Access: Default landing page for authenticated users after login
• Layout: Default layout with sidebar navigation
• Permissions: Requires basic user access (all authenticated users)

Key Components

1. Stats Cards (Top Row)

Four main metrics displayed at the top of the dashboard in a row, providing immediate insights into your business performance:

Features:

• Period comparison (shows growth/decrease vs previous period)
• Color-coded trends (green for increase, red for decrease)
• Currency formatting based on your organization settings
• Click any card to view detailed breakdown and related transactions
• Real-time updates as new transactions are recorded

2. Warehouse Credit Sales Stats (Conditional)

For warehouse-type locations, additional credit sales metrics are available. This section appears below the main stats cards and can be toggled on/off.

Access: Click "Credit Sales" toggle button in the toolbar to show/hide these metrics. This feature is only available for warehouse-type locations.

3. Quick Actions Panel

One-click access to common tasks, displayed as a grid of 9 action buttons with icons and labels. Located below the stats cards for easy access.

Layout: Grid of 9 action buttons with icons and labels. Each button opens the respective page with the add/create drawer already open, saving you time and clicks.

4. Subscription Usage Panel (Toggle)

Monitor your subscription usage and limits. This panel appears on the right side of Quick Actions and can be toggled on/off.

Access: Click "Show Subscription Usage" button in the toolbar to display the panel. Click "Hide" button to hide it. This helps you monitor your usage and plan when approaching limits.

5. Sales Chart (Advanced Analytics Feature)

Interactive line chart showing sales trends over the selected period. This feature requires Growth plan or higher and appears on the left side below Quick Actions.

Chart Features:

• Line chart visualization with sales trends
• X-axis: Time periods (days/weeks/months based on selected period)
• Y-axis: Sales amount in your currency
• Interactive: Hover over data points to see exact values
• Period selector: Daily, Weekly, Monthly, Yearly, Custom Range
• Zoom and pan capabilities for detailed analysis

6. Top Selling Products Panel

Table showing top 5 products by quantity sold. This feature requires Growth plan or higher and appears on the right side below Quick Actions.

Table Columns:

• Product Image
• Product Name (with SKU)
• Total Orders (quantity sold)

Features:

• Search functionality: Click search icon to filter products
• Period filter: All Time, Today, This Week, This Month, Last Month, This Year
• Click on product row to view detailed product information
• Sorted by quantity sold (descending)

7. Top Customers Panel

Table showing top 8 customers by total spent. This feature requires Growth plan or higher and appears on the left side below the sales chart.

Table Columns:

• Customer Name
• Total Spent (currency amount)
• Total Orders (number of orders)

Features: Sorted by total spent (descending). Click on customer row to view detailed customer information, purchase history, and related data.

8. All Orders Table

Complete list of recent orders spanning 2 columns, providing comprehensive order management and tracking capabilities.

Table Columns:

• Order # (unique order number)
• Date & Time (when order was created)
• Customer Name
• Order Status (Completed, Pending, Voided, Refunded, Partially Refunded)
• Total Payment (amount paid)
• Detail (action button to view full order details)

Features:

• Pagination: 10 orders per page
• Search: Click search icon to filter by order number or customer name
• Date Period Filter: All Time, Today, This Week, This Month, Last Month, This Year
• Status Filter: All, Completed, Pending, Voided, Refunded, Partially Refunded
• Download: Export to CSV for external analysis
• Click "Detail" to view full order details, print invoice, or process returns

Access: Scroll down on the dashboard or click "View All Orders" link to navigate to the full orders page.

Toolbar Controls

The dashboard toolbar provides various controls to customize your view and access additional features:

How to Set Up Dashboard

1. Access Dashboard: Login and you'll be redirected automatically
2. Select Period: Use period selector to view different time ranges
3. Filter by Warehouse: Use warehouse dropdown to filter data (if multi-location enabled)
4. Customize View: Toggle subscription usage and credit sales panels as needed
5. Export Data: Click download button to export reports for external analysis

The POS system is a comprehensive point-of-sale interface designed for fast, efficient transactions with full offline support. It's optimized for retail environments and provides all the tools you need to process sales quickly and accurately.

Access & Requirements

• Route:/pos
• Access: Requires sales.create permission
• Layout: POS layout (full-screen optimized for efficiency)
• Keyboard Shortcuts: F1-F8 for quick navigation

Main POS Page (`/pos`)

Header Navigation

The header navigation varies based on your location type:

Additional Header Elements:

• Current user name
• Current session info (session number, start time)
• Settings icon (access POS settings)
• Notifications icon (view notifications)
• Logout option
• Online/Offline status indicator

Product Grid/List View

Located in the left/center area of the POS screen, this is where you browse and select products.

View Modes:

• Grid View: Product cards with images (default) - best for visual browsing
• List View: Compact list format - shows more products at once

Toggle: Click grid/list icon in toolbar to switch between views

Product Information Displayed:

• Product images
• Product name
• SKU/Barcode
• Price
• Stock quantity (if inventory tracking enabled)
• Category filtering
• Search functionality

Product Selection: Click product to add to cart, or scan barcode to add instantly

Category Sidebar

Located on the left side of the product area, the category sidebar helps you filter products quickly.

Features:

• List of all product categories
• "All Products" option to show everything
• Category icons for visual identification
• Product count per category
• Click category to filter products instantly

Cart Panel

Located on the right side of the POS screen, the cart panel shows all items in the current transaction.

Features:

• List of items in cart with product details
• Quantity adjustment (+/- buttons)
• Remove item option
• Price per item
• Subtotal, Tax, Total calculations (auto-updated)
• Customer selection dropdown
• Discount application (percentage or fixed amount)
• Payment method selection
• Complete sale button

Mobile: On mobile devices, cart can be toggled on/off to maximize screen space

Search Bar

Located at the top of the product area, the search bar provides quick product lookup.

Search Capabilities:

• Search by product name
• Search by SKU
• Search by barcode (auto-scans if barcode scanner connected)
• Real-time filtering as you type

Barcode Scanner Integration

TallyHub GH supports multiple barcode scanning methods for fast product lookup.

Hardware Support:

• USB Barcode Scanners: Auto-detected when connected, works immediately
• Mobile App Scanner: Via QR pairing - use your mobile device as a scanner
• Camera-based Scanning: On mobile devices - use device camera to scan barcodes

Usage: Scan barcode to add product to cart instantly. The system automatically finds the product and adds it to the current transaction.

POS Features

1. New Sale (`/pos`)

Process new sales transactions quickly and efficiently.

Steps:

1. Select products (click or scan barcode)
2. Adjust quantities using +/- buttons
3. Select customer (optional - for customer history tracking)
4. Apply discounts (if any - percentage or fixed amount)
5. Select payment method
6. Complete sale - receipt auto-prints or displays

Payment Methods Available:

• Cash
• Card (credit/debit)
• Mobile Money (MTN, Vodafone, AirtelTigo)
• Bank Transfer
• Split Payment (multiple methods - e.g., part cash, part card)

Receipt: Auto-prints if printer configured, or displays on screen for digital receipt

2. Returns (`/pos/returns`)

Process product returns and refunds efficiently. Access by clicking "Returns" in navigation or pressing F4.

Features:

• Search for original sale by order number, customer name, or date
• Select items to return (partial or full return)
• Enter reason for return (predefined or custom)
• Refund method selection (same as payment method or different)
• Partial or full return support

Process:

1. Search for original transaction
2. Select items to return
3. Enter return reason
4. Process refund - updates inventory and creates refund record

3. Dispatch (Warehouse Only) (`/pos/dispatch`)

Manage delivery/dispatch of credit sales. Available only for warehouse-type locations. Access by clicking "Dispatch" in navigation or pressing F2.

Features:

• Create dispatch orders
• Assign delivery agents
• Track dispatch status (Pending, In Transit, Delivered)
• Print dispatch notes
• Update delivery status

Process:

1. Select customer
2. Select products to dispatch
3. Assign delivery agent
4. Create dispatch order - generates dispatch note

4. Settlements (Warehouse Only) (`/pos/settlements`)

Settle credit sales with delivery agents. Available only for warehouse-type locations. Access by clicking "Settlements" in navigation or pressing F3.

Features:

• View outstanding balances per agent
• Record payments received from agents
• Track agent performance
• Generate settlement reports
• Mark sales as settled

Process:

1. Select agent
2. View outstanding sales assigned to agent
3. Record payment received
4. Mark as settled - updates accounts

5. Dispatch History (Warehouse Only) (`/pos/dispatch-history`)

View historical dispatch records. Available only for warehouse-type locations. Access by clicking "History" in navigation or pressing F6.

Features:

• Filter by date range
• Filter by agent
• Filter by status (Pending, In Transit, Delivered, Cancelled)
• Export reports to CSV
• View detailed dispatch information

6. Customers (`/pos/customers`)

Manage customers directly from POS. Access by clicking "Customers" in navigation or pressing F5.

Features:

• Search customers by name, phone, or email
• View customer details
• View purchase history
• Add new customer quickly (minimal fields)
• Apply customer to current sale

7. Reports (`/pos/reports`)

View POS-specific reports. Access by clicking "Reports" in navigation or pressing F7.

Report Types:

• Sales Summary (overview of sales)
• Sales by Hour (hourly breakdown)
• Top Products (best sellers)
• Top Customers (highest spenders)
• Payment Method Breakdown (cash vs card vs mobile money)
• Revenue Trends (sales trends over time)

8. Session Management (`/pos/session`)

Manage POS sessions for cash reconciliation and reporting. Access by clicking "Session" in navigation or pressing F8.

Features:

• Start new session (beginning of shift)
• End current session (end of shift)
• View session summary (sales, transactions, cash)
• Cash reconciliation (compare expected vs actual cash)
• View session transactions (all transactions in session)
• Print Z-report (end-of-day summary)

POS Settings

Access POS settings by clicking the settings icon in the POS header. Configure various aspects of your POS system:

Offline Mode

One of TallyHub GH's most powerful features - the POS works completely offline when internet is unavailable.

Features:

• Automatic: POS automatically switches to offline mode when internet is unavailable
• All POS Functions Available: Process sales, returns, view products, everything works offline
• Transactions Queued: All transactions are saved locally and queued for sync
• Auto-sync: When connection is restored, transactions automatically sync to server

Indicator: Shows offline/online status in header so you always know your connection status

How to Set Up POS

1. Start Session: Click "Session" → "Start New Session" to begin
2. Configure Settings: Click settings icon → Configure receipt, hardware, etc.
3. Connect Hardware:
   • Connect receipt printer (USB/Network)
   • Connect barcode scanner (USB)
   • Pair mobile app for mobile scanning
4. Test Transaction: Process a test sale to ensure everything works
5. Configure Receipt: Customize receipt template in settings to match your brand

The sales management module handles all sales-related operations including customers, orders, invoices, payments, and returns. Access it at /sales.

Sub-modules

1. Customers

Manage your customer database at /sales/customers. Add, edit, view, and delete customers. View customer details including orders, invoices, payments, and returns history.

2. Sales Orders

View and manage sales orders at /sales/orders. View order details, update status, and print invoices. Filter by date range, status, customer, and search by order number.

3. Invoices

Create and manage sales invoices at /sales/invoices. Generate invoices, send to customers via email, track payments, and manage invoice statuses (Draft, Sent, Paid, Overdue, Cancelled).

4. Payments

Record and track customer payments at /sales/payments. Record payments, match to invoices, and track outstanding balances.

5. Returns

Process product returns and refunds at /sales/returns. Create returns, process refunds, and track return reasons.

The purchases module handles supplier management, purchase orders, goods receipts, and supplier bills. Access it at /purchases.

Sub-modules

1. Suppliers

Manage supplier database at /purchases/suppliers. Add, edit, view suppliers, and track supplier performance.

2. Purchase Orders

Create and manage purchase orders at /purchases/orders. Create POs, send to suppliers, track order status, and convert to goods receipt when received.

3. Goods Receipts

Record received goods at /purchases/receipts. Receive goods, update inventory automatically, and match to purchase orders.

4. Supplier Bills

Record and manage supplier bills/invoices at /purchases/bills. Record bills, track payments, and manage accounts payable.

The inventory module provides comprehensive stock management including stock levels, adjustments, transfers, counts, and transactions. Access it at /inventory.

Sub-modules

1. Stock

View and manage current stock levels at /inventory/stock. View stock by location, low stock alerts, and stock valuation.

2. Adjustments

Adjust stock levels at /inventory/adjustments. Increase or decrease stock for corrections, damage, loss, or found stock.

3. Transfers

Transfer stock between locations at /inventory/transfers. Create transfers, track transfer status, and auto-update stock at source and destination.

4. Stock Counts

Perform physical stock counts/audits at /inventory/counts. Schedule counts, record count results, and generate variance reports.

5. Transactions

View all inventory movement history at /inventory/transactions. Complete audit trail of all stock movements.

6. Locations

Manage warehouses and locations at /inventory/locations. Add, edit, view locations, and set default location.

The catalog module manages products, categories, brands, variants, and pricing. Access it at /catalog.

Sub-modules

1. Products

Manage product catalog at /catalog/products. Add, edit, delete products, manage product details, images, pricing, and variants.

2. Categories

Organize products into categories at /catalog/categories. Hierarchical categories with drag-and-drop reordering.

3. Brands

Manage product brands at /catalog/brands. Add brand logos, descriptions, and website links.

4. Variants

Manage product variants (size, color, etc.) at /catalog/variants. Create variant attributes and assign to products.

5. Pricing

Manage pricing rules and location-based pricing at /catalog/pricing. Set different prices per location, bulk price updates, and customer group pricing.

The reports module provides comprehensive business analytics and reporting capabilities. Access it at /reports.

Report Types

Sales Reports

Sales summary, sales detail, sales by product, and sales by customer reports with date range selection and export options.

Inventory Reports

Stock levels, stock movement, inventory valuation, and aging analysis reports.

Financial Reports

Profit & Loss, Balance Sheet, Cash Flow, and Expense reports.

Customer Reports

Customer overview, customer analytics, customer segmentation, and cohort analysis.

Product Reports

Product performance and product analysis reports showing fast-moving vs slow-moving products.

Common Features

• Date Range Selection: Daily, Weekly, Monthly, Yearly, Custom Range
• Filters: Warehouse, Category, Customer, Product, Status
• Export Options: PDF, Excel, CSV
• Scheduling: Schedule reports to be generated automatically
• Sharing: Share reports with team members

The settings module allows configuration of organization, user preferences, security, billing, and system settings. Access it at /settings.

Sub-modules

1. Profile

Manage personal user profile, update information, change password, and manage preferences (theme, language, timezone, notifications).

2. Organization

Configure organization settings (requires Owner role). Includes organization profile, system preferences, statistics, and activity log.

3. Locations

Manage business locations/warehouses, add/edit/delete locations, and set default location.

4. Team

Manage team members and roles. Invite users, assign roles (Owner, Manager, Cashier, Storekeeper, Accountant, Auditor), and manage permissions.

5. Security

Configure security settings including session timeout, two-factor authentication, password policy, lockout policy, audit logging, and IP whitelist. View active sessions, trusted devices, security events, and configure security alerts.

6. Tax & Discount

Configure tax rates and discount rules. Add multiple tax rates, set discount rules with validity periods, and manage applicable products/categories.

7. Billing

Manage subscription and billing (requires Owner role). View current plan, upgrade/downgrade plans, manage payment methods, view invoices, and track usage.

TallyHub GH offers flexible pricing plans designed to scale with your business. Choose from our standard plans or build a custom plan tailored to your specific needs.

Standard Plans

Add-ons

Enhance your plan with additional features and resources.

Special Plans

Exclusive offers and discounts for specific user groups.

Billing Management

View Current Plan

Access billing information at Settings → Billing to view current plan, features, usage statistics, billing cycle, and next billing date.

Upgrade/Downgrade Plan

Upgrade or downgrade your plan from Settings → Billing. Upgrades take effect immediately with proration, while downgrades take effect at the end of the current billing cycle.

Payment Methods

Supported payment methods include Mobile Money (MTN, Vodafone, AirtelTigo), Credit/Debit Card (Visa/Mastercard), Bank Transfer, and other options depending on your plan. Add and manage payment methods from Settings → Billing → Payment Methods.

Usage Tracking

Track usage for Users, Locations, Products, Transactions, and Storage. View usage statistics on the Dashboard or Settings → Billing with visual progress bars showing current usage vs plan limits.

Custom Plan Builder

Need a plan that doesn't fit our standard offerings? Use our Custom Plan Builder on the pricing page to design your perfect plan. Adjust locations, users, products, and add advanced features to create a plan tailored to your business needs.

The admin dashboard is for platform administrators to manage tenants, subscriptions, users, and system-wide settings. Access it at /admin (requires admin role).

Main Sections

Dashboard

Overview metrics including total tenants, active subscriptions, total revenue, and new signups. Charts showing signups over time, revenue trends, and plan distribution.

Subscriptions

Manage all tenant subscriptions, view subscription details, and manage subscription statuses.

Tenants

View and manage all tenants/organizations, view tenant details, and manage tenant statuses.

Users

View all users across all tenants, manage user accounts, and view user activity.

Billing

Overview of revenue metrics, all tenant invoices, payment transactions, and payment methods.

Analytics

Platform-wide analytics including tenant growth, revenue trends, plan distribution, geographic distribution, conversion rates, and churn analysis.

Settings

System settings including application name and branding, default currency, supported countries, feature flags, maintenance mode, email settings, payment settings, and plan configuration.

Security

System-wide security policies, IP whitelisting, audit logging, and security events monitoring.

TallyHub GH includes mobile app integration for iOS and Android devices, enabling mobile POS, barcode scanning, and on-the-go inventory management.

Features

• Mobile POS: Process sales on mobile devices
• Barcode Scanning: Scan products using device camera
• Inventory Management: View and update stock levels
• Offline Mode: Work without internet, sync when connected
• Push Notifications: Real-time alerts and notifications

Setup Process

Step 1: Download Mobile App

Download the TallyHub GH mobile app from the App Store (iOS) or Google Play Store (Android). Alternatively, use the Progressive Web App (PWA) by installing from your browser.

Step 2: Pair Device

Pair your device using one of two methods:

• QR Code: Open web app → Settings → Mobile App → Click "Pair New Device" → Scan QR code with mobile app
• Pairing Code: Generate pairing code on web app → Enter code in mobile app

Step 3: Configure Mobile App

Grant camera permission for barcode scanning, enable push notifications, and configure offline data sync.

Mobile App Features

POS Mode

Product selection, barcode scanning, cart management, payment processing, and receipt generation.

Inventory Mode

View stock levels, stock adjustments, stock transfers, and stock counts.

Reports Mode

View reports, export reports, and access dashboard view.

TallyHub GH offers a comprehensive theme system with 32 beautiful themes to customize your experience. Choose from 19 light themes and 13 dark themes to match your preference and style.

Overview

Themes allow you to personalize the appearance of TallyHub GH across all pages. Each theme includes carefully crafted color palettes that affect the entire interface, including buttons, backgrounds, text colors, and accent colors.

How to Change Themes on Landing Page

Changing themes on the landing page is simple and can be done in two ways:

Method 1: Quick Theme Toggle

The quickest way to switch between light and dark themes:

1. Look for the sun/moon icon button in the top navigation bar (header)
2. Click the button to toggle between light and dark themes
3. The theme changes instantly across the entire application
4. Your preference is automatically saved

Method 2: Theme Switcher Dropdown

Access the full theme selection menu:

1. Look for the "Theme" button with a color swatch icon in the top navigation bar
2. Click the button to open the theme dropdown menu
3. Browse through available themes organized by type:
   • Light Themes section (19 options)
   • Dark Themes section (13 options)
4. Click on any theme to apply it immediately
5. The selected theme is highlighted with a checkmark

Available Themes

Light Themes (19 themes)

Perfect for daytime use and bright environments:

Dark Themes (13 themes)

Ideal for low-light environments and reducing eye strain:

Theme Features

Automatic Persistence

Your theme preference is automatically saved and persists across sessions:

• Theme is saved in browser cookies
• Cookie expires after 1 year
• Theme is applied immediately on page load
• No need to re-select your theme each visit

Instant Application

Themes are applied instantly without page reload:

• No page refresh required
• Smooth transitions between themes
• Applied across all pages immediately
• Works on both landing page and authenticated pages

Theme Preview

In the theme switcher dropdown, each theme shows a preview:

• Color swatch showing primary colors
• Visual preview of theme colors
• Active theme marked with checkmark
• Theme name and description displayed

Where Themes Are Available

Themes can be changed from multiple locations:

• Landing Page: Header navigation bar (top right)
• Dashboard: Header navigation bar
• All Pages: Theme controls available in header
• Settings Page: Can also be changed from user settings (if available)

Theme Components

Quick Theme Toggle

A simple button that toggles between light and dark themes:

• Shows sun icon when dark theme is active
• Shows moon icon when light theme is active
• Quick toggle between Winter (light) and Deep Space (dark)
• Located next to the full theme switcher

Theme Switcher

Full theme selection dropdown menu:

• Dropdown format for compact display
• Organized by light and dark themes
• Shows all 32 available themes
• Visual preview for each theme
• Active theme clearly marked

Technical Details

How Themes Work

Themes are implemented using CSS custom properties and data attributes:

• Theme ID is stored as data-theme attribute on HTML element
• CSS variables are dynamically updated based on theme
• Theme plugin applies theme on page load
• Theme composable manages theme state and persistence

Default Theme

The default theme is Night (a dark theme). This is applied when:

• No theme cookie exists (first-time visitor)
• Theme cookie is invalid or expired
• Theme preference hasn't been set yet

Best Practices

• Choose based on environment: Light themes for bright offices, dark themes for low-light conditions
• Consider eye strain: Dark themes reduce eye strain in low-light environments
• Match your brand: Select themes that align with your business aesthetic
• Test different themes: Try multiple themes to find your preference
• Theme consistency: Your theme preference applies across all pages