Add theme customization system and theme manager

Introduces a full browser customization system with support for theme presets, live editing, import/export, and non-destructive design. Adds new documentation for customization, updates the features list, and implements a ThemeManager for loading and managing themes at the application level. Updates home and settings pages to support live theming and preview, and adds four built-in themes (default, forest, ocean, sunset).
2025-07-29 11:53:30 +12:00
parent 486bb99cc4
commit aef9b816db
13 changed files with 1176 additions and 7 deletions
@@ -0,0 +1,68 @@
+# Nebula Browser Themes
+
+This directory contains theme files for the Nebula Browser customization system.
+
+## Theme Structure
+
+Each theme is a JSON file with the following structure:
+
+```json
+{
+  "name": "Theme Name",
+  "colors": {
+    "bg": "#121418",
+    "darkBlue": "#0B1C2B", 
+    "darkPurple": "#1B1035",
+    "primary": "#7B2EFF",
+    "accent": "#00C6FF",
+    "text": "#E0E0E0"
+  },
+  "layout": "centered",
+  "showLogo": true,
+  "customTitle": "Nebula Browser",
+  "gradient": "linear-gradient(145deg, #121418 0%, #1B1035 100%)",
+  "version": "1.0",
+  "description": "Theme description"
+}
+```
+
+## Color Properties
+
+- `bg`: Main background color
+- `darkBlue`: Secondary dark blue accent
+- `darkPurple`: Secondary dark purple accent  
+- `primary`: Primary accent color (used for buttons, logos)
+- `accent`: Secondary accent color (used for highlights)
+- `text`: Main text color
+
+## Layout Options
+
+- `centered`: Default centered layout
+- `sidebar`: Sidebar navigation layout
+- `compact`: Compact view layout
+
+## Directories
+
+- `/downloaded/`: Themes downloaded from the community
+- `/user/`: User-created custom themes
+
+## Usage
+
+1. **Import Theme**: Go to Settings > Customization > Import Theme
+2. **Export Theme**: Create your custom theme and export it
+3. **Share Themes**: Share your exported .json files with other users
+
+## Creating Custom Themes
+
+1. Go to Settings > Browser Customization
+2. Adjust colors and settings using the controls
+3. Use the live preview to see changes
+4. Save as custom theme or export to share
+
+## Community Themes
+
+Place downloaded community themes in the `/downloaded/` folder. The browser will automatically detect and make them available in the theme selector.
+
+## Non-Destructive Design
+
+All theme changes are stored separately and can be reset to default at any time. Your customizations never modify the original browser files.
@@ -46,6 +46,19 @@ For advanced users, Nebula provides tools to manage GPU acceleration.
 -   **GPU Diagnostics:** View detailed information about your system's GPU and its status.
 -   **GPU Fallback:** If you experience rendering issues, you can apply a GPU fallback to use a more stable rendering path. This can help resolve visual glitches or crashes.

+### Custom Themes & Customization
+
+Nebula offers extensive customization options to personalize your browsing experience.
+
+-   **Theme System:** Choose from built-in themes (default, forest, ocean, sunset) or create your own custom themes.
+-   **Live Theme Editor:** Modify colors, gradients, and layout options with real-time preview in the settings.
+-   **Import/Export Themes:** Share custom themes with the community or use themes created by other users.
+-   **Non-Destructive Design:** All customizations are stored separately and can be reset to default at any time.
+-   **Layout Options:** Switch between centered, sidebar, and compact view layouts.
+-   **Custom Branding:** Personalize the browser title and logo visibility.
+
+For detailed information about creating and managing themes, see the [Customization Guide](Customization.md).
+
 ### Cross-Platform

 Nebula is built with Electron, allowing it to run on multiple operating systems.