Bug 1712511 - Add a Dark Theme to aboutdebugging. r=daisuke,jdescottes

Differential Revision: https://phabricator.services.mozilla.com/D115767

devtools/client/aboutdebugging/src/base.css

@@ -16,6 +16,8 @@
   --category-text: rgba(12,12,13);
   --category-text-selected: #0a84ff;
 
+  --card-separator-color: var(--grey-20);
+
   /* Dimensions from common.css #categories > .category */
   /* TODO: Values are not based on photon's 4px base distance, see bug 1501638 */
   --category-height: 48px;
@@ -99,6 +101,27 @@
   --main-subheading-heading-icon-gap: calc(var(--base-unit) * 2);
 }
 
+/* Dark Theme variables */
+
+@media  (-moz-toolbar-prefers-color-scheme: dark) {
+  :root {
+    --bg-color: rgb(28, 27, 34); /* --in-content-background-color */
+    --text-color: #eee; /* --in-content-text-color */
+
+    --box-background: rgb(35, 34, 43);
+    --box-border-color: rgba(249,249,250,0.2);
+
+    --link-color: #00ddff;
+    --link-color-active: rgb(170,242,255);
+    --link-color-hover: rgb(128,235,255);
+
+    --category-background-hover: rgba(12,12,13,0.1);
+    --category-text: rgb(238, 238, 238);
+
+    --card-separator-color: var(--grey-50);
+  }
+}
+
 /*
 * Reset some tags
 */
@@ -134,6 +157,7 @@ a {
 }
 a:hover {
   color: var(--link-color-hover);
+  text-decoration: underline;
 }
 a:active {
   color: var(--link-color-active);
@@ -418,3 +442,31 @@ Form controls
   font-size: var(--title-20-font-size); /* Note: this is from Photon Title 20 */
   font-weight: var(--title-20-font-weight); /* Note: this is from Photon Title 20 */
 }
+
+@media  (-moz-toolbar-prefers-color-scheme: dark) {
+  .card {
+    background-color: rgb(35, 34, 43);
+  }
+
+  .default-button {
+    color: var(--white-100);
+    background-color: rgb(72, 72, 84);
+  }
+
+  .default-button:enabled:hover {
+    background-color: rgb(92, 92, 106);
+  }
+
+  .sidebar__footer__icon {
+    fill: var(--white-100);
+    -moz-context-properties: fill;
+  }
+
+  .primary-button:enabled {
+    background-color: rgb(72, 72, 84);
+  }
+
+  .primary-button:enabled:hover {
+    background-color: rgb(92, 92, 106);
+  }
+}

devtools/client/aboutdebugging/src/components/connect/ConnectSection.css

@@ -45,3 +45,10 @@
 .connect-section__extra {
   border-block-start: 1px solid var(--card-separator-color);
 }
+
+@media(-moz-toolbar-prefers-color-scheme: dark) {
+  .connect-section__header__icon {
+    fill: var(--white-100);
+    -moz-context-properties: fill;
+  }
+}

devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css

@@ -56,7 +56,7 @@
 
 .debug-target-item__additional_actions {
   grid-area: additional_actions;
-  border-top: 1px solid var(--grey-20);
+  border-top: 1px solid var(--card-separator-color);
   margin-block-start: calc(var(--base-unit) * 2);
   padding-block-start: calc(var(--base-unit) * 2);
   padding-inline-end: calc(var(--base-unit) * 2);
@@ -92,3 +92,10 @@
 .debug-target-item:dir(rtl) > .debug-target-item__subname {
   margin-right: calc(var(--base-unit) * 3);
 }
+
+@media(-moz-toolbar-prefers-color-scheme: dark) {
+  .debug-target-item__icon {
+    -moz-context-properties: fill;
+    fill: var(--white-100);
+  }
+}

devtools/client/aboutdebugging/src/components/debugtarget/FieldPair.css

@@ -5,7 +5,7 @@
 .fieldpair {
   display: grid;
   grid-template-columns: auto auto;
-  border-top: 1px solid var(--grey-20);
+  border-top: 1px solid var(--card-separator-color);
   padding-block: calc(var(--base-unit) * 2);
   padding-inline: calc(var(--base-unit) * 4) calc(var(--base-unit) * 2);
 }
@@ -27,3 +27,9 @@
   font-weight: var(--caption-20-font-weight);
   text-align: end;
 }
+
+@media (-moz-toolbar-prefers-color-scheme: dark) {
+  .fieldpair__description {
+    color: var(--category-text);
+  }
+}

devtools/client/aboutdebugging/src/components/shared/IconLabel.css

@@ -25,3 +25,9 @@
   width: calc(var(--base-unit) * 4);
   height: calc(var(--base-unit) * 4);
 }
+
+@media(-moz-toolbar-prefers-color-scheme: dark) {
+  .icon-label__icon {
+    fill: var(--white-100);
+  }
+}

devtools/client/aboutdebugging/src/components/sidebar/SidebarItem.css

@@ -51,3 +51,17 @@
   margin-block-start: calc(6 * var(--base-unit));
   margin-block-end: calc(2 * var(--base-unit));
 }
+
+@media (-moz-toolbar-prefers-color-scheme: dark) {
+  .sidebar-item--selectable:hover {
+    background-color: rgb(92, 92, 106);
+  }
+
+  .sidebar-item--selected {
+    color: var(--link-color);
+  }
+
+  .sidebar-item:not(.sidebar-item--selectable), .sidebar__label {
+    color: var(--category-text);
+  }
+}

devtools/client/aboutdebugging/src/components/sidebar/SidebarItem.js

@@ -42,7 +42,7 @@ class SidebarItem extends PureComponent {
       return isExternalUrl
         ? dom.a(
             {
-              className: "sidebar-item__link",
+              className: "sidebar-item__link undecorated-link",
               href: to,
               target: "_blank",
             },
@@ -50,7 +50,7 @@ class SidebarItem extends PureComponent {
           )
         : Link(
             {
-              className: "sidebar-item__link qa-sidebar-link",
+              className: "sidebar-item__link qa-sidebar-link undecorated-link",
               to,
             },
             children