Complete Theme Changes for Pale Moon

(Redirected from Pale Moon Theme Changes)
  • This information is WIP and subject to change.

For the most part, complete themes are identical to those compatible with Firefox 24 (Firefox 27 as of Pale Moon 27), though there are a few changes. These are listed below, per version.

Pale Moon 15.2

This version introduced the (optional, opt-out) SSL padlock as various indicators on the UI, which can be moved using about:config (see the Pale Moon Tweak Guide for the relevant entries). This is styled in the browser, though theme authors do have CSS selectors available should they wish to override the default styling. See padlock.css of any Pale Moon-specific theme to see how this could be implemented (note that this can be implemented in browser.css if desired, though is placed in its own file and directory in most themes for cleanliness).

Pale Moon 24.1

This version (re-)introduced an (optional, opt-out) RSS feed icon in the urlbar, which can be disabled in about:config if desired by the user. The selector for this is #ub-feed-button, and is required, else an invisible icon is left present in the urlbar when this button is enabled by the user.

Pale Moon 25.6

This version introduced the use of chrome overrides in chrome.manifest for complete themes, allowing for overriding icons and stylesheets with others (for example, using different icons for different operating systems). This version also added -moz-os-version media queries, to detect different OS versions. The following exist as of 25.6.0:

  • -moz-os-version: windows-xp
  • -moz-os-version: windows-vista
  • -moz-os-version: windows-win7
  • -moz-os-version: windows-win8
  • -moz-os-version: windows-win10

With the introduction of the win10 query in this version, it is now possible to add support for Windows 10's window borders and caption buttons. Please see the relevant Pale Moon commits below:
Show toolbar borders on Vista through Win 8.x, but not Win10 or later.
Fix the main window border styling on Win 10.
Don't use rounded corners on the window edge on Win10
Part 2: Draw our own buttons, background and highlights.
Part 3: Add support for dark toolbar backgrounds
More Win10 theme fixes
Don't use rounded corners on the window edge on Win10 (other toolbars, ToT)On Win10, in ToT maximized, make sure to fill the title bar height for Fitts' law

Pale Moon 26.0

This version added further media queries to -moz-os-version, beyond those supported in Firefox, to include various Unix-based operating systems as well. It also added another media query, -moz-unix-theme (NOTE: As per below, these are both removed as of 27.0. Do not add these unless you do not plan to support Pale Moon 27+!). The following exist as of 26.0 (in addition to those added previously):

  • -moz-os-version: gnu-linux
  • -moz-os-version: bsd
  • -moz-os-version: macos-x
  • -moz-unix-theme: gtk-2
  • -moz-unix-theme: qt (NOTE: this is unlikely to ever return true due to lack of a functional Qt interface)

Additionally, there is a new button on the toolbar: #history-menu-button. Aesthetically, this can be the same as #history-button, though opens the history menu (and so has a dropdown associated with it usually).

.downloadTarget, part of the downloads UI (/chrome/browser/downloads/allDownloadsViewOverlay.css and /chrome/browser/downloads/downloads.css) has been renamed to .downloadDisplayName in this release.

Pale Moon 26.2.2

This version added dark window frame detection for Windows 8. This can be accessed by using the darkwindowframe property of #main-window (example: #main-window[darkwindowframe="true"]).

Pale Moon 26.3

This version added dark window frame detection for Windows 10, using the same styling as for Windows 8. It also added dark system theme detection cross-platform, by adding the brighttext property to toolbar (toolbar[brighttext]). This is true whenever text on the specified toolbar is bright.

Additionally, this version added a global XUL class for close buttons, .close-icon, styled in /chrome/global/global.css. This is an optional change for theme developers, though is recommended for cleanliness. Any selectors otherwise styling a close icon can be removed if this change is implemented, assuming they are styled identically.

This version also changed how the media controls are handled. Notably, the volume controls are now horizontal rather than being a vertical pop-out. See the relevant Pale Moon commit for details on this. Of note, /global/media/videocontrols.css has changed, and two icons are added: volume-empty.png and volume-full.png.

Pale Moon 27.0

This version removes the -moz-os-version and -moz-unix-theme queries added in 26.0 (possibly to return in future), and is now based on Firefox 38 for the backend (for us, this means /global and /mozapps). This backend change now means that Pale Moon supports CSS variables.

Notably, this version integrates the statusbar code into the browser, which also includes themes. To fix this, you can directly place the folder /browser/statusbar from the default theme into a theme. This is required, as otherwise the address bar will feature text ghosting due to additional text for the statusbar component.

As this is now based on Firefox 38 backend, the Firefox 38 devtools are present here. However, you will need to place them in /global rather than /browser due to further backend changes on the Pale Moon side. Additionally, many changes have been made to the Responsive Design mode and the Developer Toolbar. Please see the relevant changes in a third-party theme for the types of changes required for this.

In /global/about.css, #version should be removed entirely, as this is now rendered in-line with other items in about:. Additionally, in the downloads panel (/browser/downloads/downloads.css), there is now an indicator for no downloads, #emptyDownloads. Please see the relevant Pale Moon commit for how this has been styled in the default theme.

Pale Moon 27.3

In Pale Moon 27.3, an image, imagedocument.png, was added to /browser. This is shown in the urlbar whenever a standalone image is viewed. If this is not included, no favicon is loaded in the urlbar for viewing images. Additionally, the permissions manager, about:permissions, was given a revamp, including several more icons and increasing their size to 48px. Please see the relevant changes in a third-party theme for the types of changes required for this.

Pale Moon 27.4

In this version, the devtools styling has been updated as per the following commit.

Pale Moon 27.5

This version changes the window styling used for Windows 10 significantly, such that it mimics the window styling of Firefox's "Photon" UI. Of note, as per the initial Windows 10 implementation, this version draws its own background on the window frame in Windows 10, while still being able to calculate the correct accent color to use. If no accent color is in use, it uses a dark window frame styling. This dark styling uses a white window title color by default, which must be reverted if no dark window frame is to be used. To do this, several CSS queries were added. For example:

  • @media (-moz-windows-accent-color-applies) - checks if there is an accent color in the titlebar. Can also use @media (-moz-windows-accent-color-applies: 0) to check if color is not present
  • @media (-moz-windows-accent-color-is-dark) - checks if the current accent color is dark

It should be noted that these changes are optional for theme authors, however will improve stability of the window frame on Windows 10.

The commits for this are here, here, here and there. Note that this implementation assumes that CSS variables have been implemented in your theme first, notably the --window-text-color variable.

Additionally, changes were made to the status bar code in this version, which contain required changes for themes, in order to not break the statusbar progressmeter. Please see here for the relevant changes in a third-party theme.

Pale Moon 27.5.1

This version changes the Windows 10 styling from the previous version slightly, such that a white (#FFFFFF) background is used for active windows when there is no accent color applied. This will have an affect on themes if they have implemented the change from 27.5.0, as the window text will be black (#000000) rather than white in this instance. Theme authors can either change the window background, or force the text styling.

This change can be found here.

Categories: Add-ons
Firefox, Mozilla Firefox and Mozilla are registered trademarks of the Mozilla Corporation.
Site design and Branding © 2016 Moonchild Productions - All rights reserved
Any other content is copyright or trademark to their respective owners.
This site uses Cookies - Your usage indicates your consent to their use.

The Pale Moon Developer Wiki is powered by Enano