<div align="center">
# 🎨 Django Spectra
**A Modern, Beautiful, and Highly Customizable Django Admin Theme**
[](https://www.python.org/downloads/)
[](https://www.djangoproject.com/)
[](LICENSE)
[](https://github.com/psf/black)
Transform your Django admin interface into a stunning, modern dashboard with smooth theme switching, customizable widgets, and beautiful UI components — inspired by the best of Baton and Jazzmin, but cleaner and easier to use.
[Features](#-features) • [Installation](#-installation) • [Quick Start](#-quick-start) • [Configuration](#-configuration) • [Widgets](#-dashboard-widgets) • [Customization](#-customization) • [Screenshots](#-screenshots)
</div>
---
## ✨ Features
### 🎯 Core Features
- ✅ **Modern UI Design** - Beautiful, clean interface with professional aesthetics
- 🌓 **Light & Dark Themes** - Seamless theme switching with smooth transitions
- 📊 **Dashboard Widgets** - Rich collection of pre-built, customizable widgets
- ⚙️ **Simple Configuration** - Easy setup via `SPECTRA_CONFIG` in settings
- 🔌 **Extensible Plugin System** - Create custom widgets with ease
- 📱 **Fully Responsive** - Mobile-first design that works on all devices
- 🎨 **Customizable Colors** - Complete control over theme colors
- 🚀 **Django 5+ Compatible** - Works with Django 4.2, 5.0, and newer
- 📈 **Charts & Analytics** - Built-in Chart.js integration for data visualization
- ⚡ **Zero Heavy Dependencies** - Pure CSS and vanilla JavaScript
- ♿ **Accessible** - WCAG compliant with keyboard navigation support
- 🔒 **Secure** - Follows Django security best practices
### 🎁 Built-in Widgets
- **Statistics Widget** - Display key metrics with modern stat cards
- **Recent Actions** - Beautiful activity feed with icons and timestamps
- **Activity Chart** - Interactive line charts with theme-aware styling
- **Welcome Widget** - Personalized greeting for users
- **Quick Links** - Easy access to frequently used admin pages
- **Model Statistics** - Overview of your database models
### 🎨 Design Highlights
- **Smooth Animations** - Delightful transitions and micro-interactions
- **Modern Typography** - Carefully selected font stack for readability
- **Consistent Spacing** - CSS variables for perfect visual rhythm
- **Beautiful Shadows** - Subtle depth with modern shadow system
- **Rounded Corners** - Soft, friendly interface elements
- **Hover States** - Clear visual feedback on interactive elements
---
## 📦 Installation
### Using pip
```bash
pip install django-spectra
```
### From source
```bash
git clone https://github.com/sundaradh/django-spectra.git
cd django-spectra
pip install -e .
```
---
## 🚀 Quick Start
### 1. Add to Installed Apps
Add `spectra` to your `INSTALLED_APPS` **before** `django.contrib.admin`:
```python
# settings.py### From Source (Development)
```bash
git clone https://github.com/sundaradh/django-spectra.git
cd django-spectra
pip install -e .
```
---
## 🚀 Quick Start
### 1. Add to INSTALLED_APPS
Add `spectra` **before** `django.contrib.admin` in your `settings.py`:
```python
INSTALLED_APPS = [
'spectra', # ⚠️ Must be BEFORE django.contrib.admin
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
# ... your other apps
]
```
### 2. Add Context Processor
Add the Spectra context processor to your templates:
```python
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
'spectra.context_processors.spectra_context', # ✅ Add this
],
},
},
]
```
### 3. Add Middleware (Optional but Recommended)
For persistent theme preferences across sessions:
```python
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'spectra.middleware.SpectraThemeMiddleware', # ✅ Add this
]
```
### 4. Include Spectra URLs (Optional)
For API endpoints (theme preferences, etc.):
```python
# urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('admin/spectra/', include('spectra.urls')), # ✅ Add this
# ... your other URLs
]
```
### 5. Collect Static Files
```bash
python manage.py collectstatic
```
### 6. Run Your Server
```bash
python manage.py runserver
```
Visit `http://localhost:8000/admin/` and enjoy your new modern admin interface! 🎉
---
## ⚙️ Configuration
### Basic Configuration
Add a `SPECTRA_CONFIG` dictionary to your `settings.py`:
```python
SPECTRA_CONFIG = {
# Branding
"site_title": "My Awesome Site",
"site_header": "My Admin Dashboard",
"logo": "images/logo.png", # Path to your logo in static files
"favicon": "images/favicon.ico",
# Theme
"theme": "light", # Default theme: 'light' or 'dark'
"enable_dark_mode": True,
"enable_theme_toggle": True,
# Dashboard
"show_app_list": True,
"show_recent_actions": True,
"recent_actions_limit": 10,
}
```
### Advanced Configuration
Here's a complete configuration example with all available options:
```python
SPECTRA_CONFIG = {
# ===== Branding =====
"site_title": "Django Spectra",
"site_header": "Django Spectra Administration",
"index_title": "Dashboard",
"logo": "images/logo.png",
"favicon": "images/favicon.ico",
"copyright": "© 2025 Your Company",
# ===== Theme Settings =====
"theme": "light", # 'light' or 'dark'
"enable_dark_mode": True,
"enable_theme_toggle": True,
"theme_colors": {
"primary": "#6366f1",
"primary_hover": "#4f46e5",
"secondary": "#10b981",
"secondary_hover": "#059669",
"accent": "#f59e0b",
"danger": "#ef4444",
"success": "#10b981",
"warning": "#f59e0b",
"info": "#3b82f6",
},
# ===== Dashboard =====
"show_app_list": True,
"show_recent_actions": True,
"show_add_button": True,
"welcome_message": "Welcome back to your dashboard",
# ===== Dashboard Widgets =====
"dashboard_widgets": [
{
"widget": "spectra.widgets.StatsWidget",
"width": "w-full",
"order": 1
},
{
"widget": "spectra.widgets.ActivityChartWidget",
"width": "lg:w-2/3",
"order": 2
},
{
"widget": "spectra.widgets.RecentActionsWidget",
"width": "lg:w-1/3",
"order": 3
},
],
# ===== Widget Settings =====
"recent_actions_limit": 10,
"stats_refresh_interval": 300, # seconds
"chart_default_period": 30, # days
"enable_charts": True,
# ===== Customization =====
"custom_css": [
"css/custom-admin.css",
],
"custom_js": [
"js/custom-admin.js",
],
# ===== Advanced =====
"enable_api": False,
"cache_timeout": 300,
"debug_mode": False,
}
```
### Widget Width Classes
Widgets support responsive width classes:
- `w-full` - Full width (100%)
- `md:w-1/2` - Half width on medium screens and up
- `lg:w-1/3` - One third width on large screens
- `lg:w-2/3` - Two thirds width on large screens
Example:
```python
"dashboard_widgets": [
{
"widget": "spectra.widgets.StatsWidget",
"width": "w-full", # Full width
"order": 1
},
{
"widget": "spectra.widgets.ActivityChartWidget",
"width": "lg:w-2/3", # 2/3 width on large screens
"order": 2
},
{
"widget": "spectra.widgets.RecentActionsWidget",
"width": "lg:w-1/3", # 1/3 width on large screens
"order": 3
},
]
```
---
## 📊 Dashboard Widgets
### Built-in Widgets
#### StatsWidget
Displays key statistics in beautiful cards with gradient backgrounds.
```python
from spectra.widgets import StatsWidget
class CustomStatsWidget(StatsWidget):
name = "System Statistics"
def get_context_data(self, request):
context = super().get_context_data(request)
# Customize stats here
return context
```
#### RecentActionsWidget
Shows recent admin actions with icons and user information.
```python
SPECTRA_CONFIG = {
"recent_actions_limit": 15, # Show last 15 actions
}
```
#### ActivityChartWidget
Interactive line chart showing admin activity over time using Chart.js.
```python
SPECTRA_CONFIG = {
"chart_default_period": 30, # Show last 30 days
"enable_charts": True,
}
```
### Creating Custom Widgets
Create your own widgets by extending `BaseWidget`:
```python
# myapp/widgets.py
from spectra.plugins import BaseWidget, register_widget
from django.utils.translation import gettext_lazy as _
@register_widget
class MyCustomWidget(BaseWidget):
"""My custom dashboard widget"""
name = _("My Widget")
template = "myapp/widgets/my_widget.html"
icon = "chart-bar" # Icon name
order = 10 # Display order
width = "lg:w-1/2" # Responsive width
def get_context_data(self, request):
context = super().get_context_data(request)
# Add your custom data
context['my_data'] = self.get_my_data()
return context
def get_my_data(self):
# Your custom logic here
return {"count": 42, "message": "Hello World"}
```
Then create your template:
```html
<!-- myapp/templates/myapp/widgets/my_widget.html -->
{% load i18n %}
<div class="spectra-widget">
<div class="widget-header">
<h3 class="widget-title">
<svg class="widget-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="20" x2="12" y2="10"></line>
<line x1="18" y1="20" x2="18" y2="4"></line>
<line x1="6" y1="20" x2="6" y2="16"></line>
</svg>
{{ name }}
</h3>
</div>
<div class="widget-body">
<p>{{ my_data.message }}</p>
<div class="stat-value">{{ my_data.count }}</div>
</div>
</div>
```
Register your widget in `SPECTRA_CONFIG`:
```python
SPECTRA_CONFIG = {
"dashboard_widgets": [
{
"widget": "myapp.widgets.MyCustomWidget",
"width": "lg:w-1/2",
"order": 5
},
],
}
```
---
## 🎨 Customization
### Custom CSS
Add your own styles:
1. Create `static/css/custom-admin.css`:
```css
/* Custom color overrides */
:root {
--spectra-primary: #8b5cf6; /* Purple */
--spectra-secondary: #14b8a6; /* Teal */
}
/* Custom widget styling */
.my-custom-widget {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
```
2. Add to configuration:
```python
SPECTRA_CONFIG = {
"custom_css": ["css/custom-admin.css"],
}
```
### Custom JavaScript
Add custom functionality:
1. Create `static/js/custom-admin.js`:
```javascript
// Custom admin enhancements
document.addEventListener('DOMContentLoaded', function() {
console.log('Custom admin script loaded');
// Listen for theme changes
window.addEventListener('spectra:themeChanged', function(e) {
console.log('Theme changed to:', e.detail.theme);
});
});
```
2. Add to configuration:
```python
SPECTRA_CONFIG = {
"custom_js": ["js/custom-admin.js"],
}
```
### Theming API
Control the theme programmatically:
```javascript
// Get current theme
const currentTheme = window.Spectra.theme.get();
// Set theme
window.Spectra.theme.set('dark');
// Toggle theme
window.Spectra.theme.toggle();
// Trigger custom theme change (without transition)
window.dispatchEvent(new CustomEvent('spectra:setTheme', {
detail: { theme: 'light', withTransition: false }
}));
```
---
## 📸 Screenshots
### Light Theme
*Beautiful, clean light mode with modern UI elements*
### Dark Theme
*Elegant dark mode with carefully tuned colors*
### Dashboard Widgets
*Customizable dashboard with stats, charts, and activity feed*
### Mobile Responsive
*Fully responsive design works perfectly on all devices*
---
## 🔧 Advanced Usage
### Caching Dashboard Data
Improve performance by caching expensive widget data:
```python
from django.core.cache import cache
from spectra.plugins import BaseWidget
class CachedStatsWidget(BaseWidget):
def get_context_data(self, request):
cache_key = f'stats_widget_{request.user.id}'
context = cache.get(cache_key)
if context is None:
context = super().get_context_data(request)
# Expensive calculation here
context['stats'] = self.calculate_stats()
cache.set(cache_key, context, 300) # Cache for 5 minutes
return context
```
### Permission-Based Widgets
Show widgets only to specific users:
```python
class AdminOnlyWidget(BaseWidget):
def is_visible(self, request):
return request.user.is_superuser
```
### Async Widgets
Load widget data asynchronously:
```python
# widget.html
<div class="spectra-widget" data-widget-url="{% url 'myapp:widget_data' %}">
<div class="loading">Loading...</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const widget = document.querySelector('[data-widget-url]');
fetch(widget.dataset.widgetUrl)
.then(response => response.json())
.then(data => {
widget.innerHTML = data.html;
});
});
</script>
```
---
## 🤝 Contributing
We love contributions! Here's how you can help:
1. **Report Bugs** - Open an issue with details
2. **Suggest Features** - Share your ideas
3. **Submit Pull Requests** - Fix bugs or add features
4. **Improve Documentation** - Help others understand Spectra
5. **Share** - Star the repo and tell others
### Development Setup
```bash
# Clone the repository
git clone https://github.com/sundaradh/django-spectra.git
cd django-spectra
# Create virtual environment
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
# Install development dependencies
pip install -e ".[dev]"
# Run tests
python manage.py test
# Run example project
cd example_project
python manage.py migrate
python manage.py createsuperuser
python manage.py runserver
```
---
## 📄 License
Django Spectra is released under the MIT License. See [LICENSE](LICENSE) file for details.
---
## 🙏 Acknowledgments
Django Spectra is inspired by:
- [Baton](https://github.com/otto-torino/django-baton) - Innovative admin customization
- [Jazzmin](https://github.com/farridav/django-jazzmin) - Beautiful theme system
- [Tailwind CSS](https://tailwindcss.com/) - Design system inspiration
- [Chart.js](https://www.chartjs.org/) - Chart visualization
---
## 📞 Support
- **Documentation**: [Full Docs](#)
- **Issues**: [GitHub Issues](https://github.com/sundaradh/django-spectra/issues)
- **Discussions**: [GitHub Discussions](https://github.com/sundaradh/django-spectra/discussions)
- **Email**: abcsundaradhikari123@gmail.com
---
<div align="center">
**Made with ❤️ by the Django Spectra Team**
[⭐ Star on GitHub](https://github.com/sundaradh/django-spectra) • [🐦 Follow on Twitter](https://twitter.com/django_spectra) • [📧 Subscribe to Newsletter](#)
</div>
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `theme` | `str` | `'light'` | Default theme (`'light'` or `'dark'`) |
| `site_title` | `str` | `'Django Spectra'` | Browser tab title |
| `site_header` | `str` | `'Django Spectra Administration'` | Header text |
| `index_title` | `str` | `'Dashboard'` | Dashboard page title |
| `logo` | `str` | `None` | Logo image path |
| `favicon` | `str` | `None` | Favicon path |
| `sidebar_collapsed` | `bool` | `False` | Default sidebar state |
| `navigation_expanded` | `bool` | `True` | Navigation menu state |
| `show_app_list` | `bool` | `True` | Show app list on dashboard |
| `show_recent_actions` | `bool` | `True` | Show recent actions |
| `dashboard_widgets` | `list` | See above | List of widget class paths |
| `theme_colors` | `dict` | See above | Custom color scheme |
| `custom_css` | `list` | `[]` | Custom CSS files |
| `custom_js` | `list` | `[]` | Custom JavaScript files |
---
## 📊 Dashboard Widgets
### Built-in Widgets
Django Spectra includes several pre-built widgets:
#### 1. **WelcomeWidget**
Displays a personalized greeting to the logged-in user.
#### 2. **StatsWidget**
Shows key statistics (total users, active users, staff count, etc.)
#### 3. **RecentActionsWidget**
Lists recent admin actions with color-coded indicators.
#### 4. **QuickLinksWidget**
Provides shortcuts to frequently accessed admin pages.
#### 5. **ActivityChartWidget**
Visualizes admin activity over time using Chart.js.
#### 6. **ModelStatsWidget**
Shows object counts for each registered model.
### Creating Custom Widgets
Create your own dashboard widgets by subclassing `BaseWidget`:
```python
# myapp/widgets.py
from spectra.plugins import BaseWidget, register_widget
from django.utils.translation import gettext_lazy as _
@register_widget
class ServerStatusWidget(BaseWidget):
"""Display server status information."""
name = _("Server Status")
template = "myapp/widgets/server_status.html"
icon = "server"
order = 10
width = "w-full lg:w-1/2"
def get_context_data(self, request):
context = super().get_context_data(request)
# Add your custom data
context['cpu_usage'] = self.get_cpu_usage()
context['memory_usage'] = self.get_memory_usage()
context['disk_usage'] = self.get_disk_usage()
return context
def get_cpu_usage(self):
# Your logic here
return 45.2
def get_memory_usage(self):
return 62.8
def get_disk_usage(self):
return 38.5
def has_permission(self, request):
# Only show to superusers
return request.user.is_superuser
```
Create the template:
```html
<!-- myapp/templates/myapp/widgets/server_status.html -->
{% load i18n %}
<div class="spectra-widget server-status-widget">
<div class="widget-header">
<h3 class="widget-title">
<span class="widget-icon">🖥️</span>
{{ name }}
</h3>
</div>
<div class="widget-content">
<div class="status-grid">
<div class="status-item">
<span class="status-label">{% trans "CPU Usage" %}</span>
<span class="status-value">{{ cpu_usage }}%</span>
</div>
<div class="status-item">
<span class="status-label">{% trans "Memory Usage" %}</span>
<span class="status-value">{{ memory_usage }}%</span>
</div>
<div class="status-item">
<span class="status-label">{% trans "Disk Usage" %}</span>
<span class="status-value">{{ disk_usage }}%</span>
</div>
</div>
</div>
</div>
```
Add to your configuration:
```python
SPECTRA_CONFIG = {
'dashboard_widgets': [
'myapp.widgets.ServerStatusWidget',
# ... other widgets
],
}
```
---
## 🎨 Theming
### Using Built-in Themes
Switch themes dynamically using the theme toggle button in the admin interface, or set a default in your configuration:
```python
SPECTRA_CONFIG = {
'theme': 'dark', # or 'light'
}
```
### Customizing Colors
Customize the color scheme to match your brand:
```python
SPECTRA_CONFIG = {
'theme_colors': {
'primary': '#FF6B6B', # Your brand color
'secondary': '#4ECDC4',
'accent': '#FFE66D',
'danger': '#EF4444',
'success': '#10B981',
'warning': '#F59E0B',
'info': '#3B82F6',
},
}
```
### Custom CSS
Add your own stylesheets:
```python
SPECTRA_CONFIG = {
'custom_css': [
'css/my-custom-admin.css',
],
}
```
---
## 🛠️ Advanced Usage
### Using Custom Admin Site
Replace Django's default admin site with Spectra's:
```python
# urls.py
from spectra.admin import spectra_admin_site
urlpatterns = [
path('admin/', spectra_admin_site.urls),
]
```
### Programmatic Theme Switching
```javascript
// Toggle theme programmatically
window.Spectra.theme.toggle();
// Set specific theme
window.Spectra.theme.set('dark');
// Get current theme
const currentTheme = window.Spectra.theme.get();
```
### Dashboard API
```javascript
// Refresh a widget
window.Spectra.dashboard.refresh('widget-id');
// Show notification
window.Spectra.dashboard.notify('Action completed!', 'success');
```
---
## 📸 Screenshots
### Light Theme Dashboard
*Modern, clean interface with light theme*
### Dark Theme Dashboard
*Eye-friendly dark theme for late-night admin work*
### Responsive Design
*Fully responsive on all devices*
---
## 🤝 Contributing
We welcome contributions! Django Spectra is open-source and community-driven.
### How to Contribute
1. **Fork the repository**
```bash
git clone https://github.com/sundaradh/django-spectra.git
cd django-spectra
```
2. **Create a feature branch**
```bash
git checkout -b feature/my-new-widget
```
3. **Make your changes**
- Add your widget to `spectra/widgets/`
- Update documentation
- Add tests if applicable
4. **Commit your changes**
```bash
git add .
git commit -m "Add: Custom weather widget"
```
5. **Push to your fork**
```bash
git push origin feature/my-new-widget
```
6. **Submit a Pull Request**
- Go to the original repository
- Click "New Pull Request"
- Select your branch
- Describe your changes
### Development Setup
```bash
# Clone the repository
git clone https://github.com/sundaradh/django-spectra.git
cd django-spectra
# Create virtual environment
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
# Install development dependencies
pip install -r requirements-dev.txt
# Run the example project
cd example_project
python manage.py migrate
python manage.py createsuperuser
python manage.py runserver
```
### Coding Standards
- Follow [PEP 8](https://pep8.org/) style guide
- Use [Black](https://github.com/psf/black) for code formatting
- Write descriptive commit messages
- Add docstrings to all classes and functions
- Update documentation for new features
### Good First Issues
Look for issues labeled `good first issue` or `help wanted` in our [issue tracker](https://github.com/sundaradh/django-spectra/issues).
---
## 📚 Documentation
- [Installation Guide](docs/installation.md)
- [Configuration Reference](docs/configuration.md)
- [Widget Development](docs/widgets.md)
- [Theming Guide](docs/theming.md)
- [API Reference](docs/api.md)
- [FAQ](docs/faq.md)
---
## 🙏 Acknowledgments
Django Spectra was inspired by these excellent projects:
- [Django Baton](https://github.com/otto-torino/django-baton)
- [Django Jazzmin](https://github.com/farridav/django-jazzmin)
- [Django Grappelli](https://github.com/sehmaschine/django-grappelli)
---
## 📄 License
Django Spectra is released under the [MIT License](LICENSE).
```
MIT License
Copyright (c) 2025 Django Spectra Contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```
---
## 💬 Support
- 📫 **Issues**: [GitHub Issues](https://github.com/sundaradh/django-spectra/issues)
- 💬 **Discussions**: [GitHub Discussions](https://github.com/sundaradh/django-spectra/discussions)
- 📧 **Email**: abcsundaradhikari123@gmail.com
- 🐦 **Twitter**: [@adh_sundar](https://twitter.com/adh_sundar)
---
## ⭐ Star History
[](https://star-history.com/#sundaradh/django-spectra&Date)
---
<div align="center">
**Made with ❤️ by Sundar Adhikari**
[⬆ Back to Top](#-django-spectra)
</div>
Raw data
{
"_id": null,
"home_page": "https://github.com/sundaradh/django-spectra",
"name": "django-spectra",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.9",
"maintainer_email": null,
"keywords": "django, admin, theme, dashboard, ui, modern, customizable",
"author": "Sundar Adhikari",
"author_email": "Sundar Adhikari <abcsundaradhikari123@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/7b/7b/701e753bd9d17bdb1246ba0a88aaa5b7293839d1e340820e237522d09a01/django_spectra-1.0.1.tar.gz",
"platform": null,
"description": "<div align=\"center\">\r\n\r\n# \ud83c\udfa8 Django Spectra\r\n\r\n**A Modern, Beautiful, and Highly Customizable Django Admin Theme**\r\n\r\n[](https://www.python.org/downloads/)\r\n[](https://www.djangoproject.com/)\r\n[](LICENSE)\r\n[](https://github.com/psf/black)\r\n\r\nTransform your Django admin interface into a stunning, modern dashboard with smooth theme switching, customizable widgets, and beautiful UI components \u2014 inspired by the best of Baton and Jazzmin, but cleaner and easier to use.\r\n\r\n[Features](#-features) \u2022 [Installation](#-installation) \u2022 [Quick Start](#-quick-start) \u2022 [Configuration](#-configuration) \u2022 [Widgets](#-dashboard-widgets) \u2022 [Customization](#-customization) \u2022 [Screenshots](#-screenshots)\r\n\r\n</div>\r\n\r\n---\r\n\r\n## \u2728 Features\r\n\r\n### \ud83c\udfaf Core Features\r\n- \u2705 **Modern UI Design** - Beautiful, clean interface with professional aesthetics\r\n- \ud83c\udf13 **Light & Dark Themes** - Seamless theme switching with smooth transitions\r\n- \ud83d\udcca **Dashboard Widgets** - Rich collection of pre-built, customizable widgets\r\n- \u2699\ufe0f **Simple Configuration** - Easy setup via `SPECTRA_CONFIG` in settings\r\n- \ud83d\udd0c **Extensible Plugin System** - Create custom widgets with ease\r\n- \ud83d\udcf1 **Fully Responsive** - Mobile-first design that works on all devices\r\n- \ud83c\udfa8 **Customizable Colors** - Complete control over theme colors\r\n- \ud83d\ude80 **Django 5+ Compatible** - Works with Django 4.2, 5.0, and newer\r\n- \ud83d\udcc8 **Charts & Analytics** - Built-in Chart.js integration for data visualization\r\n- \u26a1 **Zero Heavy Dependencies** - Pure CSS and vanilla JavaScript\r\n- \u267f **Accessible** - WCAG compliant with keyboard navigation support\r\n- \ud83d\udd12 **Secure** - Follows Django security best practices\r\n\r\n### \ud83c\udf81 Built-in Widgets\r\n- **Statistics Widget** - Display key metrics with modern stat cards\r\n- **Recent Actions** - Beautiful activity feed with icons and timestamps\r\n- **Activity Chart** - Interactive line charts with theme-aware styling\r\n- **Welcome Widget** - Personalized greeting for users\r\n- **Quick Links** - Easy access to frequently used admin pages\r\n- **Model Statistics** - Overview of your database models\r\n\r\n### \ud83c\udfa8 Design Highlights\r\n- **Smooth Animations** - Delightful transitions and micro-interactions\r\n- **Modern Typography** - Carefully selected font stack for readability\r\n- **Consistent Spacing** - CSS variables for perfect visual rhythm\r\n- **Beautiful Shadows** - Subtle depth with modern shadow system\r\n- **Rounded Corners** - Soft, friendly interface elements\r\n- **Hover States** - Clear visual feedback on interactive elements\r\n\r\n---\r\n\r\n## \ud83d\udce6 Installation\r\n\r\n### Using pip\r\n\r\n```bash\r\npip install django-spectra\r\n```\r\n\r\n### From source\r\n\r\n```bash\r\ngit clone https://github.com/sundaradh/django-spectra.git\r\ncd django-spectra\r\npip install -e .\r\n```\r\n\r\n---\r\n\r\n## \ud83d\ude80 Quick Start\r\n\r\n### 1. Add to Installed Apps\r\n\r\nAdd `spectra` to your `INSTALLED_APPS` **before** `django.contrib.admin`:\r\n\r\n```python\r\n# settings.py### From Source (Development)\r\n\r\n```bash\r\ngit clone https://github.com/sundaradh/django-spectra.git\r\ncd django-spectra\r\npip install -e .\r\n```\r\n\r\n---\r\n\r\n## \ud83d\ude80 Quick Start\r\n\r\n### 1. Add to INSTALLED_APPS\r\n\r\nAdd `spectra` **before** `django.contrib.admin` in your `settings.py`:\r\n\r\n```python\r\nINSTALLED_APPS = [\r\n 'spectra', # \u26a0\ufe0f Must be BEFORE django.contrib.admin\r\n 'django.contrib.admin',\r\n 'django.contrib.auth',\r\n 'django.contrib.contenttypes',\r\n 'django.contrib.sessions',\r\n 'django.contrib.messages',\r\n 'django.contrib.staticfiles',\r\n # ... your other apps\r\n]\r\n```\r\n\r\n### 2. Add Context Processor\r\n\r\nAdd the Spectra context processor to your templates:\r\n\r\n```python\r\nTEMPLATES = [\r\n {\r\n 'BACKEND': 'django.template.backends.django.DjangoTemplates',\r\n 'DIRS': [],\r\n 'APP_DIRS': True,\r\n 'OPTIONS': {\r\n 'context_processors': [\r\n 'django.template.context_processors.debug',\r\n 'django.template.context_processors.request',\r\n 'django.contrib.auth.context_processors.auth',\r\n 'django.contrib.messages.context_processors.messages',\r\n 'spectra.context_processors.spectra_context', # \u2705 Add this\r\n ],\r\n },\r\n },\r\n]\r\n```\r\n\r\n### 3. Add Middleware (Optional but Recommended)\r\n\r\nFor persistent theme preferences across sessions:\r\n\r\n```python\r\nMIDDLEWARE = [\r\n 'django.middleware.security.SecurityMiddleware',\r\n 'django.contrib.sessions.middleware.SessionMiddleware',\r\n 'django.middleware.common.CommonMiddleware',\r\n 'django.middleware.csrf.CsrfViewMiddleware',\r\n 'django.contrib.auth.middleware.AuthenticationMiddleware',\r\n 'django.contrib.messages.middleware.MessageMiddleware',\r\n 'django.middleware.clickjacking.XFrameOptionsMiddleware',\r\n 'spectra.middleware.SpectraThemeMiddleware', # \u2705 Add this\r\n]\r\n```\r\n\r\n### 4. Include Spectra URLs (Optional)\r\n\r\nFor API endpoints (theme preferences, etc.):\r\n\r\n```python\r\n# urls.py\r\nfrom django.contrib import admin\r\nfrom django.urls import path, include\r\n\r\nurlpatterns = [\r\n path('admin/', admin.site.urls),\r\n path('admin/spectra/', include('spectra.urls')), # \u2705 Add this\r\n # ... your other URLs\r\n]\r\n```\r\n\r\n### 5. Collect Static Files\r\n\r\n```bash\r\npython manage.py collectstatic\r\n```\r\n\r\n### 6. Run Your Server\r\n\r\n```bash\r\npython manage.py runserver\r\n```\r\n\r\nVisit `http://localhost:8000/admin/` and enjoy your new modern admin interface! \ud83c\udf89\r\n\r\n---\r\n\r\n## \u2699\ufe0f Configuration\r\n\r\n### Basic Configuration\r\n\r\nAdd a `SPECTRA_CONFIG` dictionary to your `settings.py`:\r\n\r\n```python\r\nSPECTRA_CONFIG = {\r\n # Branding\r\n \"site_title\": \"My Awesome Site\",\r\n \"site_header\": \"My Admin Dashboard\",\r\n \"logo\": \"images/logo.png\", # Path to your logo in static files\r\n \"favicon\": \"images/favicon.ico\",\r\n \r\n # Theme\r\n \"theme\": \"light\", # Default theme: 'light' or 'dark'\r\n \"enable_dark_mode\": True,\r\n \"enable_theme_toggle\": True,\r\n \r\n # Dashboard\r\n \"show_app_list\": True,\r\n \"show_recent_actions\": True,\r\n \"recent_actions_limit\": 10,\r\n}\r\n```\r\n\r\n### Advanced Configuration\r\n\r\nHere's a complete configuration example with all available options:\r\n\r\n```python\r\nSPECTRA_CONFIG = {\r\n # ===== Branding =====\r\n \"site_title\": \"Django Spectra\",\r\n \"site_header\": \"Django Spectra Administration\",\r\n \"index_title\": \"Dashboard\",\r\n \"logo\": \"images/logo.png\",\r\n \"favicon\": \"images/favicon.ico\",\r\n \"copyright\": \"\u00a9 2025 Your Company\",\r\n \r\n # ===== Theme Settings =====\r\n \"theme\": \"light\", # 'light' or 'dark'\r\n \"enable_dark_mode\": True,\r\n \"enable_theme_toggle\": True,\r\n \r\n \"theme_colors\": {\r\n \"primary\": \"#6366f1\",\r\n \"primary_hover\": \"#4f46e5\",\r\n \"secondary\": \"#10b981\",\r\n \"secondary_hover\": \"#059669\",\r\n \"accent\": \"#f59e0b\",\r\n \"danger\": \"#ef4444\",\r\n \"success\": \"#10b981\",\r\n \"warning\": \"#f59e0b\",\r\n \"info\": \"#3b82f6\",\r\n },\r\n \r\n # ===== Dashboard =====\r\n \"show_app_list\": True,\r\n \"show_recent_actions\": True,\r\n \"show_add_button\": True,\r\n \"welcome_message\": \"Welcome back to your dashboard\",\r\n \r\n # ===== Dashboard Widgets =====\r\n \"dashboard_widgets\": [\r\n {\r\n \"widget\": \"spectra.widgets.StatsWidget\",\r\n \"width\": \"w-full\",\r\n \"order\": 1\r\n },\r\n {\r\n \"widget\": \"spectra.widgets.ActivityChartWidget\",\r\n \"width\": \"lg:w-2/3\",\r\n \"order\": 2\r\n },\r\n {\r\n \"widget\": \"spectra.widgets.RecentActionsWidget\",\r\n \"width\": \"lg:w-1/3\",\r\n \"order\": 3\r\n },\r\n ],\r\n \r\n # ===== Widget Settings =====\r\n \"recent_actions_limit\": 10,\r\n \"stats_refresh_interval\": 300, # seconds\r\n \"chart_default_period\": 30, # days\r\n \"enable_charts\": True,\r\n \r\n # ===== Customization =====\r\n \"custom_css\": [\r\n \"css/custom-admin.css\",\r\n ],\r\n \"custom_js\": [\r\n \"js/custom-admin.js\",\r\n ],\r\n \r\n # ===== Advanced =====\r\n \"enable_api\": False,\r\n \"cache_timeout\": 300,\r\n \"debug_mode\": False,\r\n}\r\n```\r\n\r\n### Widget Width Classes\r\n\r\nWidgets support responsive width classes:\r\n\r\n- `w-full` - Full width (100%)\r\n- `md:w-1/2` - Half width on medium screens and up\r\n- `lg:w-1/3` - One third width on large screens\r\n- `lg:w-2/3` - Two thirds width on large screens\r\n\r\nExample:\r\n```python\r\n\"dashboard_widgets\": [\r\n {\r\n \"widget\": \"spectra.widgets.StatsWidget\",\r\n \"width\": \"w-full\", # Full width\r\n \"order\": 1\r\n },\r\n {\r\n \"widget\": \"spectra.widgets.ActivityChartWidget\",\r\n \"width\": \"lg:w-2/3\", # 2/3 width on large screens\r\n \"order\": 2\r\n },\r\n {\r\n \"widget\": \"spectra.widgets.RecentActionsWidget\",\r\n \"width\": \"lg:w-1/3\", # 1/3 width on large screens\r\n \"order\": 3\r\n },\r\n]\r\n```\r\n\r\n---\r\n\r\n## \ud83d\udcca Dashboard Widgets\r\n\r\n### Built-in Widgets\r\n\r\n#### StatsWidget\r\nDisplays key statistics in beautiful cards with gradient backgrounds.\r\n\r\n```python\r\nfrom spectra.widgets import StatsWidget\r\n\r\nclass CustomStatsWidget(StatsWidget):\r\n name = \"System Statistics\"\r\n \r\n def get_context_data(self, request):\r\n context = super().get_context_data(request)\r\n # Customize stats here\r\n return context\r\n```\r\n\r\n#### RecentActionsWidget\r\nShows recent admin actions with icons and user information.\r\n\r\n```python\r\nSPECTRA_CONFIG = {\r\n \"recent_actions_limit\": 15, # Show last 15 actions\r\n}\r\n```\r\n\r\n#### ActivityChartWidget\r\nInteractive line chart showing admin activity over time using Chart.js.\r\n\r\n```python\r\nSPECTRA_CONFIG = {\r\n \"chart_default_period\": 30, # Show last 30 days\r\n \"enable_charts\": True,\r\n}\r\n```\r\n\r\n### Creating Custom Widgets\r\n\r\nCreate your own widgets by extending `BaseWidget`:\r\n\r\n```python\r\n# myapp/widgets.py\r\nfrom spectra.plugins import BaseWidget, register_widget\r\nfrom django.utils.translation import gettext_lazy as _\r\n\r\n@register_widget\r\nclass MyCustomWidget(BaseWidget):\r\n \"\"\"My custom dashboard widget\"\"\"\r\n \r\n name = _(\"My Widget\")\r\n template = \"myapp/widgets/my_widget.html\"\r\n icon = \"chart-bar\" # Icon name\r\n order = 10 # Display order\r\n width = \"lg:w-1/2\" # Responsive width\r\n \r\n def get_context_data(self, request):\r\n context = super().get_context_data(request)\r\n # Add your custom data\r\n context['my_data'] = self.get_my_data()\r\n return context\r\n \r\n def get_my_data(self):\r\n # Your custom logic here\r\n return {\"count\": 42, \"message\": \"Hello World\"}\r\n```\r\n\r\nThen create your template:\r\n\r\n```html\r\n<!-- myapp/templates/myapp/widgets/my_widget.html -->\r\n{% load i18n %}\r\n\r\n<div class=\"spectra-widget\">\r\n <div class=\"widget-header\">\r\n <h3 class=\"widget-title\">\r\n <svg class=\"widget-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"10\"></line>\r\n <line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"4\"></line>\r\n <line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"16\"></line>\r\n </svg>\r\n {{ name }}\r\n </h3>\r\n </div>\r\n <div class=\"widget-body\">\r\n <p>{{ my_data.message }}</p>\r\n <div class=\"stat-value\">{{ my_data.count }}</div>\r\n </div>\r\n</div>\r\n```\r\n\r\nRegister your widget in `SPECTRA_CONFIG`:\r\n\r\n```python\r\nSPECTRA_CONFIG = {\r\n \"dashboard_widgets\": [\r\n {\r\n \"widget\": \"myapp.widgets.MyCustomWidget\",\r\n \"width\": \"lg:w-1/2\",\r\n \"order\": 5\r\n },\r\n ],\r\n}\r\n```\r\n\r\n---\r\n\r\n## \ud83c\udfa8 Customization\r\n\r\n### Custom CSS\r\n\r\nAdd your own styles:\r\n\r\n1. Create `static/css/custom-admin.css`:\r\n\r\n```css\r\n/* Custom color overrides */\r\n:root {\r\n --spectra-primary: #8b5cf6; /* Purple */\r\n --spectra-secondary: #14b8a6; /* Teal */\r\n}\r\n\r\n/* Custom widget styling */\r\n.my-custom-widget {\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n}\r\n```\r\n\r\n2. Add to configuration:\r\n\r\n```python\r\nSPECTRA_CONFIG = {\r\n \"custom_css\": [\"css/custom-admin.css\"],\r\n}\r\n```\r\n\r\n### Custom JavaScript\r\n\r\nAdd custom functionality:\r\n\r\n1. Create `static/js/custom-admin.js`:\r\n\r\n```javascript\r\n// Custom admin enhancements\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n console.log('Custom admin script loaded');\r\n \r\n // Listen for theme changes\r\n window.addEventListener('spectra:themeChanged', function(e) {\r\n console.log('Theme changed to:', e.detail.theme);\r\n });\r\n});\r\n```\r\n\r\n2. Add to configuration:\r\n\r\n```python\r\nSPECTRA_CONFIG = {\r\n \"custom_js\": [\"js/custom-admin.js\"],\r\n}\r\n```\r\n\r\n### Theming API\r\n\r\nControl the theme programmatically:\r\n\r\n```javascript\r\n// Get current theme\r\nconst currentTheme = window.Spectra.theme.get();\r\n\r\n// Set theme\r\nwindow.Spectra.theme.set('dark');\r\n\r\n// Toggle theme\r\nwindow.Spectra.theme.toggle();\r\n\r\n// Trigger custom theme change (without transition)\r\nwindow.dispatchEvent(new CustomEvent('spectra:setTheme', {\r\n detail: { theme: 'light', withTransition: false }\r\n}));\r\n```\r\n\r\n---\r\n\r\n## \ud83d\udcf8 Screenshots\r\n\r\n### Light Theme\r\n*Beautiful, clean light mode with modern UI elements*\r\n\r\n### Dark Theme\r\n*Elegant dark mode with carefully tuned colors*\r\n\r\n### Dashboard Widgets\r\n*Customizable dashboard with stats, charts, and activity feed*\r\n\r\n### Mobile Responsive\r\n*Fully responsive design works perfectly on all devices*\r\n\r\n---\r\n\r\n## \ud83d\udd27 Advanced Usage\r\n\r\n### Caching Dashboard Data\r\n\r\nImprove performance by caching expensive widget data:\r\n\r\n```python\r\nfrom django.core.cache import cache\r\nfrom spectra.plugins import BaseWidget\r\n\r\nclass CachedStatsWidget(BaseWidget):\r\n def get_context_data(self, request):\r\n cache_key = f'stats_widget_{request.user.id}'\r\n context = cache.get(cache_key)\r\n \r\n if context is None:\r\n context = super().get_context_data(request)\r\n # Expensive calculation here\r\n context['stats'] = self.calculate_stats()\r\n cache.set(cache_key, context, 300) # Cache for 5 minutes\r\n \r\n return context\r\n```\r\n\r\n### Permission-Based Widgets\r\n\r\nShow widgets only to specific users:\r\n\r\n```python\r\nclass AdminOnlyWidget(BaseWidget):\r\n def is_visible(self, request):\r\n return request.user.is_superuser\r\n```\r\n\r\n### Async Widgets\r\n\r\nLoad widget data asynchronously:\r\n\r\n```python\r\n# widget.html\r\n<div class=\"spectra-widget\" data-widget-url=\"{% url 'myapp:widget_data' %}\">\r\n <div class=\"loading\">Loading...</div>\r\n</div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n const widget = document.querySelector('[data-widget-url]');\r\n fetch(widget.dataset.widgetUrl)\r\n .then(response => response.json())\r\n .then(data => {\r\n widget.innerHTML = data.html;\r\n });\r\n});\r\n</script>\r\n```\r\n\r\n---\r\n\r\n## \ud83e\udd1d Contributing\r\n\r\nWe love contributions! Here's how you can help:\r\n\r\n1. **Report Bugs** - Open an issue with details\r\n2. **Suggest Features** - Share your ideas\r\n3. **Submit Pull Requests** - Fix bugs or add features\r\n4. **Improve Documentation** - Help others understand Spectra\r\n5. **Share** - Star the repo and tell others\r\n\r\n### Development Setup\r\n\r\n```bash\r\n# Clone the repository\r\ngit clone https://github.com/sundaradh/django-spectra.git\r\ncd django-spectra\r\n\r\n# Create virtual environment\r\npython -m venv venv\r\nsource venv/bin/activate # On Windows: venv\\Scripts\\activate\r\n\r\n# Install development dependencies\r\npip install -e \".[dev]\"\r\n\r\n# Run tests\r\npython manage.py test\r\n\r\n# Run example project\r\ncd example_project\r\npython manage.py migrate\r\npython manage.py createsuperuser\r\npython manage.py runserver\r\n```\r\n\r\n---\r\n\r\n## \ud83d\udcc4 License\r\n\r\nDjango Spectra is released under the MIT License. See [LICENSE](LICENSE) file for details.\r\n\r\n---\r\n\r\n## \ud83d\ude4f Acknowledgments\r\n\r\nDjango Spectra is inspired by:\r\n- [Baton](https://github.com/otto-torino/django-baton) - Innovative admin customization\r\n- [Jazzmin](https://github.com/farridav/django-jazzmin) - Beautiful theme system\r\n- [Tailwind CSS](https://tailwindcss.com/) - Design system inspiration\r\n- [Chart.js](https://www.chartjs.org/) - Chart visualization\r\n\r\n---\r\n\r\n## \ud83d\udcde Support\r\n\r\n- **Documentation**: [Full Docs](#)\r\n- **Issues**: [GitHub Issues](https://github.com/sundaradh/django-spectra/issues)\r\n- **Discussions**: [GitHub Discussions](https://github.com/sundaradh/django-spectra/discussions)\r\n- **Email**: abcsundaradhikari123@gmail.com\r\n\r\n---\r\n\r\n<div align=\"center\">\r\n\r\n**Made with \u2764\ufe0f by the Django Spectra Team**\r\n\r\n[\u2b50 Star on GitHub](https://github.com/sundaradh/django-spectra) \u2022 [\ud83d\udc26 Follow on Twitter](https://twitter.com/django_spectra) \u2022 [\ud83d\udce7 Subscribe to Newsletter](#)\r\n\r\n</div>\r\n\r\n| Option | Type | Default | Description |\r\n|--------|------|---------|-------------|\r\n| `theme` | `str` | `'light'` | Default theme (`'light'` or `'dark'`) |\r\n| `site_title` | `str` | `'Django Spectra'` | Browser tab title |\r\n| `site_header` | `str` | `'Django Spectra Administration'` | Header text |\r\n| `index_title` | `str` | `'Dashboard'` | Dashboard page title |\r\n| `logo` | `str` | `None` | Logo image path |\r\n| `favicon` | `str` | `None` | Favicon path |\r\n| `sidebar_collapsed` | `bool` | `False` | Default sidebar state |\r\n| `navigation_expanded` | `bool` | `True` | Navigation menu state |\r\n| `show_app_list` | `bool` | `True` | Show app list on dashboard |\r\n| `show_recent_actions` | `bool` | `True` | Show recent actions |\r\n| `dashboard_widgets` | `list` | See above | List of widget class paths |\r\n| `theme_colors` | `dict` | See above | Custom color scheme |\r\n| `custom_css` | `list` | `[]` | Custom CSS files |\r\n| `custom_js` | `list` | `[]` | Custom JavaScript files |\r\n\r\n---\r\n\r\n## \ud83d\udcca Dashboard Widgets\r\n\r\n### Built-in Widgets\r\n\r\nDjango Spectra includes several pre-built widgets:\r\n\r\n#### 1. **WelcomeWidget**\r\nDisplays a personalized greeting to the logged-in user.\r\n\r\n#### 2. **StatsWidget**\r\nShows key statistics (total users, active users, staff count, etc.)\r\n\r\n#### 3. **RecentActionsWidget**\r\nLists recent admin actions with color-coded indicators.\r\n\r\n#### 4. **QuickLinksWidget**\r\nProvides shortcuts to frequently accessed admin pages.\r\n\r\n#### 5. **ActivityChartWidget**\r\nVisualizes admin activity over time using Chart.js.\r\n\r\n#### 6. **ModelStatsWidget**\r\nShows object counts for each registered model.\r\n\r\n### Creating Custom Widgets\r\n\r\nCreate your own dashboard widgets by subclassing `BaseWidget`:\r\n\r\n```python\r\n# myapp/widgets.py\r\n\r\nfrom spectra.plugins import BaseWidget, register_widget\r\nfrom django.utils.translation import gettext_lazy as _\r\n\r\n@register_widget\r\nclass ServerStatusWidget(BaseWidget):\r\n \"\"\"Display server status information.\"\"\"\r\n \r\n name = _(\"Server Status\")\r\n template = \"myapp/widgets/server_status.html\"\r\n icon = \"server\"\r\n order = 10\r\n width = \"w-full lg:w-1/2\"\r\n \r\n def get_context_data(self, request):\r\n context = super().get_context_data(request)\r\n \r\n # Add your custom data\r\n context['cpu_usage'] = self.get_cpu_usage()\r\n context['memory_usage'] = self.get_memory_usage()\r\n context['disk_usage'] = self.get_disk_usage()\r\n \r\n return context\r\n \r\n def get_cpu_usage(self):\r\n # Your logic here\r\n return 45.2\r\n \r\n def get_memory_usage(self):\r\n return 62.8\r\n \r\n def get_disk_usage(self):\r\n return 38.5\r\n \r\n def has_permission(self, request):\r\n # Only show to superusers\r\n return request.user.is_superuser\r\n```\r\n\r\nCreate the template:\r\n\r\n```html\r\n<!-- myapp/templates/myapp/widgets/server_status.html -->\r\n{% load i18n %}\r\n\r\n<div class=\"spectra-widget server-status-widget\">\r\n <div class=\"widget-header\">\r\n <h3 class=\"widget-title\">\r\n <span class=\"widget-icon\">\ud83d\udda5\ufe0f</span>\r\n {{ name }}\r\n </h3>\r\n </div>\r\n <div class=\"widget-content\">\r\n <div class=\"status-grid\">\r\n <div class=\"status-item\">\r\n <span class=\"status-label\">{% trans \"CPU Usage\" %}</span>\r\n <span class=\"status-value\">{{ cpu_usage }}%</span>\r\n </div>\r\n <div class=\"status-item\">\r\n <span class=\"status-label\">{% trans \"Memory Usage\" %}</span>\r\n <span class=\"status-value\">{{ memory_usage }}%</span>\r\n </div>\r\n <div class=\"status-item\">\r\n <span class=\"status-label\">{% trans \"Disk Usage\" %}</span>\r\n <span class=\"status-value\">{{ disk_usage }}%</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n```\r\n\r\nAdd to your configuration:\r\n\r\n```python\r\nSPECTRA_CONFIG = {\r\n 'dashboard_widgets': [\r\n 'myapp.widgets.ServerStatusWidget',\r\n # ... other widgets\r\n ],\r\n}\r\n```\r\n\r\n---\r\n\r\n## \ud83c\udfa8 Theming\r\n\r\n### Using Built-in Themes\r\n\r\nSwitch themes dynamically using the theme toggle button in the admin interface, or set a default in your configuration:\r\n\r\n```python\r\nSPECTRA_CONFIG = {\r\n 'theme': 'dark', # or 'light'\r\n}\r\n```\r\n\r\n### Customizing Colors\r\n\r\nCustomize the color scheme to match your brand:\r\n\r\n```python\r\nSPECTRA_CONFIG = {\r\n 'theme_colors': {\r\n 'primary': '#FF6B6B', # Your brand color\r\n 'secondary': '#4ECDC4',\r\n 'accent': '#FFE66D',\r\n 'danger': '#EF4444',\r\n 'success': '#10B981',\r\n 'warning': '#F59E0B',\r\n 'info': '#3B82F6',\r\n },\r\n}\r\n```\r\n\r\n### Custom CSS\r\n\r\nAdd your own stylesheets:\r\n\r\n```python\r\nSPECTRA_CONFIG = {\r\n 'custom_css': [\r\n 'css/my-custom-admin.css',\r\n ],\r\n}\r\n```\r\n\r\n---\r\n\r\n## \ud83d\udee0\ufe0f Advanced Usage\r\n\r\n### Using Custom Admin Site\r\n\r\nReplace Django's default admin site with Spectra's:\r\n\r\n```python\r\n# urls.py\r\n\r\nfrom spectra.admin import spectra_admin_site\r\n\r\nurlpatterns = [\r\n path('admin/', spectra_admin_site.urls),\r\n]\r\n```\r\n\r\n### Programmatic Theme Switching\r\n\r\n```javascript\r\n// Toggle theme programmatically\r\nwindow.Spectra.theme.toggle();\r\n\r\n// Set specific theme\r\nwindow.Spectra.theme.set('dark');\r\n\r\n// Get current theme\r\nconst currentTheme = window.Spectra.theme.get();\r\n```\r\n\r\n### Dashboard API\r\n\r\n```javascript\r\n// Refresh a widget\r\nwindow.Spectra.dashboard.refresh('widget-id');\r\n\r\n// Show notification\r\nwindow.Spectra.dashboard.notify('Action completed!', 'success');\r\n```\r\n\r\n---\r\n\r\n## \ud83d\udcf8 Screenshots\r\n\r\n### Light Theme Dashboard\r\n\r\n*Modern, clean interface with light theme*\r\n\r\n### Dark Theme Dashboard\r\n\r\n*Eye-friendly dark theme for late-night admin work*\r\n\r\n### Responsive Design\r\n\r\n*Fully responsive on all devices*\r\n\r\n---\r\n\r\n## \ud83e\udd1d Contributing\r\n\r\nWe welcome contributions! Django Spectra is open-source and community-driven.\r\n\r\n### How to Contribute\r\n\r\n1. **Fork the repository**\r\n ```bash\r\n git clone https://github.com/sundaradh/django-spectra.git\r\n cd django-spectra\r\n ```\r\n\r\n2. **Create a feature branch**\r\n ```bash\r\n git checkout -b feature/my-new-widget\r\n ```\r\n\r\n3. **Make your changes**\r\n - Add your widget to `spectra/widgets/`\r\n - Update documentation\r\n - Add tests if applicable\r\n\r\n4. **Commit your changes**\r\n ```bash\r\n git add .\r\n git commit -m \"Add: Custom weather widget\"\r\n ```\r\n\r\n5. **Push to your fork**\r\n ```bash\r\n git push origin feature/my-new-widget\r\n ```\r\n\r\n6. **Submit a Pull Request**\r\n - Go to the original repository\r\n - Click \"New Pull Request\"\r\n - Select your branch\r\n - Describe your changes\r\n\r\n### Development Setup\r\n\r\n```bash\r\n# Clone the repository\r\ngit clone https://github.com/sundaradh/django-spectra.git\r\ncd django-spectra\r\n\r\n# Create virtual environment\r\npython -m venv venv\r\nsource venv/bin/activate # On Windows: venv\\Scripts\\activate\r\n\r\n# Install development dependencies\r\npip install -r requirements-dev.txt\r\n\r\n# Run the example project\r\ncd example_project\r\npython manage.py migrate\r\npython manage.py createsuperuser\r\npython manage.py runserver\r\n```\r\n\r\n### Coding Standards\r\n\r\n- Follow [PEP 8](https://pep8.org/) style guide\r\n- Use [Black](https://github.com/psf/black) for code formatting\r\n- Write descriptive commit messages\r\n- Add docstrings to all classes and functions\r\n- Update documentation for new features\r\n\r\n### Good First Issues\r\n\r\nLook for issues labeled `good first issue` or `help wanted` in our [issue tracker](https://github.com/sundaradh/django-spectra/issues).\r\n\r\n---\r\n\r\n## \ud83d\udcda Documentation\r\n\r\n- [Installation Guide](docs/installation.md)\r\n- [Configuration Reference](docs/configuration.md)\r\n- [Widget Development](docs/widgets.md)\r\n- [Theming Guide](docs/theming.md)\r\n- [API Reference](docs/api.md)\r\n- [FAQ](docs/faq.md)\r\n\r\n---\r\n\r\n\r\n## \ud83d\ude4f Acknowledgments\r\n\r\nDjango Spectra was inspired by these excellent projects:\r\n\r\n- [Django Baton](https://github.com/otto-torino/django-baton)\r\n- [Django Jazzmin](https://github.com/farridav/django-jazzmin)\r\n- [Django Grappelli](https://github.com/sehmaschine/django-grappelli)\r\n\r\n---\r\n\r\n## \ud83d\udcc4 License\r\n\r\nDjango Spectra is released under the [MIT License](LICENSE).\r\n\r\n```\r\nMIT License\r\n\r\nCopyright (c) 2025 Django Spectra Contributors\r\n\r\nPermission is hereby granted, free of charge, to any person obtaining a copy\r\nof this software and associated documentation files (the \"Software\"), to deal\r\nin the Software without restriction, including without limitation the rights\r\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\r\ncopies of the Software, and to permit persons to whom the Software is\r\nfurnished to do so, subject to the following conditions:\r\n\r\nThe above copyright notice and this permission notice shall be included in all\r\ncopies or substantial portions of the Software.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\r\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\r\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\r\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\r\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\r\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\r\nSOFTWARE.\r\n```\r\n\r\n---\r\n\r\n## \ud83d\udcac Support\r\n\r\n- \ud83d\udceb **Issues**: [GitHub Issues](https://github.com/sundaradh/django-spectra/issues)\r\n- \ud83d\udcac **Discussions**: [GitHub Discussions](https://github.com/sundaradh/django-spectra/discussions)\r\n- \ud83d\udce7 **Email**: abcsundaradhikari123@gmail.com\r\n- \ud83d\udc26 **Twitter**: [@adh_sundar](https://twitter.com/adh_sundar)\r\n\r\n---\r\n\r\n## \u2b50 Star History\r\n\r\n[](https://star-history.com/#sundaradh/django-spectra&Date)\r\n\r\n---\r\n\r\n<div align=\"center\">\r\n\r\n**Made with \u2764\ufe0f by Sundar Adhikari**\r\n\r\n[\u2b06 Back to Top](#-django-spectra)\r\n\r\n</div>\r\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "A modern, beautiful, and highly customizable Django admin theme",
"version": "1.0.1",
"project_urls": {
"Documentation": "https://github.com/sundaradh/django-spectra#readme",
"Homepage": "https://github.com/sundaradh/django-spectra",
"Issues": "https://github.com/sundaradh/django-spectra/issues",
"Repository": "https://github.com/sundaradh/django-spectra"
},
"split_keywords": [
"django",
" admin",
" theme",
" dashboard",
" ui",
" modern",
" customizable"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "5229c4898b33a07a08c51526d84baaa7f8c0261b7becd644feccb044cda22939",
"md5": "0465959e2dc1036642870cf5dc2bad48",
"sha256": "0583025e4819e33e44b6d846539adb6626ff75f7f550341db11f512666fcc6f9"
},
"downloads": -1,
"filename": "django_spectra-1.0.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "0465959e2dc1036642870cf5dc2bad48",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.9",
"size": 28077491,
"upload_time": "2025-11-03T06:27:14",
"upload_time_iso_8601": "2025-11-03T06:27:14.996983Z",
"url": "https://files.pythonhosted.org/packages/52/29/c4898b33a07a08c51526d84baaa7f8c0261b7becd644feccb044cda22939/django_spectra-1.0.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "7b7b701e753bd9d17bdb1246ba0a88aaa5b7293839d1e340820e237522d09a01",
"md5": "fcd906771a4f422cbe25fead44a29b62",
"sha256": "f4ee2b1d5dee603d07616067c302e759362a85b0c920c36e5c354cb663a0a3b6"
},
"downloads": -1,
"filename": "django_spectra-1.0.1.tar.gz",
"has_sig": false,
"md5_digest": "fcd906771a4f422cbe25fead44a29b62",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.9",
"size": 28035240,
"upload_time": "2025-11-03T06:27:18",
"upload_time_iso_8601": "2025-11-03T06:27:18.961957Z",
"url": "https://files.pythonhosted.org/packages/7b/7b/701e753bd9d17bdb1246ba0a88aaa5b7293839d1e340820e237522d09a01/django_spectra-1.0.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-11-03 06:27:18",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "sundaradh",
"github_project": "django-spectra",
"github_not_found": true,
"lcname": "django-spectra"
}
JSON
