killhellokitty on DeviantArt

Deviation Actions

killhellokitty's avatar

DeLorean-Dark Firefox-Theme 1.60



DeLorean-Dark-Theme for Firefox 15+
*For 3.6 go here:Link
Works in Windows7(will work with other versions) as well as Linux
To install in Windows the path is: '%AppData%\Mozilla\Firefox\Profiles\<profile>\' Copy and paste the entire included 'chrome' folder into the path.

This theme is different from others.
Due to the rapid changes to Firefox's CSS that occurs for each and every version update. I decided instead of creating a theme that will have to be updated for every new version of Firefox, I would create a userChrome.css file that contains all the theming within it. The main advantage is that updates to Firefox's CSS code will not break this theme because it is simply a layer drawn on top of the default Firefox theme . The code is easy to view and change. The theme does not rely upon some Third-Party for an Ad-On. And the ability to make adjustments is simple for either accessability, or just preference.

The theming in the included userChrome.css is intended to be applied to Firefox using its Default-theme while the DeLorean-Dark theme is selected as the systemwide GTK-Theme.

  • userChrome.css: Is for user-specified theming of Firefox's GUI. It contains the code for the DeLorean-Dark theme.

  • userContent.css: Is for user-specified theming inside of web-pages. It contains fixes to keep the contents of Entry-boxes, Drop-Down-Menus etc visable when using a dark-theme.

  • images-folder: Contains the image files that are called for within the userChrome.css.

  • Open the included folder: Chrome

  • Inside locate the 'userChrome.css', 'userContent.css' and the 'images' folder.

  • Select all THREE to copy.

  • *If you have previously made changes to your Firefox userChrome and userContent,
    be carefull not to over-write them.
    Add the code from your old userChrome and userContent to the TOP of the the new files
    (but, underneath the absolute top-most line beginning with '@namespace'...).
    Please note, that some or all of your old code from userChrome.css may conflict with the new theme code. Although this is highly unlikely.
    Adding it to the top of the file will make it secondary to the new theme's code.
    userContent shouldn't have any conflicts. But again, add it to the TOP of the new theme file.

  • PASTE all three into your Firefox User Profile: '~/.mozilla/firefox/userprofile/chrome/'
    *** Where 'userprofile' is XsomeNumbers.default folder.

  • **** Alternatly one may choose to create a new User-Profile specifically for the DeLorean-Dark-Theme.
    To open the Profile-Manager for Firefox:
    Important: Before you can start the Profile Manager, Firefox must be completely closed.
    In Terminal or using Alt/F2 (run-dialog) type: firefox -P

  • More information on creating and utilizing User-Profiles in Firefox may be found Here

  • Remove the 'userChrome.css' and the 'images' folder from Firefox User Profile: ~/.mozilla/firefox/userprofile/chrome/

For additional options to add into these default files: userChrome.css and userContent.css located within the 'chrome' folder you just installed. See - Mozilla Customizations: [link]
ArchLinux Wiki: [link]

needed for DeLorean-Dark ver 1.54+ & DeLorean-Dark ver 2.54+ *Not necessary for Ubuntu users with Overlay-Scrollbars
  • First install the Firefox (& or Thunderbird) Add-on 'Stylish' LINK
  • Open Add-Ons page and on the left column select 'User-Styles'
  • On the top left corner of the center box click on the 'Write New Style' button
  • For Name enter DeLorean-Scrollbar-Fix
  • Click on the 'Insert' button and select 'XUL namespace as default
  • Copy and paste the following underneath the line that begins with "@namespace url..."

      scrollcorner {
      -moz-appearance: none !important;
      padding: 1px !important;
      background: transparent !important;
      scrollbar[orient="vertical"] {
      width:13px !important;
      box-shadow: 0px 0px 1px #1d1d1d inset,
      4px 0px 7px rgba(0,0,0,.15)inset !important;
      scrollbar[orient="horizontal"] {
      height:13px !important;
      box-shadow: 0px 0px 1px #1d1d1d inset,
      0px 4px 7px rgba(0,0,0,.15)inset !important;
      thumb, thumb[height]:not([width]) {
      min-height: 42px !important;
      thumb[orient="horizontal"], thumb[width]:not([height]) {
      min-width: 42px !important;

  • Press save, and Restart Firefox for the changes to take effect
  • *Unfortunately Firefox does not allow changing of the Scrollbars within either the UserChrome.css or UserContent.css. Therefore the need to use stylish to correct the issues with the scrollbars.

    vs. 1.32 - Forgot to move the '@namespace line' to the very top of the userChrome.css file. FIxed now.
    vs. 1.40 - Many additions for a better browser experience: 1)Background for blank tab and Firefox startup blank page; before homepage loads. 2)Add-ons Manager themed. 3)New Tab Window themed. 4)Mozilla start page, I was able to add a slight darker gradient over the page for a better match with this dark theme. 5)Blank background before clicked link page loads, themed.
    The user should nolonger get a flash of white before a page loads.
    vs. 1.50 - Finished Mozilla Start-Page, it now matches the theme. StatusPanel themed dark to match.
    vs. 1.60 - Sept 26 - Fixed the missing background-image for Mozilla Start Page. Added TreeView's Text-input, Spinn-buttons, & Headers. Most of these additions affect the Preferences-Window and DOM-inspector.
    Oct 21 - Updated the Scrollbar-Fix. Its been trimmed down. For those who would like a thicker/thinner scrollbar in Firefox simply change the values: 'height:13px' and 'width:13px'. The scrollbar itself is set to 'transparent', change this to any color( may be necessary for those with visual impairment.)
Join the community to add your comment. Already a deviant? Log In
TheAngeldove's avatar
:iconpurplebutterflyplz:¸¸♥´¯) Thank you so much!
(¸☆´ (¸.♥´´¯`•.¸¸.ღ •.♥ .•´¯`•.¸¸.••Ƹ̵̡Ӝ̵̨̄Ʒ

Your Friend Always,
dove :butterfly: