enhance(ui): polish the accent color of the popover

packages/ui/tailwind.config.js

@@ -65,11 +65,11 @@ module.exports = {
           foreground: 'hsl(var(--muted-foreground))',
         },
         accent: {
-          DEFAULT: 'hsl(var(--accent))',
+          DEFAULT: 'var(--lx-gray-04, hsl(var(--accent)))',
           foreground: 'hsl(var(--accent-foreground))',
         },
         popover: {
-          DEFAULT: 'hsl(var(--popover))',
+          DEFAULT: 'var(--lx-gray-03, hsl(var(--popover)))',
           foreground: 'hsl(var(--popover-foreground))',
         },
         card: {

resources/css/shui.css

@@ -10,6 +10,13 @@ html {
     --accent-foreground: var(--rx-gray-12-hsl);
   }
 
+  .ui__dropdown-menu-item,
+  div[data-radix-popper-content-wrapper] div[role=menuitem] {
+    &:focus, &:hover {
+      background-color: var(--lx-gray-04, hsl(var(--accent)));
+    }
+  }
+
   &:not([data-color=logseq]) {
   }
 

src/main/frontend/components/container.css

@@ -5,15 +5,6 @@
   }
 }
 
-#app-container {
-  background-color: or(--ls-top-bar-background, --lx-gray-01, --ls-primary-background-color, #fff);
-  position: relative;
-}
-
-.dark #app-container {
-  background-color: or(--ls-top-bar-background, --lx-gray-02, --ls-primary-background-color, #fff);
-}
-
 #root {
   > div {
     color: or(--ls-document-text-color, --lx-gray-12, --ls-primary-text-color, #24292e);

src/main/frontend/components/theme.css

@@ -50,15 +50,10 @@ html {
   transform: scale(1.1);
 }
 
-html[data-theme='dark'] {
-  background-color: var(--ls-primary-background-color);
+html[data-theme='light'] #app-container {
+  background-color: or(--ls-top-bar-background,
+  --lx-gray-01, --ls-primary-background-color, #fff);
 
-  input.form-input {
-    background: none;
-  }
-}
-
-html[data-theme='light'] {
   .form-checkbox {
     &:focus {
       border-color: var(--ls-page-checkbox-border-color);
@@ -80,6 +75,15 @@ html[data-theme='light'] {
   }
 }
 
+html[data-theme='dark'] #app-container {
+  background-color: or(--ls-top-bar-background,
+  --lx-gray-02, --ls-primary-background-color, #333);
+
+  input.form-input {
+    background: none;
+  }
+}
+
 .hide-scrollbar {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none !important; /* Firefox */