newznab-tmux/PER_USER_DARK_MODE.md

Per-User Dark Mode Implementation

Overview

The dark mode/light mode switch is now per-user instead of global. Each authenticated user's theme preference is stored in the database and persists across different browsers and devices.

What Changed

1. Database Migration

• File: database/migrations/2025_10_16_101145_add_dark_mode_to_users_table.php
• Added dark_mode boolean column to the users table
• Default value: false (light mode)
• Migration has been applied successfully

2. User Model

• The dark_mode field is now part of the User model
• Users can have their own individual theme preferences

3. ProfileController

• File: app/Http/Controllers/ProfileController.php
• Added updateTheme() method to handle theme preference updates
• Accepts POST requests with dark_mode boolean value
• Validates input and saves to database
• Returns JSON response with success status

4. Routes

• File: routes/web.php
• Added new route: POST /profile/update-theme
• Route name: profile.update-theme
• Protected by isVerified middleware (authenticated users only)

5. Main Layout (User Interface)

• File: resources/views/layouts/main.blade.php
• Initialization: Theme is loaded from user's database preference for authenticated users
• Toggle Button: Sends AJAX request to backend when clicked
• Fallback: Non-authenticated users still use localStorage

6. Admin Layout

• File: resources/views/layouts/admin.blade.php

• Same behavior as main layout

• Theme preference is synchronized across both admin and user interfaces

• Informative descriptions for each theme option

Method 2: Profile Edit Page (Permanent Setting)

1. Navigate to Profile → Edit Profile
2. In the "Theme Preference" section, select either:
   • Light Mode: Bright and clean interface (sun icon)
   • Dark Mode: Easy on the eyes, especially at night (moon icon)
3. The theme changes instantly as you select (preview)
4. Click "Save Changes" to permanently save the preference
5. Theme preference applies across all devices and browsers

Synchronized Across:

• Different browsers
• Different devices
• Admin and user interfaces
• All sessions

1. When page loads, the user's dark_mode preference from database is applied immediately
2. When user clicks the theme toggle button:
   • The DOM is updated instantly (visual feedback)
   • An AJAX POST request is sent to /profile/update-theme
   • The preference is saved to the database
3. Theme preference follows the user across:
   • Different browsers
   • Different devices
   • Admin and user interfaces

For Non-Authenticated Users (Guests)

• Theme preference is stored in browser's localStorage
• Works the same as before (browser-specific)

Benefits

1. Consistency: User's theme preference is consistent across all devices
2. Persistence: Theme preference survives browser cache clearing
3. User-Specific: Each user can have their own preference
4. Seamless: No page reload required when toggling theme
5. Backward Compatible: Guest users still have dark mode functionality

API Endpoint

Update Theme Preference

POST /profile/update-theme
Content-Type: application/json
X-CSRF-TOKEN: {token}

Request Body:
{
    "dark_mode": true  // or false
}

Response (Success):
{
    "success": true,
    "dark_mode": true
}

Response (Error):
{
    "success": false,
    "message": "Error message"
}
### Quick Toggle Method

Database Schema

Profile Edit Page Method

1. Login as a user
2. Navigate to Profile → Edit Profile
3. Select a theme in the "Theme Preference" section
4. Observe instant preview - theme changes immediately
5. Click "Save Changes" to persist the setting
6. Refresh the page - theme should remain
7. Login on a different device - same theme should apply

Verify in Database

SELECT username, dark_mode FROM users WHERE id = {your_user_id};

Testing

To test the implementation:

1. Login as a user
2. Toggle dark mode using the button in bottom-left corner
3. Refresh the page - theme should persist
4. Login on a different browser - same theme should apply
5. Check database:

   SELECT username, dark_mode FROM users WHERE id = {your_user_id};
   

Rollback

If you need to rollback this feature:

php artisan migrate:rollback --step=1

This will remove the dark_mode column from the users table. You'll also need to revert the layout files to use only localStorage.

Notes

• The feature is fully implemented and ready to use
• Routes have been cached successfully
• No breaking changes to existing functionality
• Guest users retain their localStorage-based theme switching