Deluge Web UI Dark Theme + Responsive Mobile UI

A modern dark theme for Deluge Web UI with custom accent colours and updated icons.

Different coloured rows depending on the torrent state. (Colours can be customised or disabled).

Automatically uses an optimised view for mobile devices with small screens.

Proxy install (easy install and automatic updates): All, Nginx.

Local install (manual updates): Deluge 2, Deluge 1.3, Docker, TrueNAS, and Windows.

Optional, add a toolbar button to simulate a right click for touch devices Scroll to guide.

INSTALL (Proxy)

Link to remotely hosted stylesheets and icons.

All

Edit index.html

sudo nano /usr/lib/python3/dist-packages/deluge/ui/web/index.html

Possible alternative location (python version may differ):

sudo nano /usr/lib/python3.13/site-packages/deluge/ui/web/index.html

Note: To get the location for Docker, check Step 3 and 4 of the Docker guide.
To get the location for Windows, check Step 5 of the Windows guide.

Add the following line at the bottom of the "Stylesheets" section in the <head> of the HTML file:

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/joelacus/deluge-web-dark-theme/refs/heads/main/deluge-dark-theme-proxy.css">

Add the following meta tag inside <head> (This prevents scaling issues on mobile devices):

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

(optional) Add this stylesheet inside <head> to change the colours.

<style>
   :root {
      --accent: 156, 39, 176 !important;
      --downloading: 76, 175, 80, 0.5 !important;
      --seeding: 33, 150, 243, 0.5 !important;
      --paused: 255, 152, 0, 0.5 !important;
      --queued: 255, 235, 59, 0.5 !important;
      --error: 244, 67, 54, 0.5 !important;
      --font: ubuntu, verdana, arial, tahoma, helvetica, sans-serif !important;
      --text: #fff !important;
      --bg: #1c1c1c !important;
      --shade1: #222 !important;
      --shade2: #333 !important;
   }
</style>

(optional) Add a toolbar button to simulate a right click for touch devices.
Scroll to guide
Enjoy! :) tip

Nginx Proxy Manager

Nginx config:

proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/joelacus/deluge-web-dark-theme/refs/heads/main/deluge-dark-theme-proxy.css">
</head>';
sub_filter_once on;

INSTALL (Local)

Install all the theme files locally on your system.

Deluge 2

Stop deluge-web:

pkill deluge-web

(optional) Backup old files:

sudo mv /usr/lib/python3/dist-packages/deluge/ui/web/icons/ /usr/lib/python3/dist-packages/deluge/ui/web/icons.bak & sudo mv /usr/lib/python3/dist-packages/deluge/ui/web/images/ /usr/lib/python3/dist-packages/deluge/ui/web/images.bak

Possible alternative location (python version may differ):

sudo mv /usr/lib/python3.13/site-packages/deluge/ui/web/icons/ /usr/lib/python3.13/site-packages/deluge/ui/web/icons.bak & sudo mv /usr/lib/python3.13/site-packages/deluge/ui/web/images/ /usr/lib/python3.13/site-packages/deluge/ui/web/images.bak

Install the theme:

sudo wget -c https://github.com/joelacus/deluge-web-dark-theme/raw/main/deluge_web_dark_theme.tar.gz -O - | sudo tar -xz -C /usr/lib/python3/dist-packages/deluge/ui/web/

Possible alternative location (python version may differ):

sudo wget -c https://github.com/joelacus/deluge-web-dark-theme/raw/main/deluge_web_dark_theme.tar.gz -O - | sudo tar -xz -C /usr/lib/python3.13/site-packages/deluge/ui/web/

Edit web.conf to set the theme. Scroll to the bottom and change "theme": "gray" to "theme": "dark"

nano ~/.config/deluge/web.conf

If the web.conf file is not there, it might be here instead:

sudo nano /var/lib/deluge/.config/deluge/web.conf

If a file called web.conf~ exists, delete, or edit it as well. Otherwise this will overwrite web.conf when deluge-web is restarted.

Edit index.html

sudo nano /usr/lib/python3/dist-packages/deluge/ui/web/index.html

Possible alternative location (python version may differ):

sudo nano /usr/lib/python3.13/site-packages/deluge/ui/web/index.html

and add the following meta tag on the empty line 19 in the header (This prevents scaling issues on mobile devices):

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

Restart deluge-web

deluge-web

(optional) You can change the accent colour and row colours by editing this file:

sudo nano /usr/lib/python3/dist-packages/deluge/ui/web/themes/css/xtheme-dark.css

Possible alternative location (python version may differ):

sudo nano /usr/lib/python3.13/site-packages/deluge/ui/web/themes/css/xtheme-dark.css

Replace the variable values --accent: 156,39,176; with any RGB value.
Note: If you don't see the updated accent colour, force reload the deluge web-ui page with Ctrl+Shift+R.

(optional) Add a toolbar button to simulate a right click for touch devices.
Scroll to guide
Enjoy! :) tip

Deluge 1

Stop deluge-web:

pkill deluge-web

(optional) Backup old files:

sudo mv /usr/lib/python2.7/dist-packages/deluge/ui/web/icons/ /usr/lib/python2.7/dist-packages/deluge/ui/web/icons.bak & sudo mv /usr/lib/python2.7/dist-packages/deluge/ui/web/images/ /usr/lib/python2.7/dist-packages/deluge/ui/web/images.bak

Install the theme:

sudo wget -c https://github.com/joelacus/deluge-web-dark-theme/raw/main/deluge_web_dark_theme.tar.gz -O - | sudo tar -xz -C /usr/lib/python2.7/dist-packages/deluge/ui/web/

Edit web.conf to set the theme. Scroll to the bottom and change "theme": "gray" to "theme": "dark"

nano ~/.config/deluge/web.conf

If the web.conf file is not there, it might be here instead:

sudo nano /var/lib/deluge/.config/deluge/web.conf

If a file called web.conf~ exists, delete, or edit it as well. Otherwise this will overwrite web.conf when deluge-web is restarted.

Edit index.html

sudo nano /usr/lib/python2.7/dist-packages/deluge/ui/web/index.html

and add the following meta tag on the empty line 19 in the header (This prevents scaling issues on mobile devices):

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

Restart deluge-web

deluge-web

(optional) You can change the accent colour and row colours by editing this file:

sudo nano /usr/lib/python2.7/dist-packages/deluge/ui/web/themes/css/xtheme-dark.css

Replace the variable values --accent: 156,39,176; with any RGB value.
Note: If you don't see the updated accent colour, force reload the deluge web-ui page with Ctrl+Shift+R.

(optional) Add a toolbar button to simulate a right click for touch devices.
Scroll to guide
Enjoy! :) tip

Deluge Docker

Stop the deluge docker container. List your docker containers with this command to find the ID sudo docker container ls

sudo docker stop <Container ID>

If you are using compose, use this command:

docker-compose down

Install Option 1

Mount the theme as a volume with compose.

2a) Create a directory to save the theme locally:

mkdir ~/docker_config/deluge/ui -p

2b) Download and extract the theme into the directory:

sudo wget -c https://github.com/joelacus/deluge-web-dark-theme/raw/main/deluge_web_dark_theme.tar.gz -O - | sudo tar -xz -C ~/docker_config/deluge/ui

2c) Edit docker-compose.yml and add the following under deluge:volumes::

- ~/docker_config/deluge/ui/icons:/usr/lib/python3/dist-packages/deluge/ui/web/icons
- ~/docker_config/deluge/ui/images:/usr/lib/python3/dist-packages/deluge/ui/web/images
- ~/docker_config/deluge/ui/themes:/usr/lib/python3/dist-packages/deluge/ui/web/themes

Note: Your path may differ slightly. For example, for Unraid and some other systems:

- ~/docker_config/deluge/ui/icons:/usr/lib/python3.13/site-packages/deluge/ui/web/icons
- ~/docker_config/deluge/ui/images:/usr/lib/python3.13/site-packages/deluge/ui/web/images
- ~/docker_config/deluge/ui/themes:/usr/lib/python3.13/site-packages/deluge/ui/web/themes

Example:

deluge:
    image: linuxserver/deluge:latest
    container_name: deluge
    volumes:
      # dark theme
      - ~/docker_config/deluge/ui/icons:/usr/lib/python3/dist-packages/deluge/ui/web/icons
      - ~/docker_config/deluge/ui/images:/usr/lib/python3/dist-packages/deluge/ui/web/images
      - ~/docker_config/deluge/ui/themes:/usr/lib/python3/dist-packages/deluge/ui/web/themes

See compose-example.yml for a full file example.

Continue to Step 3

Install Option 2

Install theme directly into the container.

2a) Find the deluge docker install path:

sudo find / -type d -name 'web'

Example: /var/lib/docker/overlay2/<NUMBER>/diff/usr/lib/python3/dist-packages/deluge/ui/web

2b) Install the theme. Replace <PATH> in the install command with the path found previously which contains diff and ends with /ui/web

sudo wget -c https://github.com/joelacus/deluge-web-dark-theme/raw/main/deluge_web_dark_theme.tar.gz -O - | sudo tar -xz -C <PATH>

Post Install

Edit web.conf to set the theme. Replace <PATH> with the path to your deluge config defined in docker-compose.yml or docker run command:

sudo nano <PATH>/web.conf

Note: You can also search for it with sudo find / -type f -name 'web.conf'

Scroll to the bottom and change "theme": "gray" to "theme": "dark"

If a file called web.conf~ exists, delete, or edit it as well. Otherwise this will overwrite web.conf when deluge-web is restarted.

4a) Find the deluge docker install path:

sudo find / -type d -name 'web'

Example: /var/lib/docker/overlay2/<NUMBER>/diff/usr/lib/python3/dist-packages/deluge/ui/web

4b) Edit index.html. Replace <PATH> with path found in Step 4a.

sudo nano <PATH>/index.html

and add the following meta tag on the empty line 19 in the header (This prevents scaling issues on mobile devices):

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

Restart the deluge docker container:

sudo docker start <Container ID>

If you are using compose, use this command:

docker-compose up -d

(optional) You can change the accent colour and row colours by editing this file. Replace <PATH> with the path found in step 4a:

sudo nano <PATH>/themes/css/xtheme-dark.css

Replace the variable values --accent: 156,39,176; with any RGB value.
Note: If you don't see the updated accent colour, force reload the deluge web-ui page with Ctrl+Shift+R.

(optional) Add a toolbar button to simulate a right click for touch devices.
Scroll to guide
Enjoy! :) tip

Deluge TrueNAS

Tested with TrueNAS Core TrueNAS-12.0-U6.1 Community Deluge Plugin based on 12.2-RELEASE-p11

Switch to root inside the deluge plugin environment:

iocage console deluge

Stop deluge-web:

service deluge_web stop

(optional) Backup old files:

mv /usr/local/lib/python3.8/site-packages/deluge/ui/web/icons/ /usr/local/lib/python3.8/site-packages/deluge/ui/web/icons.bak & mv /usr/local/lib/python3.8/site-packages/deluge/ui/web/images/ /usr/local/lib/python3.8/site-packages/deluge/ui/web/images.bak

Install the theme:

fetch https://github.com/joelacus/deluge-web-dark-theme/raw/main/deluge_web_dark_theme.tar.gz && tar zxvf deluge_web_dark_theme.tar.gz -C /usr/local/lib/python3.8/site-packages/deluge/ui/web/

Edit web.conf to set the theme. This command changes "theme": "gray" to "theme": "dark"

sed -i '' -e "s/gray/dark/" ~deluge/.config/deluge/web.conf

Edit index.html

nano /usr/local/lib/python3.8/site-packages/deluge/ui/web/index.html

and add the following meta tag on the empty line 19 in the header (This prevents scaling issues on mobile devices):

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

Restart deluge-web

service deluge_web start

(optional) You can change the accent colour and row colours by editing this file:

nano /usr/local/lib/python3.8/site-packages/deluge/ui/web/themes/css/xtheme-dark.css

Replace the variable values --accent: 156,39,176; with any RGB value.
Note: If you don't see the updated accent colour, force reload the deluge web-ui page with Ctrl+Shift+R.

(optional) Add a toolbar button to simulate a right click for touch devices.
Scroll to guide
Enjoy! :) tip

Windows

Quit Deluge.
Download deluge_web_dark_theme.zip
Extract the files from the zip into this folder C:\Program Files\Deluge\deluge\ui\web and click replace existing files when prompted.
Edit web.conf with Notepad in this folder:
(Change "Text Documents (.txt)" to "All Files" in the Open dialogue).

C:\Users\<your user name>\AppData\Roaming\deluge

At the bottom of the file, edit "theme": "gray" to "theme": "dark"

If you run the deluge daemon via nssm, you will also need to edit an additional web.conf file here:

C:\config_location

If a file called web.conf.bak exists in either location, delete, or edit it as well. Otherwise this will overwrite web.conf when deluge-web is restarted.

Open Notepad as Admin and edit index.html in this folder:
(Change "Text Documents (.txt)" to "All Files" in the Open dialogue).

C:\Program Files\Deluge\deluge\ui\web\

and add the following meta tag on the empty line 19 in the header (This prevents scaling issues on mobile devices):

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

(optional) You can change the accent colour and row colours by editing xtheme-dark.css with Notepad (as Admin):
(Change "Text Documents (.txt)" to "All Files" in the Open dialogue).

C:\Program Files\Deluge\deluge\ui\web\themes\css\

Replace the variable values --accent: 156,39,176; with any RGB value.
Note: If you don't see the updated accent colour, force reload the deluge web-ui page with Ctrl+Shift+R.

(optional) Add a toolbar button to simulate a right click for touch devices.
Scroll to guide
Enjoy! :) tip

Simulate Right Click

Add a toolbar button to simulate a right click on a selected row for touch devices.

Edit index.html

sudo nano /usr/lib/python3/dist-packages/deluge/ui/web/index.html

Possible alternative location (python version may differ):

sudo nano /usr/lib/python3.13/site-packages/deluge/ui/web/index.html

Note: To get the location for Docker, check Step 3 and 4 of the Docker guide.
To get the location for Windows, check Step 5 of the Windows guide.

Add this line to the bottom of the "Javascript" section in the <head> of the HTML file:

<script type="text/javascript" src="https://cdn.rawgit.com/joelacus/deluge-web-dark-theme/refs/heads/main/deluge_simulate_right_click.js" defer></script>

Name		Name	Last commit message	Last commit date
Latest commit History 72 Commits
.github		.github
src		src
LICENSE		LICENSE
README.md		README.md
compose-example.yml		compose-example.yml
deluge-dark-theme-proxy.css		deluge-dark-theme-proxy.css
deluge_simulate_right_click.js		deluge_simulate_right_click.js
deluge_web_dark_theme.tar.gz		deluge_web_dark_theme.tar.gz
deluge_web_dark_theme.zip		deluge_web_dark_theme.zip
screenshot.png		screenshot.png

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Repository files navigation

Deluge Web UI Dark Theme + Responsive Mobile UI

INSTALL (Proxy)

All

Nginx Proxy Manager

INSTALL (Local)

Deluge 2

Deluge 1

Deluge Docker

Install Option 1

Install Option 2

Post Install

Deluge TrueNAS

Windows

Simulate Right Click

About

Uh oh!

Releases

Sponsor this project

Uh oh!

Packages

Contributors 4

Uh oh!

Languages

Uh oh!

License

joelacus/deluge-web-dark-theme

Folders and files

Latest commit

History

Repository files navigation

Deluge Web UI Dark Theme + Responsive Mobile UI

INSTALL (Proxy)

All

Nginx Proxy Manager

INSTALL (Local)

Deluge 2

Deluge 1

Deluge Docker

Install Option 1

Install Option 2

Post Install

Deluge TrueNAS

Windows

Simulate Right Click

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Sponsor this project

Uh oh!

Packages 0

Contributors 4

Uh oh!

Languages

Packages