2.3.0 feat: dark mode

detect pinecone router

Author: HugoDF

packages/shell-chrome-v3/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Alpine.js devtools - Early Access",
   "description": "DevTools extension for debugging Alpine.js applications.",
-  "version": "2.2.10",
+  "version": "2.3.0",
   "manifest_version": 3,
   "icons": {
     "16": "icons/16.png",

packages/shell-chrome-v3/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "shell-chrome-v3",
   "private": true,
-  "version": "2.2.10",
+  "version": "2.3.0",
   "description": "Alpine.js devtools with Chrome manifest v3 compatibility",
   "type": "module",
   "scripts": {

packages/shell-chrome-v3/package.json

@@ -27,7 +27,7 @@ const App: Component = () => {
   });
   return (
     <div class="h-full">
-      <div class="bg-white flex flex-col relative h-full w-full mx-auto">
+      <div class="bg-white dark:bg-alpine-400 flex flex-col relative h-full w-full mx-auto">
         <div
           class="flex-1 min-h-0 flex"
           classList={{

packages/shell-chrome-v3/src/devtools/App.tsx

@@ -28,15 +28,15 @@ export function ComponentGrid() {
       rightPaneContent={
         <>
           {openComponentValue() ? (
-            <div class="sticky top-0 left-0 z-20 w-full flex items-center px-3 py-2 text-base font-mono text-gray-600 bg-gray-100">
+            <div class="sticky top-0 left-0 z-20 w-full flex items-center px-3 py-2 text-base font-mono text-gray-600 bg-gray-100 dark:text-gray-100 dark:bg-alpine-400">
               <span class="opacity-25">&lt;</span>
               <span>{openComponentValue()?.name}</span>
               <span class="opacity-25">&gt;</span>
             </div>
           ) : (
             <div
               data-testid="select-component-message"
-              class="flex h-full w-full items-center justify-center p-4 text-gray-400 text-sm bg-gray-50"
+              class="flex h-full w-full items-center justify-center p-4 text-gray-400 text-sm bg-gray-50 dark:bg-alpine-400 dark:text-gray-50"
             >
               {componentsValue().length > 0 ? 'Select a component to view' : ''}
             </div>
@@ -46,7 +46,7 @@ export function ComponentGrid() {
             classList={{
               hidden: !openComponentValue(),
             }}
-            class="flex-1 px-3 py-2"
+            class="flex-1 px-3 py-2 dark:bg-alpine-400 dark:text-gray-50"
           >
             <div class="font-mono">
               <div class="leading-6 text-gray-300">x-data: {'{'}</div>

packages/shell-chrome-v3/src/devtools/components/component-grid.tsx

@@ -14,9 +14,9 @@ export function ComponentListItem({ component }: { component: Component }) {
   return (
     <a
       classList={{
-        'text-white bg-alpine-300':
+        'text-white bg-alpine-300 dark:text-gray-100 dark:bg-alpine-300':
           openComponentValue()?.id === component.id && openComponentValue()?.isOpened,
-        'text-gray-600 hover:bg-blue-200':
+        'text-gray-600 dark:text-gray-100 hover:bg-blue-200 dark:hover:bg-blue-500':
           openComponentValue()?.id !== component.id || !openComponentValue()?.isOpened,
       }}
       class="block cursor-pointer rounded-sm"

packages/shell-chrome-v3/src/devtools/components/component-list-item.tsx

@@ -75,7 +75,7 @@ export function DataAttributeDisplay(props: DataDisplayProps) {
         <a
           style={{ 'margin-left': `${props.attributeData.depth}px` }}
           onClick={toggleDataAttributeOpened}
-          class="block px-1 rounded-sm hover:bg-blue-100"
+          class="block px-1 rounded-sm hover:bg-blue-100 dark:hover:bg-blue-200"
           classList={{ 'cursor-pointer': props.attributeData.hasArrow }}
         >
           <h5 class="flex items-center relative pl-3 leading-6 text-sm whitespace-nowrap">
@@ -93,29 +93,33 @@ export function DataAttributeDisplay(props: DataDisplayProps) {
             </div>
 
             <span
-              class="text-purple"
+              class="text-purple dark:brightness-150"
               data-testid={`data-property-name-${props.attributeData.attributeName}`}
             >
               {/* TODO: do something about __root_value */}
               {/* {props.attributeData.attributeName === '__root_value' ? '' : props.attributeData.attributeName} */}
               {props.attributeData.attributeName}
             </span>
 
-            <span class="text-black">:</span>
+            <span class="text-black dark:text-gray-100">:</span>
 
             <div
               data-testid={`data-property-value-${props.attributeData.attributeName}`}
-              class="text-black ml-1"
+              class="text-black dark:text-gray-100 ml-1"
             >
               <Show when={!inEditingMode() && props.attributeData.dataType === 'string'}>
                 <div>
-                  "<span class="text-red-700">{props.attributeData.attributeValue}</span>"
+                  "
+                  <span class="text-red-700 dark:text-red-500">
+                    {props.attributeData.attributeValue}
+                  </span>
+                  "
                 </div>
               </Show>
               <Show when={props.attributeData.dataType === 'boolean'}>
                 <div class="flex items-center">
                   <span
-                    class="block pr-1 text-blue-700"
+                    class="block pr-1 text-blue-700 dark:text-blue-500"
                     classList={{
                       'cursor-pointer': !isReadOnly(),
                     }}

packages/shell-chrome-v3/src/devtools/components/data-attribute-display.tsx

@@ -28,7 +28,7 @@ export function EarlyAccessNotice({
       <div class="relative w-full max-h-full overflow-scroll">
         <div
           data-testid="early-access-notice"
-          class="flex flex-1 h-full w-full items-center justify-center p-4 text-gray-500 text-base leading-5"
+          class="flex flex-1 h-full w-full items-center justify-center p-4 text-gray-500 dark:text-gray-200 text-base leading-5"
         >
           <div class="flex flex-col my-auto pb-4 max-w-lg items-center justify-center">
             <a

packages/shell-chrome-v3/src/devtools/components/early-access.tsx

@@ -23,7 +23,7 @@ export function Footer({ setActiveTab }: FooterProps) {
   });
 
   return (
-    <div class="flex font-bold text-gray-400 border-t border-gray-300 bg-white">
+    <div class="flex font-bold text-gray-400 border-t border-gray-300 bg-white dark:text-gray-100 dark:bg-gray-600 dark:border-gray-600">
       <div class="flex-1">
         <div class="flex items-center text-xs leading-9 font-medium font-mono">
           <div class="flex-1 pl-3" data-testid="footer-line">
@@ -93,7 +93,7 @@ export function Footer({ setActiveTab }: FooterProps) {
         </div>
       </div>
 
-      <div class="text-gray-500 flex items-center ml-3 px-2.5 space-x-1 border-l border-gray-300 transition-colors duration-700">
+      <div class="text-gray-500 dark:text-gray-200 flex items-center ml-3 px-2.5 space-x-1 border-l border-gray-300 transition-colors duration-700">
         <a
           href={
             isEarlyAccess()

packages/shell-chrome-v3/src/devtools/components/footer.tsx

@@ -15,7 +15,7 @@ export function Header({ activeTab, setActiveTab }: HeaderProps) {
         'flex-col w-48 min-h-0 overflow-y-auto': orientation() === 'landscape',
         'flex-row items-center pl-3 pr-1 xs:pr-3': orientation() === 'portrait',
       }}
-      class="flex py-px text-base tracking-tight font-bold text-white border-b border-gray-300 transition duration-700 transition-colors ease-in-out"
+      class="flex py-px text-base tracking-tight font-bold text-white border-b border-gray-300 dark:border-none transition duration-700 transition-colors ease-in-out"
     >
       <div
         classList={{