Merge pull request #1384 from zen-browser/create-theme-1383

Add theme: Revitalized devtools
This commit is contained in:
mr. m 2025-03-31 19:52:52 +02:00 committed by GitHub
commit 3f79d11e0a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 734 additions and 0 deletions

View file

@ -0,0 +1,688 @@
/* :root {
--console-error-color: #fff !important;
--console-error-border: #e3b2b245 !important;
--console-error-background: #e78cbf3d !important;
--theme-icon-error-color: #fff !important;
--console-warning-color: #fff !important;
--console-warning-border: #f7eacc85 !important;
--console-warning-background: #f7bb5d52 !important;
--theme-icon-warning-color: #fff !important;
.message {
padding: 4px;
border-top-color: #ffffff6b !important;
}
.message-repeats {
background-color: white !important;
color: black !important;
}
.frame-link-filename {
color: #bcbcbc !important;
}
.frame-link .frame-link-source {
color: #bcbcbc !important;
}
.ruleview-rule-source-label {
color: #c6c6c6bd !important;
}
.panel-container {
background: #6c6c6c4f !important;
border-radius: 0 0 5px 5px !important
}
.CodeMirror-line {
padding: 4px !important;
}
.network-monitor {
outline: 1px solid rgba(255, 255, 255, 0.5) !important;
border-radius: 0 0 5px 5px !important;
}
.network.message .network-info #response-panel {
height: 350px !important;
}
} */
:root.theme-dark {
--theme-tab-toolbar-background: #2a2a2c !important;
--theme-toolbar-background: #323234 !important;
--theme-selection-color: #ffffff !important;
--theme-splitter-color: rgba(0, 0, 0, 0.25) !important;
--theme-comment: #7f8c98 !important;
--test-theme-body-background: #1e1e20 !important;
--theme-sidebar-background: #252527 !important;
/* --panel-background: #303033 !important; */
--theme-body-color: #cdcdcd !important;
--theme-body-color-alt: #e0e0e0 !important;
--theme-content-color1: #f0f0f0 !important;
--theme-content-color2: #cdcdcd !important;
--theme-content-color3: #969696 !important;
--theme-border-radius: 6px !important;
--theme-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
--theme-transition-duration: 0.2s !important;
--theme-transition-timing: cubic-bezier(0.4, 0, 0.2, 1) !important;
--theme-selection-background: rgba(255, 255, 255, 0.07) !important;
--theme-focus-outline-color: rgba(255, 255, 255, 0.07) !important;
--theme-toolbar-hover: rgba(255, 255, 255, 0.07) !important;
--theme-toolbar-active: rgba(255, 255, 255, 0.12) !important;
--theme-highlight-blue: #82aaff !important;
--theme-highlight-purple: #c792ea !important;
--theme-highlight-pink: #ff5370 !important;
--theme-highlight-red: #f07178 !important;
--theme-highlight-orange: #f78c6c !important;
--theme-highlight-lightorange: #ffcb6b !important;
--theme-highlight-green: #c3e88d !important;
--theme-highlight-bluegrey: #89ddff !important;
--theme-highlight-yellow: #ffcb6b !important;
--console-error-color: #fff;
--console-error-border: #e3b2b245;
--console-error-background: #e78cbf3d;
--theme-icon-error-color: #fff;
--console-warning-color: #fff;
--console-warning-border: #f7eacc85;
--console-warning-background: #f7bb5d52;
--theme-icon-warning-color: #fff;
.message {
padding: 4px;
border-top-color: #ffffff6b !important;
}
.message-repeats {
background-color: white !important;
color: black !important;
}
.frame-link-filename {
color: #bcbcbc !important;
}
.frame-link .frame-link-source {
color: #bcbcbc !important;
}
.ruleview-rule-source-label {
color: #c6c6c6bd !important;
}
.panel-container {
background: #6c6c6c4f !important;
border-radius: 0 0 5px 5px !important;
}
.CodeMirror-line {
padding: 4px !important;
}
.network-monitor {
outline: 1px solid rgba(255, 255, 255, 0.5) !important;
border-radius: 0 0 5px 5px !important;
}
.network.message .network-info #response-panel {
height: 350px !important;
}
.theme-body {
background: #18181a !important;
}
.devtools-tab,
.devtools-sidebar-tabs tab {
border-radius: var(--theme-border-radius) var(--theme-border-radius) 0 0 !important;
transition: background-color var(--theme-transition-duration) var(--theme-transition-timing),
box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
padding var(--theme-transition-duration) var(--theme-transition-timing) !important;
font-family: var(--theme-font-family);
letter-spacing: 0.2px;
}
.devtools-tab.selected {
position: relative !important;
background-color: rgba(255, 255, 255, 0.07) !important;
}
.devtools-tab.selected::after {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 2px !important;
background-color: var(--theme-highlight-blue) !important;
border-top: 0 solid transparent !important;
border-radius: 1px !important;
}
.devtools-tab:hover {
padding: 3px !important;
}
.devtools-button,
.devtools-toolbarbutton {
border-radius: 4px !important;
transition: all var(--theme-transition-duration) var(--theme-transition-timing) !important;
font-family: var(--theme-font-family);
}
.devtools-tabbar-button:hover {
background-color: var(--theme-toolbar-hover) !important;
transform: translateY(-1px) !important;
}
.devtools-tabbar-button:active {
background-color: var(--theme-toolbar-active) !important;
transform: translateY(0) !important;
}
.devtools-button:hover,
.devtools-toolbarbutton:hover {
background-color: var(--theme-toolbar-hover) !important;
transform: translateY(-1px) !important;
}
.devtools-button:active,
.devtools-toolbarbutton:active {
background-color: var(--theme-toolbar-active) !important;
transform: translateY(0) !important;
}
.devtools-container,
.devtools-sidebar,
/* .theme-panel, */
.devtools-main-content {
border-radius: var(--theme-border-radius) !important;
overflow: hidden !important;
box-shadow: var(--theme-box-shadow) !important;
}
.CodeMirror,
.inspector-tabpanel {
border-radius: var(--theme-border-radius) !important;
transition: opacity var(--theme-transition-duration) var(--theme-transition-timing) !important;
font-family: "SF Mono", Menlo, monospace !important;
}
.tree-rows,
.devtools-list {
border-radius: var(--theme-border-radius) !important;
}
.tree-row:hover,
.devtools-list-item:hover {
transition: background-color var(--theme-transition-duration) var(--theme-transition-timing) !important;
background-color: var(--theme-toolbar-hover) !important;
}
.devtools-separator {
opacity: 0;
}
.devtools-togglebutton {
border-block: none !important;
padding: 4px 8px !important;
border-radius: 4px !important;
border: none !important;
}
.devtools-togglebutton[aria-pressed="true"] {
background-color: #80808024 !important;
color: #fff !important;
}
.split-box.vert>.splitter {
min-width: 10px !important;
}
.split-box.horz>.splitter {
min-height: 10px !important;
}
.devtools-side-splitter {
min-width: 10px !important;
}
.devtools-tab-line {
display: none;
}
.ruleview-enableproperty {
appearance: auto !important;
margin-bottom: 2px !important;
}
.tabs .tabs-menu-item {
transition: background-color var(--theme-transition-duration) var(--theme-transition-timing), box-shadow var(--theme-transition-duration) var(--theme-transition-timing), padding var(--theme-transition-duration) var(--theme-transition-timing) !important;
}
.tabs .tabs-menu-item.is-active {
background-color: rgba(255, 255, 255, 0.07) !important;
}
.tag-line {
padding-block: 3px;
}
.theme-twisty {
opacity: 0.5 !important;
transition: opacity var(--theme-transition-duration) var(--theme-transition-timing) !important;
}
.theme-twisty:hover {
opacity: 1 !important;
}
.theme-selected {
background-color: #39393b !important;
}
.ruleview-highlight {
background-color: rgb(0, 0, 0) !important;
}
.stylesheet-system.splitview-nav>li.splitview-active {
background-color: var(--theme-toolbar-active) !important;
}
.devtools-tabbar-button.checked {
color: white !important;
}
.tree-node.focused {
background-color: var(--theme-toolbar-active) !important;
}
.tree .tree-node:not(.focused):hover {
background-color: var(--theme-toolbar-active) !important;
color: white !important;
}
.source-tab::before {
background-color: unset !important;
}
.source-tab.active {
background-color: var(--theme-toolbar-active) !important;
}
.checkbox-container.menu-standard-padding {
background: #303033 !important;
border-radius: 12px !important;
}
/* .tooltip-panel {
background: transparent !important;
}
.tooltip-container.tooltip-bottom {
background: transparent !important;
}
.tooltip-arrow {
display: none !important;
} */
}
:root.theme-light {
--theme-tab-toolbar-background: #f0f0f2 !important;
--theme-toolbar-background: #e8e8ea !important;
--theme-selection-color: #000000 !important;
--theme-splitter-color: rgba(0, 0, 0, 0.15) !important;
--theme-comment: #5c6773 !important;
--test-theme-body-background: #ffffff !important;
--theme-sidebar-background: #f5f5f7 !important;
/* --panel-background: #5c6773 !important; */
--theme-body-color: #333333 !important;
--theme-body-color-alt: #202020 !important;
--theme-content-color1: #0f0f0f !important;
--theme-content-color2: #333333 !important;
--theme-content-color3: #696969 !important;
--theme-border-radius: 6px !important;
--theme-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
--theme-transition-duration: 0.2s !important;
--theme-transition-timing: cubic-bezier(0.4, 0, 0.2, 1) !important;
--theme-selection-background: rgba(0, 0, 0, 0.07) !important;
--theme-focus-outline-color: rgba(0, 0, 0, 0.07) !important;
--theme-toolbar-selected-color: black !important;
--theme-toolbar-hover: rgba(0, 0, 0, 0.07) !important;
--theme-toolbar-active: rgba(0, 0, 0, 0.12) !important;
--theme-highlight-blue: #1565c0 !important;
--theme-highlight-purple: #6a1b9a !important;
--theme-highlight-pink: #d81b60 !important;
--theme-highlight-red: #c62828 !important;
--theme-highlight-orange: #ef6c00 !important;
--theme-highlight-lightorange: #f57f17 !important;
--theme-highlight-green: #2e7d32 !important;
--theme-highlight-bluegrey: #0277bd !important;
--theme-highlight-yellow: #f9a825 !important;
--console-error-color: #000;
--console-error-border: #e3b2b245;
--console-error-background: #e78cbf3d;
--theme-icon-error-color: #000;
--console-warning-color: #000;
--console-warning-border: #f7eacc85;
--console-warning-background: #f7bb5d52;
--theme-icon-warning-color: #000;
.message {
padding: 4px;
border-top-color: #0000006b !important;
}
.message-repeats {
background-color: black !important;
color: white !important;
}
.frame-link-filename {
color: #4c4c4c !important;
}
.frame-link .frame-link-source {
color: #4c4c4c !important;
}
.ruleview-rule-source-label {
color: #3c3c3cbd !important;
}
.panel-container {
background: #dcdcdc4f !important;
border-radius: 0 0 5px 5px !important;
}
.CodeMirror-line {
padding: 4px !important;
}
.network-monitor {
outline: 1px solid rgba(0, 0, 0, 0.5) !important;
border-radius: 0 0 5px 5px !important;
}
.network.message .network-info #response-panel {
height: 350px !important;
}
.theme-body {
background: #ffffff !important;
}
.devtools-tab,
.devtools-sidebar-tabs tab {
border-radius: var(--theme-border-radius) var(--theme-border-radius) 0 0 !important;
transition: background-color var(--theme-transition-duration) var(--theme-transition-timing),
box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
padding var(--theme-transition-duration) var(--theme-transition-timing) !important;
font-family: var(--theme-font-family);
letter-spacing: 0.2px;
}
.devtools-tab.selected {
position: relative !important;
background-color: rgba(0, 0, 0, 0.07) !important;
}
.devtools-tab.selected::after {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 2px !important;
background-color: var(--theme-highlight-blue) !important;
border-top: 0 solid transparent !important;
border-radius: 1px !important;
}
.devtools-tab:hover {
padding: 3px !important;
}
.devtools-button,
.devtools-toolbarbutton {
border-radius: 4px !important;
transition: all var(--theme-transition-duration) var(--theme-transition-timing) !important;
font-family: var(--theme-font-family);
}
.devtools-tabbar-button:hover {
background-color: var(--theme-toolbar-hover) !important;
transform: translateY(-1px) !important;
}
.devtools-tabbar-button:active {
background-color: var(--theme-toolbar-active) !important;
transform: translateY(0) !important;
}
.devtools-button:hover,
.devtools-toolbarbutton:hover {
background-color: var(--theme-toolbar-hover) !important;
transform: translateY(-1px) !important;
}
.devtools-button:active,
.devtools-toolbarbutton:active {
background-color: var(--theme-toolbar-active) !important;
transform: translateY(0) !important;
}
.devtools-container,
.devtools-sidebar,
/* .theme-panel, */
.devtools-main-content {
border-radius: var(--theme-border-radius) !important;
overflow: hidden !important;
box-shadow: var(--theme-box-shadow) !important;
}
.CodeMirror,
.inspector-tabpanel {
border-radius: var(--theme-border-radius) !important;
transition: opacity var(--theme-transition-duration) var(--theme-transition-timing) !important;
font-family: "SF Mono", Menlo, monospace !important;
}
.tree-rows,
.devtools-list {
border-radius: var(--theme-border-radius) !important;
}
.tree-row:hover,
.devtools-list-item:hover {
transition: background-color var(--theme-transition-duration) var(--theme-transition-timing) !important;
background-color: var(--theme-toolbar-hover) !important;
}
.devtools-separator {
opacity: 0;
}
.devtools-togglebutton {
border-block: none !important;
padding: 4px 8px !important;
border-radius: 4px !important;
border: none !important;
}
.devtools-togglebutton[aria-pressed="true"] {
background-color: rgba(0, 0, 0, 0.14) !important;
color: #000 !important;
}
.split-box.vert>.splitter {
min-width: 10px !important;
}
.split-box.horz>.splitter {
min-height: 10px !important;
}
.devtools-side-splitter {
min-width: 10px !important;
}
.devtools-tab-line {
display: none;
}
.ruleview-enableproperty {
appearance: auto !important;
margin-bottom: 2px !important;
}
.tabs .tabs-menu-item {
transition: background-color var(--theme-transition-duration) var(--theme-transition-timing), box-shadow var(--theme-transition-duration) var(--theme-transition-timing), padding var(--theme-transition-duration) var(--theme-transition-timing) !important;
}
.tabs .tabs-menu-item.is-active {
background-color: rgba(0, 0, 0, 0.07) !important;
}
.tag-line {
padding-block: 3px;
}
.theme-twisty {
opacity: 0.5 !important;
transition: opacity var(--theme-transition-duration) var(--theme-transition-timing) !important;
}
.theme-twisty:hover {
opacity: 1 !important;
}
.theme-selected {
background-color: #e0e0e2 !important;
}
.ruleview-highlight {
background-color: rgba(255, 217, 15, 0.59) !important;
}
.stylesheet-system.splitview-nav>li.splitview-active {
background-color: var(--theme-toolbar-active) !important;
}
.devtools-tabbar-button.checked {
color: black !important;
}
.tree-node.focused {
background-color: var(--theme-toolbar-active) !important;
}
.tree .tree-node:not(.focused):hover {
background-color: var(--theme-toolbar-active) !important;
color: black !important;
}
.source-tab::before {
background-color: unset !important;
}
.source-tab.active {
background-color: var(--theme-toolbar-active) !important;
}
.checkbox-container.menu-standard-padding {
background: #f0f0f2 !important;
border-radius: 12px !important;
}
/* .tooltip-panel {
background: transparent !important;
}
.tooltip-container.tooltip-bottom {
background: transparent !important;
}
.tooltip-arrow {
display: none !important;
} */
}
.tooltip-container,
.devtools-tooltip {
box-shadow: var(--theme-box-shadow) !important;
animation: tooltipFade 0.2s var(--theme-transition-timing) !important;
font-family: var(--theme-font-family);
}
@keyframes tooltipFade {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#toolbox-close {
position: relative;
}
#toolbox-close::before {
content: "";
background-image: url("chrome://devtools/skin/images/close.svg");
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 24px;
height: 24px;
opacity: 1;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
}
#toolbox-close::after {
content: "👋";
font-family: 24px !important;
display: inline-block;
opacity: 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 20px;
}
#toolbox-close:hover::before {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
#toolbox-close:hover::after {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

View file

@ -0,0 +1,32 @@
# Firefox DevTools Minimalist Theme
A revitalized, minimalist theme for Firefox DevTools, inspired by Zen's design. Includes CSS transitions and supports both light and dark modes.
## Preview
Here's a quick look at the theme:
![Merged Screenshot](https://github.com/ArjiAmin/firefox-devtools/blob/main/images/screenshot_0_merged.png)
## Installation
1. Download or clone the repository.
2. In Firefox/Zen browser, navigate to `about:config`, accept the risk warning, and search for `toolkit.legacyUserProfileCustomizations.stylesheets`. Ensure it's set to **true** (this should be the default in Zen).
3. Navigate to `about:profiles` in your browser.
4. Locate the section that says "This is the profile in use and it cannot be deleted." Find the "Root Directory" and click the **Open Folder** button.
5. Navigate to the `chrome` folder and paste the downloaded `UserContent.css` file.
6. Return to `about:profiles` and click "Restart normally...". After restart, open DevTools to see the applied theme.
## Development
If you want to customize the theme or make your own changes:
1. Open DevTools by pressing `F12`.
2. Click the three horizontal dots in the top-right corner to access Settings, or press F1.
3. Scroll down to "Advanced settings" and enable the "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" checkboxes.
4. Close and reopen DevTools.
5. Press `Ctrl + Shift + Alt + I` to open the Browser Toolbox, which allows you to inspect the DevTools interface itself.
6. Use the element inspector to identify elements you want to modify and test CSS changes in real-time.
**Note:** Changes made directly in the Browser Toolbox are temporary. To make permanent changes, update your `UserContent.css` file with your modifications. Remember that changes to `UserContent.css` require a browser restart to take effect.

View file

@ -0,0 +1,14 @@
{
"id": "0d218357-d5be-48f1-bbc0-5e7cb2d2e11f",
"name": "Revitalized devtools",
"description": "A calmer theme for Zen's DevTools with added transitions and compatible white/dark modes.",
"homepage": "https://github.com/ArjiAmin/firefox-devtools",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/image.png",
"author": "ArjiAmin",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-30",
"updatedAt": "2025-03-30"
}