BetterPronote++
Ultimate Customizable Theme and Enhancement Suite for Pronote
Created by Camille Daguin
BetterPronote++ is a powerful Tampermonkey userscript that completely transforms the Pronote student interface with extensive customization options, productivity enhancements, and modern UI improvements.
✨ Features
🎨 Advanced Theming System
- Predefined Themes: Rose, Blue, Green, Purple, Orange - instant beautiful themes
- Custom Colors: Full control over primary, light, and background colors
- Dark Mode: Manual dark mode or automatic based on time (6 PM - 6 AM)
- Adaptive Themes: Colors change automatically based on the current page
- Border Radius Control: Customize corner rounding from 0-30px
🚀 Productivity Enhancements
- Automatic Grade Coloring: Smart color coding based on performance (green for excellent, blue for good, orange for average, red for poor)
- Quick Copy: One-click copying of grades and homework information
- Homework Export: Export homework to text files or calendar (Google Calendar, Outlook)
- Urgency Indicators: Visual badges on homework showing due date status
- Visual Grade Editing: Click any grade to modify it visually (local storage only)
🎛️ UI Customization
- Element Visibility Control: Hide/show profile picture, username, footer, menus
- Custom Titles: Add personal messages or motivational text
- School Name Override: Customize displayed school name
- Compact Mode: Reduce spacing for more content visibility
- Responsive Design: Optimized for all screen sizes
- Mobile Optimization: Touch-friendly interface with large targets
- Accessibility Features: High contrast, reduced motion, screen reader support
💾 Data Management
- Persistent Settings: All preferences saved across sessions
- Grade Modification Tracking: Reset visual grade changes anytime
- Export/Import Ready: Foundation for future settings backup/sharing
📁 Project Structure
This project uses a modular ES6 architecture compiled into a single userscript:
src/
├── index.js # Main entry point and initialization
├── defaultSettings.js # Default settings and configuration
├── settings.js # Settings management and persistence
├── themes.js # Predefined themes
├── utils.js # Utility functions
├── styles.js # Dynamic CSS generation
├── theme.js # Theme application logic
├── features/
│ ├── exportHomework.js # Homework export functionality
│ ├── gradeColoring.js # Automatic grade coloring
│ ├── noteEditing.js # Grade editing functionality
│ └── quickCopy.js # Quick copy features
├── styles/
│ ├── index.js # Styles entry point
│ ├── colors.js # Color management
│ ├── layout.js # Layout styles
│ ├── responsive.js # Responsive design
│ └── accessibility.js # Accessibility features
├── ui/
│ ├── modal.js # Modal interface
│ └── modalUI.js # Modal UI components
dist/
└── userscript.js # Compiled production userscript
build.js # ES6 module bundler and userscript header injection
package.json # Project metadata and build scripts
🛠️ Development
Prerequisites
- Node.js (v14+ recommended)
- Tampermonkey browser extension
Quick Start
# Clone the repository
git clone https://github.com/camilledaguin/PinkPronote.git
cd PinkPronote
# Install dependencies
npm install
# Build the userscript
npm run build
# Development mode with auto-rebuild
npm run dev
Build Output
The compiled userscript is generated at dist/userscript.js and is ready for Tampermonkey installation.
📦 Installation
- Install Tampermonkey for your browser:
- Create New Userscript:
- Open Tampermonkey dashboard
- Click "Add a new script"
- Delete the default code
- Install BetterPronote++:
- Copy the entire content of
dist/userscript.js
- Paste it into the userscript editor
- Save (Ctrl+S)
- Enable and Configure:
- The script will automatically activate on Pronote pages
- Access settings through Tampermonkey menu: "⚙️ BetterPronote++ Settings"
🎮 Usage Guide
Basic Usage
Once installed, BetterPronote++ automatically applies to all Pronote pages. The default theme provides a clean, modern look with subtle enhancements.
Accessing Settings
- Click the Tampermonkey icon in your browser toolbar
- Select "BetterPronote++ Settings" from the menu
- Or use the keyboard shortcut (configurable in future versions)
Feature Overview
Theme Selection
Choose from predefined themes or create custom color schemes:
- Rose: Classic pink theme (default)
- Blue: Professional blue interface
- Green: Nature-inspired green theme
- Purple: Elegant purple design
- Orange: Warm, energetic orange theme
- Custom: Full color customization
Dark Mode
- Manual: Toggle in settings
- Automatic: Activates between 6 PM and 6 AM
- Smart color adjustments maintain readability
Automatic Grade Coloring
- Smart Color System: Grades are automatically colored based on performance
- Color Scale:
- 🟢 Green: Excellent (16-20/20)
- 🔵 Blue: Good (12-15/20)
- 🟠 Orange: Average (10-11/20)
- 🔴 Red: Poor (<10/20)
- ⚪ Gray: Absent
- Multi-Scale Support: Works with grades on 10, 20, or any scale
- French Format: Handles comma decimals (8,50/10 → 17/20)
Quick Copy Feature
- Grade Copy: Click any grade to copy "Note : [grade] | Matière : [subject]"
- Homework Copy: Click any homework to copy "Date : [date] | Matière : [subject] | Travail à faire : [description]"
- Visual Feedback: Shows "✅ Copié !" confirmation
- Smart Detection: Automatically excludes Ctrl/Cmd+click for normal navigation
Homework Export
Dual Export Options:
- 📄 TXT Export: Clean, readable text format with organized homework by date
- 📅 ICS Export: Direct import to calendar applications (Google Calendar, Outlook, Apple Calendar)
TXT Format Features:
- Organized by due dates with clear headers
- Complete homework descriptions
- Subject and status information
- Export timestamp for reference
ICS Calendar Features:
- Smart Titles: Uses homework description as event title (more meaningful than just subject)
- Rich Descriptions: Subject, due date, and detailed instructions with emojis
- Automatic Reminders: 1-day advance notifications
- Date Parsing: Handles French date formats intelligently
- Cross-Platform: Compatible with all major calendar applications
Export Process:
- Click export button on homework page
- Choose TXT or ICS format
- File downloads automatically
- Import ICS file directly into your calendar app
Urgency Indicators
- Homework Status Badges:
- 🔴 En retard: Overdue assignments
- 🔴 Urgent: Due within 3 days
- 🟠 Bientôt: Due within 7 days
- 🟢 Normal: Due in more than 7 days
- Real-time Updates: Automatically updates based on current date
- French Date Parsing: Handles French date formats (16 décembre 2025)
Grade Editing
- Click any displayed grade to edit visually
- Changes persist locally but don't affect real Pronote data
- Useful for "what-if" scenarios and motivation
🔧 Configuration Options
Colors
- Primary Color: Main theme color (buttons, accents)
- Light Color: Secondary elements (widget headers)
- Background Color: Page background
Appearance
- Border Radius: Corner rounding (0-30px)
- Compact Mode: Reduced spacing
Visibility Controls
- Hide Profile Picture
- Hide Username
- Hide Footer
- Hide Secondary Menus
Personalization
- Custom Page Title: Display motivational messages
- Custom School Name: Override displayed institution name
Advanced Features
- Automatic Grade Coloring: Smart color coding based on performance
- Quick Copy: One-click copying of grades and homework information
- Urgency Indicators: Visual badges on homework showing due date status
- Adaptive Theme: Page-based color changes
- Grade Editing: Visual grade modification
🏗️ Technical Details
Architecture
- Modular Design: ES6 modules for maintainability
- Dynamic CSS: Runtime style generation for performance
- Persistent Storage: Tampermonkey GM_* APIs for data persistence
- Event-Driven: Reactive updates without page refresh
Browser Compatibility
- Chrome: Full support (recommended)
- Firefox: Full support
- Safari: Full support with Tampermonkey
- Edge: Full support
Performance
- Lightweight: ~50KB compiled userscript
- Efficient: CSS generation cached and optimized
- Non-Intrusive: No impact on Pronote functionality
Security
- Local Storage Only: All modifications stay in browser
- No Data Transmission: Settings never leave your device
- Tampermonkey Sandbox: Isolated execution environment
🤝 Contributing
We welcome contributions! Please see our Contributing Guide for details.
Development Setup
npm install
npm run dev # Auto-rebuild on file changes
Code Style
- ES6+ JavaScript with modern syntax
- Modular architecture with clear separation of concerns
- Comprehensive comments and documentation
- Consistent formatting (Prettier recommended)
📄 License
Personal Use Only - No modifications or redistribution
This script is provided for personal use only. You may use it privately but are not permitted to modify, distribute, or share copies of this code without explicit permission from the author.
🙏 Acknowledgments
- Tampermonkey for the excellent userscript platform
- Pronote for the educational platform (we just make it prettier!)
- Open Source Community for inspiration and tools
📞 Support
BetterPronote++ - Making Pronote Beautiful, Functional, and Yours! 🌟
