diff --git a/.env.example b/.env.example index d249bad71..536d5299e 100644 --- a/.env.example +++ b/.env.example @@ -157,7 +157,6 @@ TRAKTTV_APIKEY= TEMP_UNRAR_PATH='/var/www/nntmux/resources/tmp/unrar/' TEMP_UNZIP_PATH='/var/www/nntmux/resources/tmp/unzip/' -VIEW_COMPILED_PATH=/var/www/NNTmux/storage/framework/views UNRAR_PATH= UNZIP_PATH= S7ZIP_PATH= diff --git a/DARK_MODE_IMPLEMENTATION.md b/DARK_MODE_IMPLEMENTATION.md new file mode 100644 index 000000000..583651add --- /dev/null +++ b/DARK_MODE_IMPLEMENTATION.md @@ -0,0 +1,206 @@ +# Dark Mode Implementation Guide + +## Overview +This document outlines the comprehensive dark/light mode implementation added to the NNTmux application. + +## What Was Implemented + +### 1. Core Dark Mode Setup + +#### Tailwind Configuration (`tailwind.config.js`) +- Enabled class-based dark mode strategy +- This allows toggling dark mode by adding/removing the `dark` class from the `` element + +#### Main Layout (`resources/views/layouts/main.blade.php`) +- Added inline script to prevent flash of unstyled content (FOUC) +- Theme preference is stored in localStorage +- Dark mode toggle button added to bottom-left corner (sun/moon icons) +- Updated all base colors to support dark variants + +### 2. Dark Mode Toggle Features +- **Toggle Button**: Fixed position button in bottom-left corner +- **Icons**: Sun icon for light mode, moon icon for dark mode +- **Persistence**: Theme preference saved to localStorage +- **Auto-load**: Theme applied before page render to prevent flashing + +### 3. Components Updated + +#### Admin Area (`resources/views/layouts/admin.blade.php`) +- Admin layout with dark mode initialization +- Admin sidebar navigation +- Top header bar with logout and "Back to Site" links +- Success/error alert messages +- Dark mode toggle button (shared with main site) + +#### Admin Menu (`resources/views/partials/admin-menu.blade.php`) +- All menu items and submenu items +- Consistent hover states +- Accordion-style menu sections + +#### Admin Dashboard (`resources/views/admin/dashboard.blade.php`) +- Statistics cards with icons +- System status section +- All badges and indicators + +#### Admin User List (`resources/views/admin/user-list.blade.php`) +- Page header with action buttons +- Search/filter form with inputs and selects +- Data table (headers and rows) +- User status badges (verified, role) +- Action buttons (edit, verify, delete) + +#### Browse Index Page (`resources/views/browse/index.blade.php`) +- Breadcrumb navigation +- Toolbar and action buttons +- Data table (headers and rows) +- Badges and status indicators +- Modals (Preview, Media Info, File List) +- Dynamically generated content in JavaScript functions + +#### Header Menu (`resources/views/partials/header-menu.blade.php`) +- Navigation bar +- Dropdown menus +- Menu items and hover states + +#### Footer (`resources/views/partials/footer.blade.php`) +- Background and borders +- Text colors and links +- Social media icons + +#### Main Layout Components +- Sidebar +- Main content area +- Success/error alert messages +- Mobile sidebar toggle + +### 4. CSS Updates (`resources/css/app.css`) +All button classes now support dark mode: +- `.btn-primary` - Blue buttons +- `.btn-secondary` - Gray buttons +- `.btn-success` - Green buttons +- `.btn-danger` - Red buttons +- `.btn-warning` - Yellow buttons +- `.btn-info` - Cyan buttons + +### 5. Color Scheme + +#### Light Mode +- Background: Gray-50 +- Cards: White +- Text: Gray-700 to Gray-900 +- Borders: Gray-200 + +#### Dark Mode +- Background: Gray-900 +- Cards: Gray-800 +- Text: Gray-100 to Gray-300 +- Borders: Gray-700 + +## How to Use + +### For End Users +1. Look for the theme toggle button in the bottom-left corner of the screen +2. Click to switch between light and dark modes +3. Your preference will be saved automatically + +### For Developers + +#### Adding Dark Mode to New Templates +When creating new templates, use Tailwind's dark mode variant: + +```blade + +
+ Content here +
+ + + + + +
+ Content +
+``` + +#### Common Dark Mode Patterns + +**Cards/Containers:** +```blade +
+``` + +**Text:** +```blade +

+

+``` + +**Links:** +```blade + +``` + +**Backgrounds (subtle):** +```blade +
+
+``` + +#### JavaScript Dynamic Content +When generating HTML dynamically in JavaScript, include dark mode classes: + +```javascript +html += `
+ ${content} +
`; +``` + +## Browser Compatibility +- All modern browsers (Chrome, Firefox, Safari, Edge) +- Internet Explorer: Not supported (uses Tailwind CSS v3) + +## Testing Checklist +- [ ] Toggle button works on all pages +- [ ] Theme preference persists after page reload +- [ ] No flash of unstyled content on page load +- [ ] All modals display correctly in both modes +- [ ] Dynamically loaded content respects current theme +- [ ] Forms and inputs are readable in both modes +- [ ] All badges and status indicators are visible + +## Remaining Templates to Update + +The following templates may need dark mode support if they haven't been updated yet: +- `resources/views/home/*` +- `resources/views/search/*` +- `resources/views/details/*` +- `resources/views/series/*` +- `resources/views/movies/*` +- `resources/views/profile/*` +- `resources/views/auth/*` + +**Admin templates** have been fully updated with dark mode support. Additional admin pages will inherit the dark mode styles from the admin layout and common patterns. + +To update remaining admin pages (like release-list, group-list, etc.), follow the same pattern used in user-list.blade.php. + +## Performance Considerations +- The inline script in the head prevents FOUC with minimal overhead +- localStorage is fast and doesn't require server requests +- CSS transitions are smooth (200ms duration) + +## Future Enhancements +- [ ] Add system preference detection (prefers-color-scheme) +- [ ] Add auto-switch based on time of day +- [ ] Add custom color themes beyond light/dark +- [ ] Add user preference storage in database for logged-in users + +## Support +If you encounter any issues with dark mode, check: +1. Browser console for JavaScript errors +2. localStorage is enabled in browser +3. Tailwind CSS is properly compiled +4. The `dark` class is being toggled on the `` element +