Merge pull request #97 from subquery/feat/dark-mode

feat: dark mode
subquery · Nov 3, 2023 · 6f1616b · 6f1616b
2 parents 81a491d + 58d3cac
commit 6f1616b
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/components/app/header/Header.less b/components/app/header/Header.less
@@ -60,7 +60,7 @@
   margin-left: 24px;
   &__menu {
     &--dark.@{middle}__menu--dark.@{middle}__menu--dark {
-      background-color: var(--sq-gray800);
+      background-color: var(--dark-mode-card);
       padding: 0;
       border-radius: 0;
     }
@@ -90,7 +90,7 @@
     padding: 16px;
 
     &--dark {
-      background-color: var(--sq-gray800);
+      background-color: var(--dark-mode-card);
     }
   }
 
@@ -152,7 +152,7 @@
       box-shadow: none;
       padding: 0;
       &--dark {
-        background: var(--dark-color);
+        background: var(--dark-mode-background);
       }
     }
   }
@@ -181,7 +181,7 @@
       }
 
       &--dark.@{middle}__menu--dark.@{middle}__menu--dark {
-        background: var(--dark-color);
+        background: var(--dark-mode-card);
       }
 
       &-item.@{middle}__menu-item.@{middle}__menu-item {

diff --git a/components/common/typography/Typography.less b/components/common/typography/Typography.less
@@ -3,7 +3,7 @@
   margin: 0;
   padding: 0;
   font-family: var(--sq-font-family);
-  display: inline;
+  display: inline-block;
 
   &__h1 {
     font-family: var(--sq-font-family-header);

diff --git a/components/styles.css b/components/styles.css
@@ -76,7 +76,9 @@
   --sq-shadow2: 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px rgba(0, 0, 0, 0.08),
     0px 9px 28px 8px rgba(0, 0, 0, 0.05);
 
-  --dark-color: #161c24;
+  --dark-mode-card: #1b2545;
+  --dark-mode-border: #34414b;
+  --dark-mode-background: #060f32;
 
   /* Sizes */