theming, menu fixes

packages/web/src/Screen.svelte

@@ -146,7 +146,7 @@
     left: var(--dim-content-left);
     height: var(--dim-tabs-panel-height);
     right: 0;
-    background-color: var(--theme-bg-2);
+    background-color: var(--theme-bg-1);
     border-top: 1px solid var(--theme-border);
 
     overflow-x: auto;

packages/web/src/modals/DropDownMenu.svelte

@@ -142,9 +142,9 @@
   ul {
     position: absolute;
     list-style: none;
-    background-color: #fff;
+    background-color: var(--theme-bg-0);
     border-radius: 4px;
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    border: 1px solid var(--theme-border);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     padding: 5px 0;
     margin: 2px 0 0;
@@ -168,25 +168,25 @@
     padding: 3px 20px;
     line-height: 1.42;
     white-space: nop-wrap;
-    color: #262626;
+    color: var(--theme-font-1);
     display: flex;
     justify-content: space-between;
   }
 
   a.disabled {
-    color: gray;
+    color: var(--theme-font-3);
   }
 
   a:hover:not(.disabled) {
-    background-color: #f5f5f5;
+    background-color: var(--theme-bg-1);
     text-decoration: none;
-    color: #262626;
+    color: var(--theme-font-1);
   }
 
   .divider {
     margin: 9px 0px 9px 0px;
-    border-top: 1px solid #f2f2f2;
-    border-bottom: 1px solid #fff;
+    border-top: 1px solid var(--theme-border);
+    border-bottom: 1px solid var(--theme-bg-0);
   }
 
   .menu-right {

packages/web/src/modals/HorizontalMenu.svelte

@@ -6,6 +6,7 @@
   export let items;
 
   let isOpened;
+  let openedLabel;
 
   function handleOpenMenu(element, item) {
     const rect = element.getBoundingClientRect();
@@ -14,11 +15,13 @@
     const items = item.submenu;
     $currentDropDownMenu = { left, top, items };
     isOpened = true;
+    openedLabel = item.text || item.label;
   }
 
   $: preparedItems = prepareMenuItems(items, {}, $commandsCustomized);
   $: if (!$currentDropDownMenu) {
     isOpened = false;
+    openedLabel = null;
   }
 </script>
 
@@ -26,6 +29,7 @@
   {#each preparedItems as item}
     <div
       class="item"
+      class:opened={openedLabel == (item.text || item.label)}
       on:click={e => handleOpenMenu(e.target, item)}
       on:mousemove={e => {
         if (isOpened) {
@@ -62,4 +66,8 @@
   .item:hover {
     background: var(--theme-bg-3);
   }
+
+  .item.opened {
+    background: var(--theme-bg-3);
+  }
 </style>

packages/web/src/widgets/TabsPanel.svelte

@@ -424,7 +424,7 @@
     background-color: var(--theme-bg-3);
   } */
   .db-name.selected {
-    background-color: var(--theme-bg-1);
+    background-color: var(--theme-bg-0);
   }
   .file-tab-item {
     border-right: 1px solid var(--theme-border);
@@ -439,7 +439,7 @@
     user-select: none;
   }
   .file-tab-item.selected {
-    background-color: var(--theme-bg-1);
+    background-color: var(--theme-bg-0);
   }
   .file-name {
     margin-left: 5px;