feat: new dark mode theme

vuejs · Feb 4, 2024 · 37252d8 · 37252d8
1 parent ad0d848
commit 37252d8
Show file tree

Hide file tree

Showing 23 changed files with 158 additions and 53 deletions.
diff --git a/packages/app-frontend/src/assets/style/index.postcss b/packages/app-frontend/src/assets/style/index.postcss
@@ -1,3 +1,114 @@
+html, body, #app {
+  @apply dark:!bg-gray-800;
+}
+
+.vue-ui-high-contrast {
+  #app {
+    @apply !bg-black;
+  }
+}
+
+/* Poppers */
+
 .v-popper__popper.v-popper--theme-tooltip code {
   @apply bg-gray-500/50 rounded px-1 text-[11px] font-mono;
 }
+
+.v-popper--theme-dropdown {
+  .vue-ui-dark-mode & {
+    .v-popper__inner,
+    .v-popper__arrow-outer {
+      @apply border-gray-900;
+    }
+
+    .v-popper__inner {
+      @apply bg-gray-800;
+    }
+
+    .v-popper__arrow-inner {
+      @apply border-gray-800;
+    }
+  }
+}
+
+/* Scrollbars */
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track-piece {
+  @apply bg-transparent;
+}
+
+::-webkit-scrollbar-track:hover {
+  @apply bg-gray-600/5 dark:bg-gray-600/10;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-gray-300 hover:bg-gray-600 border-[3px] border-transparent bg-clip-padding rounded dark:bg-gray-700 dark:hover:bg-gray-500;
+}
+
+.vue-ui-dark-mode {
+  scrollbar-color: theme('colors.gray.800') theme('colors.black');
+
+  .selectable-item {
+    @apply bg-gray-800 hover:bg-gray-900;
+
+    &.selected {
+      @apply hover:bg-green-600;
+    }
+  }
+}
+
+/* Buttons */
+
+.vue-ui-button:not(.flat):not(.vue-ui-dropdown-button) {
+  @apply dark:bg-gray-700 dark:hover:!bg-gray-600;
+}
+
+.vue-ui-button.flat,
+.vue-ui-dropdown-button {
+  @apply hover:!bg-green-500/30;
+}
+
+.vue-ui-dark-mode {
+  .vue-ui-group {
+    .vue-ui-button:not(.flat) {
+      @apply !bg-gray-700 hover:!bg-gray-600;
+
+      &.selected {
+        @apply !bg-green-700;
+      }
+    }
+  }
+}
+
+/* Switch */
+
+.vue-ui-dark-mode {
+  .vue-ui-switch {
+    > .content > .wrapper {
+      @apply bg-gray-700;
+    }
+    &.selected {
+      > .content > .wrapper {
+        @apply bg-green-600;
+      }
+    }
+  }
+}
+
+/* Tab */
+
+.vue-ui-dark-mode {
+  .vue-ui-group {
+    .indicator .content {
+      @apply !border-b-green-500;
+    }
+    .vue-ui-button.selected {
+      @apply text-green-500;
+    }
+  }
+}
diff --git a/packages/app-frontend/src/assets/style/index.styl b/packages/app-frontend/src/assets/style/index.styl
@@ -64,15 +64,6 @@ button:focus
 .vue-ui-icon svg
   fill currentColor
 
-// Popover
-
-.v-popper--theme-dropdown
-  .vue-ui-dark-mode &
-    .v-popper__inner,
-    .v-popper__arrow-inner,
-    .v-popper__arrow-outer
-      border-color $vue-ui-gray-900
-
 // Tooltips
 
 .keyboard

diff --git a/packages/app-frontend/src/features/App.vue b/packages/app-frontend/src/features/App.vue
@@ -80,6 +80,7 @@ export default defineComponent({
       isInitializing,
       showAppsSelector,
       orientation,
+      isChrome,
     }
   },
 })
@@ -105,7 +106,7 @@ export default defineComponent({
     />
 
     <template v-else>
-      <AppHeader class="flex-none relative z-10 border-b border-gray-200 dark:border-gray-800" />
+      <AppHeader class="flex-none relative z-10 border-b border-gray-200 dark:border-gray-700" />
 
       <SplitPane
         save-id="app-select-pane"

diff --git a/packages/app-frontend/src/features/apps/AppSelectPane.vue b/packages/app-frontend/src/features/apps/AppSelectPane.vue
@@ -79,7 +79,7 @@ export default defineComponent({
 
 <template>
   <div class="flex flex-col">
-    <div class="flex-none border-b border-gray-200 dark:border-gray-800 flex items-center space-x-1 h-8 pr-1 box-content">
+    <div class="flex-none border-b border-gray-200 dark:border-gray-700 flex items-center space-x-1 h-8 pr-1 box-content">
       <VueInput
         v-model="search"
         icon-left="search"

diff --git a/packages/app-frontend/src/features/components/ComponentsInspector.vue b/packages/app-frontend/src/features/components/ComponentsInspector.vue
@@ -105,7 +105,7 @@ export default defineComponent({
     >
       <template #left>
         <div class="flex flex-col h-full">
-          <div class="flex items-center border-b border-gray-200 dark:border-gray-800">
+          <div class="flex items-center border-b border-gray-200 dark:border-gray-700">
             <VueInput
               ref="treeFilterInput"
               v-model="treeFilter"

diff --git a/packages/app-frontend/src/features/components/SelectedComponentPane.vue b/packages/app-frontend/src/features/components/SelectedComponentPane.vue
@@ -73,7 +73,7 @@ export default defineComponent({
     v-if="data && sameApp"
     class="h-full flex flex-col relative"
   >
-    <div class="px-2 h-8 box-content border-b border-gray-200 dark:border-gray-800 flex items-center flex-none">
+    <div class="px-2 h-8 box-content border-b border-gray-200 dark:border-gray-700 flex items-center flex-none">
       <VTooltip
         :shown="showCopiedName"
         :triggers="[]"

diff --git a/packages/app-frontend/src/features/connection/AppConnecting.vue b/packages/app-frontend/src/features/connection/AppConnecting.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-connecting">
+  <div class="app-connecting w-full h-full flex items-center justify-center bg-white dark:bg-gray-800">
     <div class="animation-outer">
       <div class="animation-inner">
         <img
@@ -13,17 +13,6 @@
 </template>
 
 <style lang="stylus" scoped>
-.app-connecting
-  width 100%
-  height 100%
-  display flex
-  align-items center
-  justify-content center
-  background white
-
-  .vue-ui-dark-mode &
-    background $vue-ui-color-almost-black
-
 .animation-inner
   padding 28px 24px 16px
   background rgba($vue-ui-color-primary, .1)

diff --git a/packages/app-frontend/src/features/header/AppHeader.vue b/packages/app-frontend/src/features/header/AppHeader.vue
@@ -133,7 +133,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="flex items-center border-r border-gray-200 dark:border-gray-800 p-0.5"
+  <div class="flex items-center border-r border-gray-200 dark:border-gray-700 p-0.5"
     :class="{
       'flex-col': orientation === 'landscape',
     }"
@@ -218,7 +218,7 @@ export default defineComponent({
         Devtools plugins
       </VueDropdownButton>
 
-      <div class="border-t border-gray-200 dark:border-gray-800 my-1" />
+      <div class="border-t border-gray-200 dark:border-gray-700 my-1" />
 
       <VueDropdownButton
         href="https://devtools.vuejs.org"
@@ -255,7 +255,7 @@ export default defineComponent({
 
 <style lang="postcss" scoped>
 .vue-ui-group :deep(.indicator) {
-  @apply !p-0.5;
+  @apply !p-px;
   .content {
     @apply !border !border-green-500/30 rounded-md bg-green-500/10;
   }

diff --git a/packages/app-frontend/src/features/header/AppHeaderSelect.vue b/packages/app-frontend/src/features/header/AppHeaderSelect.vue
@@ -214,7 +214,7 @@ export default defineComponent({
 
         <div
           v-if="$shared.showMenuScrollTip"
-          class="text-xs flex items-center space-x-2 text-gray-500 pl-4 pr-1 py-1 border-t border-gray-200 dark:border-gray-800 group"
+          class="text-xs flex items-center space-x-2 text-gray-500 pl-4 pr-1 py-1 border-t border-gray-200 dark:border-gray-700 group"
         >
           <span>Scroll to switch</span>
           <VueIcon icon="mouse" />

diff --git a/packages/app-frontend/src/features/inspector/StateType.vue b/packages/app-frontend/src/features/inspector/StateType.vue
@@ -155,7 +155,7 @@ export default defineComponent({
       padding 0 9px 0 21px
 
   .data-type
-    color $blueishGrey
+    color theme('colors.gray.600')
     position relative
     cursor pointer
     border-radius 3px
@@ -165,7 +165,7 @@ export default defineComponent({
     user-select none
 
     .vue-ui-dark-mode &
-      color lighten(#486887, 30%)
+      color theme('colors.gray.400')
 
     .arrow
       transition transform .1s ease

diff --git a/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue b/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
@@ -88,7 +88,7 @@ export default defineComponent({
     >
       <template #left>
         <div class="flex flex-col h-full">
-          <div class="border-b border-gray-200 dark:border-gray-800 flex items-center pr-2 h-8 box-content">
+          <div class="border-b border-gray-200 dark:border-gray-700 flex items-center pr-2 h-8 box-content">
             <VueInput
               v-model="inspector.treeFilter"
               icon-left="search"

diff --git a/packages/app-frontend/src/features/inspector/custom/CustomInspectorSelectedNodePane.vue b/packages/app-frontend/src/features/inspector/custom/CustomInspectorSelectedNodePane.vue
@@ -67,7 +67,7 @@ export default defineComponent({
     v-if="inspector.selectedNode"
     class="h-full flex flex-col"
   >
-    <div class="px-2 h-8 box-content border-b border-gray-200 dark:border-gray-800 flex items-center flex-none">
+    <div class="px-2 h-8 box-content border-b border-gray-200 dark:border-gray-700 flex items-center flex-none">
       <div>
         {{ inspector.selectedNode.label }}
       </div>

diff --git a/packages/app-frontend/src/features/layout/SplitPane.vue b/packages/app-frontend/src/features/layout/SplitPane.vue
@@ -164,7 +164,7 @@ export default defineComponent({
       class="relative top-0 left-0 overflow-hidden"
       :class="{
         'pointer-events-none': dragging,
-        'border-r border-gray-200 dark:border-gray-800': orientation === 'landscape' && !leftCollapsed && !rightCollapsed,
+        'border-r border-gray-200 dark:border-gray-700': orientation === 'landscape' && !leftCollapsed && !rightCollapsed,
       }"
       :style="leftStyle"
     >
@@ -194,7 +194,7 @@ export default defineComponent({
       >
         <button
           v-tooltip="rightCollapsed ? `Expand ${orientation === 'landscape' ? 'Right' : 'Bottom'} pane` : `Collapse ${orientation === 'landscape' ? 'Left' : 'Top'} pane`"
-          class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 flex items-center justify-center w-2.5 h-6 rounded overflow-hidden pointer-events-auto opacity-70 hover:opacity-100"
+          class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 flex items-center justify-center w-2.5 h-6 rounded overflow-hidden pointer-events-auto opacity-70 hover:opacity-100"
           :class="{
             'rounded-r-none border-r-0': orientation === 'landscape',
             'rounded-b-none border-b-0': orientation === 'portrait',
@@ -212,7 +212,7 @@ export default defineComponent({
       class="relative bottom-0 right-0"
       :class="{
         'pointer-events-none': dragging,
-        'border-t border-gray-200 dark:border-gray-800': orientation === 'portrait'
+        'border-t border-gray-200 dark:border-gray-700': orientation === 'portrait'
       }"
       :style="rightStyle"
     >
@@ -226,7 +226,7 @@ export default defineComponent({
       >
         <button
           v-tooltip="leftCollapsed ? `Expand ${orientation === 'landscape' ? 'Left' : 'Top'} pane` : `Collapse ${orientation === 'landscape' ? 'Right' : 'Bottom'} pane`"
-          class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 flex items-center justify-center w-2.5 h-6 rounded overflow-hidden pointer-events-auto opacity-70 hover:opacity-100"
+          class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 flex items-center justify-center w-2.5 h-6 rounded overflow-hidden pointer-events-auto opacity-70 hover:opacity-100"
           :class="{
             'rounded-l-none border-l-0': orientation === 'landscape',
             'rounded-t-none border-t-0': orientation === 'portrait',

diff --git a/packages/app-frontend/src/features/plugin/Plugins.vue b/packages/app-frontend/src/features/plugin/Plugins.vue
@@ -47,7 +47,7 @@ export default defineComponent({
     >
       <template #left>
         <div class="h-full flex flex-col">
-          <div class="flex-none flex items-center border-b border-gray-200 dark:border-gray-800">
+          <div class="flex-none flex items-center border-b border-gray-200 dark:border-gray-700">
             <VueInput
               v-model="search"
               icon-left="search"

diff --git a/packages/app-frontend/src/features/timeline/LayerItem.vue b/packages/app-frontend/src/features/timeline/LayerItem.vue
@@ -55,7 +55,7 @@ export default defineComponent({
     @click="select()"
   >
     <div
-      class="border-b border-gray-200 dark:border-gray-800"
+      class="border-b border-gray-200 dark:border-gray-700"
       :style="{
         height: `${(layer.height + 1) * 16}px`
       }"

diff --git a/packages/app-frontend/src/features/timeline/Timeline.vue b/packages/app-frontend/src/features/timeline/Timeline.vue
@@ -361,7 +361,7 @@ export default defineComponent({
     >
       <template #left>
         <div class="flex flex-col h-full">
-          <div class="h-8 flex-none border-b border-gray-200 dark:border-gray-800 flex items-center">
+          <div class="h-8 flex-none border-b border-gray-200 dark:border-gray-700 flex items-center">
             <VueDropdown>
               <template #trigger>
                 <VueButton
@@ -490,7 +490,7 @@ export default defineComponent({
         >
           <template #left>
             <div class="h-full flex flex-col select-none">
-              <div class="h-8 flex items-center flex-none border-b border-gray-200 dark:border-gray-800">
+              <div class="h-8 flex items-center flex-none border-b border-gray-200 dark:border-gray-700">
                 <VueButton
                   icon-left="arrow_left"
                   class="flex-none w-4 h-4 p-0 flat zoom-btn"
@@ -533,7 +533,7 @@ export default defineComponent({
               <div class="absolute top-0 left-0 w-full pointer-events-none flex items-center justify-center">
                 <div
                   v-if="formattedCursorTime"
-                  class="text-gray-700 dark:text-gray-300 bg-white dark:bg-black border border-gray-200 dark:border-gray-800 px-1 py-0.5 rounded-full text-2xs font-mono leading-none mt-1 flex items-center space-x-0.5"
+                  class="text-gray-700 dark:text-gray-300 bg-white dark:bg-black border border-gray-200 dark:border-gray-700 px-1 py-0.5 rounded-full text-2xs font-mono leading-none mt-1 flex items-center space-x-0.5"
                 >
                   <VueIcon
                     icon="schedule"

diff --git a/packages/app-frontend/src/features/timeline/TimelineEventInspector.vue b/packages/app-frontend/src/features/timeline/TimelineEventInspector.vue
@@ -52,7 +52,7 @@ export default defineComponent({
     v-if="inspectedEvent && inspectedEventState"
     class="flex flex-col h-full"
   >
-    <div class="header flex-none flex items-center border-b border-gray-200 dark:border-gray-800 px-2 pl-3 h-8 box-content text-bluegray-900 dark:text-bluegray-100 space-x-2">
+    <div class="header flex-none flex items-center border-b border-gray-200 dark:border-gray-700 px-2 pl-3 h-8 box-content text-bluegray-900 dark:text-bluegray-100 space-x-2">
       <div
         class="flex-none w-2.5 h-2.5 rounded-full border-2"
         :style="{
@@ -101,7 +101,7 @@ export default defineComponent({
 
     <div
       v-if="$shared.debugInfo"
-      class="opacity-50 text-2xs px-2 text-center border-b border-gray-200 dark:border-gray-800"
+      class="opacity-50 text-2xs px-2 text-center border-b border-gray-200 dark:border-gray-700"
     >
       Time: {{ inspectedEvent.time }}
     </div>

diff --git a/packages/app-frontend/src/features/timeline/TimelineEventList.vue b/packages/app-frontend/src/features/timeline/TimelineEventList.vue
@@ -206,12 +206,12 @@ export default defineComponent({
     v-if="selectedLayer && (filteredEvents.length || filter.length)"
     class="h-full flex flex-col relative"
   >
-    <div class="flex-none flex flex-col items-stretch border-gray-200 dark:border-gray-800 border-b">
+    <div class="flex-none flex flex-col items-stretch border-gray-200 dark:border-gray-700 border-b">
       <VueGroup
         v-if="selectedEvent && selectedEvent.group"
         v-model="tabId"
         indicator
-        class="accent extend border-gray-200 dark:border-gray-800 border-b"
+        class="accent extend border-gray-200 dark:border-gray-700 border-b"
       >
         <VueGroupButton
           value="all"

diff --git a/packages/app-frontend/src/features/timeline/TimelineEventListItem.vue b/packages/app-frontend/src/features/timeline/TimelineEventListItem.vue
@@ -35,10 +35,10 @@ export default defineComponent({
 
 <template>
   <div
-    class="event border-gray-100 dark:border-gray-900 border-b flex items-center space-x-2 pl-3 pr-2 text-xs cursor-pointer select-none"
+    class="event flex items-center space-x-2 pl-3 pr-2 text-xs cursor-pointer select-none"
     :class="{
       'inspected bg-green-500 text-white': isInspected,
-      'hover:bg-blue-100 dark:hover:bg-blue-900 text-bluegray-800 dark:text-bluegray-200': !isInspected
+      'hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-800 dark:text-gray-200': !isInspected
     }"
     @click="$emit('inspect')"
     @dblclick="$emit('select')"