dark-theme.css (7003B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 @import url(chrome://devtools/skin/variables.css); 6 @import url(chrome://devtools/skin/common.css); 7 @import url(chrome://devtools/skin/toolbars.css); 8 @import url(chrome://devtools/skin/tooltips.css); 9 10 body { 11 margin: 0; 12 } 13 14 .theme-body { 15 background: var(--theme-body-background); 16 color: var(--theme-body-color); 17 } 18 19 .theme-sidebar { 20 background: var(--theme-sidebar-background); 21 color: var(--theme-body-color); 22 } 23 24 .theme-selected, 25 .CodeMirror-hint-active { 26 background-color: var(--theme-selection-background); 27 color: var(--theme-selection-color); 28 } 29 30 .variable-or-property:not([overridden])[changed] { 31 background: var(--theme-contrast-background); 32 } 33 34 .theme-link, 35 .cm-s-mozilla .cm-link, 36 :is(.cm-editor, .cm-highlighted) .tok-link, 37 .CodeMirror-Tern-type { 38 color: var(--grey-45); 39 } 40 41 /* 42 * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion 43 * failures in debug builds. 44 */ 45 :is(.theme-link, .cm-s-mozilla .cm-link, :is(.cm-editor, .cm-highlighted) .tok-link):visited { 46 color: var(--theme-link-color); 47 } 48 49 .theme-comment, 50 .cm-s-mozilla .cm-meta, 51 .cm-s-mozilla .cm-hr, 52 .cm-s-mozilla .cm-comment, 53 :is(.cm-editor, .cm-highlighted) :is(.tok-meta, .tok-comment), 54 .variable-or-property .token-undefined, 55 .variable-or-property .token-null, 56 .CodeMirror-Tern-completion-unknown:before { 57 color: var(--theme-comment); 58 } 59 60 .cm-s-mozilla .cm-unused-line { 61 text-decoration: line-through; 62 text-decoration-color: #0072ab; 63 } 64 65 .cm-s-mozilla .cm-executed-line { 66 background-color: #133c26; 67 } 68 69 .cm-s-mozilla .cm-number, 70 :is(.cm-editor, .cm-highlighted) .tok-number, 71 .variable-or-property .token-number, 72 .variable-or-property[return] > .title > .name, 73 .variable-or-property[scope] > .title > .name { 74 color: #709aff; 75 } 76 77 .CodeMirror-Tern-completion-number:before { 78 background-color: #5c9966; 79 } 80 81 .cm-s-mozilla .cm-property, 82 :is(.cm-editor, .cm-highlighted) .tok-propertyName { 83 color: var(--theme-highlight-green); 84 } 85 86 .theme-fg-color1, 87 /* ------- cm6 ------- */ 88 .cm-editor .tok-literal, 89 .cm-editor .tok-className, 90 /* This matches html attribute names only, not matching css declaration names */ 91 .cm-editor .tok-propertyName:has(+ .tok-operator), 92 /* ------------------- */ 93 .cm-s-mozilla .cm-attribute, 94 .cm-s-mozilla .cm-builtin, 95 .cm-s-mozilla .cm-keyword, 96 :is(.cm-editor, .cm-highlighted) .tok-keyword, 97 .variables-view-variable > .title > .name { 98 color: var(--theme-highlight-red); 99 } 100 101 .cm-s-mozilla .cm-def, 102 .cm-s-mozilla .cm-variable-2, 103 :is(.cm-editor, .cm-highlighted) :is(.tok-variableName.tok-definition, .tok-variableName) { 104 color: var(--theme-highlight-blue); 105 } 106 107 .cm-s-mozilla .cm-variable, 108 :is(.cm-editor, .cm-highlighted) .tok-variableName2 { 109 color: var(--theme-highlight-purple); 110 } 111 112 .CodeMirror-Tern-completion-object:before { 113 background-color: #3689b2; 114 } 115 116 .theme-fg-color3, 117 /* ------- cm6 ------- */ 118 .cm-editor .tok-typeName, 119 /* ------------------- */ 120 .cm-s-mozilla .cm-tag, 121 .cm-s-mozilla .cm-header, 122 .cm-s-mozilla .cm-bracket, 123 .cm-s-mozilla .cm-qualifier, 124 :is(.cm-editor, .cm-highlighted) .tok-heading, 125 .variables-view-property > .title > .name { 126 color: var(--theme-highlight-blue); 127 } 128 129 .CodeMirror-Tern-completion-array:before { 130 background-color: var(--theme-highlight-bluegrey); 131 } 132 133 .theme-fg-color2 { 134 color: var(--theme-highlight-purple); 135 } 136 137 .cm-s-mozilla .cm-string, 138 .cm-s-mozilla .cm-string-2, 139 /* ------- cm6 ------- */ 140 :is(.cm-editor, .cm-highlighted) .tok-string, 141 .variable-or-property .token-string, 142 /* ------------------- */ 143 .CodeMirror-Tern-farg { 144 color: #709aff; 145 } 146 147 .CodeMirror-Tern-completion-string:before, 148 .CodeMirror-Tern-completion-fn:before { 149 background-color: #b26b47; 150 } 151 152 .cm-s-mozilla .cm-atom, 153 .cm-s-mozilla .cm-quote, 154 .cm-s-mozilla .cm-error, 155 :is(.cm-editor, .cm-highlighted) :is(.tok-atom, .tok-bool, .tok-invalid), 156 .variable-or-property .token-boolean, 157 .variable-or-property .token-domnode, 158 .variable-or-property[exception] > .title > .name { 159 color: var(--theme-highlight-red); 160 } 161 162 .CodeMirror-Tern-completion-bool:before { 163 background-color: #bf5656; 164 } 165 166 .variable-or-property .token-domnode { 167 font-weight: bold; 168 } 169 170 .theme-toolbar, 171 .devtools-toolbar, 172 .devtools-sidebar-tabs tabs, 173 .devtools-sidebar-alltabs, 174 .cm-s-mozilla .CodeMirror-dialog { 175 /* General toolbar styling */ 176 color: var(--theme-body-color); 177 background-color: var(--theme-toolbar-background); 178 border-color: var(--theme-splitter-color); 179 } 180 181 .theme-bg-contrast { 182 background: var(--theme-contrast-background); 183 } 184 185 .theme-fg-contrast { 186 color: var(--theme-contrast-color); 187 } 188 189 /* CodeMirror specific styles. 190 * Best effort to match the existing theme, some of the colors 191 * are duplicated here to prevent weirdness in the main theme. */ 192 193 .CodeMirror.cm-s-mozilla { 194 /* Inherit platform specific font sizing and styles */ 195 font-family: inherit; 196 font-size: inherit; 197 background: transparent; 198 } 199 200 .CodeMirror.cm-s-mozilla pre, 201 .CodeMirror.cm-s-mozilla pre.CodeMirror-line, 202 .CodeMirror.cm-s-mozilla pre.CodeMirror-line-like { 203 color: var(--theme-text-color-strong); 204 } 205 206 .cm-s-mozilla .cm-operator, 207 :is(.cm-editor, .cm-highlighted) :is(.tok-punctuation, .tok-operator) { 208 color: var(--theme-body-color); 209 } 210 211 .cm-s-mozilla .cm-variable-3, 212 .cm-s-mozilla .cm-special { 213 color: var(--theme-text-color-strong); 214 } 215 216 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor, 217 .cm-editor .cm-cursor { 218 border-left: solid 1px #fff; 219 } 220 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor.CodeMirror-secondarycursor { 221 border-left-color: #aaa; 222 } 223 224 .cm-s-mozilla .CodeMirror-activeline-background { 225 /* selected color with alpha */ 226 background: rgba(185, 215, 253, 0.15); 227 } 228 229 /* Highlight for a line that contains an error. */ 230 div.CodeMirror div.error-line { 231 background: rgba(255, 0, 0, 0.2); 232 } 233 234 /* Generic highlighted text */ 235 div.CodeMirror span.marked-text { 236 background: rgba(255, 255, 0, 0.2); 237 border: 1px dashed rgba(192, 192, 0, 0.6); 238 margin-inline-start: -1px; 239 margin-inline-end: -1px; 240 } 241 242 .cm-s-mozilla .empty-line .CodeMirror-linenumber, 243 /* Codemirror 6 */ 244 :is(.cm-editor, .cm-highlighted) .cm-gutterElement.empty-line { 245 color: var(--grey-50); 246 } 247 248 /* Blackboxing lines */ 249 .CodeMirror-lines .blackboxed-line :is(span, .cm-comment, .CodeMirror-gutter-elt), 250 /* Codemirror 6 */ 251 .cm-gutterElement.blackboxed-line, .cm-line.blackboxed-line span[class^="tok-"] { 252 color: #806414cc; 253 } 254 255 /* Highlight for evaluating current statement. */ 256 div.CodeMirror span.eval-text { 257 background-color: #556; 258 } 259 260 .cm-s-mozilla .CodeMirror-linenumber, /* line number text */ 261 /* Codemirror 6 */ 262 :is(.cm-editor, .cm-highlighted) .cm-gutterElement { 263 color: var(--grey-40); 264 } 265 266 .CodeMirror-Tern-fname { 267 color: #f7f7f7; 268 } 269 270 .CodeMirror-hints, 271 .CodeMirror-Tern-tooltip { 272 box-shadow: 0 0 4px rgba(255, 255, 255, 0.3); 273 background-color: #0f171f; 274 color: var(--theme-body-color); 275 }