devtools/client/themes/dark-theme.css

   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(
  46   .theme-link,
  47   .cm-s-mozilla .cm-link,
  48   :is(.cm-editor, .cm-highlighted) .tok-link
  49 ):visited {
  50   color: var(--theme-link-color);
  51 }
  52
  53 .theme-comment,
  54 .cm-s-mozilla .cm-meta,
  55 .cm-s-mozilla .cm-hr,
  56 .cm-s-mozilla .cm-comment,
  57 :is(.cm-editor, .cm-highlighted) :is(
  58   .tok-meta,
  59   .tok-comment
  60 ),
  61 .variable-or-property .token-undefined,
  62 .variable-or-property .token-null,
  63 .CodeMirror-Tern-completion-unknown:before {
  64   color: var(--theme-comment);
  65 }
  66
  67 .cm-s-mozilla .cm-unused-line {
  68   text-decoration: line-through;
  69   text-decoration-color: #0072ab;
  70 }
  71
  72 .cm-s-mozilla .cm-executed-line {
  73   background-color: #133c26;
  74 }
  75
  76 .cm-s-mozilla .cm-number,
  77 :is(.cm-editor, .cm-highlighted) .tok-number,
  78 .variable-or-property .token-number,
  79 .variable-or-property[return] > .title > .name,
  80 .variable-or-property[scope] > .title > .name {
  81   color: #709AFF;
  82 }
  83
  84 .CodeMirror-Tern-completion-number:before {
  85   background-color: #5c9966;
  86 }
  87
  88 .theme-fg-color1,
  89 .cm-s-mozilla .cm-attribute,
  90 .cm-s-mozilla .cm-builtin,
  91 .cm-s-mozilla .cm-keyword,
  92 :is(.cm-editor, .cm-highlighted) .tok-keyword,
  93 .variables-view-variable > .title > .name {
  94   color: var(--theme-highlight-red);
  95 }
  96
  97 .cm-s-mozilla .cm-def,
  98 .cm-s-mozilla .cm-variable-2,
  99 :is(.cm-editor, .cm-highlighted) :is(
 100   .tok-variableName.tok-definition,
 101   .tok-variableName
 102 ) {
 103   color: var(--theme-highlight-blue);
 104 }
 105
 106 .cm-s-mozilla .cm-variable,
 107 :is(.cm-editor, .cm-highlighted) .tok-variableName2 {
 108   color: var(--theme-highlight-purple);
 109 }
 110
 111 .cm-s-mozilla .cm-property,
 112 :is(.cm-editor, .cm-highlighted) .tok-propertyName {
 113   color: var(--theme-highlight-green);
 114 }
 115
 116 .CodeMirror-Tern-completion-object:before {
 117   background-color: #3689b2;
 118 }
 119
 120 .theme-fg-color3,
 121 .cm-s-mozilla .cm-tag,
 122 .cm-s-mozilla .cm-header,
 123 .cm-s-mozilla .cm-bracket,
 124 .cm-s-mozilla .cm-qualifier,
 125 :is(.cm-editor, .cm-highlighted) .tok-heading,
 126 .variables-view-property > .title > .name {
 127   color: var(--theme-highlight-blue);
 128 }
 129
 130 .CodeMirror-Tern-completion-array:before {
 131   background-color: var(--theme-highlight-bluegrey);
 132 }
 133
 134 .theme-fg-color2 {
 135   color: var(--theme-highlight-purple);
 136 }
 137
 138 .cm-s-mozilla .cm-string,
 139 .cm-s-mozilla .cm-string-2,
 140 :is(.cm-editor, .cm-highlighted) .tok-string,
 141 .variable-or-property .token-string,
 142 .CodeMirror-Tern-farg {
 143   color: #709AFF;
 144 }
 145
 146 .CodeMirror-Tern-completion-string:before,
 147 .CodeMirror-Tern-completion-fn:before {
 148   background-color: #b26b47;
 149 }
 150
 151 .cm-s-mozilla .cm-atom,
 152 .cm-s-mozilla .cm-quote,
 153 .cm-s-mozilla .cm-error,
 154 :is(.cm-editor, .cm-highlighted) :is(
 155   .tok-atom,
 156   .tok-bool,
 157   .tok-invalid
 158 ),
 159 .variable-or-property .token-boolean,
 160 .variable-or-property .token-domnode,
 161 .variable-or-property[exception] > .title > .name {
 162   color: var(--theme-highlight-red);
 163 }
 164
 165 .CodeMirror-Tern-completion-bool:before {
 166   background-color: #bf5656;
 167 }
 168
 169 .variable-or-property .token-domnode {
 170   font-weight: bold;
 171 }
 172
 173 .theme-toolbar,
 174 .devtools-toolbar,
 175 .devtools-sidebar-tabs tabs,
 176 .devtools-sidebar-alltabs,
 177 .cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */
 178   color: var(--theme-body-color);
 179   background-color: var(--theme-toolbar-background);
 180   border-color: var(--theme-splitter-color);
 181 }
 182
 183 .theme-bg-contrast {
 184   background: var(--theme-contrast-background);
 185 }
 186
 187 .theme-fg-contrast {
 188   color: var(--theme-contrast-color);
 189 }
 190
 191 .inspector-swatch {
 192   box-shadow: 0 0 0 1px #818181;
 193 }
 194
 195 /* CodeMirror specific styles.
 196  * Best effort to match the existing theme, some of the colors
 197  * are duplicated here to prevent weirdness in the main theme. */
 198
 199 .CodeMirror.cm-s-mozilla  { /* Inherit platform specific font sizing and styles */
 200   font-family: inherit;
 201   font-size: inherit;
 202   background: transparent;
 203 }
 204
 205 .CodeMirror.cm-s-mozilla  pre,
 206 .CodeMirror.cm-s-mozilla  pre.CodeMirror-line,
 207 .CodeMirror.cm-s-mozilla  pre.CodeMirror-line-like {
 208   color: var(--theme-text-color-strong);
 209 }
 210
 211 .cm-s-mozilla .cm-operator,
 212 :is(.cm-editor, .cm-highlighted) :is(
 213   .tok-punctuation,
 214   .tok-operator
 215 ) {
 216   color: var(--theme-body-color);
 217 }
 218
 219 .cm-s-mozilla .cm-variable-3,
 220 .cm-s-mozilla .cm-special {
 221   color: var(--theme-text-color-strong);
 222 }
 223
 224 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor,
 225 .cm-editor .cm-cursor {
 226   border-left: solid 1px #fff;
 227 }
 228 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor.CodeMirror-secondarycursor {
 229   border-left-color: #aaa;
 230 }
 231
 232 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
 233   background: rgba(185, 215, 253, .15);
 234 }
 235
 236 /* Highlight for a line that contains an error. */
 237 div.CodeMirror div.error-line {
 238   background: rgba(255,0,0,0.2);
 239 }
 240
 241 /* Generic highlighted text */
 242 div.CodeMirror span.marked-text {
 243   background: rgba(255,255,0,0.2);
 244   border: 1px dashed rgba(192,192,0,0.6);
 245   margin-inline-start: -1px;
 246   margin-inline-end: -1px;
 247 }
 248
 249
 250 .cm-s-mozilla .empty-line .CodeMirror-linenumber,
 251 /* Codemirror 6 */
 252 :is(.cm-editor, .cm-highlighted) .cm-gutterElement.empty-line {
 253   color: var(--grey-50);
 254 }
 255
 256 /* Blackboxing lines */
 257 .CodeMirror-lines .blackboxed-line :is(span, .cm-comment, .CodeMirror-gutter-elt),
 258 /* Codemirror 6 */
 259 .cm-gutterElement.blackboxed-line, .cm-line.blackboxed-line span[class^="tok-"] {
 260   color: #806414cc;
 261 }
 262
 263 /* Highlight for evaluating current statement. */
 264 div.CodeMirror span.eval-text {
 265   background-color: #556;
 266 }
 267
 268 .cm-s-mozilla .CodeMirror-linenumber, /* line number text */
 269 /* Codemirror 6 */
 270 :is(.cm-editor, .cm-highlighted) .cm-gutterElement {
 271   color: var(--grey-40);
 272 }
 273
 274 .cm-s-mozilla .CodeMirror-gutters,
 275 .cm-editor .cm-gutters { /* vertical line next to line numbers */
 276   border-right-color: var(--theme-toolbar-background);
 277   background-color: var(--theme-sidebar-background);
 278 }
 279
 280 .CodeMirror-Tern-fname {
 281   color: #f7f7f7;
 282 }
 283
 284 .CodeMirror-hints,
 285 .CodeMirror-Tern-tooltip {
 286   box-shadow: 0 0 4px rgba(255, 255, 255, .3);
 287   background-color: #0f171f;
 288   color: var(--theme-body-color);
 289 }