Your Cart

DeepDark (userstyle for Firefox 121)

On Sale
CHF3.50
Pay what you want: (minimum CHF3.50)
CHF
Added to cart
: : : ! VERY IMPORTANT ! : : :

BEFORE installing this theme, please:

- Enable "svg context-properties" through Firefox advanced configuration settings, otherwise some custom DeepDark graphics won’t display the colors set in the theme CSS files and will look all black. To enable this feature proceed as follow:

  1. Type "about:config" into Firefox url bar, push your keyboard "enter" button and click "accept" (don’t worry about the warning, if desired you can disable the feature at any time and revert to default state).
  2. In the search field enter: svg.context-properties.content.enabled. In the table below the search field, double click on "false" so you could enable the feature.

-  Enable "customization stylesheets", this is another indispensable feature that needs to be enabled in the Firefox advanced configuration settings. Without this feature activated, Firefox won't load the necessary files included in the "deepdark-v15_15-12-2023.zip" package (read the "installation" section on this page to learn how to use the content of this file). To enable this feature, follow the same steps as for the "svg context-properties". Just this time, enter in the search field: toolkit.legacyUserProfileCustomizations.stylesheets. Set this feature to "true".

- Disable any theme that you previously installed (to prevent UI visual issues);

- If you have an older version of DeepDark installed, remove it and RESTART Firefox;

- If you already make use of custom "userChrome.css" and "userContent.css", backup these files (if you plan to reuse them) and then remove them from your "chrome" folder (DeepDark has its own "userChrome.css" and "userContent.css" files). Be aware that if you add/remove/edit CSS code in DeepDark "userChrome.css" and "userContent.css" files (or any other file contained in the "DeepDark" package) this may result in unwanted UI visual glitches and I do not offer support for this kind of issues;

- Enable the default Firefox “dark” theme (go to Firefox "add-ons manager page", then in the side menu click on the "themes" button, search for the default theme called "dark" and enable it). This is very important;

- READ CAREFULLY AND ENTIRELY ALL THE ADD-ON’S DESCRIPTION BELOW.

__

WHAT IS "DEEPDARK"?

"DeepDark" is a "userstyle" created to transform the look and feel of Mozilla Firefox*. It has been specially designed to work with Firefox on the following operating systems**:

- Windows 10 (10.0.18363 build 18363);
- MacOS 10.14.6 (Mojave);
- Linux Ubuntu 22.04.3 LTS.

This theme doesn’t add specific functionalities to the Firefox software. It focuses on providing a GUI (Graphic User Interface) aesthetic customization by replacing some colors, icons and, in some cases, by changing the spacing around UI elements and/or their position.

Unlike with older versions of DeepDark, there is now the possibility to set the tabs bar position below the address bar, to choose among various highlight colors and also to switch to a slightly less or more dark color scheme. For more information on how to achieve this, please have a look at the "FAQ" section.

!Important! You may use this theme on a personal, non-commercial basis only. For more information, please, check the "README_LICENSE.txt" file included inside the package.


*Mozilla Firefox is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation.

**Please note that if you install this theme on other operating systems than the one mentioned above, I do not offer support for them (unless I can reproduce the issue on the supported operating systems). This is also valid if you use an older version of an operating systems listed on this page.

Note: I am not affiliate with the Mozilla Foundation.

__

VERSION INFORMATION

Version: 15
 
Published on Payhip: May 22, 2022

Updated: Dec 15, 2023

Works with: Firefox 121

__

WHY "DEEPDARK" WAS CREATED AND WHY THERE IS A SMALL DOWNLOAD FEE?

"DeepDark" was created for all those who would like to use a different dark mode than the default Firefox one.
There is a small download fee to support me in keeping alive and expanding my self-initiated project called "DeepDark", which aims to develop/maintain a "Suite" of dark themes/skins for popular softwares.

__

INSTALLATION

Please find below the installation instructions so you could know how to properly use all the provided files contained inside "deepdark-v15_15-12-2023.zip":

1) Extract the "deepdark-v15_15-12-2023.zip" file content on your computer and keep the folder named "chrome" (don't rename it) in a location that you will easily remember (you will need this folder later);

2) Open Firefox, click the menu button, then "help" and finally "More troubleshooting information" (or simply type "about:support" into your urlbar and push "enter" on your keyboard);

3) Once that the "Troubleshooting information" page is open, look for the "Profile Folder" row in the first table and click the button next to it which says "open folder" (on Windows), "Show in Finder" (on Mac) or "Open Directory" (on Linux). This will launch a new window with your system's file browser.
In the new window that you just opened, on Windows and Linux, you will be able to directly see your "profile folder" content. On Mac, if the "Finder" shows you a semi-randomly-named folder, double-click that folder so you could access its contents;

4) Copy or move the "chrome" folder (previously extracted) into your Firefox profile folder;

5) Restart Firefox and you are done!

The userstyle concretely works as described below:

At startup, once that "toolkit.legacyUserProfileCustomizations.stylesheets" is enabled in the advanced preferences, Firefox will check for the presence of "userChrome.css" and "userContent.css" files in a particular location: a folder named "chrome" inside your currently active profile folder (all of your current settings and add-ons are stored in there). So by adding into your profile folder the "chrome" folder contained in "deepdark-v15_15-12-2023.zip", your Firefox will read and apply the CSS code it contains.

For more information about userstyles, you can head to userchrome.org.

__

WHAT TO DO WHEN FACING AN ISSUE WITH DEEPDARK THEMES?

1) Before reporting it, first try to see if the issue is due to the theme itself. How? Remove the "chrome" folder that you manually installed, restart Firefox and check if the issue is still there. If not, put back the "chrome" folder in your profile directory, but this time disable all installed add-ons (restart Firefox again) to check if the issue can be due to a conflict with an add-on.

2) If the issue is still there after disabling all your installed add-ons and if the default Firefox theme doesn't have it, try to install a fresh version of DeepDark and check also if you have the latest version installed (maybe the bug you want to report was already solved with the latest update).

3) If after trying what mentioned above the problem is linked with the use of DeepDark, please, send me an e-mail.
When sending an e-mail to report a bug, do not forget to tell me:

- Which operating system you are running on your computer;
- Which version of Firefox and DeepDark you are using;
- If you have any operating system custom theme installed (it can also be a cause of the issue).

Then, describe the most precisely you can the issue you are facing and, if possible, please, join a screenshot and/or a short video so I could see exactly how it looks. All that will help me to better understand what is the problem and to solve it quicker, if possible.

I can t promise that I ll manage to fix every problems and also in short time, but I ll do my best for it.

__

FAQ

1) How can I enable "tabs on bottom" with the DeepDark userstyle ?

Inside the DeepDark package, open the file named "userChrome.css" with a text editor software (e.g. Notepad++) and simply remove the "/*" and "*/" symboles that enclose the following line of code:

"@import url("resources/CSS/tabs/tabs_on_bottom.css");"

To set back tabs on top, put back a "/*" (without quotes mark) at the beginning of the line and "*/" at the end (this action will "disable" the line of code and prevent Firefox to load it at startup).

Close and restart Firefox for the changes to apply.

---

2) How can I enable the "Graphite" color scheme ?

Open the file named "userChrome.css" with a text editor software (e.g. Notepad++) and simply remove the "/*" and "*/" symboles that enclose the following line of code:

"@import url("resources/CSS/subthemes/graphite.css");"

Repeat the same action in the "userContent.css" if you want the Firefox "inner pages" (such as the add-ons manager, preferences, newtab page, etc.) to also have the "Graphite" subtheme color scheme.

Close and restart Firefox for the changes to apply.

---

3) How can I switch between the different highlight colors that are available within the DeepDark userstyle ?

Open the file named "userChrome.css" with a text editor software (e.g. Notepad++) and simply remove the "/*" and "*/" symboles that enclose the line of code related to the highlight color that you would like to use. For instance, if you would like to enable the "Amber" highlight color, remove "/*" and "*/" arround the following line:

"@import url("resources/CSS/highlightColors/amberHighlight.css");"

Repeat the same action in the "userContent.css" if you want the Firefox "inner pages" (such as the add-ons manager, preferences, newtab page, etc.) to have the same highlight color. Of course, if desired, you can set a different color in the "userChrome.css" and "userContent.css", that's up to your liking.

Close and restart Firefox for the changes to apply.

Please note: if you try to enable many highlight colors at same time inside the same file, only the one who is positioned the most down in the list will be visible. To avoid Firefox to load at startup unecessary code, it is recommanded to only enable one highlight color.

---

4) I would like the "Graphite" subtheme to have the same highlight color as the default DeepDark, but the default blue color is not listed in the highlight colors list inside the "userChrome.css" and "userContent.css". How to do?

Open the file named "graphite.css" (chrome/resources/CSS/subthemes/graphite.css) with a text editor software (e.g. Notepad++) and look for the line with the following code:

@import url("../highlightColors/iceBlueHighlight.css");

Add "/*" before that line and “*/” after (both without quote marks). This action will "disable" the line of code that makes Firefox load the “IceBlueHighlight.css” file at startup.

Close and restart Firefox for the changes to apply.

Please note: this is not necessary if you plan to use any of the other highlight colors which you can choose from. But it is still recommanded to disable any highlight color that you don’t plan to use so it could prevent Firefox to load unecessary code.

---

5) Can DeepDark make the browser to look more compact?

Currently it is not necessary for DeepDark to achieve this, because it is still possible to enable back the Firefox default "compact mode" via the Firefox advanced preferences.

For that, type "about:config" in the url bar, hit the "enter" button on your keyboard and click the "accept..." button. Once the advanced preferences page is open, write "browser.compactmode.show" in the search field and in the table below it double-click "false" to enable the Firefox "compact mode". Close and restart Firefox.
After that, right-click on the browser toolbar, select "Customize Toolbar..." and once you will enter the customization mode, there is a "density" button at bottom of the page that will allow you to switch to the compact mode.

---

6) On Linux and Windows, when I enable the DeepDark "tabs on bottom" option and have my menu bar set to be hidden, I don't see the window control buttons. Is it normal?

The buttons are still there, but they are simply temporary "hidden" to leave more space. To display them when needed, simply hover the small "arrow" icon (in shape of triangle) at the end of the tabs bar.

---

7) On Linux and Windows, when I enable the DeepDark "tabs on bottom" option the window control buttons are not displayed in the top corner of the window, but at the same level as the tabs bar (if the menu bar is hidden) or at the same level as the menu bar (when the menu bar is set to be visible). Why?

In order to achieve "tabs on bottom" I had to move the tabs bar below the address bar, but given the fact that the tabs bar is located inside the Firefox titlebar, I had to move all the titlebar "block" and, therefore, the window control buttons which are also located inside the titlebar.
On MacOS I had the exact same issue, but thanks to a workaround, I managed to give the "illusion" that the buttons are naturally at the right place. Unfortunately, the workaround that I used on MacOS doesn't work on other platforms.

---

8) On Linux and Windows, when I enable the DeepDark "tabs on bottom" option the menu bar is not displaying on top, but also at the bottom. Why?

In order to achieve "tabs on bottom" I had to move the titlebar below the address bar and given the fact that the menu bar, as the tabs bar and the window control buttons, is also located inside the Firefox titlebar, it moved together with all the "block", but remained above the tabs bar. Therefore, the menu bar was "squeezed" between the tabs bar and the urlbar (or the bookmarks toolbar when set to be visible) and I preferred to move the menu bar at the very bottom (IMO, looks less uncomfortable to use that way). That's again a compromise. Hope it will be possible to do better in future.

---

9) Is it possible and do you plan to offer different tab shape(s) than the "floating tabs" that Mozilla recently introduced ?

It is possible and it was in the initial plan. But unfortunately, I didn't find the time yet to deal with this. To not delay even more the new DeepDark theme release, I decided to leave this on stand by. But, in future, I definitely would like to add tab shape options (as "substyles" that the users can enable the same way as the various highlight colors options currently available).

---

10) Why DeepDark is back as a userstyle and not as a theme add-on (webextension) or a combo of both?

At the moment, the Firefox theming API is still not offering the possibility to fully customize the Firefox UI in a complete/coherent way. So it is still, IMO, a less powerful customization tool than userstyles. It doesn't allow to reach the minimum level of customization required for DeepDark to look as complete as in the past.
Now, concerning a combo add-on/userstyle, I tried this solution with DeepDark for Thunderbird, but after experimenting with it these last years, I find this solution not so convenient for maintainance, but also for users to install and update. So for DeepDark for Firefox (v100), I decided to go "full userstyle".

---

11) How to know when an update is available?

Customers receive an email (at the address that they used to retrieve the files) which informs them when a major updated version is available. Otherwise, there is the possibility to directly check out the "Version Information" section on this page and, more precisely, the date of the latest release.

---

12) I don't find anymore the email that I received which contains the link to retrieve the DeepDark package. How to do?

Simply drop me an email and tell me which address email you used to retrieve the files at the time of the purchase. This way I will be able to send you again the receipt which will allow you to access your download link.

---

13) Why the new DeepDark package file size is larger than your other themes?

It's because of a custom illustration that I created, included in the package and that displays on the "about:robots" page. Given the fact that there are multiple highlight color options with the new DeepDark theme, I decided to have as many illustrations so it could match the highlight color selected by the user.
You will get a ZIP (2MB) file