Create auto_devtools_theme.css
This commit is contained in:
MrOtherGuy
parent
802c4a4c53
commit
e0cc0500f9
1 changed files with 187 additions and 0 deletions
187
content/auto_devtools_theme.css
Normal file
187
content/auto_devtools_theme.css
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/content/auto_devtools_theme.css made available under Mozilla Public License v. 2.0
|
||||
See the above repository for updates as well as full license text. */
|
||||
|
||||
/* Make devtools use dark theme if your OS is in dark mode. Set devtools to Light-theme for this style to work */
|
||||
|
||||
@-moz-document url("about:devtools-toolbox"), url-prefix("chrome://devtools/content/"){
|
||||
@media(prefers-color-scheme: dark){
|
||||
:root {
|
||||
--badge-active-background-color: var(--blue-60) !important;
|
||||
--badge-active-border-color: #FFF6 !important;
|
||||
--badge-background-color: var(--grey-80) !important;
|
||||
--badge-border-color: var(--grey-50) !important;
|
||||
--badge-color: var(--grey-40) !important;
|
||||
--badge-hover-background-color: var(--grey-80) !important;
|
||||
--badge-interactive-background-color: var(--grey-70) !important;
|
||||
--badge-interactive-color: var(--grey-30) !important;
|
||||
--badge-scrollable-color: #B98EFF !important;
|
||||
--badge-scrollable-background-color: transparent !important;
|
||||
|
||||
--tab-line-hover-color: rgba(255,255,255,.2) !important;
|
||||
--toggle-thumb-color: var(--grey-40) !important;
|
||||
--toggle-track-color: var(--grey-60) !important;
|
||||
--searchbox-no-match-background-color: #402325 !important;
|
||||
--searchbox-no-match-stroke-color: var(--red-50) !important;
|
||||
|
||||
--bezier-diagonal-color: #eee !important;
|
||||
|
||||
--bezier-grid-color: rgba(0, 0, 0, 0.2) !important;
|
||||
--theme-tooltip-color: var(--theme-text-color-strong) !important;
|
||||
--theme-tooltip-background: var(--theme-popup-background) !important;
|
||||
--theme-tooltip-shadow: rgba(25, 25, 25, 0.76) !important;
|
||||
--theme-tooltip-icon-dimmed-color: rgb(255, 255, 255) !important;
|
||||
--theme-arrowpanel-background: var(--theme-popup-background) !important;
|
||||
--theme-arrowpanel-color: var(--theme-popup-color) !important;
|
||||
--theme-arrowpanel-border-color: var(--theme-popup-border-color) !important;
|
||||
--theme-arrowpanel-separator: rgba(249,249,250,.1) !important;
|
||||
--theme-arrowpanel-dimmed: var(--theme-popup-dimmed) !important;
|
||||
--theme-arrowpanel-dimmed-further: rgba(249,249,250,.15) !important;
|
||||
--theme-arrowpanel-disabled-color: rgba(249,249,250,.5) !important;
|
||||
|
||||
--theme-body-background: #232327 !important;
|
||||
--theme-body-emphasized-background: var(--grey-70) !important;
|
||||
--theme-sidebar-background: #18181a !important;
|
||||
|
||||
/* Toolbar */
|
||||
--theme-tab-toolbar-background: var(--grey-90) !important;
|
||||
--theme-toolbar-background: #18181a !important;
|
||||
--theme-toolbar-color: var(--grey-40) !important;
|
||||
--theme-toolbar-selected-color: white !important;
|
||||
--theme-toolbar-highlighted-color: var(--green-50) !important;
|
||||
--theme-toolbar-background-hover: #232327 !important;
|
||||
--theme-toolbar-background-alt: var(--grey-85) !important;
|
||||
--theme-toolbar-hover: #232327 !important;
|
||||
--theme-toolbar-hover-active: #252526 !important;
|
||||
--theme-toolbar-separator: var(--grey-10-a20) !important;
|
||||
|
||||
/* Toolbar buttons */
|
||||
--toolbarbutton-background: var(--grey-70) !important;
|
||||
--toolbarbutton-hover-background: var(--grey-70) !important;
|
||||
--toolbarbutton-focus-background: var(--grey-60) !important;
|
||||
--toolbarbutton-focus-color: var(--grey-30) !important;
|
||||
--toolbarbutton-checked-background: #204e8a !important;
|
||||
--toolbarbutton-checked-focus-background: var(--blue-60) !important;
|
||||
--toolbarbutton-checked-color: #ffffff !important;
|
||||
|
||||
/* Buttons */
|
||||
--theme-button-background: rgba(249, 249, 250, 0.1) !important;
|
||||
--theme-button-active-background: rgba(249, 249, 250, 0.15) !important;
|
||||
|
||||
/* Accordion headers */
|
||||
--theme-accordion-header-background: #232327 !important;
|
||||
--theme-accordion-header-hover: #2a2a2e !important;
|
||||
|
||||
/* Selection */
|
||||
--theme-selection-background: #204e8a !important;
|
||||
--theme-selection-background-hover: #353b48 !important;
|
||||
--theme-selection-focus-background: var(--grey-60) !important;
|
||||
--theme-selection-color: #ffffff !important;
|
||||
|
||||
/* Border color that splits the toolbars/panels/headers. */
|
||||
--theme-splitter-color: var(--grey-70) !important;
|
||||
--theme-emphasized-splitter-color: var(--grey-60) !important;
|
||||
--theme-emphasized-splitter-color-hover: var(--grey-50) !important;
|
||||
|
||||
/* Icon colors */
|
||||
--theme-icon-color: rgba(249, 249, 250, 0.7) !important;
|
||||
--theme-icon-dimmed-color: rgba(147, 147, 149, 0.9) !important;
|
||||
--theme-icon-checked-color: var(--blue-30) !important;
|
||||
--theme-icon-error-color: var(--red-40) !important;
|
||||
--theme-icon-warning-color: var(--yellow-60) !important;
|
||||
|
||||
/* Text color */
|
||||
--theme-comment: var(--grey-45) !important;
|
||||
--theme-body-color: var(--grey-40) !important;
|
||||
--theme-text-color-alt: var(--grey-45) !important;
|
||||
--theme-text-color-inactive: var(--grey-50) !important;
|
||||
--theme-text-color-strong: var(--grey-30) !important;
|
||||
--theme-stack-trace-text: var(--red-50) !important;
|
||||
|
||||
--theme-highlight-green: #86de74 !important;
|
||||
--theme-highlight-blue: #75bfff !important;
|
||||
--theme-highlight-purple: #b98eff !important;
|
||||
--theme-highlight-red: #ff7de9 !important;
|
||||
--theme-highlight-yellow: #fff89e !important;
|
||||
|
||||
/* These theme-highlight color variables have not been photonized. */
|
||||
--theme-highlight-bluegrey: #5e88b0 !important;
|
||||
--theme-highlight-lightorange: #d99b28 !important;
|
||||
--theme-highlight-orange: #d96629 !important;
|
||||
--theme-highlight-pink: #df80ff !important;
|
||||
--theme-highlight-gray: #e9f4fe !important;
|
||||
|
||||
/* For accessibility purposes we want to enhance the focus styling. This
|
||||
* should improve keyboard navigation usability. */
|
||||
--theme-focus-outline-color: #ced3d9 !important;
|
||||
|
||||
/* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
|
||||
--theme-graphs-green: #70bf53 !important;
|
||||
--theme-graphs-blue: #46afe3 !important;
|
||||
--theme-graphs-bluegrey: #5e88b0 !important;
|
||||
--theme-graphs-purple: #df80ff !important;
|
||||
--theme-graphs-yellow: #d99b28 !important;
|
||||
--theme-graphs-orange: #d96629 !important;
|
||||
--theme-graphs-red: #eb5368 !important;
|
||||
--theme-graphs-grey: #757873 !important;
|
||||
--theme-graphs-full-red: #f00 !important;
|
||||
--theme-graphs-full-blue: #00f !important;
|
||||
|
||||
/* Common popup styles(used by HTMLTooltip and autocomplete) */
|
||||
--theme-popup-background: var(--grey-60) !important;
|
||||
--theme-popup-color: rgb(249, 249, 250) !important;
|
||||
--theme-popup-border-color: #27272b !important;
|
||||
--theme-popup-dimmed: rgba(249, 249, 250, 0.1) !important;
|
||||
|
||||
/* Styling for devtool buttons */
|
||||
--theme-toolbarbutton-background: none !important;
|
||||
--theme-toolbarbutton-color: var(--grey-40) !important;
|
||||
--theme-toolbarbutton-hover-background: var(--grey-10-a15) !important;
|
||||
--theme-toolbarbutton-checked-background: var(--grey-10-a20) !important;
|
||||
--theme-toolbarbutton-checked-color: var(--grey-30) !important;
|
||||
--theme-toolbarbutton-checked-hover-background: var(--grey-10-a25) !important;
|
||||
--theme-toolbarbutton-checked-hover-color: var(--grey-30) !important;
|
||||
--theme-toolbarbutton-active-background: var(--grey-10-a30) !important;
|
||||
--theme-toolbarbutton-active-color: var(--grey-30) !important;
|
||||
|
||||
/* Used for select elements */
|
||||
--theme-select-background: var(--grey-60) !important;
|
||||
--theme-select-color: #fff !important;
|
||||
--theme-select-hover-border-color: var(--grey-50) !important;
|
||||
|
||||
/* Warning colors */
|
||||
--theme-warning-background: hsl(42, 37%, 19%) !important;
|
||||
--theme-warning-border: hsl(60, 30%, 26%) !important;
|
||||
--theme-warning-color: hsl(43, 94%, 81%) !important;
|
||||
|
||||
/* Flashing colors used to highlight updates */
|
||||
--theme-contrast-background: #4f4b1f !important; /* = Yellow 50-a20 on body background */
|
||||
--theme-contrast-background-alpha: rgba(255, 233, 0, 0.15) !important; /* Yellow 50-a15 */
|
||||
--theme-contrast-color: white !important;
|
||||
--theme-contrast-border: var(--yellow-65) !important;
|
||||
|
||||
--markup-hidden-attr-name-color: #787878 !important;
|
||||
--markup-hidden-attr-value-color: #a4a4a4 !important;
|
||||
--markup-hidden-punctuation-color: #787878 !important;
|
||||
--markup-hidden-tag-color: var(--grey-45) !important;
|
||||
--markup-outline: var(--theme-selection-background) !important;
|
||||
--markup-drag-line: var(--grey-55) !important;
|
||||
--markup-drop-line: var(--blue-50) !important;
|
||||
--markup-overflow-causing-background-color: rgba(148, 0, 255, 0.38) !important;
|
||||
|
||||
--console-input-background: var(--theme-tab-toolbar-background) !important;
|
||||
--console-message-background: var(--theme-body-background) !important;
|
||||
--console-message-border: var(--theme-splitter-color) !important;
|
||||
--console-message-color: var(--theme-text-color-strong) !important;
|
||||
--console-error-background: hsl(345, 23%, 24%) !important;
|
||||
--console-error-border: hsl(345, 30%, 35%) !important;
|
||||
--console-error-color: var(--red-20) !important;
|
||||
--console-navigation-color: var(--theme-highlight-blue) !important;
|
||||
--console-navigation-border: var(--blue-60) !important;
|
||||
--console-indent-border-color: var(--theme-highlight-blue) !important;
|
||||
--console-repeat-bubble-background: var(--blue-60) !important;
|
||||
--error-color: var(--red-20) !important;
|
||||
--console-output-color: white !important;
|
||||
|
||||
scrollbar-color: var(--grey-50) var(--theme-splitter-color) !important
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue