pmOS-tweaks/mobile-config-firefox
1
0
Fork 0
forked from fliegerjohn/mobile-config-firefox
Code Pull requests Activity

Create auto_devtools_theme.css

Browse source
This commit is contained in:
MrOtherGuy 2021-04-10 08:25:20 +03:00
parent 802c4a4c53
commit e0cc0500f9
1 changed files with 187 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

187
content/auto_devtools_theme.css Normal file
View 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
}
}