starred/newznab-tmux

Fork 0

mirror of https://github.com/NNTmux/newznab-tmux.git synced 2026-08-29 01:08:56 +00:00

Files

T

DariusIII 6fa9acdfbf Remove view compiled path setting from .env.example

2025-10-08 09:37:09 +02:00

6.1 KiB

Raw Blame History

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 <html> 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

Look for the theme toggle button in the bottom-left corner of the screen
Click to switch between light and dark modes
Your preference will be saved automatically

For Developers

Adding Dark Mode to New Templates

When creating new templates, use Tailwind's dark mode variant:

<!-- Basic example -->
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
    Content here
</div>

<!-- Buttons -->
<button class="bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800">
    Click me
</button>

<!-- Borders -->
<div class="border-gray-200 dark:border-gray-700">
    Content
</div>

Common Dark Mode Patterns

Cards/Containers:

<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">

Text:

<p class="text-gray-700 dark:text-gray-300">
<h1 class="text-gray-900 dark:text-gray-100">

Links:

<a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">

Backgrounds (subtle):

<div class="bg-gray-50 dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-800">

JavaScript Dynamic Content

When generating HTML dynamically in JavaScript, include dark mode classes:

html += `<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
    ${content}
</div>`;

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:

Browser console for JavaScript errors
localStorage is enabled in browser
Tailwind CSS is properly compiled
The dark class is being toggled on the <html> element

6.1 KiB Raw Blame History