From e0cc0500f954bd79ec5b0447da183c1072ef224f Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Sat, 10 Apr 2021 08:25:20 +0300 Subject: [PATCH] Create auto_devtools_theme.css --- content/auto_devtools_theme.css | 187 ++++++++++++++++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 content/auto_devtools_theme.css diff --git a/content/auto_devtools_theme.css b/content/auto_devtools_theme.css new file mode 100644 index 0000000..8a3f3de --- /dev/null +++ b/content/auto_devtools_theme.css @@ -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 + } +} \ No newline at end of file