​
Staging Test: Theme & Settings

Test Area: Theme Toggle & User Settings
Estimated Time: 5-10 minutes
Difficulty: Easy
Prerequisites: Complete 01-authentication first

​
Overview

This guide tests the theme toggle and basic user settings:
FeatureWhat It Does
Theme ToggleSwitch between light and dark mode
Theme PersistenceYour preference is saved

​
Before You Start

​
URLs

PageURL
Loginhttps://zestamc.savibm.com/login
Dashboardhttps://zestamc.savibm.com/investor/dashboard

​
Test Accounts

RoleEmailOTP
Investortestinvestor@zestamc.comCheck email
Adminadmin@zestamc.comCheck email

​
Test Cases

​
Test 1: Find Theme Toggle

Goal: Locate the theme toggle button Steps:
  1. Log in as testinvestor@zestamc.com
  2. Look in the header/navigation area
  3. Find the theme toggle (usually a sun/moon icon)
Expected Results:
ElementWhat You Should See
LocationHeader or sidebar
IconSun (light mode) or Moon (dark mode)
Tooltip”Toggle theme” on hover (if available)
Pass Criteria: ✅ Theme toggle is visible and accessible

​
Test 2: Switch to Dark Mode

Goal: Toggle from light to dark mode Steps:
  1. If currently in light mode, click the theme toggle
  2. Observe the page
Expected Results:
ElementWhat You Should See
BackgroundChanges to dark colors
TextChanges to light colors
IconChanges to moon icon
TransitionSmooth color transition
Pass Criteria: ✅ Dark mode applies across the page

​
Test 3: Switch to Light Mode

Goal: Toggle from dark to light mode Steps:
  1. If currently in dark mode, click the theme toggle
  2. Observe the page
Expected Results:
ElementWhat You Should See
BackgroundChanges to light colors
TextChanges to dark colors
IconChanges to sun icon
Pass Criteria: ✅ Light mode applies across the page

​
Test 4: Theme Persists After Refresh

Goal: Verify theme preference is saved Steps:
  1. Set theme to dark mode
  2. Refresh the page (F5)
  3. Observe the theme
Expected Results:
CheckWhat You Should See
After refreshStill in dark mode
No flashNo brief flash of wrong theme
Pass Criteria: ✅ Theme preference persists

​
Test 5: Theme Persists After Logout/Login

Goal: Verify theme preference survives session Steps:
  1. Set theme to dark mode
  2. Log out
  3. Log back in as the same user
  4. Observe the theme
Expected Results:
CheckWhat You Should See
After loginStill in dark mode
Pass Criteria: ✅ Theme preference saved across sessions

​
Test 6: Theme Works on All Pages

Goal: Verify theme applies consistently Steps:
  1. Set a theme preference
  2. Navigate to different pages:
    • Dashboard
    • Deposits
    • Withdrawals
    • Wallets
    • Support
Expected Results:
CheckWhat You Should See
All pagesSame theme applied
No inconsistencyNo pages in wrong theme
Pass Criteria: ✅ Theme is consistent across all pages

​
Test 7: Admin Theme Toggle

Goal: Verify theme works for admin users Steps:
  1. Log in as admin@zestamc.com
  2. Find and click the theme toggle
  3. Navigate through admin pages
Expected Results:
CheckWhat You Should See
Toggle worksTheme changes
Admin pagesTheme applies to admin dashboard
ConsistencyAll admin pages use same theme
Pass Criteria: ✅ Theme works for admin users

​
Test Results Summary

TestDescriptionStatusNotes
Test 1Find Toggle⬜ Pass / ⬜ Fail
Test 2Dark Mode⬜ Pass / ⬜ Fail
Test 3Light Mode⬜ Pass / ⬜ Fail
Test 4Persist Refresh⬜ Pass / ⬜ Fail
Test 5Persist Login⬜ Pass / ⬜ Fail
Test 6All Pages⬜ Pass / ⬜ Fail
Test 7Admin Theme⬜ Pass / ⬜ Fail

​
Troubleshooting

​
Theme toggle not visible

  • Check the header area near your profile/avatar
  • Try different screen sizes (may be in a menu on mobile)

​
Theme not persisting

  • Check if cookies are enabled
  • Clear browser cache and try again
  • Theme may be stored in localStorage

​
Flash of wrong theme on load

  • This is a known issue with some browsers
  • Should be brief (< 1 second)

​
Next Steps

After completing theme testing, proceed to: Return to README.md for the full testing overview.