chore: adjust theme

groupher · Dec 17, 2023 · c06f1c8 · c06f1c8
1 parent a97fcda
commit c06f1c8
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git a/src/containers/editor/CommunityEditor/styles/content/fake_browser/browser_head.ts b/src/containers/editor/CommunityEditor/styles/content/fake_browser/browser_head.ts
@@ -8,8 +8,6 @@ import RefreshSVG from '@/icons/Refresh'
 import MoreSVG from '@/icons/menu/MoreL'
 import StarSVG from '@/icons/Star5'
 
-const taberBg = '#F1F3F4'
-
 export const Header = styled.div`
   ${css.row()};
   width: 100%;
@@ -24,48 +22,53 @@ export const Header = styled.div`
 export const Tab = styled.div`
   ${css.row('align-center')};
   flex-basis: 218px;
-  background: ${taberBg};
+  background: ${theme('grey.middle')};
   border-bottom: 1px solid;
-  border-bottom-color: ${taberBg};
+  border-bottom-color: ${theme('grey.middle')};
   height: 29px;
   min-width: 0;
   position: relative;
   margin: 0 5px;
   font-size: 0;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
 
   &:before {
     content: "";
+    border-top-left-radius: 8px;
     position: absolute;
     z-index: 10;
     align-self: flex-start;
     height: 28px;
     width: 16px;
-    background: ${taberBg};
+    background: ${theme('grey.middle')};
     border-bottom: 1px solid;
-    border-bottom-color: ${taberBg};
+    border-bottom-color: ${theme('grey.middle')};
     left: 0;
     transform: skewx(-25deg);
     transform-origin: left top;
   }
 
   &:after {
     content: "";
+    border-top-right-radius: 8px;
     position: absolute;
     width: 16px;
     z-index: 10;
     align-self: flex-start;
     height: 28px;
-    background: ${taberBg};
+    background: ${theme('grey.middle')};
     border-bottom: 1px solid;
-    border-bottom-color: ${taberBg};
+    border-bottom-color: ${theme('grey.middle')};
 
     right: 0;
     transform: skewx(25deg);
     transform-origin: right top;
   }
 `
-
 export const TabContent = styled.div`
+  color: ${theme('article.title')};
+  opacity: 0.8;
   z-index: 100;
   flex-grow: 1;
   padding-left: 8px;
@@ -81,9 +84,9 @@ export const TabContent = styled.div`
 export const AddressBar = styled.div`
   width: 100%;
   ${css.row('align-center')};
-  background: ${taberBg};
+  background: ${theme('grey.middle')};
   border-bottom: 1px solid;
-  border-bottom-color: ${taberBg};
+  border-bottom-color: ${theme('grey.middle')};
   padding-left: 4px;
   padding-right: 4px;
   height: 38px;
@@ -110,7 +113,7 @@ export const RefreshIcon = styled(RefreshSVG)`
   fill: ${theme('hint')};
 `
 export const LockIcon = styled(LockSVG)`
-  fill: ${theme('hint')};
+  fill: ${theme('article.digest')};
   ${css.size(15)};
   margin-top: 1px;
   margin-left: 4px;
@@ -129,7 +132,7 @@ export const StarIcon = styled(StarSVG)<TColor>`
 export const Form = styled.form`
   ${css.row('align-center')};
   flex-grow: 1;
-  background: ${theme('alphaBg2')};
+  background: ${theme('htmlBg')};
   height: 28px;
   border-radius: 15px;
   margin-left: 4px;
@@ -138,14 +141,15 @@ export const Form = styled.form`
 `
 export const Input = styled.div`
   ${css.row('align-center')};
+  color: ${theme('article.title')};
   border: none;
   width: 100%;
   padding: 0 8px;
   font-size: 14px;
 `
 type TSubDomain = { $colors: string[] }
 export const SubDomain = styled.div<TSubDomain>`
-  background: ${({ $colors }) => `linear-gradient(to right, ${$colors[0]}, ${$colors[1]})`} ;
+  background: ${({ $colors }) => `linear-gradient(to right, ${$colors[0]}, ${$colors[1]})`};
   font-weight: 550;
   background-clip: text;
   -webkit-background-clip: text;

diff --git a/utils/themes/skins/day.ts b/utils/themes/skins/day.ts
@@ -114,6 +114,9 @@ const day = {
     blackRow: '#333333',
     blackBg: '#f4f4f4',
   },
+  grey: {
+    middle: '#F1F3F4',
+  },
   shadow: {
     md: 'rgba(0, 0, 0, 0.03) 0px 6px 24px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;',
     lg: '',

diff --git a/utils/themes/skins/night.ts b/utils/themes/skins/night.ts
@@ -115,6 +115,9 @@ const night = {
     blackRow: '#282828',
     blackBg: '#313131',
   },
+  grey: {
+    middle: '#424242',
+  },
   shadow: {
     md: 'rgba(0, 0, 0, 0.03) 0px 6px 24px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;',
     lg: '',