Dark mode closes #5

Author: Timothy Johnson

dest/devtools/index.js

@@ -1,6 +1,6 @@
 chrome.devtools.panels.create(
   'Svelte',
-  '/devtools/svelte-logo-black.svg',
+  chrome.devtools.panels.themeName == 'dark' ? '/devtools/svelte-logo-dark.svg' : '/devtools/svelte-logo-light.svg',
   '/devtools/panel.html',
   panel =>
     panel.onShown.addListener(() =>

dest/devtools/panel.html

@@ -17,6 +17,11 @@
         font-family: monospace;
       }
 
+      body.dark {
+        color: rgb(177, 177, 179);
+        background-color: rgb(42, 42, 46);
+      }
+
       ul {
         margin: 0;
         padding: 0;

dest/devtools/svelte-logo-dark.svg

@@ -27,7 +27,9 @@
     height: 22px;
     border: 1px solid rgb(224, 224, 226);
     border-radius: 2px;
-    background: 6px center / 12px no-repeat url('/devtools/search.svg') #ffffff;
+    background: 6px center / 12px no-repeat url('/devtools/search.svg')
+      transparent;
+    color: inherit;
     font-size: inherit;
   }
 
@@ -51,6 +53,11 @@
     margin-top: 40%;
     text-align: center;
   }
+
+  :global(.dark) input,
+  :global(.dark) .results :global(> li) {
+    border-color: rgb(60, 60, 61);
+  }
 </style>
 
 {#if $rootNodes.length}

dest/devtools/svelte-logo-black.svg renamed to dest/devtools/svelte-logo-light.svg

@@ -82,6 +82,14 @@
     border-left: 2px solid #ffffff;
     content: '';
   }
+
+  :global(.dark) ul {
+    border-top-color: rgb(60, 60, 61);
+  }
+
+  :global(.dark) div::after {
+    border-left-color: rgba(135, 135, 137, 0.9);
+  }
 </style>
 
 {#if breadcrumbList.length > 1}

dest/devtools/tool-inspector.svg

@@ -76,6 +76,15 @@
     right: 0;
     font-size: 1rem;
   }
+
+  :global(.dark) .function,
+  :global(.dark) .object {
+    color: rgb(117, 191, 255);
+  }
+
+  :global(.dark) li :global(.string) {
+    color: rgb(255, 125, 233);
+  }
 </style>
 
 <li

dest/devtools/visibility.svg

@@ -3,6 +3,7 @@
   import { selectedNode } from './store.js'
   import PropertyList from './PropertyList.svelte'
   import Toolbar from './Toolbar.svelte'
+  import IconButton from './IconButton.svelte'
 
   let isResizing = false
   let width = 300
@@ -29,6 +30,19 @@
   .resize:hover {
     border-color: rgb(177, 177, 179);
   }
+
+  :global(.dark) .root {
+    background-color: rgb(27, 27, 29);
+    color: rgb(177, 177, 179);
+  }
+
+  :global(.dark) .resize {
+    border-left-color: rgb(60, 60, 61);
+  }
+
+  :global(.dark) .resize:hover {
+    border-left-color: rgb(107, 107, 108);
+  }
 </style>
 
 <svelte:window
@@ -38,11 +52,18 @@
 <div class="root" style={`width: ${width}px`}>
   <div class="resize" on:mousedown={e => (isResizing = true)} />
   <Toolbar>
-    <button
+    <IconButton
       disabled={$selectedNode.id === undefined}
       on:click={e => devtools.inspectedWindow.eval('inspect(window.$s)')}>
-      <img src="/devtools/tool-inspector.svg" alt="Inspect" title="Inspect" />
-    </button>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+        <path
+          d="M4.5 4a.5.5 0 0 0-.5.5v7c0 .28.22.5.5.5h7a.5.5 0 0 0 .5-.5v-7a.5.5
+          0 0 0-.5-.5h-7zM2 4.5A2.5 2.5 0 0 1 4.5 2h7A2.5 2.5 0 0 1 14 4.5v7a2.5
+          2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 11.5v-7M.5 7.5a.5.5 0 0 0 0
+          1H2v-1H.5zM14 7.5h1.5a.5.5 0 0 1 0 1H14v-1zM8 0c.28 0
+          .5.22.5.5V2h-1V.5c0-.28.22-.5.5-.5zM8.5 14v1.5a.5.5 0 0 1-1 0V14h1z" />
+      </svg>
+    </IconButton>
   </Toolbar>
   {#if $selectedNode.type == 'component'}
     <PropertyList