--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -1,22 +1,27 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
   --markup-outline: var(--theme-splitter-color);
-  --markup-hidden-attr-color: var(--theme-comment);
-  --markup-hidden-tag-color: #A1A1A4;
+  --markup-hidden-attr-name-color: #CA60AC;
+  --markup-hidden-attr-value-color: #5C6D87;
+  --markup-hidden-tag-color: #97A4B3;
+  --markup-hidden-punctuation-color: #909090;
+
 }
 
 .theme-dark:root {
   --markup-outline: var(--theme-selection-background);
-  --markup-hidden-attr-color: var(--theme-body-color-inactive);
-  --markup-hidden-tag-color: var(--theme-content-color1);
+  --markup-hidden-attr-name-color: #CC8EC8;
+  --markup-hidden-attr-value-color: #9893A3;
+  --markup-hidden-tag-color: #AFB5BF;
+  --markup-hidden-punctuation-color: #909090;
 }
 
 * {
   padding: 0;
   margin: 0;
 }
 
 :root {
@@ -352,16 +357,20 @@ ul.children + .tag-line::before {
 .theme-firebug .attr-value.theme-fg-color6 {
   color: var(--theme-highlight-red);
 }
 
 .theme-firebug .markupview-events {
   font-size: var(--theme-toolbar-font-size);
 }
 
+.theme-firebug .not-displayed {
+  opacity: 0.5;
+}
+
 /* Selected nodes in the tree should have light selected text.
    theme-selected doesn't work in this case since the text is a
    sibling of the class, not a child. */
 .theme-selected ~ .editor,
 .theme-selected ~ .editor .theme-fg-color1,
 .theme-selected ~ .editor .theme-fg-color2,
 .theme-selected ~ .editor .theme-fg-color3,
 .theme-selected ~ .editor .theme-fg-color4,
@@ -382,19 +391,26 @@ ul.children + .tag-line::before {
 .doctype {
   font-style: italic;
 }
 
 .theme-firebug .doctype {
   color: #787878;
 }
 
-.not-displayed .attr-name,
+.not-displayed {
+  color: var(--markup-hidden-punctuation-color);
+}
+
+.not-displayed .attr-name {
+  color: var(--markup-hidden-attr-name-color);
+}
+
 .not-displayed .attr-value {
-  color: var(--markup-hidden-attr-color);
+  color: var(--markup-hidden-attr-value-color);
 }
 
 .not-displayed .theme-fg-color3 {
   color: var(--markup-hidden-tag-color);
 }
 
 /* Events */
 .markupview-events {