SOGo Dark Theme

A custom dark gray theme for SOGo webmail that automatically activates based on your browser's color scheme preference. When your system/browser is set to dark mode, SOGo will display with a sleek dark interface. When set to light mode, SOGo retains its standard light appearance.

Features

• Automatic theme switching - Respects prefers-color-scheme media query
• Comprehensive dark styling - Covers all major SOGo UI components:
  • Sidebar and folder tree
  • Toolbar and navigation
  • Email list and message viewer
  • Calendar and event dialogs
  • Contacts and address book
  • Settings and preferences
  • Dialogs and modals
  • Buttons, inputs, and form elements
• Email content preserved - Message body content retains original styling for readability
• Dynamic content support - Uses MutationObserver to handle Angular's dynamic content loading

Screenshots

Installation for Mailcow-Dockerized

Method 1: Using Docker Volume Mount (Recommended)

1. Clone or download this repository to your mailcow server:

   cd /opt/mailcow-dockerized
   git clone https://code.rebxd.com/numbered.dev/sogo-dark-theme.git
   cp sogo-dark-theme/custom-theme.js data/conf/sogo/custom-theme/
   

2. Edit your docker-compose.override.yml file in the mailcow directory. Create it if it doesn't exist:

   nano /opt/mailcow-dockerized/docker-compose.override.yml
   

3. Add the following content to mount the custom theme file:

   version: '2.1'
   services:
     sogo-mailcow:
       volumes:
         - ./data/conf/sogo/custom-theme/custom-theme.js:/usr/lib/GNUstep/SOGo/WebServerResources/js/custom-theme.js:ro
   

4. Restart the SOGo container:

   cd /opt/mailcow-dockerized
   docker compose down
   docker compose up -d
   

   And now wait a bit and do a forced refresh to ensure the cache is not interfering.

5. OPTIONAL (and advanced): Inject the script into SOGo's HTML. Edit the SOGo configuration to include the custom JavaScript. Create or edit the custom SOGo HTML file:

   If it doesn't apply after that (make sure to first wait a bit and then force refresh to make sure it's not a cache issue) do the following:

   mkdir -p /opt/mailcow-dockerized/data/conf/sogo/custom
   

   You'll need to add a script tag that loads the custom theme. This can be done by modifying the SOGo container's template or using a custom sogo.conf setting.

Method 2: Direct File Copy

1. Copy the theme file directly into the running container (note: this will be lost on container recreation):

   docker cp custom-theme.js $(docker ps -qf name=sogo-mailcow):/usr/lib/GNUstep/SOGo/WebServerResources/js/custom-theme.js
   

2. Restart SOGo:

   docker compose restart sogo-mailcow
   

Method 3: Using Mailcow's Custom JS Feature

1. Navigate to your mailcow data directory:

   cd /opt/mailcow-dockerized/data/conf/sogo
   

2. Create a custom JavaScript directory if it doesn't exist:

   mkdir -p custom-js
   

3. Copy the theme file:

   cp /path/to/custom-theme.js custom-js/
   

4. Edit sogo.conf to include custom JavaScript. Add or modify the SOGoUIxDebugEnabled and related settings to load custom JS.

5. Recreate the SOGo container:

   cd /opt/mailcow-dockerized
   docker compose up -d --force-recreate sogo-mailcow
   

Verifying Installation

1. Open your SOGo webmail interface
2. Set your browser or operating system to dark mode
3. Refresh the page - the dark theme should now be active
4. Toggle back to light mode to verify the theme switches automatically
5. Still got problems? Email me an issue at sip@rebxd.com!

Troubleshooting

• Theme not loading? Check browser console for JavaScript errors
• Partial styling? Clear your browser cache and reload
• Theme lost after update? Re-apply using the volume mount method (Method 1) for persistence

Compatibility

• Tested with mailcow-dockerized (latest)
• SOGo 5.x
• Modern browsers with prefers-color-scheme support (Chrome, Firefox, Safari, Edge)

License

MIT License - Feel free to modify and distribute as needed.

Contributing

If u have any issues email them to me via sip@rebxd.com.