Confirmed users
66
edits
DevTools/Developer Edition Theme: Difference between revisions
Jump to navigation
Jump to search
m
DevTools/Developer Edition Theme (view source)
Revision as of 20:24, 11 August 2015
, 11 August 2015no edit summary
(Add screenshots for "How to apply") |
mNo edit summary |
||
| Line 1: | Line 1: | ||
The Developer Edition Theme is implemented as a lightweight theme, but it's different from others in a few ways. | The Developer Edition Theme is implemented as a lightweight theme, but it's different from others in a few ways. | ||
1. Rather than being installed separately, it is bundled with the browser using [https://github.com/mozilla/gecko-dev/blob/c0f04387c3fd376c453764312a8d41e577bf2d1a/browser/components/nsBrowserGlue.js#L800 LightweightThemeManager.addBuiltInTheme]. Because of this, it's only available (for now) in the Nightly and Developer Edition channels | 1. Rather than being installed separately, it is bundled with the browser using [https://github.com/mozilla/gecko-dev/blob/c0f04387c3fd376c453764312a8d41e577bf2d1a/browser/components/nsBrowserGlue.js#L800 LightweightThemeManager.addBuiltInTheme]. Because of this, it's only available (for now) in the Nightly and Developer Edition channels - see [https://bugzilla.mozilla.org/show_bug.cgi?id=1181721 Bug 1181721] for more information. | ||
2. It has an extra stylesheet that's loaded when it's applied - see the CSS Section for more information. This gives it more control than other lightweight themes, which allows it to override a number of CSS variables and other styles. | 2. It has an extra stylesheet that's loaded when it's applied - see the CSS Section for more information. This gives it more control than other lightweight themes, which allows it to override a number of CSS variables and other styles. | ||
3. It changes colors when the DevTools theme changes. By default in Developer Edition, the DevTools theme is dark. In Nightly (or local builds) the DevTools theme defaults to light. This is controlled by the devtools.theme pref. | 3. It changes colors when the DevTools theme changes. By default in Developer Edition, the DevTools theme is dark. In Nightly (or local builds) the DevTools theme defaults to light. This is controlled by the devtools.theme pref. | ||
== CSS == | |||
The main styling for the Developer Edition theme is located here: http://dxr.mozilla.org/mozilla-central/source/browser/themes/shared/devedition.inc.css | |||
Then each OS has their own files for platform-specific styling, located here: | |||
* https://dxr.mozilla.org/mozilla-central/source/browser/themes/linux/devedition.css | |||
* https://dxr.mozilla.org/mozilla-central/source/browser/themes/osx/devedition.css | |||
* https://dxr.mozilla.org/mozilla-central/source/browser/themes/windows/devedition.css | |||
== How To Apply == | == How To Apply == | ||
| Line 16: | Line 26: | ||
[[File:DevEdition-Switch-Colors.png|600px|thumbnail|center]] | [[File:DevEdition-Switch-Colors.png|600px|thumbnail|center]] | ||