style(ui): synchronize color configuration

emqx · Nov 22, 2024 · c6621f1 · c6621f1
1 parent c7fce4a
commit c6621f1
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 63 deletions.
diff --git a/apps/web/src/database/index.ts b/apps/web/src/database/index.ts
@@ -25,7 +25,7 @@ addRxPlugin(RxDBLeaderElectionPlugin)
 addRxPlugin(RxDBUpdatePlugin)
 
 export function useDatabase(): RxMqttxDatabase {
-  return inject<RxMqttxDatabase>(KEY_DATABASE) ?? window.db
+  return window.db ?? inject<RxMqttxDatabase>(KEY_DATABASE)
 }
 
 export async function createDatabase(): Promise<Plugin> {
@@ -37,8 +37,7 @@ export async function createDatabase(): Promise<Plugin> {
     eventReduce: true,
   })
 
-  // write to window for debugging
-  ;(window as any).db = db
+  window.db = db
 
   // show leadership in title
   db.waitForLeadership().then(() => {

diff --git a/packages/ui/src/styles/themes/dark.scss b/packages/ui/src/styles/themes/dark.scss
@@ -1,40 +1,40 @@
 html.dark {
   /* Backgroud color */
-  --color-bg-normal: #292b33;
-  --color-bg-primary: #212328;
-  --color-bg-leftbar_top: #292b33;
-  --color-bg-leftbar_bottom: #212328;
-  --color-bg-leftbar_item: #394452;
-  --color-bg-item: #31333f;
+  --color-bg-normal: #262729;
+  --color-bg-primary: #212223;
+  --color-bg-leftbar_top: #232325;
+  --color-bg-leftbar_bottom: #1f2122;
+  --color-bg-leftbar_item: #1f2021;
+  --color-bg-item: #1f2021;
   --color-bg-item_status: #9ea3b1;
-  --color-bg-messagebox: #31333f;
-  --color-bg-follows: #393a42;
-  --color-bg-code: #4f5965;
-  --color-bg-select_lang: #262529b3;
+  --color-bg-messagebox: #303133;
+  --color-bg-follows: #4a4a4a;
+  --color-bg-code: #38404a;
+  --color-bg-select_lang: #37363d80;
   --color-bg-popover: #fff;
-  --color-bg-dark: #0052cc6b;
-  --color-bg-unreadmsg: #34c388;
-  --color-bg-historybtn: #4d535b;
+  --color-bg-dark: #131415d9;
+  --color-bg-unreadmsg: #1c1f22e8;
+  --color-bg-historybtn: #393a3c;
   --color-bg-scrollbar: #ffffff33;
-  --color-bg-skeleton: #292b33;
-  --color-bg-skeleton_transition: #212328;
-  --color-bg-card-normal: #323e4f;
-  --color-bg-card-gradient: linear-gradient(33deg, #263e4b 0%, #2b344d 100%);
+  --color-bg-skeleton: #464646;
+  --color-bg-skeleton_transition: #252525;
+  --color-bg-card-normal: #34363c;
+  --color-bg-card-gradient: linear-gradient(33deg, #27393c 0%, #2c2f3e 100%);
   --color-bg-btn-gradient: linear-gradient(90deg, #35c98d 0%, #37dc85 100%);
   --color-bg-tags: #262729;
 
   /* Font color */
   --color-text-title: #fff;
   --color-text-default: #d3d3d3;
-  --color-text-light: #a2a9b0;
+  --color-text-light: #a3a3a3;
   --color-text-tips: #b4b4b4;
-  --color-text-right_block: #1b1d20;
-  --color-text-right_info: #b4b4b4;
+  --color-text-right_block: #484848;
+  --color-text-right_info: #959599;
   --color-text-left_info: #959599;
   --color-text-active: #fff;
-  --color-text-leftbar_icon: #83929b;
+  --color-text-leftbar_icon: #868787;
   --color-text-historybtn: #fff;
-  --color-text-historybtn_disabled: #9d9fa0;
+  --color-text-historybtn_disabled: #6f6f6f;
   --color-text-card_icon: #eaebec;
   --color-text-tags: #d3d3d3;
 
@@ -44,20 +44,20 @@ html.dark {
   --color-light-green: #ebf8f2;
   --color-minor-red: #f56c6c;
   --color-light-red: #fcdee4;
-  --color-main-grey: #292a33;
+  --color-main-grey: #323232;
   --color-main-yellow: #e6a23cb3;
   --color-main-white: #fff;
 
   /* Border color */
-  --color-border-default: #40414e;
-  --color-border-bold: #4f5367;
-  --color-border-rightbar: transparent;
-  --color-border-left_metainfo: #ffffff61;
-  --color-border-right_metainfo: #ffffff54;
+  --color-border-default: #383838;
+  --color-border-bold: #969696;
+  --color-border-rightbar: #2f2f2f;
+  --color-border-left_metainfo: #676767;
+  --color-border-right_metainfo: #ffffff59;
 
   /* Shadow color */
   --color-shadow-leftlist: #00000061;
   --color-shadow-sendbtn: #2dc17769;
-  --color-shadow-card: #00000085;
-  --color-shadow-message: #151515;
+  --color-shadow-card: #00000059;
+  --color-shadow-message: #1f1f1f;
 }
diff --git a/packages/ui/src/styles/themes/night.scss b/packages/ui/src/styles/themes/night.scss
@@ -1,40 +1,40 @@
 html.night {
   /* Backgroud color */
-  --color-bg-normal: #262729;
-  --color-bg-primary: #212223;
-  --color-bg-leftbar_top: #232325;
-  --color-bg-leftbar_bottom: #1f2122;
-  --color-bg-leftbar_item: #1f2021;
-  --color-bg-item: #1f2021;
+  --color-bg-normal: #292b33;
+  --color-bg-primary: #212328;
+  --color-bg-leftbar_top: #292b33;
+  --color-bg-leftbar_bottom: #212328;
+  --color-bg-leftbar_item: #394452;
+  --color-bg-item: #31333f;
   --color-bg-item_status: #9ea3b1;
-  --color-bg-messagebox: #303133;
-  --color-bg-follows: #4a4a4a;
-  --color-bg-code: #38404a;
-  --color-bg-select_lang: #37363d80;
+  --color-bg-messagebox: #31333f;
+  --color-bg-follows: #393a42;
+  --color-bg-code: #4f5965;
+  --color-bg-select_lang: #262529b3;
   --color-bg-popover: #fff;
-  --color-bg-dark: #131415d9;
-  --color-bg-unreadmsg: #1c1f22e8;
-  --color-bg-historybtn: #393a3c;
+  --color-bg-dark: #0052cc6b;
+  --color-bg-unreadmsg: #34c388;
+  --color-bg-historybtn: #4d535b;
   --color-bg-scrollbar: #ffffff33;
-  --color-bg-skeleton: #464646;
-  --color-bg-skeleton_transition: #252525;
-  --color-bg-card-normal: #34363c;
-  --color-bg-card-gradient: linear-gradient(33deg, #27393c 0%, #2c2f3e 100%);
+  --color-bg-skeleton: #292b33;
+  --color-bg-skeleton_transition: #212328;
+  --color-bg-card-normal: #323e4f;
+  --color-bg-card-gradient: linear-gradient(33deg, #263e4b 0%, #2b344d 100%);
   --color-bg-btn-gradient: linear-gradient(90deg, #35c98d 0%, #37dc85 100%);
   --color-bg-tags: #262729;
 
   /* Font color */
   --color-text-title: #fff;
   --color-text-default: #d3d3d3;
-  --color-text-light: #a3a3a3;
+  --color-text-light: #a2a9b0;
   --color-text-tips: #b4b4b4;
-  --color-text-right_block: #484848;
-  --color-text-right_info: #959599;
+  --color-text-right_block: #1b1d20;
+  --color-text-right_info: #b4b4b4;
   --color-text-left_info: #959599;
   --color-text-active: #fff;
-  --color-text-leftbar_icon: #868787;
+  --color-text-leftbar_icon: #83929b;
   --color-text-historybtn: #fff;
-  --color-text-historybtn_disabled: #6f6f6f;
+  --color-text-historybtn_disabled: #9d9fa0;
   --color-text-card_icon: #eaebec;
   --color-text-tags: #d3d3d3;
 
@@ -44,20 +44,20 @@ html.night {
   --color-light-green: #ebf8f2;
   --color-minor-red: #f56c6c;
   --color-light-red: #fcdee4;
-  --color-main-grey: #323232;
+  --color-main-grey: #292a33;
   --color-main-yellow: #e6a23cb3;
   --color-main-white: #fff;
 
   /* Border color */
-  --color-border-default: #383838;
-  --color-border-bold: #969696;
-  --color-border-rightbar: #2f2f2f;
-  --color-border-left_metainfo: #676767;
-  --color-border-right_metainfo: #ffffff59;
+  --color-border-default: #40414e;
+  --color-border-bold: #4f5367;
+  --color-border-rightbar: transparent;
+  --color-border-left_metainfo: #ffffff61;
+  --color-border-right_metainfo: #ffffff54;
 
   /* Shadow color */
   --color-shadow-leftlist: #00000061;
   --color-shadow-sendbtn: #2dc17769;
-  --color-shadow-card: #00000059;
-  --color-shadow-message: #1f1f1f;
+  --color-shadow-card: #00000085;
+  --color-shadow-message: #151515;
 }